From 09525be2fb16d2456d09d948da729016d14f6a35 Mon Sep 17 00:00:00 2001
From: haleymartin-6 <119809061+haleymartin-6@users.noreply.github.com>
Date: Fri, 19 Apr 2024 14:43:49 -0400
Subject: [PATCH] feat: New care group screen (#76)

* feat: caregiver screen

* fix: add profile pics to care giver screen

---------

Co-authored-by: narayansharma-21 <97.sharman@gmail.com>
Co-authored-by: Matt McCoy <mattcmccoy01@gmail.com>
Co-authored-by: Matt McCoy <59743922+MattCMcCoy@users.noreply.github.com>
---
 client/assets/profile/plus.svg                |   4 +
 client/components/profile/AddButton.tsx       |  20 ++++
 client/components/profile/CareTaker.tsx       |  50 ++++++++
 client/components/profile/Group.tsx           |  29 ++++-
 .../containers/ProfileNavigationContainer.tsx |   2 +
 client/screens/Profile/CareGroup.tsx          | 109 ++++++++++++++++++
 client/screens/Profile/Settings.tsx           |   9 +-
 7 files changed, 219 insertions(+), 4 deletions(-)
 create mode 100644 client/assets/profile/plus.svg
 create mode 100644 client/components/profile/AddButton.tsx
 create mode 100644 client/components/profile/CareTaker.tsx
 create mode 100644 client/screens/Profile/CareGroup.tsx

diff --git a/client/assets/profile/plus.svg b/client/assets/profile/plus.svg
new file mode 100644
index 0000000..177f3e8
--- /dev/null
+++ b/client/assets/profile/plus.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="5.5" y1="11.5312" x2="19.5" y2="11.5312" stroke="white" stroke-width="3" stroke-linecap="round"/>
+<line x1="12.5" y1="18.5" x2="12.5" y2="4.5" stroke="white" stroke-width="3" stroke-linecap="round"/>
+</svg>
diff --git a/client/components/profile/AddButton.tsx b/client/components/profile/AddButton.tsx
new file mode 100644
index 0000000..89d7ad2
--- /dev/null
+++ b/client/components/profile/AddButton.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { useNavigation } from '@react-navigation/native';
+import { IconButton } from 'react-native-paper';
+
+import Plus from '../../assets/profile/plus.svg';
+import { AppStackNavigation } from '../../navigation/types';
+
+export function AddButtom() {
+  const navigation = useNavigation<AppStackNavigation>();
+
+  return (
+    <IconButton
+      className="align-center m-2 flex h-[50px] w-[52px] justify-center rounded-xl bg-carewallet-blue"
+      mode="contained"
+      icon={({ color }) => <Plus fill={color} />}
+      onPress={() => navigation.goBack()}
+    />
+  );
+}
diff --git a/client/components/profile/CareTaker.tsx b/client/components/profile/CareTaker.tsx
new file mode 100644
index 0000000..3bc47cf
--- /dev/null
+++ b/client/components/profile/CareTaker.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { useNavigation } from '@react-navigation/native';
+
+import { AppStackNavigation } from '../../navigation/types';
+import { GroupRole, Role } from '../../types/group';
+import { User } from '../../types/user';
+import { SmallProfileImage } from './Group';
+
+interface CareProps {
+  user: User | undefined;
+  role: GroupRole | undefined;
+}
+
+export function CareTaker({ user, role }: CareProps) {
+  if (!user) return null;
+  const navigation = useNavigation<AppStackNavigation>();
+  // const { user: signedInUser, group } = useCareWalletContext();
+  // const [activeUser, setActiveUser] = useState(signedInUser.userID);
+
+  const handlePress = () => {
+    navigation.navigate('Profile');
+  };
+
+  return (
+    <TouchableOpacity onPress={handlePress}>
+      <View className="mb-2 flex flex-row items-center rounded-xl border border-carewallet-lightgray bg-carewallet-white py-3 pl-1">
+        <SmallProfileImage user={user} />
+        <View className="flex h-fit max-h-fit min-h-fit flex-row items-center">
+          <View className="ml-8">
+            <Text className="flex-wrap text-left font-carewallet-manrope-semibold text-lg text-carewallet-black">
+              {user.first_name} {user.last_name}
+            </Text>
+            <View className="flex w-[60vw] flex-row">
+              <View className="flex flex-col">
+                <Text className="items-center justify-center text-left font-carewallet-manrope-semibold text-xs text-carewallet-black">
+                  {`${role?.role} ${role?.role !== Role.PATIENT ? 'CARETAKER' : ''}`}
+                </Text>
+                <Text className="items-center justify-center text-left font-carewallet-manrope text-xs  text-carewallet-black">
+                  {user.phone ? user.phone : user.email}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}
diff --git a/client/components/profile/Group.tsx b/client/components/profile/Group.tsx
index b7febba..9384f6a 100644
--- a/client/components/profile/Group.tsx
+++ b/client/components/profile/Group.tsx
@@ -70,7 +70,7 @@ export function Group({
                 if (canPress) setActiveUser(item.user_id);
               }}
             >
-              <SmallProfileImage user={item} />
+              <SmallProfileImageWithText user={item} />
             </View>
           );
         }}
@@ -79,11 +79,11 @@ export function Group({
   );
 }
 
-function SmallProfileImage({ user }: { user: User }) {
+function SmallProfileImageWithText({ user }: { user: User }) {
   const { file } = useProfileFile(user.profile_picture);
   return (
     <View>
-      {user?.profile_picture ? (
+      {user?.profile_picture && file ? (
         <View className="mb-1 h-20 w-20">
           <WebView
             source={{ uri: file }}
@@ -104,3 +104,26 @@ function SmallProfileImage({ user }: { user: User }) {
     </View>
   );
 }
+
+export function SmallProfileImage({ user }: { user: User }) {
+  const { file } = useProfileFile(user.profile_picture);
+  return (
+    <View>
+      {user?.profile_picture && file ? (
+        <View className="mb-1 h-20 w-20">
+          <WebView
+            source={{ uri: file }}
+            className="flex-1 rounded-full border border-carewallet-gray"
+          />
+        </View>
+      ) : (
+        <View className="mb-1 h-20 w-20 rounded-full bg-carewallet-lightergray">
+          <Text className="my-auto items-center text-center font-carewallet-manrope-bold text-carewallet-blue">
+            {user.first_name.charAt(0)}
+            {user.last_name.charAt(0)}
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}
diff --git a/client/navigation/containers/ProfileNavigationContainer.tsx b/client/navigation/containers/ProfileNavigationContainer.tsx
index 25f0cb9..f553e84 100644
--- a/client/navigation/containers/ProfileNavigationContainer.tsx
+++ b/client/navigation/containers/ProfileNavigationContainer.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import TimelineCalendarScreen from '../../screens/Calendar';
 import FileUploadScreen from '../../screens/FileUpload';
 import FileViewScreen from '../../screens/FileViewScreen';
+import { CareGroup } from '../../screens/Profile/CareGroup';
 import PatientView from '../../screens/Profile/PatientView';
 import Profile from '../../screens/Profile/Profile';
 import Settings from '../../screens/Profile/Settings';
@@ -27,6 +28,7 @@ export function ProfileNavigationContainer() {
       <AppStack.Screen name="TaskList" component={TaskList} />
       <AppStack.Screen name="TaskDisplay" component={SingleTaskScreen} />
       <AppStack.Screen name="FileViewScreen" component={FileViewScreen} />
+      <AppStack.Screen name="CareGroup" component={CareGroup} />
       <AppStack.Screen name="SingleFile" component={SingleFile} />
     </AppStack.Navigator>
   );
diff --git a/client/screens/Profile/CareGroup.tsx b/client/screens/Profile/CareGroup.tsx
new file mode 100644
index 0000000..443d2b6
--- /dev/null
+++ b/client/screens/Profile/CareGroup.tsx
@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { ActivityIndicator, ScrollView, View } from 'react-native';
+
+import { TouchableOpacity } from '@gorhom/bottom-sheet';
+import { useNavigation } from '@react-navigation/native';
+import { Button, Text } from 'react-native-paper';
+
+import Settings from '../../assets/profile/settings.svg';
+import { BackButton } from '../../components/nav_buttons/BackButton';
+import { AddButtom } from '../../components/profile/AddButton';
+import { CareTaker } from '../../components/profile/CareTaker';
+import { useCareWalletContext } from '../../contexts/CareWalletContext';
+import { MainLayout } from '../../layouts/MainLayout';
+import { AppStackNavigation } from '../../navigation/types';
+import { useGroup } from '../../services/group';
+import { useUsers } from '../../services/user';
+import { Role } from '../../types/group';
+
+export function CareGroup() {
+  const navigation = useNavigation<AppStackNavigation>();
+  const { user: signedInUser, group } = useCareWalletContext();
+  const [activeUser, setActiveUser] = useState(signedInUser.userID);
+  const { roles, rolesAreLoading } = useGroup(group.groupID);
+  const { users, usersAreLoading } = useUsers(
+    roles?.map((role) => role.user_id) ?? []
+  );
+
+  const patientId = roles?.find((role) => role.role === Role.PATIENT)?.user_id;
+
+  if (rolesAreLoading || usersAreLoading) {
+    return (
+      <View className="w-full flex-1 items-center justify-center bg-carewallet-white text-3xl">
+        <ActivityIndicator size="large" />
+        <Text>Loading...</Text>
+      </View>
+    );
+  }
+
+  if (!roles || !users) {
+    return (
+      <View className="w-full flex-1 items-center justify-center bg-carewallet-white text-3xl">
+        <Text className="text-xl">Could Not Load Profile...</Text>
+      </View>
+    );
+  }
+  return (
+    <View>
+      <View className="h-[8vh] bg-carewallet-white" />
+      <MainLayout>
+        <ScrollView className="mb-36">
+          <View className="flex flex-row items-center border-b border-carewallet-lightgray bg-carewallet-white">
+            <View className="pl-2">
+              <BackButton />
+            </View>
+            <View className="mx-auto ">
+              <Text className="text-center font-carewallet-manrope-bold text-lg text-carewallet-blue ">
+                Care Group
+              </Text>
+            </View>
+            <View className="pr-2">
+              <AddButtom />
+            </View>
+          </View>
+
+          <View>
+            <View className="flex h-[10vh] items-center">
+              <View className="h-[10vh] scroll-pb-96">
+                <View className="flex w-full flex-row justify-end text-carewallet-black">
+                  <Button
+                    className="mx-auto mt-2 h-[50px] w-[96vw] items-start justify-center rounded-xl border-carewallet-lightgray bg-carewallet-white"
+                    textColor="#000000"
+                    mode="outlined"
+                    icon={() => <Settings />}
+                  >
+                    <Text className="font-carewallet-manrope-semibold">
+                      Manage Caregiver Capabiities
+                    </Text>
+                  </Button>
+                </View>
+              </View>
+            </View>
+
+            <View className="mx-2 mt-2 flex w-[96vw] flex-col items-center rounded-xl">
+              {users
+                .filter(
+                  (user) =>
+                    user.user_id !== patientId && user.user_id !== activeUser
+                )
+                .map((user) => (
+                  <TouchableOpacity
+                    key={user.user_id} // <-- Add key prop here
+                    onPress={() => {
+                      setActiveUser(user.user_id);
+                      navigation.navigate('Profile');
+                    }}
+                  >
+                    <CareTaker
+                      user={user}
+                      role={roles.find((role) => role.user_id === user.user_id)}
+                    />
+                  </TouchableOpacity>
+                ))}
+            </View>
+          </View>
+        </ScrollView>
+      </MainLayout>
+    </View>
+  );
+}
diff --git a/client/screens/Profile/Settings.tsx b/client/screens/Profile/Settings.tsx
index d03c883..81d069c 100644
--- a/client/screens/Profile/Settings.tsx
+++ b/client/screens/Profile/Settings.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { ScrollView, Text, View } from 'react-native';
 
+import { useNavigation } from '@react-navigation/native';
+
 import Bell from '../../assets/profile/settings/bell.svg';
 import Clock from '../../assets/profile/settings/clock.svg';
 import Comment from '../../assets/profile/settings/comment.svg';
@@ -12,8 +14,11 @@ import GroupScan from '../../assets/profile/settings/group_scan.svg';
 import { BackButton } from '../../components/nav_buttons/BackButton';
 import { SettingsButtonGroup } from '../../components/SettingsButtonGroup';
 import { MainLayout } from '../../layouts/MainLayout';
+import { AppStackNavigation } from '../../navigation/types';
 
 export default function Settings() {
+  const navigation = useNavigation<AppStackNavigation>();
+
   return (
     <View>
       <View className="h-[8vh] bg-carewallet-white" />
@@ -38,7 +43,9 @@ export default function Settings() {
                   {
                     text: 'Manage Caregiver Capabilities',
                     icon: <GroupScan />,
-                    onPress: () => {}
+                    onPress: () => {
+                      navigation.navigate('CareGroup');
+                    }
                   }
                 ]}
               />