Merge pull request #55 from trevorpfiz/elektrikspark/ttp-91-refactor-…

…backend-to-be-more-reusable refactored backend with a reusable utility function. fixed frontend bugs for small screens.
trevorpfiz · Feb 7, 2024 · dd5ad85 · dd5ad85
2 parents ae64fb6 + c978c6c
commit dd5ad85
Show file tree

Hide file tree

Showing 51 changed files with 549 additions and 1,627 deletions.
diff --git a/apps/expo/app.config.ts b/apps/expo/app.config.ts
@@ -4,7 +4,7 @@ const defineConfig = (): ExpoConfig => ({
   name: "PatientX Starter",
   slug: "canvas-fhir",
   scheme: "expo",
-  version: "0.1.0",
+  version: "0.1.1",
   orientation: "portrait",
   icon: "./assets/icon.png",
   userInterfaceStyle: "light",
@@ -20,7 +20,7 @@ const defineConfig = (): ExpoConfig => ({
   ios: {
     bundleIdentifier: "com.trusttheprocess.patientx",
     supportsTablet: true,
-    buildNumber: "3",
+    buildNumber: "2",
   },
   android: {
     package: "com.trusttheprocess.patientx",

diff --git a/apps/expo/src/app/(main)/portal/(tabs)/index.tsx b/apps/expo/src/app/(main)/portal/(tabs)/index.tsx
@@ -1,4 +1,4 @@
-import { Text, View } from "react-native";
+import { ScrollView, Text, View } from "react-native";
 import { useAtom } from "jotai";
 
 import { patientIdAtom, patientNameAtom } from "~/app/(main)";
@@ -33,29 +33,31 @@ export default function Home() {
   }
 
   return (
-    <View className="flex-1 flex-col gap-4 bg-gray-100">
-      {/* Welcome message */}
-      <View className="bg-white px-6 py-6">
-        <Text className="text-3xl font-semibold text-black">
-          Good to see you, {patientName.firstName || "User"}
-        </Text>
-      </View>
+    <ScrollView className="flex-1 bg-gray-100">
+      <View className="flex-1 flex-col gap-4 bg-gray-100">
+        {/* Welcome message */}
+        <View className="bg-white px-6 py-6">
+          <Text className="text-3xl font-semibold text-black">
+            Good to see you, {patientName.firstName || "User"}
+          </Text>
+        </View>
 
-      {/* Next appointment */}
-      <View className="flex-col gap-2 px-6">
-        <Text className="text-xl font-semibold text-black">
-          Your next appointment
-        </Text>
-        <NextAppointment />
-      </View>
-      {/* Submenu buttons */}
-      <View>
-        <SubmenuButtons />
-      </View>
-      {/* Tasks */}
-      <View className="flex-1 pb-6">
-        <Tasks />
+        {/* Next appointment */}
+        <View className="flex-col gap-2 px-6">
+          <Text className="text-xl font-semibold text-black">
+            Your next appointment
+          </Text>
+          <NextAppointment />
+        </View>
+        {/* Submenu buttons */}
+        <View>
+          <SubmenuButtons />
+        </View>
+        {/* Tasks */}
+        <View className="flex-1 pb-6">
+          <Tasks />
+        </View>
       </View>
-    </View>
+    </ScrollView>
   );
 }
diff --git a/apps/expo/src/components/next-appointment.tsx b/apps/expo/src/components/next-appointment.tsx
@@ -1,11 +1,20 @@
 import React, { useMemo } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
+import { Calendar } from "react-native-calendars";
 import { useRouter } from "expo-router";
 import { useAtom } from "jotai";
 
 import { patientIdAtom } from "~/app/(main)";
 import { AppointmentCard } from "~/components/ui/cards/appointment-card";
 import { LoaderComponent } from "~/components/ui/loader";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/rn-ui/components/ui/card";
 import { api } from "~/utils/api";
 import { mapPractitionerIdsToNames } from "~/utils/scheduling";
 
@@ -45,7 +54,7 @@ export default function NextAppointment() {
   }, [appointmentQuery.data?.entry]);
 
   if (isLoading) {
-    return <LoaderComponent className="mt-12" />;
+    return <LoaderComponent className="mb-14 mt-16" />;
   }
 
   if (isError) {
@@ -72,7 +81,13 @@ export default function NextAppointment() {
           practitionerInfo={practitionerInfo}
         />
       ) : (
-        <Text className="p-8">{`No appointments found.`}</Text>
+        <Card className="shadow-none">
+          <CardContent className="px-12 py-12">
+            <Text className="text-lg">
+              You do not have any appointments scheduled at this time
+            </Text>
+          </CardContent>
+        </Card>
       )}
     </TouchableOpacity>
   );

diff --git a/apps/expo/src/components/tasks.tsx b/apps/expo/src/components/tasks.tsx
@@ -67,7 +67,7 @@ export default function Tasks() {
               <TouchableOpacity activeOpacity={0.8} className="flex-1">
                 <View
                   className={cn(
-                    "ml-4 w-52 flex-1 flex-col justify-between gap-4 rounded-xl p-2",
+                    "ml-4 w-52 flex-1 flex-col justify-between gap-16 rounded-xl p-2",
                     {
                       "border-blue-400 bg-blue-500":
                         item.resource.status === "requested",
@@ -78,7 +78,7 @@ export default function Tasks() {
                     },
                   )}
                 >
-                  <Text className="text-sm font-medium text-white">
+                  <Text className="line-clamp-4 text-sm font-medium text-white">
                     {item.resource.description}
                   </Text>
                   {item.resource.status !== "completed" && (

diff --git a/apps/expo/src/components/ui/home-svg.tsx b/apps/expo/src/components/ui/home-svg.tsx
@@ -1,53 +1,65 @@
 import * as React from "react";
+import { Dimensions, View } from "react-native";
 import type { SvgProps } from "react-native-svg";
 import Svg, { Path } from "react-native-svg";
 
+const originalWidth = 692.68;
+const originalHeight = 520.455;
+const aspectRatio = originalWidth / originalHeight;
+
 const SvgComponent = (props: SvgProps) => (
-  <Svg width={692.68} height={520.455} {...props}>
-    <Path
-      fill="#3f3d56"
-      d="M0 518.718c0 .872.7 1.571 1.571 1.571H691.11c.872 0 1.571-.7 1.571-1.57 0-.872-.7-1.572-1.57-1.572H1.57c-.871 0-1.571.7-1.571 1.571Z"
-    />
-    <Path
-      fill="#2f2e41"
-      d="M304.293 474.426h30.425l3.575 16s23 27-3 27-70 8-70-2 32-16 32-16l7-25ZM495.518 398.068l-.573-30.42 15.93-3.876s26.562-23.504 27.051 2.491 9.317 69.837-.681 70.026-16.6-31.693-16.6-31.693l-25.127-6.528Z"
-    />
-    <Path
-      fill="#ffb6b6"
-      d="m405.212 58.98 6.207 22.965-27.93 14.275-10.55-30.412 32.273-6.827z"
-    />
-    <Path
-      fill="#ffb6b6"
-      d="M386.956 5.875c18.057 0 32.696 14.638 32.696 32.696s-14.639 32.696-32.696 32.696-32.697-14.639-32.697-32.696S368.9 5.875 386.956 5.875ZM424.403 205.065a23.095 23.095 0 0 1 7.587-7.84l17.846-34.176 16.014 8.967-19.827 33.702a23.094 23.094 0 0 1-3.427 10.354c-4.78 7.898-12.725 11.832-17.75 8.792s-5.223-11.905-.443-19.8Z"
-    />
-    <Path
-      fill="#2f2e41"
-      d="m365.293 204.426 47.865-.315s21.768 40-2.232 81l-4 84 100-5V400.4s-130 17.712-135 7.712-15-72.428-15-72.428l-10.098 17.77-9.902 128.658h-30.917l-6.803-139 59.72-111 6.367-27.685Z"
-    />
-    <Path
-      fill="#3b82f6"
-      d="m376.684 77.762 36.633-2.442 13.432 41.517-13.432 87.92-50.065 8.547-10.99-91.582 24.422-43.96z"
-    />
-    <Path
-      fill="#3b82f6"
-      d="m414.39 81.426-3.515 40.296 32.97 19.537-12.552 45.167 24.762 13.446s25.643-47.623 20.759-63.497-62.425-54.95-62.425-54.95Z"
-    />
-    <Path
-      d="M405.327 117.213s.392 71.433-15.821 73.323-27.49-2.646-27.49-2.646"
-      opacity={0.1}
-    />
-    <Path
-      fill="#ffb6b6"
-      d="M299.11 150.778a23.095 23.095 0 0 1 10.37 3.393l38.539 1.094-1.057 18.323-38.98-3.084a23.094 23.094 0 0 1-10.81 1.45c-9.193-.843-16.207-6.266-15.67-12.115s8.42-9.905 17.608-9.061Z"
-    />
-    <Path
-      fill="#3b82f6"
-      d="m319.111 173.474-.407-.159 5.195-21.387 34.026-.177 6.36-52.698c1.246-10.334 10.036-18.127 20.445-18.127a20.63 20.63 0 0 1 15.34 6.847 20.602 20.602 0 0 1 5.135 15.973c-3.888 35.565-11.122 78.652-23.508 81.956-2.355.628-5.113.902-8.136.902-20.417 0-52.88-12.52-54.45-13.13Z"
-    />
-    <Path
-      fill="#2f2e41"
-      d="M367.962 21.603c-2.345 4.055-4.784 8.218-8.494 11.08-3.71 2.86-9.05 4.132-13.135 1.839-4.015-2.254-5.743-7.487-4.754-11.984s4.242-8.233 8.07-10.79 8.233-4.092 12.583-5.6c6.649-2.304 13.347-4.62 20.311-5.62 18.999-2.73 39.18 5.294 51.118 20.323 5.637 7.095 9.433 15.444 13.172 23.7 3.057 6.747 6.181 13.854 5.64 21.242-.396 5.417-2.648 11.35.268 15.932 1.469 2.308 3.975 3.707 6.008 5.538s3.702 4.67 2.698 7.215c-1.027 2.605-4.265 3.544-5.992 5.748-2.961 3.777-.438 9.303 2.546 13.062s6.647 7.974 5.703 12.68c-.68 3.394-3.764 5.922-7.098 6.855s-6.89.538-10.294-.09c-16.64-3.074-32.195-11.74-43.566-24.272s-18.488-28.854-19.935-45.713c-.636-7.423-.212-14.962-1.675-22.267-1.462-7.306-5.25-14.66-11.914-17.993"
-    />
-  </Svg>
+  <View style={{ width: Dimensions.get("window").width * 1.5, aspectRatio }}>
+    <Svg
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${originalWidth} ${originalHeight}`}
+      {...props}
+    >
+      <Path
+        fill="#3f3d56"
+        d="M0 518.718c0 .872.7 1.571 1.571 1.571H691.11c.872 0 1.571-.7 1.571-1.57 0-.872-.7-1.572-1.57-1.572H1.57c-.871 0-1.571.7-1.571 1.571Z"
+      />
+      <Path
+        fill="#2f2e41"
+        d="M304.293 474.426h30.425l3.575 16s23 27-3 27-70 8-70-2 32-16 32-16l7-25ZM495.518 398.068l-.573-30.42 15.93-3.876s26.562-23.504 27.051 2.491 9.317 69.837-.681 70.026-16.6-31.693-16.6-31.693l-25.127-6.528Z"
+      />
+      <Path
+        fill="#ffb6b6"
+        d="m405.212 58.98 6.207 22.965-27.93 14.275-10.55-30.412 32.273-6.827z"
+      />
+      <Path
+        fill="#ffb6b6"
+        d="M386.956 5.875c18.057 0 32.696 14.638 32.696 32.696s-14.639 32.696-32.696 32.696-32.697-14.639-32.697-32.696S368.9 5.875 386.956 5.875ZM424.403 205.065a23.095 23.095 0 0 1 7.587-7.84l17.846-34.176 16.014 8.967-19.827 33.702a23.094 23.094 0 0 1-3.427 10.354c-4.78 7.898-12.725 11.832-17.75 8.792s-5.223-11.905-.443-19.8Z"
+      />
+      <Path
+        fill="#2f2e41"
+        d="m365.293 204.426 47.865-.315s21.768 40-2.232 81l-4 84 100-5V400.4s-130 17.712-135 7.712-15-72.428-15-72.428l-10.098 17.77-9.902 128.658h-30.917l-6.803-139 59.72-111 6.367-27.685Z"
+      />
+      <Path
+        fill="#3b82f6"
+        d="m376.684 77.762 36.633-2.442 13.432 41.517-13.432 87.92-50.065 8.547-10.99-91.582 24.422-43.96z"
+      />
+      <Path
+        fill="#3b82f6"
+        d="m414.39 81.426-3.515 40.296 32.97 19.537-12.552 45.167 24.762 13.446s25.643-47.623 20.759-63.497-62.425-54.95-62.425-54.95Z"
+      />
+      <Path
+        d="M405.327 117.213s.392 71.433-15.821 73.323-27.49-2.646-27.49-2.646"
+        opacity={0.1}
+      />
+      <Path
+        fill="#ffb6b6"
+        d="M299.11 150.778a23.095 23.095 0 0 1 10.37 3.393l38.539 1.094-1.057 18.323-38.98-3.084a23.094 23.094 0 0 1-10.81 1.45c-9.193-.843-16.207-6.266-15.67-12.115s8.42-9.905 17.608-9.061Z"
+      />
+      <Path
+        fill="#3b82f6"
+        d="m319.111 173.474-.407-.159 5.195-21.387 34.026-.177 6.36-52.698c1.246-10.334 10.036-18.127 20.445-18.127a20.63 20.63 0 0 1 15.34 6.847 20.602 20.602 0 0 1 5.135 15.973c-3.888 35.565-11.122 78.652-23.508 81.956-2.355.628-5.113.902-8.136.902-20.417 0-52.88-12.52-54.45-13.13Z"
+      />
+      <Path
+        fill="#2f2e41"
+        d="M367.962 21.603c-2.345 4.055-4.784 8.218-8.494 11.08-3.71 2.86-9.05 4.132-13.135 1.839-4.015-2.254-5.743-7.487-4.754-11.984s4.242-8.233 8.07-10.79 8.233-4.092 12.583-5.6c6.649-2.304 13.347-4.62 20.311-5.62 18.999-2.73 39.18 5.294 51.118 20.323 5.637 7.095 9.433 15.444 13.172 23.7 3.057 6.747 6.181 13.854 5.64 21.242-.396 5.417-2.648 11.35.268 15.932 1.469 2.308 3.975 3.707 6.008 5.538s3.702 4.67 2.698 7.215c-1.027 2.605-4.265 3.544-5.992 5.748-2.961 3.777-.438 9.303 2.546 13.062s6.647 7.974 5.703 12.68c-.68 3.394-3.764 5.922-7.098 6.855s-6.89.538-10.294-.09c-16.64-3.074-32.195-11.74-43.566-24.272s-18.488-28.854-19.935-45.713c-.636-7.423-.212-14.962-1.675-22.267-1.462-7.306-5.25-14.66-11.914-17.993"
+      />
+    </Svg>
+  </View>
 );
 export default SvgComponent;
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "create-t3-turbo",
+  "name": "patientx-fhir-starter",
   "private": true,
   "engines": {
     "node": ">=18.18.2"