From 640851d7700f5e0724b64d4853377b8c6ff3ffb5 Mon Sep 17 00:00:00 2001 From: Matt McCoy Date: Sat, 3 Feb 2024 15:27:09 -0500 Subject: [PATCH] refactor: make context more general --- client/App.tsx | 6 +-- client/contexts/CareWalletContext.tsx | 53 +++++++++++++++++++++++++++ client/contexts/types.ts | 9 +++++ client/contexts/userContext.tsx | 45 ----------------------- client/screens/Login.tsx | 4 +- client/screens/Medication.tsx | 12 +++--- client/types/user.ts | 4 -- 7 files changed, 74 insertions(+), 59 deletions(-) create mode 100644 client/contexts/CareWalletContext.tsx create mode 100644 client/contexts/types.ts delete mode 100644 client/contexts/userContext.tsx delete mode 100644 client/types/user.ts diff --git a/client/App.tsx b/client/App.tsx index f965ef0..c9231a3 100644 --- a/client/App.tsx +++ b/client/App.tsx @@ -1,14 +1,14 @@ import * as React from 'react'; import { SafeAreaView } from 'react-native-safe-area-context'; import Router from './navigation/Router'; -import UserContext from './contexts/userContext'; +import CareWalletProvider from './contexts/CareWalletContext'; export default function App() { return ( - + - + ); } diff --git a/client/contexts/CareWalletContext.tsx b/client/contexts/CareWalletContext.tsx new file mode 100644 index 0000000..55347ca --- /dev/null +++ b/client/contexts/CareWalletContext.tsx @@ -0,0 +1,53 @@ +import React, { createContext, useContext, useEffect, useState } from 'react'; +import { getAuth, onAuthStateChanged } from 'firebase/auth'; +import { Group, User } from './types'; + +type CareWalletContextData = { + user: User; + group: Group; +}; + +const CareWalletContext = createContext({} as CareWalletContextData); + +export default function CareWalletProvider({ children }: { children: any }) { + const [user, setUser] = useState({} as User); + const [group, setGroup] = useState({} as Group); + const auth = getAuth(); + + useEffect(() => { + onAuthStateChanged(auth, (user) => { + const signedInUser: User = { + userID: user?.uid ?? '', + userEmail: user?.email ?? '' + }; + setUser(signedInUser); + }); + setGroup({ + groupID: 'TEMP - REPLACE WITH ACTUAL', + role: 'TEMP - REPLACE WITH ACTUAL' + }); + }, []); + + const CareWalletContextStore: CareWalletContextData = { + user: user, + group: group + }; + + return ( + + {children} + + ); +} + +export const useCareWalletContext = (): CareWalletContextData => { + const context = useContext(CareWalletContext); + + if (!context) { + throw new Error( + 'useCareWalletContext must be used within a CareWalletContextProvider' + ); + } + + return context; +}; diff --git a/client/contexts/types.ts b/client/contexts/types.ts new file mode 100644 index 0000000..82969df --- /dev/null +++ b/client/contexts/types.ts @@ -0,0 +1,9 @@ +export interface User { + userID: string; + userEmail: string; +} + +export interface Group { + groupID: string; + role: string; // TODO: update to enum +} diff --git a/client/contexts/userContext.tsx b/client/contexts/userContext.tsx deleted file mode 100644 index 9cac113..0000000 --- a/client/contexts/userContext.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React, { createContext, useContext, useEffect, useState } from 'react'; -import { getAuth, onAuthStateChanged } from 'firebase/auth'; -import { User } from '../types/user'; - -type UserContextData = { - user: User; -}; - -const UserContext = createContext({} as UserContextData); - -// TODO: Add Group ID, and User Role to this. -// TODO: Should maybe be a group prop and not inside user. -// TODO: make name more generic -export default function UserProvider({ children }: { children: any }) { - const [user, setUser] = useState({} as User); - const auth = getAuth(); - - useEffect(() => { - onAuthStateChanged(auth, (user) => { - const signedInUser: User = { - userID: user?.uid ?? '', - userEmail: user?.email ?? '' - }; - setUser(signedInUser); - }); - }, []); - - const UserStore: UserContextData = { - user: user - }; - - return ( - {children} - ); -} - -export const useUser = (): UserContextData => { - const context = useContext(UserContext); - - if (!context) { - throw new Error('useUser must be used within a UserProvider'); - } - - return context; -}; diff --git a/client/screens/Login.tsx b/client/screens/Login.tsx index 4e4a9b1..ffa1c8f 100644 --- a/client/screens/Login.tsx +++ b/client/screens/Login.tsx @@ -22,7 +22,7 @@ const LoginPage: React.FC = () => { } else { Alert.alert('Login Success', 'Welcome back!'); // console.log('result: ', result); - navigation.navigate('Landing'); + navigation.navigate('BottomNavScreens'); } }; @@ -37,7 +37,7 @@ const LoginPage: React.FC = () => { } else { Alert.alert('Signup Success', 'Welcome to the app!'); // console.log('result: ', result); - navigation.navigate('Landing'); + navigation.navigate('BottomNavScreens'); } }; diff --git a/client/screens/Medication.tsx b/client/screens/Medication.tsx index a612866..b08717b 100644 --- a/client/screens/Medication.tsx +++ b/client/screens/Medication.tsx @@ -2,11 +2,11 @@ import * as React from 'react'; import { View, Text } from 'react-native'; import { getAllMedications } from '../services/medication'; import { Medication } from '../types/medication'; -import { useUser } from '../contexts/userContext'; +import { useCareWalletContext } from '../contexts/CareWalletContext'; export default function MedList() { const [medications, setMedications] = React.useState(); - const { user } = useUser(); + const { user, group } = useCareWalletContext(); React.useEffect(() => { getAllMedications().then((med) => setMedications(med)); }, []); @@ -19,11 +19,13 @@ export default function MedList() { {`Name: ${med.medication_name} id: ${med.medication_id}`} ))} - {user && ( - + {user && group && ( + The user id is: {user.userID} The user email is: {user.userEmail} - + The group id is: {group.groupID} + The group role is: {group.role} + )} ); diff --git a/client/types/user.ts b/client/types/user.ts deleted file mode 100644 index a6f6a18..0000000 --- a/client/types/user.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface User { - userID: string; - userEmail: string; -}