From ea1d7c49a8fdbb6cc7fe7eb8a428471fb7735947 Mon Sep 17 00:00:00 2001 From: Matt McCoy <59743922+MattCMcCoy@users.noreply.github.com> Date: Mon, 18 Mar 2024 15:30:51 -0400 Subject: [PATCH 1/3] style: LET THERE BE COLOR (#53) --- client/tailwind.config.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/tailwind.config.js b/client/tailwind.config.js index a55a506..87c6280 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -6,7 +6,13 @@ module.exports = { 'carewallet-white': '#FFFFFF', 'carewallet-black': '#000000', 'carewallet-gray': '#BEBEBE', - 'carewallet-lightgray': '#D9D9D9' + 'carewallet-lightgray': '#D9D9D9', + 'carewallet-blue': '#1A56C4', + 'carewallet-green': '#4DB8A6', + 'carewallet-coral': '#FF6258', + 'carewallet-yellow': '#FFD9900', + 'carewallet-purple': '#990099', + 'carewallet-pink': '#FC2C51' } }, plugins: [] From fa9dcfbf856b8406ab7d54cd4dc1bc6e81733a0f Mon Sep 17 00:00:00 2001 From: Matt McCoy <59743922+MattCMcCoy@users.noreply.github.com> Date: Mon, 18 Mar 2024 15:34:00 -0400 Subject: [PATCH 2/3] Feature/patient view (#50) * feat: patient view --- client/assets/profile/edit.svg | 12 +++++ client/components/profile/Header.tsx | 23 +++++---- client/components/profile/HealthStats.tsx | 30 ++++++++++++ .../components/profile/ProfileTopHeader.tsx | 42 ++++++++++------- client/navigation/AppNavigation.tsx | 7 ++- .../navigation/AppStackBottomTabNavigator.tsx | 27 +++++++++-- client/screens/Profile/PatientView.tsx | 47 +++++++++++++++++++ client/screens/{ => Profile}/Profile.tsx | 23 +++++---- 8 files changed, 173 insertions(+), 38 deletions(-) create mode 100644 client/assets/profile/edit.svg create mode 100644 client/components/profile/HealthStats.tsx create mode 100644 client/screens/Profile/PatientView.tsx rename client/screens/{ => Profile}/Profile.tsx (75%) 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..309a89b 100644 --- a/client/navigation/AppNavigation.tsx +++ b/client/navigation/AppNavigation.tsx @@ -12,12 +12,17 @@ export type AppStackParamList = { Home: undefined; Login: undefined; Profile: undefined; + PatientView: undefined; + ProfileScreens: undefined; + Landing: undefined; + Calendar: undefined; + Notifications: undefined; TaskType: undefined; }; export type AppStackNavigation = NavigationProp; -const AppStack = createNativeStackNavigator(); +export const AppStack = createNativeStackNavigator(); export function AppNavigation() { return ( diff --git a/client/navigation/AppStackBottomTabNavigator.tsx b/client/navigation/AppStackBottomTabNavigator.tsx index 6793920..3d42c31 100644 --- a/client/navigation/AppStackBottomTabNavigator.tsx +++ b/client/navigation/AppStackBottomTabNavigator.tsx @@ -8,9 +8,11 @@ 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, AppStackParamList } from './AppNavigation'; -const AppStackBottomTab = createBottomTabNavigator(); +const AppStackBottomTab = createBottomTabNavigator(); export function AppStackBottomTabNavigator() { return ( @@ -48,14 +50,31 @@ export function AppStackBottomTabNavigator() { component={MedicationList} /> , tabBarLabel: () => }} - component={Profile} + component={AppNavigation} /> ); } + +export function AppNavigation() { + return ( + + + + + ); +} 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..08a47d7 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/AppNavigation'; +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')} + /> From d329142d770cdbb99a60a4d66e82829db8b411ed Mon Sep 17 00:00:00 2001 From: Matt McCoy Date: Mon, 18 Mar 2024 15:53:07 -0400 Subject: [PATCH 3/3] fix: cycle import in app nav --- client/navigation/AppNavigation.tsx | 21 +------------------ .../navigation/AppStackBottomTabNavigator.tsx | 8 +++---- client/navigation/types.ts | 19 +++++++++++++++++ client/screens/LoginPage.tsx | 2 +- client/screens/Profile/Profile.tsx | 2 +- client/screens/TaskType.tsx | 4 ++-- 6 files changed, 28 insertions(+), 28 deletions(-) create mode 100644 client/navigation/types.ts diff --git a/client/navigation/AppNavigation.tsx b/client/navigation/AppNavigation.tsx index 309a89b..d84eff0 100644 --- a/client/navigation/AppNavigation.tsx +++ b/client/navigation/AppNavigation.tsx @@ -1,28 +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; - PatientView: undefined; - ProfileScreens: undefined; - Landing: undefined; - Calendar: undefined; - Notifications: undefined; - TaskType: undefined; -}; - -export type AppStackNavigation = NavigationProp; - -export const AppStack = createNativeStackNavigator(); +import { AppStack } from './types'; export function AppNavigation() { return ( diff --git a/client/navigation/AppStackBottomTabNavigator.tsx b/client/navigation/AppStackBottomTabNavigator.tsx index 3d42c31..4b3fb45 100644 --- a/client/navigation/AppStackBottomTabNavigator.tsx +++ b/client/navigation/AppStackBottomTabNavigator.tsx @@ -10,9 +10,9 @@ import User from '../assets/bottom-nav/user.svg'; import MedicationList from '../screens/MedicationList'; import PatientView from '../screens/Profile/PatientView'; import Profile from '../screens/Profile/Profile'; -import { AppStack, AppStackParamList } from './AppNavigation'; +import { AppStack } from './types'; -const AppStackBottomTab = createBottomTabNavigator(); +const AppStackBottomTab = createBottomTabNavigator(); export function AppStackBottomTabNavigator() { return ( @@ -56,13 +56,13 @@ export function AppStackBottomTabNavigator() { tabBarIcon: ({ color }) => , tabBarLabel: () => }} - component={AppNavigation} + component={ProfileNavigation} /> ); } -export function AppNavigation() { +export function ProfileNavigation() { return ( ; + +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/Profile.tsx b/client/screens/Profile/Profile.tsx index 08a47d7..30f90c0 100644 --- a/client/screens/Profile/Profile.tsx +++ b/client/screens/Profile/Profile.tsx @@ -7,7 +7,7 @@ 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/AppNavigation'; +import { AppStackNavigation } from '../../navigation/types'; import { useAuth } from '../../services/auth'; import { useGroup } from '../../services/group'; import { useUsers } from '../../services/user'; 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')} >