fixed welcome form layout bug and refactored patientIdAtom and name

apps/expo/src/app/index.tsx

@@ -3,12 +3,18 @@ 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 [patientId, setPatientId] = useAtom(patientIdAtom);
+  const [, setPatientId] = useAtom(patientIdAtom);
   const router = useRouter();
 
   return (
@@ -20,7 +26,6 @@ const Index = () => {
           <Text className="pb-4 text-center text-5xl font-semibold text-black">
             Hello there!
           </Text>
-          <Text>{patientId}</Text>
           <Text className="pb-4 text-center text-2xl text-black">
             Ready to get your life back?
           </Text>

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}

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 />

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,
     },
   });
 

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}

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: {

apps/expo/src/app/portal/(tabs)/account/index.tsx

@@ -1,9 +1,10 @@
 import { Text, View } from "react-native";
 import { router } from "expo-router";
 import { FlashList } from "@shopify/flash-list";
-import { useSetAtom } from "jotai";
+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";
@@ -19,18 +20,25 @@ 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-white">
-      <View className="flex-1 bg-gray-100">
+    <View className="flex-1 bg-gray-100">
+      <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">
-              DL
+              {initials.toUpperCase()} {/* Display initials */}
             </Text>
           </View>
-          <Text className="pt-4 text-center text-2xl font-semibold text-black">
-            Donna Lewis
+          <Text className="pb-4 pt-4 text-center text-2xl font-semibold text-black">
+            {`${patientName.firstName} ${patientName.lastName}`}{" "}
+            {/* Display full name */}
           </Text>
         </View>
         <FlashList
@@ -52,15 +60,16 @@ export default function Account() {
         />
         <View className="px-6 pb-20">
           <Button
-            variant={"outline"}
+            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("/");
             }}
-            textClass="text-center"
           >
             Log out
           </Button>

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";
 

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";
 

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";
 

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";
 

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";
 

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";
 

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";
 

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";
 

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";

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";
 

apps/expo/src/app/portal/(tabs)/index.tsx

@@ -1,25 +1,55 @@
 import { Text, View } from "react-native";
 import { useAtom } from "jotai";
+import { Loader2 } from "lucide-react-native";
 
-import { patientIdAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom, patientNameAtom } from "~/app";
 import NextAppointment from "~/components/next-appointment";
 import Tasks from "~/components/tasks";
 import { api } from "~/utils/api";
 
 export default function Home() {
   const [patientId] = useAtom(patientIdAtom);
+  const [patientName, setPatientName] = useAtom(patientNameAtom);
 
-  const patientQuery = api.patient.getPatient.useQuery({
-    path: {
-      patient_id: patientId,
+  const patientQuery = api.patient.getPatient.useQuery(
+    {
+      path: {
+        patient_id: patientId,
+      },
     },
-  });
+    {
+      enabled: !!patientId,
+    },
+  );
+
+  if (patientQuery.isLoading) {
+    return (
+      <View className="mb-36 flex-1 items-center justify-center bg-white">
+        <Loader2
+          size={48}
+          color="black"
+          strokeWidth={2}
+          className="animate-spin"
+        />
+      </View>
+    );
+  }
+
+  // Update patient name if not already set and if data is available
+  if (
+    patientQuery.data?.name?.[0] &&
+    (!patientName.firstName || !patientName.lastName)
+  ) {
+    const firstName = patientQuery.data.name[0].given?.[0] ?? "";
+    const lastName = patientQuery.data.name[0].family ?? "";
+    setPatientName({ firstName, lastName });
+  }
 
   return (
     <View className="flex-1 flex-col gap-8 px-6 py-4">
       {/* Welcome message */}
       <Text className="text-3xl font-semibold">
-        Good Morning, {patientQuery.data?.name?.[0]?.given?.[0] ?? "User"}
+        Good Morning, {patientName.firstName || "User"}
       </Text>
       {/* Next appointment */}
       <View>

apps/expo/src/components/completed-appointments.tsx

@@ -6,6 +6,7 @@ import { Calendar, Clock, Loader2 } from "lucide-react-native";
 
 import type { CareTeamBundle } from "@acme/shared/src/validators/care-team";
 
+import { patientIdAtom } from "~/app";
 import {
   Card,
   CardContent,
@@ -16,7 +17,6 @@ import {
 } from "~/components/ui/rn-ui/components/ui/card";
 import { api } from "~/utils/api";
 import { formatDayDate, formatTime } from "~/utils/dates";
-import { patientIdAtom } from "./forms/welcome-form";
 
 export default function CompletedAppointments() {
   const [patientId] = useAtom(patientIdAtom);