Merge pull request #24 from trevorpfiz/elektrikspark/ttp-61-jotai-rea…

…ct-native

ttp 61 jotai react native

apps/expo/package.json

@@ -57,10 +57,12 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.48.2",
     "react-native": "0.72.6",
+    "react-native-autocomplete-dropdown": "^3.1.0",
     "react-native-blob-util": "^0.19.6",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-maps": "1.7.1",
+    "react-native-mmkv": "^2.11.0",
     "react-native-modal-datetime-picker": "^17.1.0",
     "react-native-pdf": "^6.7.3",
     "react-native-picker-select": "^9.0.0",

apps/expo/src/app/index.tsx

@@ -1,10 +1,14 @@
-import { ScrollView, Text, View } from "react-native";
+import { Button, ScrollView, Text, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { Link, Stack } from "expo-router";
+import { useAtom } from "jotai";
 
+import { patientIdAtom } from "~/components/forms/welcome-form";
 import { api } from "~/utils/api";
 
 const Index = () => {
+  const [patientId, setPatientId] = useAtom(patientIdAtom);
+
   const { data, isLoading, isError, error } =
     api.patient.searchPatients.useQuery({ query: {} });
 
@@ -43,6 +47,17 @@ const Index = () => {
           )}
         </ScrollView>
 
+        <Text className="text-xl font-bold">{`PatientId: ${patientId}`}</Text>
+        <Button
+          title="Get patientId from MMKV with Jotai"
+          onPress={() => console.log(patientId)}
+          color="#1d4ed8"
+        />
+        <Button
+          title="Set patientId on MMKV with Jotai"
+          onPress={() => setPatientId("e7836251cbed4bd5bb2d792bc02893fd")}
+          color="#1d4ed8"
+        />
         <Link href="/onboarding/schedule">
           <View className="p-4">
             <Text className="text-xl">Scheduling</Text>

apps/expo/src/app/onboarding/schedule.tsx

@@ -6,7 +6,7 @@ import { useAtom } from "jotai";
 
 import type { SlotResource } from "@acme/shared/src/validators/slot";
 
-import { patientTestAtom } from "~/components/forms/welcome-form";
+import { patientIdAtom } from "~/components/forms/welcome-form";
 import {
   ScheduleHeader,
   selectedDateAtom,
@@ -53,7 +53,7 @@ const TimeSlots = ({ slots }: { slots: SlotResource[] }) => {
 
 // SchedulePage component
 export default function SchedulePage() {
-  const [patientId] = useAtom(patientTestAtom);
+  const [patientId] = useAtom(patientIdAtom);
   const [selectedSlot] = useAtom(selectedSlotAtom);
 
   const router = useRouter();

apps/expo/src/app/portal/(tabs)/health-record/allergies.tsx

@@ -2,13 +2,12 @@ import { Text, View } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 import { atom, useAtom } from "jotai";
 
+import { patientIdAtom } from "~/components/forms/welcome-form";
 import AllergyItem from "~/components/ui/health-record/allergy-item";
 import { api } from "~/utils/api";
 
-export const patientAtom = atom("e7836251cbed4bd5bb2d792bc02893fd");
-
 export default function Allergies() {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
 
   const { isLoading, isError, data, error } =
     api.patientMedicalHistory.getPatientAllergies.useQuery({ patientId });

apps/expo/src/app/portal/(tabs)/health-record/conditions.tsx

@@ -2,12 +2,12 @@ import { Text, View } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 
+import { patientIdAtom } from "~/components/forms/welcome-form";
 import ConditionItem from "~/components/ui/health-record/condition-item";
 import { api } from "~/utils/api";
-import { patientAtom } from "./allergies";
 
 export default function Conditions() {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
 
   const { isLoading, isError, data, error } =
     api.patientMedicalHistory.getPatientConditions.useQuery({ patientId });

apps/expo/src/app/portal/(tabs)/health-record/forms/consents/index.tsx

@@ -2,12 +2,12 @@ import { Text, View } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 
+import { patientIdAtom } from "~/components/forms/welcome-form";
 import ConsentItem from "~/components/ui/health-record/consent-item";
 import { api } from "~/utils/api";
-import { patientAtom } from "../../allergies";
 
 export default function ConsentsPage() {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
 
   const { isLoading, isError, data, error } =
     api.patientMedicalHistory.getPatientConsents.useQuery({

apps/expo/src/app/portal/(tabs)/health-record/forms/goals.tsx

@@ -2,12 +2,12 @@ import { Text, View } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 
+import { patientIdAtom } from "~/components/forms/welcome-form";
 import GoalItem from "~/components/ui/health-record/goal-item";
 import { api } from "~/utils/api";
-import { patientAtom } from "../allergies";
 
 export default function GoalsPage() {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
 
   const { isLoading, isError, data, error } =
     api.patientMedicalHistory.getPatientGoals.useQuery({

apps/expo/src/app/portal/(tabs)/health-record/forms/questionnaires/index.tsx

@@ -3,12 +3,12 @@ import { useRouter } from "expo-router";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 
+import { patientIdAtom } from "~/components/forms/welcome-form";
 import QuestionnaireItem from "~/components/ui/health-record/questionnaire-item";
 import { api } from "~/utils/api";
-import { patientAtom } from "../../allergies";
 
 export default function QuestionnairesPage() {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
   const router = useRouter();
 
   const { isLoading, isError, data, error } =

apps/expo/src/app/portal/(tabs)/health-record/immunizations.tsx

@@ -2,12 +2,12 @@ import { Text, View } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 
+import { patientIdAtom } from "~/components/forms/welcome-form";
 import ImmunizationItem from "~/components/ui/health-record/immunization-item";
 import { api } from "~/utils/api";
-import { patientAtom } from "./allergies";
 
 export default function Immunizations() {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
 
   const { isLoading, isError, data, error } =
     api.patientMedicalHistory.getPatientImmunizations.useQuery({ patientId });

apps/expo/src/app/portal/(tabs)/health-record/medications.tsx

@@ -2,12 +2,12 @@ import { Text, View } from "react-native";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 
+import { patientIdAtom } from "~/components/forms/welcome-form";
 import MedicationItem from "~/components/ui/health-record/medication-item";
 import { api } from "~/utils/api";
-import { patientAtom } from "./allergies";
 
 export default function Medications() {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
 
   const { isLoading, isError, data, error } =
     api.patientMedicalHistory.getPatientMedications.useQuery({ patientId });

apps/expo/src/app/portal/(tabs)/health-record/test-results/index.tsx

@@ -3,12 +3,12 @@ import { useRouter } from "expo-router";
 import { FlashList } from "@shopify/flash-list";
 import { useAtom } from "jotai";
 
+import { patientIdAtom } from "~/components/forms/welcome-form";
 import TestItem from "~/components/ui/health-record/test-item";
 import { api } from "~/utils/api";
-import { patientAtom } from "../allergies";
 
 export default function TestResultsPage() {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
   const router = useRouter();
 
   const { isLoading, isError, data, error } =

apps/expo/src/components/forms/welcome-form.tsx

@@ -5,25 +5,26 @@ import * as Crypto from "expo-crypto";
 import { Link } from "expo-router";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAtom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
 import { ChevronDown } from "lucide-react-native";
 import { Controller, FormProvider, useForm } from "react-hook-form";
 
 import type { PatientIntake } from "@acme/shared/src/validators/forms";
 import { patientIntakeSchema } from "@acme/shared/src/validators/forms";
 
 import { api } from "~/utils/api";
+import { atomWithMMKV } from "~/utils/atom-with-mmkv";
 import { CustomCheckbox } from "../ui/forms/checkbox";
 import { DatePicker } from "../ui/forms/date-picker";
 import { Dropdown } from "../ui/forms/dropdown";
 import { TextInput } from "../ui/forms/text-input";
 import { uploadTestPdf } from "./upload-test";
 
-export const patientTestAtom = atomWithStorage("patientId", "");
+export const patientIdAtom = atomWithMMKV("patient_id", "");
+
 const UUID = Crypto.randomUUID();
 
 export const WelcomeForm = (props: { onSuccess?: () => void }) => {
-  const [patientId, setPatientId] = useAtom(patientTestAtom);
+  const [patientId, setPatientId] = useAtom(patientIdAtom);
   const [consentsCompleted, setConsentsCompleted] = useState(0);
 
   const form = useForm<PatientIntake>({
@@ -164,7 +165,7 @@ export const WelcomeForm = (props: { onSuccess?: () => void }) => {
     const patientDataId = response;
 
     if (patientDataId) {
-      // Set patientId in Async Storage
+      // Set patientId in MMKV
       setPatientId(patientDataId);
 
       // Prepare consent request bodies

apps/expo/src/utils/api.tsx

@@ -38,7 +38,8 @@ const getBaseUrl = () => {
       "Failed to get localhost. Please point to your production server.",
     );
   }
-  return `http://${localhost}:3000`;
+  return "https://7ffe-199-48-94-60.ngrok-free.app";
+  // return `http://${localhost}:3000`;
 };
 
 /**

apps/expo/src/utils/atom-with-mmkv.ts

@@ -0,0 +1,36 @@
+import { MMKV } from "react-native-mmkv";
+import { atomWithStorage, createJSONStorage } from "jotai/utils";
+
+const storage = new MMKV({
+  id: "mmkv.default",
+  encryptionKey: "secretKey",
+});
+
+function getItem<T>(key: string): T | null {
+  const value = storage.getString(key);
+  return value ? JSON.parse(value) : null;
+}
+
+function setItem<T>(key: string, value: T): void {
+  storage.set(key, JSON.stringify(value));
+}
+
+function removeItem(key: string): void {
+  storage.delete(key);
+}
+
+function clearAll(): void {
+  storage.clearAll();
+}
+
+export const atomWithMMKV = <T>(key: string, initialValue: T) =>
+  atomWithStorage<T>(
+    key,
+    initialValue,
+    createJSONStorage<T>(() => ({
+      getItem,
+      setItem,
+      removeItem,
+      clearAll,
+    })),
+  );

apps/expo/src/utils/session-store.ts

@@ -4,3 +4,10 @@ const key = "session_token";
 export const getToken = () => SecureStore.getItemAsync(key);
 export const deleteToken = () => SecureStore.deleteItemAsync(key);
 export const setToken = (v: string) => SecureStore.setItemAsync(key, v);
+
+// store patientId
+const patientIdKey = "patient_id";
+export const getPatientId = () => SecureStore.getItemAsync(patientIdKey);
+export const deletePatientId = () => SecureStore.deleteItemAsync(patientIdKey);
+export const setPatientId = (v: string) =>
+  SecureStore.setItemAsync(patientIdKey, v);

apps/nextjs/src/app/(authenticated)/onboarding/_components/allergies-form.tsx

@@ -26,10 +26,10 @@ import { useToast } from "@acme/ui/use-toast";
 
 import { api } from "~/trpc/react";
 import AllergenSelector from "./allergen-selector";
-import { patientAtom } from "./welcome-form";
+import { patientIdAtom } from "./welcome-form";
 
 export function AllergiesForm(props: { onSuccess?: () => void }) {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
   const toaster = useToast();
 
   const mutation = api.allergyIntolerance.submitAllergyIntolerance.useMutation({

apps/nextjs/src/app/(authenticated)/onboarding/_components/conditions-form.tsx

@@ -20,7 +20,7 @@ import {
 import { useToast } from "@acme/ui/use-toast";
 
 import { api } from "~/trpc/react";
-import { patientAtom } from "./welcome-form";
+import { patientIdAtom } from "./welcome-form";
 
 const conditions = [
   {
@@ -41,7 +41,7 @@ const conditions = [
 ] as const;
 
 export function ConditionsForm(props: { onSuccess?: () => void }) {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
   const toaster = useToast();
 
   const mutation = api.condition.submitCondition.useMutation({

apps/nextjs/src/app/(authenticated)/onboarding/_components/medications-form.tsx

@@ -12,10 +12,10 @@ import { useToast } from "@acme/ui/use-toast";
 
 import { api } from "~/trpc/react";
 import MedicationSelector from "./medication-selector";
-import { patientAtom } from "./welcome-form";
+import { patientIdAtom } from "./welcome-form";
 
 export function MedicationsForm(props: { onSuccess?: () => void }) {
-  const [patientId] = useAtom(patientAtom);
+  const [patientId] = useAtom(patientIdAtom);
   const toaster = useToast();
 
   const mutation = api.medication.submitMedicationStatement.useMutation({

apps/nextjs/src/app/(authenticated)/onboarding/_components/welcome-form.tsx

@@ -32,11 +32,11 @@ import { useToast } from "@acme/ui/use-toast";
 import { api } from "~/trpc/react";
 import { uploadTestPdf } from "./upload-test";
 
-export const patientAtom = atomWithStorage("patientId", "");
+export const patientIdAtom = atomWithStorage("patientId", "");
 const UUID = self.crypto.randomUUID();
 
 export const WelcomeForm = (props: { onSuccess?: () => void }) => {
-  const [patientId, setPatientId] = useAtom(patientAtom);
+  const [patientId, setPatientId] = useAtom(patientIdAtom);
   const [consentsCompleted, setConsentsCompleted] = useState(0);
   const toaster = useToast();