diff --git a/client/assets/profile/edit.svg b/client/assets/profile/edit.svg
new file mode 100644
index 0000000..aa15c67
--- /dev/null
+++ b/client/assets/profile/edit.svg
@@ -0,0 +1,12 @@
+
diff --git a/client/components/profile/Header.tsx b/client/components/profile/Header.tsx
index b386ec4..9817d01 100644
--- a/client/components/profile/Header.tsx
+++ b/client/components/profile/Header.tsx
@@ -5,9 +5,11 @@ import { useNavigation } from '@react-navigation/native';
import { styled } from 'nativewind';
import ArrowLeft from '../../assets/arrow-left.svg';
+import Edit from '../../assets/profile/edit.svg';
import Ellipse from '../../assets/profile/ellipse.svg';
+import { useCareWalletContext } from '../../contexts/CareWalletContext';
import { AppStackNavigation } from '../../navigation/AppNavigation';
-import { GroupRole } from '../../types/group';
+import { GroupRole, Role } from '../../types/group';
import { User } from '../../types/user';
import { ProfileTopHeader } from './ProfileTopHeader';
@@ -19,6 +21,7 @@ interface HeaderProps {
}
export function Header({ user, role }: HeaderProps) {
+ const { user: signedInUser } = useCareWalletContext();
const navigate = useNavigation();
if (!user) return null;
@@ -27,14 +30,18 @@ export function Header({ user, role }: HeaderProps) {
<>
- }
- rightButtonText="Edit"
- />
+ {role?.role === Role.PATIENT ||
+ signedInUser.userID !== user.user_id ? (
+ }
+ />
+ ) : (
+ } />
+ )}
- {`${role?.role.charAt(0)}${role?.role.slice(1).toLowerCase()} Caregiver`}
+ {`${role?.role.charAt(0)}${role?.role.slice(1).toLowerCase()} ${role?.role !== Role.PATIENT ? 'Caretaker' : ''}`}
{user.phone ? user.phone : user.email}
diff --git a/client/components/profile/HealthStats.tsx b/client/components/profile/HealthStats.tsx
new file mode 100644
index 0000000..102645f
--- /dev/null
+++ b/client/components/profile/HealthStats.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { FlatList, Pressable, View } from 'react-native';
+
+export function HealthStats() {
+ const [canPress, setCanPress] = useState(true);
+
+ return (
+ setCanPress(false)}
+ onScrollEndDrag={() => setCanPress(true)}
+ horizontal
+ showsHorizontalScrollIndicator={false}
+ data={Array.from({ length: 10 }, (_, i) => i)}
+ renderItem={({ index }) => (
+ {
+ if (canPress) console.log('Pressed');
+ }}
+ >
+
+
+
+
+ )}
+ />
+ );
+}
diff --git a/client/components/profile/ProfileTopHeader.tsx b/client/components/profile/ProfileTopHeader.tsx
index ae2acd7..74c66a4 100644
--- a/client/components/profile/ProfileTopHeader.tsx
+++ b/client/components/profile/ProfileTopHeader.tsx
@@ -1,38 +1,46 @@
import React from 'react';
-import { Pressable, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { IconButton } from 'react-native-paper';
+
+import { AppStackNavigation } from '../../navigation/AppNavigation';
import { User } from '../../types/user';
interface ProfileTopHeaderProps {
user: User;
- onTouchEndLeft?: () => void;
+ onTouchEndLeft?: AppStackNavigation;
leftButtonText?: JSX.Element | string;
onTouchEndRight?: () => void;
- rightButtonText?: string;
+ rightButtonText?: JSX.Element | string;
}
export function ProfileTopHeader({
user,
- onTouchEndLeft,
leftButtonText,
- onTouchEndRight,
rightButtonText
}: ProfileTopHeaderProps) {
+ const navigation = useNavigation();
return (
-
-
-
- {leftButtonText}
-
-
-
+
+ {leftButtonText && (
+ leftButtonText}
+ onPress={() => navigation.goBack()}
+ />
+ )}
+
{user.first_name} {user.last_name}
-
-
- {rightButtonText}
-
-
+ {rightButtonText && (
+ rightButtonText}
+ />
+ )}
);
}
diff --git a/client/navigation/AppNavigation.tsx b/client/navigation/AppNavigation.tsx
index c407636..d84eff0 100644
--- a/client/navigation/AppNavigation.tsx
+++ b/client/navigation/AppNavigation.tsx
@@ -1,23 +1,9 @@
import React from 'react';
-import { NavigationProp } from '@react-navigation/native';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
-
import LoginPage from '../screens/LoginPage';
import { TaskType } from '../screens/TaskType';
import { AppStackBottomTabNavigator } from './AppStackBottomTabNavigator';
-
-export type AppStackParamList = {
- Main: undefined;
- Home: undefined;
- Login: undefined;
- Profile: undefined;
- TaskType: undefined;
-};
-
-export type AppStackNavigation = NavigationProp;
-
-const AppStack = createNativeStackNavigator();
+import { AppStack } from './types';
export function AppNavigation() {
return (
diff --git a/client/navigation/AppStackBottomTabNavigator.tsx b/client/navigation/AppStackBottomTabNavigator.tsx
index 6793920..4b3fb45 100644
--- a/client/navigation/AppStackBottomTabNavigator.tsx
+++ b/client/navigation/AppStackBottomTabNavigator.tsx
@@ -8,7 +8,9 @@ import Calendar from '../assets/bottom-nav/calendar.svg';
import Home from '../assets/bottom-nav/home.svg';
import User from '../assets/bottom-nav/user.svg';
import MedicationList from '../screens/MedicationList';
-import Profile from '../screens/Profile';
+import PatientView from '../screens/Profile/PatientView';
+import Profile from '../screens/Profile/Profile';
+import { AppStack } from './types';
const AppStackBottomTab = createBottomTabNavigator();
@@ -48,14 +50,31 @@ export function AppStackBottomTabNavigator() {
component={MedicationList}
/>
,
tabBarLabel: () =>
}}
- component={Profile}
+ component={ProfileNavigation}
/>
);
}
+
+export function ProfileNavigation() {
+ return (
+
+
+
+
+ );
+}
diff --git a/client/navigation/types.ts b/client/navigation/types.ts
new file mode 100644
index 0000000..72acce9
--- /dev/null
+++ b/client/navigation/types.ts
@@ -0,0 +1,19 @@
+import { NavigationProp } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+export type AppStackParamList = {
+ Main: undefined;
+ Home: undefined;
+ Login: undefined;
+ Profile: undefined;
+ PatientView: undefined;
+ ProfileScreens: undefined;
+ Landing: undefined;
+ Calendar: undefined;
+ Notifications: undefined;
+ TaskType: undefined;
+};
+
+export type AppStackNavigation = NavigationProp;
+
+export const AppStack = createNativeStackNavigator();
diff --git a/client/screens/LoginPage.tsx b/client/screens/LoginPage.tsx
index 21051a9..e23a132 100644
--- a/client/screens/LoginPage.tsx
+++ b/client/screens/LoginPage.tsx
@@ -5,7 +5,7 @@ import { onAuthStateChanged } from '@firebase/auth';
import { useNavigation } from '@react-navigation/native';
import { auth } from '../firebase.config';
-import { AppStackNavigation } from '../navigation/AppNavigation';
+import { AppStackNavigation } from '../navigation/types';
import { useAuth } from '../services/auth';
export default function LoginPage() {
diff --git a/client/screens/Profile/PatientView.tsx b/client/screens/Profile/PatientView.tsx
new file mode 100644
index 0000000..d2a2f2d
--- /dev/null
+++ b/client/screens/Profile/PatientView.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Pressable, Text, View } from 'react-native';
+
+import { CircleCard } from '../../components/profile/CircleCard';
+import { Header } from '../../components/profile/Header';
+import { HealthStats } from '../../components/profile/HealthStats';
+import { useCareWalletContext } from '../../contexts/CareWalletContext';
+import { useGroup } from '../../services/group';
+import { useUsers } from '../../services/user';
+import { Role } from '../../types/group';
+
+export default function PatientView() {
+ const { group } = useCareWalletContext();
+ const { roles } = useGroup(group.groupID);
+ const { users } = useUsers(roles?.map((role) => role.user_id) ?? []);
+ const patientId = roles?.find((role) => role.role === Role.PATIENT)?.user_id;
+
+ return (
+
+ user.user_id === patientId)}
+ role={roles?.find((role) => role.user_id === patientId)}
+ />
+
+
+
+
+
+ View Past Health Stats
+
+
+
+
+
+
+ Upload Files
+
+
+
+
+ View Files
+
+
+
+
+ );
+}
diff --git a/client/screens/Profile.tsx b/client/screens/Profile/Profile.tsx
similarity index 75%
rename from client/screens/Profile.tsx
rename to client/screens/Profile/Profile.tsx
index 8cc764b..30f90c0 100644
--- a/client/screens/Profile.tsx
+++ b/client/screens/Profile/Profile.tsx
@@ -1,15 +1,19 @@
import React, { useState } from 'react';
import { ActivityIndicator, Text, View } from 'react-native';
-import { CircleCard } from '../components/profile/CircleCard';
-import { Group } from '../components/profile/Group';
-import { Header } from '../components/profile/Header';
-import { useCareWalletContext } from '../contexts/CareWalletContext';
-import { useAuth } from '../services/auth';
-import { useGroup } from '../services/group';
-import { useUsers } from '../services/user';
+import { useNavigation } from '@react-navigation/native';
+
+import { CircleCard } from '../../components/profile/CircleCard';
+import { Group } from '../../components/profile/Group';
+import { Header } from '../../components/profile/Header';
+import { useCareWalletContext } from '../../contexts/CareWalletContext';
+import { AppStackNavigation } from '../../navigation/types';
+import { useAuth } from '../../services/auth';
+import { useGroup } from '../../services/group';
+import { useUsers } from '../../services/user';
export default function Profile() {
+ const navigation = useNavigation();
const { user: signedInUser, group } = useCareWalletContext();
const [activeUser, setActiveUser] = useState(signedInUser.userID);
const { roles, rolesAreLoading } = useGroup(group.groupID);
@@ -61,7 +65,10 @@ export default function Profile() {
-
+ navigation.navigate('PatientView')}
+ />
diff --git a/client/screens/TaskType.tsx b/client/screens/TaskType.tsx
index 35bc59d..066ab6a 100644
--- a/client/screens/TaskType.tsx
+++ b/client/screens/TaskType.tsx
@@ -19,7 +19,7 @@ import { Button, Text } from 'react-native-paper';
import { BackButton } from '../components/TaskType/BackButton';
import { CloseButton } from '../components/TaskType/CloseButton';
-import { AppStackNavigation } from '../navigation/AppNavigation';
+import { AppStackNavigation } from '../navigation/types';
import { Category, categoryToTypeMap, TypeOfTask } from '../types/type';
export function TaskType() {
@@ -99,7 +99,7 @@ export function TaskType() {
renderItem={({ item }) => (
navigation.navigate('New ' + item + ' Task')}
+ onPress={() => navigation.navigate('Home')}
>