Merge pull request #34 from trevorpfiz/elektrikspark/ttp-85-add-user-…

…profile-and-log-out-to-account-tab Elektrikspark/ttp 85 add user profile and log out to account tab
trevorpfiz · Dec 29, 2023 · 8eea734 · 8eea734
2 parents 2ae1dcc + bc2b68f
commit 8eea734
Show file tree

Hide file tree

Showing 48 changed files with 394 additions and 314 deletions.
diff --git a/apps/expo/src/app/_layout.tsx b/apps/expo/src/app/_layout.tsx
@@ -12,11 +12,13 @@ import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import type { Theme } from "@react-navigation/native";
 import { ThemeProvider } from "@react-navigation/native";
+import { atom, Provider, useAtom } from "jotai";
 import { useColorScheme } from "nativewind";
 
 import { ToastProvider } from "~/components/ui/rn-ui/components/ui/toast";
 import { setAndroidNavigationBar } from "~/components/ui/rn-ui/lib/android-navigation-bar";
 import { NAV_THEME } from "~/components/ui/rn-ui/lib/constants";
+import { USE_PROVIDER_KEY_TO_RESET_ATOMS } from "~/lib/constants";
 import { TRPCProvider } from "~/utils/api";
 
 const LIGHT_THEME: Theme = {
@@ -28,6 +30,8 @@ const DARK_THEME: Theme = {
   colors: NAV_THEME.dark,
 };
 
+export const providerKeyAtom = atom(1);
+
 async function onFetchUpdateAsync() {
   if (process.env.NODE_ENV === "development") {
     return;
@@ -55,6 +59,7 @@ export default function RootLayout() {
   const { colorScheme, toggleColorScheme } = useColorScheme();
   useAppForground(onFetchUpdateAsync, true);
   const [loaded, error] = useFonts(FontAwesome.font);
+  const [providerKey] = useAtom(providerKeyAtom);
 
   // Expo Router uses Error Boundaries to catch errors in the navigation tree.
   useEffect(() => {
@@ -89,7 +94,9 @@ export default function RootLayout() {
 
   return (
     <TRPCProvider>
-      <RootLayoutNav />
+      <Provider key={USE_PROVIDER_KEY_TO_RESET_ATOMS ? providerKey : undefined}>
+        <RootLayoutNav />
+      </Provider>
     </TRPCProvider>
   );
 }

diff --git a/apps/expo/src/app/index.tsx b/apps/expo/src/app/index.tsx
@@ -3,9 +3,15 @@ import { SafeAreaView } from "react-native-safe-area-context";
 import { Stack, useRouter } from "expo-router";
 import { useAtom } from "jotai";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
 import SvgComponent from "~/components/ui/home-svg";
 import { Button } from "~/components/ui/rn-ui/components/ui/button";
+import { atomWithMMKV } from "~/utils/atom-with-mmkv";
+
+export const patientIdAtom = atomWithMMKV("patient_id", "");
+export const patientNameAtom = atomWithMMKV("patient_name", {
+  firstName: "",
+  lastName: "",
+});
 
 const Index = () => {
   const [, setPatientId] = useAtom(patientIdAtom);

diff --git a/apps/expo/src/app/onboarding/(modals)/pdf.tsx b/apps/expo/src/app/onboarding/(modals)/pdf.tsx
@@ -26,16 +26,16 @@ export default function PDFPage() {
       <Pdf
         source={source}
         onLoadComplete={(numberOfPages, filePath) => {
-          console.log(`Number of pages: ${numberOfPages}`);
+          // console.log(`Number of pages: ${numberOfPages}`);
         }}
         onPageChanged={(page, numberOfPages) => {
-          console.log(`Current page: ${page}`);
+          // console.log(`Current page: ${page}`);
         }}
         onError={(error) => {
           console.log(error);
         }}
         onPressLink={(uri) => {
-          console.log(`Link pressed: ${uri}`);
+          // console.log(`Link pressed: ${uri}`);
         }}
         style={{ flex: 1, width, height }}
         trustAllCerts={false}

diff --git a/apps/expo/src/app/onboarding/overview.tsx b/apps/expo/src/app/onboarding/overview.tsx
@@ -1,15 +1,19 @@
 import { SafeAreaView, Text, View } from "react-native";
+import { useAtom } from "jotai";
 
+import { patientNameAtom } from "~/app";
 import Steps from "~/components/ui/steps";
 
 export default function OverviewPage() {
+  const [patientName] = useAtom(patientNameAtom);
+
   return (
     <>
       <SafeAreaView className="flex-[0] bg-white" />
       <SafeAreaView className="flex-1 bg-gray-100">
         <View className="flex-1 bg-gray-100">
           <View className="bg-white p-8 px-10">
-            <Text className="text-4xl font-semibold">{`Hi Donna, let's get you onboarded`}</Text>
+            <Text className="text-4xl font-semibold">{`Hi ${patientName.firstName}, let's get you onboarded`}</Text>
           </View>
           <View className="flex-1">
             <Steps />

diff --git a/apps/expo/src/app/portal/(messages)/index.tsx b/apps/expo/src/app/portal/(messages)/index.tsx
@@ -2,7 +2,9 @@ import { useEffect, useState } from "react";
 import { View } from "react-native";
 import { router } from "expo-router";
 import { FlashList } from "@shopify/flash-list";
+import { useAtom } from "jotai";
 
+import { patientIdAtom } from "~/app";
 import ChatPreviewCard from "~/components/ui/cards/chat-preview-card";
 import { api } from "~/utils/api";
 
@@ -13,11 +15,12 @@ interface Chat {
 }
 
 export default function MessagesPage() {
+  const [patientId] = useAtom(patientIdAtom);
   const [chats, setChats] = useState<Chat[]>([]);
 
   const patientQuery = api.patient.getPatient.useQuery({
     path: {
-      patient_id: "e7836251cbed4bd5bb2d792bc02893fd",
+      patient_id: patientId,
     },
   });
 

diff --git a/apps/expo/src/app/portal/(modals)/pdf.tsx b/apps/expo/src/app/portal/(modals)/pdf.tsx
@@ -12,8 +12,6 @@ export default function PDFPage() {
   const { url } = useLocalSearchParams<{ url: string }>();
   const { width, height } = useWindowDimensions();
 
-  console.log(url);
-
   const source = { uri: url, cache: true };
 
   return (
@@ -28,16 +26,16 @@ export default function PDFPage() {
       <Pdf
         source={source}
         onLoadComplete={(numberOfPages, filePath) => {
-          console.log(`Number of pages: ${numberOfPages}`);
+          // console.log(`Number of pages: ${numberOfPages}`);
         }}
         onPageChanged={(page, numberOfPages) => {
-          console.log(`Current page: ${page}`);
+          // console.log(`Current page: ${page}`);
         }}
         onError={(error) => {
           console.log(error);
         }}
         onPressLink={(uri) => {
-          console.log(`Link pressed: ${uri}`);
+          // console.log(`Link pressed: ${uri}`);
         }}
         style={{ flex: 1, width, height }}
         trustAllCerts={false}

diff --git a/apps/expo/src/app/portal/(tabs)/account/billing.tsx b/apps/expo/src/app/portal/(tabs)/account/billing.tsx
@@ -1,13 +1,15 @@
 import { Text, TouchableOpacity, View } from "react-native";
 import { useRouter } from "expo-router";
+import { useAtom } from "jotai";
 import { ChevronRight, Loader2 } from "lucide-react-native";
 
+import { patientIdAtom } from "~/app";
 import { api } from "~/utils/api";
 import { formatDateTime } from "~/utils/dates";
 
 export default function Billing() {
+  const [patientId] = useAtom(patientIdAtom);
   const router = useRouter();
-  const patientId = "e7836251cbed4bd5bb2d792bc02893fd";
 
   const billingQuery = api.document.searchBillDocument.useQuery({
     query: {

diff --git a/apps/expo/src/app/portal/(tabs)/account/index.tsx b/apps/expo/src/app/portal/(tabs)/account/index.tsx
@@ -1,9 +1,14 @@
-import { View } from "react-native";
+import { Text, View } from "react-native";
 import { router } from "expo-router";
 import { FlashList } from "@shopify/flash-list";
+import { useAtom, useSetAtom } from "jotai";
 import { Receipt } from "lucide-react-native";
 
+import { patientNameAtom } from "~/app";
+import { providerKeyAtom } from "~/app/_layout";
 import { RecordCategoryCard } from "~/components/ui/cards/record-category-card";
+import { Button } from "~/components/ui/rn-ui/components/ui/button";
+import { logOut } from "~/utils/atom-with-mmkv";
 
 const items = [
   {
@@ -14,25 +19,62 @@ const items = [
 ];
 
 export default function Account() {
+  const setProviderKey = useSetAtom(providerKeyAtom);
+  const [patientName] = useAtom(patientNameAtom);
+
+  // Construct initials from the first letters of the first and last names
+  const initials = `${patientName.firstName[0] ?? ""}${
+    patientName.lastName[0] ?? ""
+  }`;
+
   return (
     <View className="flex-1 bg-gray-100">
-      <FlashList
-        data={items}
-        renderItem={({ item }) => (
-          <RecordCategoryCard
-            icon={item.icon}
-            title={item.title}
-            onPress={item.onPress}
-          />
-        )}
-        estimatedItemSize={100}
-        keyExtractor={(item, index) => index.toString()}
-        contentContainerStyle={{
-          paddingBottom: 16,
-          paddingTop: 16,
-          paddingHorizontal: 16,
-        }}
-      />
+      <View className="flex-1">
+        <View className="items-center pt-12">
+          <View className="h-20 w-20 items-center justify-center rounded-full bg-blue-600">
+            <Text className="text-center text-2xl font-bold text-white">
+              {initials.toUpperCase()} {/* Display initials */}
+            </Text>
+          </View>
+          <Text className="pb-4 pt-4 text-center text-2xl font-semibold text-black">
+            {`${patientName.firstName} ${patientName.lastName}`}{" "}
+            {/* Display full name */}
+          </Text>
+        </View>
+        <FlashList
+          data={items}
+          renderItem={({ item }) => (
+            <RecordCategoryCard
+              icon={item.icon}
+              title={item.title}
+              onPress={item.onPress}
+            />
+          )}
+          estimatedItemSize={200}
+          keyExtractor={(item, index) => index.toString()}
+          contentContainerStyle={{
+            paddingBottom: 16,
+            paddingTop: 16,
+            paddingHorizontal: 16,
+          }}
+        />
+        <View className="px-6 pb-20">
+          <Button
+            variant="outline"
+            className="rounded-full border-2 border-blue-500 bg-gray-50"
+            textClass="text-blue-500"
+            onPress={() => {
+              // "log out"
+              logOut(() => setProviderKey((prevKey) => prevKey + 1));
+
+              // go to sign in page
+              router.replace("/");
+            }}
+          >
+            Log out
+          </Button>
+        </View>
+      </View>
     </View>
   );
 }
diff --git a/apps/expo/src/app/portal/(tabs)/health-record/allergies.tsx b/apps/expo/src/app/portal/(tabs)/health-record/allergies.tsx
@@ -3,7 +3,7 @@ import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 import { Loader2 } from "lucide-react-native";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/app";
 import AllergyItem from "~/components/ui/health-record/allergy-item";
 import { api } from "~/utils/api";
 

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/conditions.tsx b/apps/expo/src/app/portal/(tabs)/health-record/conditions.tsx
@@ -3,7 +3,7 @@ import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 import { Loader2 } from "lucide-react-native";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/app";
 import ConditionItem from "~/components/ui/health-record/condition-item";
 import { api } from "~/utils/api";
 

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/forms/clinical-notes.tsx b/apps/expo/src/app/portal/(tabs)/health-record/forms/clinical-notes.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 import { ChevronRight, Loader2 } from "lucide-react-native";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/app";
 import { api } from "~/utils/api";
 import { formatDateTime } from "~/utils/dates";
 

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/forms/consents/index.tsx b/apps/expo/src/app/portal/(tabs)/health-record/forms/consents/index.tsx
@@ -3,7 +3,7 @@ import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 import { Loader2 } from "lucide-react-native";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/app";
 import ConsentItem from "~/components/ui/health-record/consent-item";
 import { api } from "~/utils/api";
 

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/forms/goals.tsx b/apps/expo/src/app/portal/(tabs)/health-record/forms/goals.tsx
@@ -3,7 +3,7 @@ import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 import { Loader2 } from "lucide-react-native";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/app";
 import GoalItem from "~/components/ui/health-record/goal-item";
 import { api } from "~/utils/api";
 

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/forms/questionnaires/index.tsx b/apps/expo/src/app/portal/(tabs)/health-record/forms/questionnaires/index.tsx
@@ -4,7 +4,7 @@ import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 import { Loader2 } from "lucide-react-native";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/app";
 import QuestionnaireItem from "~/components/ui/health-record/questionnaire-item";
 import { api } from "~/utils/api";
 

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/immunizations.tsx b/apps/expo/src/app/portal/(tabs)/health-record/immunizations.tsx
@@ -3,7 +3,7 @@ import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 import { Loader2 } from "lucide-react-native";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/app";
 import ImmunizationItem from "~/components/ui/health-record/immunization-item";
 import { api } from "~/utils/api";
 

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/medications.tsx b/apps/expo/src/app/portal/(tabs)/health-record/medications.tsx
@@ -3,7 +3,7 @@ import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 import { Loader2 } from "lucide-react-native";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/app";
 import MedicationItem from "~/components/ui/health-record/medication-item";
 import { api } from "~/utils/api";
 

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/test-results/[testId].tsx b/apps/expo/src/app/portal/(tabs)/health-record/test-results/[testId].tsx
@@ -4,7 +4,7 @@ import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 import { ChevronRight, Loader2 } from "lucide-react-native";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/app";
 import ObservationItem from "~/components/ui/health-record/observation-item";
 import { api } from "~/utils/api";
 import { formatDateTime } from "~/utils/dates";

diff --git a/apps/expo/src/app/portal/(tabs)/health-record/test-results/index.tsx b/apps/expo/src/app/portal/(tabs)/health-record/test-results/index.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "expo-router";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/app";
 import TestItem from "~/components/ui/health-record/test-item";
 import { api } from "~/utils/api";