feat: cleanup

GenerateNU · Feb 24, 2024 · f652f40 · f652f40
1 parent 7b8ce0f
commit f652f40
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 34 deletions.
diff --git a/client/components/profile/Group.tsx b/client/components/profile/Group.tsx
@@ -1,24 +1,32 @@
 import React from 'react';
-import { ActivityIndicator, FlatList, Text, View } from 'react-native';
+import {
+  ActivityIndicator,
+  FlatList,
+  Pressable,
+  Text,
+  View
+} from 'react-native';
 
-import { useCareWalletContext } from '../../contexts/CareWalletContext';
-import { useUsers } from '../../services/user';
 import { GroupRole, Role } from '../../types/group';
+import { User } from '../../types/user';
 
 interface GroupProps {
   roles: GroupRole[];
   rolesAreLoading: boolean;
+  setActiveUser: (userID: string) => void;
+  activeUser: string;
+  users: User[];
+  usersAreLoading: boolean;
 }
 
-export function Group({ roles, rolesAreLoading }: GroupProps) {
-  const { user: signedInUser } = useCareWalletContext();
-
-  const { users, usersAreLoading } = useUsers(
-    roles
-      ?.map((role) => role.user_id)
-      .filter((u) => u !== signedInUser.userID) || []
-  );
-
+export function Group({
+  roles,
+  rolesAreLoading,
+  usersAreLoading,
+  users,
+  setActiveUser,
+  activeUser
+}: GroupProps) {
   if (rolesAreLoading || usersAreLoading) {
     return (
       <View className="-top-20 w-[100vw] flex-1 items-center text-3xl">
@@ -38,20 +46,23 @@ export function Group({ roles, rolesAreLoading }: GroupProps) {
 
   return (
     <FlatList
+      keyboardShouldPersistTaps="always"
       className="h-fit max-h-fit flex-grow-0"
       horizontal
       showsHorizontalScrollIndicator={false}
       data={users.filter(
         (user) =>
-          user.user_id !== signedInUser.userID &&
+          user.user_id !== activeUser &&
           user.user_id !==
             (roles.find((role) => role.role === Role.PATIENT)?.user_id ?? '')
       )}
-      renderItem={({ item }) => (
-        <View className="items-center px-2">
-          <View className="z-10 h-20 w-20 rounded-full border border-carewallet-black bg-carewallet-white" />
-          <Text className="text-center">{item.first_name}</Text>
-        </View>
+      renderItem={({ item, index }) => (
+        <Pressable key={index} onTouchEnd={() => setActiveUser(item.user_id)}>
+          <View className="items-center px-2">
+            <View className="z-10 h-20 w-20 rounded-full border border-carewallet-black bg-carewallet-white" />
+            <Text className="text-center">{item.first_name}</Text>
+          </View>
+        </Pressable>
       )}
     />
   );

diff --git a/client/components/profile/Header.tsx b/client/components/profile/Header.tsx
@@ -5,18 +5,22 @@ import { useNavigation } from '@react-navigation/native';
 import { styled } from 'nativewind';
 
 import Ellipse from '../../assets/profile/ellipse.svg';
-import { useCareWalletContext } from '../../contexts/CareWalletContext';
 import { AppStackNavigation } from '../../navigation/AppNavigation';
+import { GroupRole } from '../../types/group';
 import { User } from '../../types/user';
 import { ProfileTopHeader } from './ProfileTopHeader';
 
 const StyledEllipse = styled(Ellipse);
 
-export function Header({ user }: { user: User }) {
-  const { group } = useCareWalletContext();
+interface HeaderProps {
+  user: User | undefined;
+  role: GroupRole | undefined;
+}
+
+export function Header({ user, role }: HeaderProps) {
   const navigate = useNavigation<AppStackNavigation>();
 
-  if (!user || !group) return null;
+  if (!user) return null;
 
   return (
     <>
@@ -29,7 +33,7 @@ export function Header({ user }: { user: User }) {
             rightButtonText="Edit"
           />
           <Text className="items-center justify-center text-center text-xl  text-carewallet-white">
-            {`${group.role.charAt(0)}${group.role.slice(1).toLowerCase()} Caregiver`}
+            {`${role?.role.charAt(0)}${role?.role.slice(1).toLowerCase()} Caregiver`}
           </Text>
           <Text className="items-center justify-center text-center text-lg  text-carewallet-white">
             {user.phone ? user.phone : user.email}

diff --git a/client/screens/Profile.tsx b/client/screens/Profile.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ActivityIndicator, Text, View } from 'react-native';
 
 import { CircleCard } from '../components/profile/CircleCard';
@@ -7,16 +7,19 @@ import { Header } from '../components/profile/Header';
 import { useCareWalletContext } from '../contexts/CareWalletContext';
 import { useAuth } from '../services/auth';
 import { useGroup } from '../services/group';
-import { useUser } from '../services/user';
+import { useUsers } from '../services/user';
 
 export default function Profile() {
-  const { user: carewalletUser, group } = useCareWalletContext();
-  const { user, userIsLoading } = useUser(carewalletUser.userID);
+  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 { signOutMutation } = useAuth();
 
-  if (userIsLoading) {
+  if (rolesAreLoading || usersAreLoading) {
     return (
       <View className="w-full flex-1 items-center justify-center bg-carewallet-white text-3xl">
         <ActivityIndicator size="large" />
@@ -25,7 +28,7 @@ export default function Profile() {
     );
   }
 
-  if (!user) {
+  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>
@@ -39,8 +42,18 @@ export default function Profile() {
   // TODO: Add ability to change user view if I click on another user?
   return (
     <View className="flex flex-1 flex-col">
-      <Header user={user} />
-      <Group roles={roles ?? []} rolesAreLoading={rolesAreLoading} />
+      <Header
+        user={users.find((user) => user.user_id === activeUser)}
+        role={roles.find((role) => role.user_id === activeUser)}
+      />
+      <Group
+        users={users ?? []}
+        usersAreLoading={usersAreLoading}
+        setActiveUser={setActiveUser}
+        activeUser={activeUser}
+        roles={roles ?? []}
+        rolesAreLoading={rolesAreLoading}
+      />
       <View className="mt-5 flex items-center pb-5">
         <View className="h-20 w-80 items-center justify-center rounded-xl border border-carewallet-black">
           <Text className="text-md">Your Tasks</Text>

diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -1,9 +1,9 @@
 services:
   db:
     image: postgres:14.1-alpine
-    restart: always
+    restart: unless-stopped
     healthcheck:
-      test: ['CMD', 'pg_isready', '-q', '-d', 'postgres', '-U', 'user']
+      test: ["CMD", "pg_isready", "-q", "-d", "postgres", "-U", "user"]
       timeout: 45s
       interval: 10s
       retries: 10
@@ -12,7 +12,7 @@ services:
       - POSTGRES_DB=carewallet
       - POSTGRES_PASSWORD=pwd
     ports:
-      - '5434:5432'
+      - "5434:5432"
     volumes:
       - ./backend/db/migrations:/docker-entrypoint-initdb.d/
 volumes: