From 515c4d472e41f99f406cd625b6db1188b780ce82 Mon Sep 17 00:00:00 2001
From: oliviaseds <osedarski@gmail.com>
Date: Sun, 17 Mar 2024 11:26:30 -0400
Subject: [PATCH 01/12] feat: pass task type param to task creation screen

---
 client/navigation/AppNavigation.tsx | 14 +++++++++++---
 client/screens/TaskCreation.tsx     | 26 +++++++++++++++++++++++++
 client/screens/TaskType.tsx         |  6 +++++-
 client/types/task-creation.json     | 20 +++++++++++++++++++
 client/types/type.ts                | 30 ++---------------------------
 5 files changed, 64 insertions(+), 32 deletions(-)
 create mode 100644 client/screens/TaskCreation.tsx
 create mode 100644 client/types/task-creation.json

diff --git a/client/navigation/AppNavigation.tsx b/client/navigation/AppNavigation.tsx
index c407636..c3d05f3 100644
--- a/client/navigation/AppNavigation.tsx
+++ b/client/navigation/AppNavigation.tsx
@@ -4,15 +4,17 @@ import { NavigationProp } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import LoginPage from '../screens/LoginPage';
+import { TaskCreation } from '../screens/TaskCreation';
 import { TaskType } from '../screens/TaskType';
 import { AppStackBottomTabNavigator } from './AppStackBottomTabNavigator';
 
 export type AppStackParamList = {
+  TaskType: undefined;
   Main: undefined;
   Home: undefined;
   Login: undefined;
   Profile: undefined;
-  TaskType: undefined;
+  TaskCreation: { type: string };
 };
 
 export type AppStackNavigation = NavigationProp<AppStackParamList>;
@@ -22,6 +24,11 @@ const AppStack = createNativeStackNavigator<AppStackParamList>();
 export function AppNavigation() {
   return (
     <AppStack.Navigator>
+      <AppStack.Screen
+        name="TaskType"
+        options={{ headerShown: false }}
+        component={TaskType}
+      />
       <AppStack.Screen
         name="Login"
         options={{ headerShown: true }}
@@ -32,10 +39,11 @@ export function AppNavigation() {
         options={{ headerShown: false }}
         component={AppStackBottomTabNavigator}
       />
+
       <AppStack.Screen
-        name="TaskType"
+        name="TaskCreation"
         options={{ headerShown: false }}
-        component={TaskType}
+        component={TaskCreation}
       />
     </AppStack.Navigator>
   );
diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx
new file mode 100644
index 0000000..9330f74
--- /dev/null
+++ b/client/screens/TaskCreation.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { RouteProp, useRoute } from '@react-navigation/native';
+
+import { BackButton } from '../components/TaskType/BackButton';
+
+type ParamList = {
+  mt: {
+    type: string;
+  };
+};
+
+export function TaskCreation() {
+  const route = useRoute<RouteProp<ParamList, 'mt'>>();
+  const { type } = route.params;
+
+  return (
+    <View className="mt-10">
+      <View>
+        <BackButton />
+      </View>
+      <Text>{type}</Text>
+    </View>
+  );
+}
diff --git a/client/screens/TaskType.tsx b/client/screens/TaskType.tsx
index 35bc59d..2ac1f86 100644
--- a/client/screens/TaskType.tsx
+++ b/client/screens/TaskType.tsx
@@ -99,7 +99,11 @@ export function TaskType() {
         renderItem={({ item }) => (
           <TouchableOpacity
             className="m-2 h-[50px] overflow-hidden rounded-xl"
-            onPress={() => navigation.navigate('New ' + item + ' Task')}
+            onPress={() =>
+              navigation.navigate('TaskCreation', {
+                type: JSON.stringify(item)
+              })
+            }
           >
             <Button
               className="m-2 h-[50px] items-center justify-center rounded-xl"
diff --git a/client/types/task-creation.json b/client/types/task-creation.json
new file mode 100644
index 0000000..62596e1
--- /dev/null
+++ b/client/types/task-creation.json
@@ -0,0 +1,20 @@
+{
+  "Medication Management": {
+    "Header": "Medication Management"
+  },
+  "Physician Appointment": {
+    "Header": "Physician Appointment"
+  },
+  "Grooming": {
+    "Header": "Grooming"
+  },
+  "Family Conversations": {
+    "Header": "Family Conversations"
+  },
+  "Groceries, Shopping, & Errands": {},
+  "Pay Bills": {},
+  "Diet & Nutrition": {},
+  "Activities": {},
+  "Health Insurance": {},
+  "Other": {}
+}
diff --git a/client/types/type.ts b/client/types/type.ts
index 985283d..0af3669 100644
--- a/client/types/type.ts
+++ b/client/types/type.ts
@@ -1,22 +1,13 @@
 export enum TypeOfTask {
   MEDICATION = 'Medication Management',
   APPOINTMENT = 'Physician Appointment',
-  // LABS = 'Labs & Outpatient Services',
-  // REHAB = 'Rehab & Home Therapies',
-  // TRANSITIONAL = 'Transitional Care',
   GROOMING = 'Grooming',
   CONVERSATIONS = 'Family Conversations',
-  // TRANSPORTATION = 'Transportation',
-  // RESPITE = 'Respite',
   ERRANDS = 'Groceries, Shopping, & Errands',
   BILLS = 'Pay Bills',
-  // PRESCRIPTION = 'Prescription Management',
-  // SAFETY = 'Home Safety',
   DIET = 'Diet & Nutrition',
   ACTIVITIES = 'Activities',
   INSURANCE = 'Health Insurance',
-  // FINANCIAL = 'Financial',
-  // LEGAL = 'Legal',
   OTHER = 'Other'
 }
 
@@ -34,33 +25,16 @@ export const categoryToTypeMap: Record<Category, TypeOfTask[]> = {
   [Category.HEALTH]: [
     TypeOfTask.MEDICATION,
     TypeOfTask.APPOINTMENT,
-    // TypeOfTask.LABS,
-    // TypeOfTask.REHAB,
-    // TypeOfTask.TRANSITIONAL,
     TypeOfTask.GROOMING,
-    // TypeOfTask.PRESCRIPTION,
     TypeOfTask.DIET
   ],
   [Category.PERSONAL]: [
     TypeOfTask.GROOMING,
     TypeOfTask.CONVERSATIONS,
-    // TypeOfTask.TRANSPORTATION,
-    // TypeOfTask.RESPITE,
     TypeOfTask.ERRANDS,
-    // TypeOfTask.SAFETY,
     TypeOfTask.BILLS
   ],
-  [Category.HOME]: [
-    // TypeOfTask.REHAB,
-    // TypeOfTask.SAFETY,
-    TypeOfTask.DIET,
-    TypeOfTask.ACTIVITIES
-  ],
-  [Category.FINANCIAL]: [
-    TypeOfTask.BILLS,
-    TypeOfTask.INSURANCE
-    // TypeOfTask.FINANCIAL,
-    // TypeOfTask.LEGAL
-  ],
+  [Category.HOME]: [TypeOfTask.DIET, TypeOfTask.ACTIVITIES],
+  [Category.FINANCIAL]: [TypeOfTask.BILLS, TypeOfTask.INSURANCE],
   [Category.OTHER]: [TypeOfTask.OTHER]
 };

From 376a0cc7979fb685e5ccf92f74597c90dc8a5186 Mon Sep 17 00:00:00 2001
From: oliviaseds <osedarski@gmail.com>
Date: Mon, 18 Mar 2024 09:27:44 -0400
Subject: [PATCH 02/12] feat: outline json doc, update enum

---
 client/types/task-creation.json | 89 ++++++++++++++++++++++++++++-----
 client/types/type.ts            |  8 +--
 2 files changed, 81 insertions(+), 16 deletions(-)

diff --git a/client/types/task-creation.json b/client/types/task-creation.json
index 62596e1..9dd6cc2 100644
--- a/client/types/task-creation.json
+++ b/client/types/task-creation.json
@@ -1,20 +1,85 @@
 {
   "Medication Management": {
-    "Header": "Medication Management"
+    "Header": "Medication Management",
+    "Body": {
+      "Drug Name": "Line text input",
+      "Drug Form": {
+        "Pills": "Radio button",
+        "Liquid": "Radio button",
+        "Shot": "Radio button"
+      },
+      "Prescribing Physician": "Line text input",
+      "Care Instructions": "Paragraph text input"
+    }
   },
-  "Physician Appointment": {
-    "Header": "Physician Appointment"
+  "Physician Appointments": {
+    "Header": "Physician Appointments",
+    "Body": {
+      "Physician Name": "Line text input",
+      "Personal Information": "N/A",
+      "Hospital Affiliation": "Line text input",
+      "Speciality": "Line text input"
+    }
   },
   "Grooming": {
-    "Header": "Grooming"
+    "Header": "Grooming",
+    "Body": {
+      "Grooming Type": {
+        "Bathing": "Radio button",
+        "Toileting": "Radio button"
+      },
+      "Care Instructions": "Paragraph text input"
+    }
   },
   "Family Conversations": {
-    "Header": "Family Conversations"
-  },
-  "Groceries, Shopping, & Errands": {},
-  "Pay Bills": {},
-  "Diet & Nutrition": {},
-  "Activities": {},
-  "Health Insurance": {},
-  "Other": {}
+    "Header": "Family Conversations",
+    "Body": {
+      "Topic": "Line text input",
+      "Notes": "Paragraph text input"
+    }
+  },
+  "Shopping & Errands": {
+    "Header": "Shopping & Errands",
+    "Body": {
+      "Store": "Line text input",
+      "Instructions": "Paragraph text input"
+    }
+  },
+  "Pay Bills": {
+    "Header": "Pay Bills",
+    "Body": {
+      "Bill Reveicer Name": "Line text input",
+      "Personal Information": "N/A",
+      "Proxy Agent": "Line text input"
+    }
+  },
+  "Diet": {
+    "Header": "Diet",
+    "Body": {
+      "Instructions": "Paragraph text input"
+    }
+  },
+  "Activities": {
+    "Header": "Activities",
+    "Body": {
+      "Instructions": "Paragraph text input"
+    }
+  },
+  "Health Insurance": {
+    "Header": "Health Insurance",
+    "Body": {
+      "ID Number": "Line text input",
+      "Provider": "Line text input",
+      "Proxy Agent": "Line text input"
+    }
+  },
+  "Other": {
+    "Header": "Other",
+    "Body": {
+      "Purpose": "Line text input",
+      "Personal Information": "N/A",
+      "Website": "Line text input",
+      "Notes": "Paragraph text input"
+    }
+  }
 }
diff --git a/client/types/type.ts b/client/types/type.ts
index 0af3669..e4e599c 100644
--- a/client/types/type.ts
+++ b/client/types/type.ts
@@ -1,11 +1,11 @@
 export enum TypeOfTask {
   MEDICATION = 'Medication Management',
-  APPOINTMENT = 'Physician Appointment',
+  APPOINTMENTS = 'Physician Appointments',
   GROOMING = 'Grooming',
   CONVERSATIONS = 'Family Conversations',
-  ERRANDS = 'Groceries, Shopping, & Errands',
+  ERRANDS = 'Shopping & Errands',
   BILLS = 'Pay Bills',
-  DIET = 'Diet & Nutrition',
+  DIET = 'Diet',
   ACTIVITIES = 'Activities',
   INSURANCE = 'Health Insurance',
   OTHER = 'Other'
@@ -24,7 +24,7 @@ export const categoryToTypeMap: Record<Category, TypeOfTask[]> = {
   [Category.ALL]: [],
   [Category.HEALTH]: [
     TypeOfTask.MEDICATION,
-    TypeOfTask.APPOINTMENT,
+    TypeOfTask.APPOINTMENTS,
     TypeOfTask.GROOMING,
     TypeOfTask.DIET
   ],

From eba4ce360e3264d6ad6a59ddfba4f22b8e61c9b6 Mon Sep 17 00:00:00 2001
From: oliviaseds <osedarski@gmail.com>
Date: Mon, 18 Mar 2024 19:10:39 -0400
Subject: [PATCH 03/12] fix: so Matt can see

---
 client/screens/TaskCreation.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx
index 9330f74..d376b9a 100644
--- a/client/screens/TaskCreation.tsx
+++ b/client/screens/TaskCreation.tsx
@@ -4,6 +4,7 @@ import { Text, View } from 'react-native';
 import { RouteProp, useRoute } from '@react-navigation/native';
 
 import { BackButton } from '../components/TaskType/BackButton';
+import styleJsonData from '../types/task-creation.json';
 
 type ParamList = {
   mt: {
@@ -11,10 +12,28 @@ type ParamList = {
   };
 };
 
+type StyleJsonType = {
+  [key: string]: {
+    Header: string;
+    Body: {
+      [key: string]:
+        | string
+        | {
+            [key: string]: string;
+          };
+    };
+  };
+};
+
 export function TaskCreation() {
   const route = useRoute<RouteProp<ParamList, 'mt'>>();
   const { type } = route.params;
 
+  const styleJson: StyleJsonType = styleJsonData;
+  console.log(styleJson);
+  console.log(type);
+  console.log(styleJson[type]);
+
   return (
     <View className="mt-10">
       <View>

From 47ae95f9b5e0c8fcc696c8169ee741cc8e448902 Mon Sep 17 00:00:00 2001
From: oliviaseds <osedarski@gmail.com>
Date: Tue, 19 Mar 2024 09:14:37 -0400
Subject: [PATCH 04/12] feat: parse JSON and fix format to maintain order

---
 .../{TaskType => nav_buttons}/BackButton.tsx  |  0
 .../{TaskType => nav_buttons}/CloseButton.tsx |  0
 client/navigation/AppNavigation.tsx           |  2 +-
 client/screens/TaskCreation.tsx               | 45 +++++-----
 client/screens/TaskType.tsx                   |  6 +-
 client/tsconfig.json                          |  3 +-
 client/types/task-creation-json.ts            | 78 +++++++++++++++++
 client/types/task-creation.json               | 85 -------------------
 8 files changed, 104 insertions(+), 115 deletions(-)
 rename client/components/{TaskType => nav_buttons}/BackButton.tsx (100%)
 rename client/components/{TaskType => nav_buttons}/CloseButton.tsx (100%)
 create mode 100644 client/types/task-creation-json.ts
 delete mode 100644 client/types/task-creation.json

diff --git a/client/components/TaskType/BackButton.tsx b/client/components/nav_buttons/BackButton.tsx
similarity index 100%
rename from client/components/TaskType/BackButton.tsx
rename to client/components/nav_buttons/BackButton.tsx
diff --git a/client/components/TaskType/CloseButton.tsx b/client/components/nav_buttons/CloseButton.tsx
similarity index 100%
rename from client/components/TaskType/CloseButton.tsx
rename to client/components/nav_buttons/CloseButton.tsx
diff --git a/client/navigation/AppNavigation.tsx b/client/navigation/AppNavigation.tsx
index c3d05f3..5d95e9d 100644
--- a/client/navigation/AppNavigation.tsx
+++ b/client/navigation/AppNavigation.tsx
@@ -14,7 +14,7 @@ export type AppStackParamList = {
   Home: undefined;
   Login: undefined;
   Profile: undefined;
-  TaskCreation: { type: string };
+  TaskCreation: { taskType: string };
 };
 
 export type AppStackNavigation = NavigationProp<AppStackParamList>;
diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx
index d376b9a..e18f079 100644
--- a/client/screens/TaskCreation.tsx
+++ b/client/screens/TaskCreation.tsx
@@ -3,43 +3,38 @@ import { Text, View } from 'react-native';
 
 import { RouteProp, useRoute } from '@react-navigation/native';
 
-import { BackButton } from '../components/TaskType/BackButton';
-import styleJsonData from '../types/task-creation.json';
+import { BackButton } from '../components/nav_buttons/BackButton';
+import { TaskCreationJson } from '../types/task-creation-json.ts';
 
 type ParamList = {
   mt: {
-    type: string;
-  };
-};
-
-type StyleJsonType = {
-  [key: string]: {
-    Header: string;
-    Body: {
-      [key: string]:
-        | string
-        | {
-            [key: string]: string;
-          };
-    };
+    taskType: string;
   };
 };
 
 export function TaskCreation() {
   const route = useRoute<RouteProp<ParamList, 'mt'>>();
-  const { type } = route.params;
-
-  const styleJson: StyleJsonType = styleJsonData;
-  console.log(styleJson);
-  console.log(type);
-  console.log(styleJson[type]);
+  const { taskType } = route.params;
+  const header = TaskCreationJson.types.find((t) =>
+    taskType.includes(t.Header)
+  )?.Header;
+  const body = TaskCreationJson.types.find((t) =>
+    taskType.includes(t.Header)
+  )?.Body;
+  console.log(body);
 
   return (
     <View className="mt-10">
-      <View>
-        <BackButton />
+      <View className="flex w-full flex-row items-center justify-center">
+        <View className="mr-[95px]">
+          <BackButton />
+        </View>
+        <Text className="mr-auto self-center text-center text-carewallet-gray">
+          Step 1 of 2
+        </Text>
       </View>
-      <Text>{type}</Text>
+
+      <Text className="text-center text-2xl font-bold">{header}</Text>
     </View>
   );
 }
diff --git a/client/screens/TaskType.tsx b/client/screens/TaskType.tsx
index 2ac1f86..9cfdfe7 100644
--- a/client/screens/TaskType.tsx
+++ b/client/screens/TaskType.tsx
@@ -17,8 +17,8 @@ import DropDownPicker from 'react-native-dropdown-picker';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Button, Text } from 'react-native-paper';
 
-import { BackButton } from '../components/TaskType/BackButton';
-import { CloseButton } from '../components/TaskType/CloseButton';
+import { BackButton } from '../components/nav_buttons/BackButton';
+import { CloseButton } from '../components/nav_buttons/CloseButton';
 import { AppStackNavigation } from '../navigation/AppNavigation';
 import { Category, categoryToTypeMap, TypeOfTask } from '../types/type';
 
@@ -101,7 +101,7 @@ export function TaskType() {
             className="m-2 h-[50px] overflow-hidden rounded-xl"
             onPress={() =>
               navigation.navigate('TaskCreation', {
-                type: JSON.stringify(item)
+                taskType: JSON.stringify(item)
               })
             }
           >
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 7886cc1..6543daf 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -2,6 +2,7 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "jsx": "react",
-    "strict": true
+    "strict": true,
+    "allowImportingTsExtensions": true
   }
 }
diff --git a/client/types/task-creation-json.ts b/client/types/task-creation-json.ts
new file mode 100644
index 0000000..5a89c9c
--- /dev/null
+++ b/client/types/task-creation-json.ts
@@ -0,0 +1,78 @@
+export const TaskCreationJson = {
+  types: [
+    {
+      Header: 'Medication Management',
+      Body: [
+        { 'Drug Name': 'Line text input' },
+        {
+          'Drug Form': ['Pills', 'Liquid', 'Shot']
+        },
+        { Diagnosis: 'Line text input' },
+        { 'Prescribing Physician': 'Line text input' },
+        { 'Care Instructions': 'Paragraph text input' }
+      ]
+    },
+    {
+      Header: 'Physician Appointments',
+      Body: [
+        { 'Physician Name': 'Line text input' },
+        { Address: '' },
+        { 'Hospital Affiliation': 'Line text input' },
+        { Speciality: 'Line text input' }
+      ]
+    },
+    {
+      Header: 'Grooming',
+      Body: [
+        { 'Grooming Type': ['Bathing', 'Toileting'] },
+        { 'Care Instructions': 'Paragraph text input' }
+      ]
+    },
+    {
+      Header: 'Family Conversations',
+      Body: [{ Topic: 'Line text input' }, { Notes: 'Paragraph text input' }]
+    },
+    {
+      Header: 'Shopping & Errands',
+      Body: [
+        { Store: 'Line text input' },
+        { Instructions: 'Paragraph text input' }
+      ]
+    },
+    {
+      Header: 'Pay Bills',
+      Body: [
+        { 'Bill Reveicer Name': 'Line text input' },
+        { Address: '' },
+        { 'Proxy Agent': 'Line text input' }
+      ]
+    },
+    {
+      Header: 'Diet',
+      Body: {
+        Instructions: 'Paragraph text input'
+      }
+    },
+    {
+      Header: 'Activities',
+      Body: [{ Instructions: 'Paragraph text input' }]
+    },
+    {
+      Header: 'Health Insurance',
+      Body: [
+        { 'ID Number': 'Line text input' },
+        { Provider: 'Line text input' },
+        { 'Proxy Agent': 'Line text input' }
+      ]
+    },
+    {
+      Header: 'Other',
+      Body: [
+        { Purpose: 'Line text input' },
+        { Address: '' },
+        { Website: 'Line text input' },
+        { Notes: 'Paragraph text input' }
+      ]
+    }
+  ]
+};
diff --git a/client/types/task-creation.json b/client/types/task-creation.json
deleted file mode 100644
index 9dd6cc2..0000000
--- a/client/types/task-creation.json
+++ /dev/null
@@ -1,85 +0,0 @@
-{
-  "Medication Management": {
-    "Header": "Medication Management",
-    "Body": {
-      "Drug Name": "Line text input",
-      "Drug Form": {
-        "Pills": "Radio button",
-        "Liquid": "Radio button",
-        "Shot": "Radio button"
-      },
-      "Prescribing Physician": "Line text input",
-      "Care Instructions": "Paragraph text input"
-    }
-  },
-  "Physician Appointments": {
-    "Header": "Physician Appointments",
-    "Body": {
-      "Physician Name": "Line text input",
-      "Personal Information": "N/A",
-      "Hospital Affiliation": "Line text input",
-      "Speciality": "Line text input"
-    }
-  },
-  "Grooming": {
-    "Header": "Grooming",
-    "Body": {
-      "Grooming Type": {
-        "Bathing": "Radio button",
-        "Toileting": "Radio button"
-      },
-      "Care Instructions": "Paragraph text input"
-    }
-  },
-  "Family Conversations": {
-    "Header": "Family Conversations",
-    "Body": {
-      "Topic": "Line text input",
-      "Notes": "Paragraph text input"
-    }
-  },
-  "Shopping & Errands": {
-    "Header": "Shopping & Errands",
-    "Body": {
-      "Store": "Line text input",
-      "Instructions": "Paragraph text input"
-    }
-  },
-  "Pay Bills": {
-    "Header": "Pay Bills",
-    "Body": {
-      "Bill Reveicer Name": "Line text input",
-      "Personal Information": "N/A",
-      "Proxy Agent": "Line text input"
-    }
-  },
-  "Diet": {
-    "Header": "Diet",
-    "Body": {
-      "Instructions": "Paragraph text input"
-    }
-  },
-  "Activities": {
-    "Header": "Activities",
-    "Body": {
-      "Instructions": "Paragraph text input"
-    }
-  },
-  "Health Insurance": {
-    "Header": "Health Insurance",
-    "Body": {
-      "ID Number": "Line text input",
-      "Provider": "Line text input",
-      "Proxy Agent": "Line text input"
-    }
-  },
-  "Other": {
-    "Header": "Other",
-    "Body": {
-      "Purpose": "Line text input",
-      "Personal Information": "N/A",
-      "Website": "Line text input",
-      "Notes": "Paragraph text input"
-    }
-  }
-}

From d8d06b916fb27ed4208f37e814f6866856989b0b Mon Sep 17 00:00:00 2001
From: narayansharma-21 <97.sharman@gmail.com>
Date: Tue, 19 Mar 2024 14:06:41 -0400
Subject: [PATCH 05/12] feat(AddressComponent.tsx): added address component to
 be reused throughout taskCreation.tsx

---
 .../task_creation/AddressComponent.tsx        | 52 +++++++++++++++++++
 client/screens/TaskCreation.tsx               |  3 +-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 client/components/task_creation/AddressComponent.tsx

diff --git a/client/components/task_creation/AddressComponent.tsx b/client/components/task_creation/AddressComponent.tsx
new file mode 100644
index 0000000..e25f415
--- /dev/null
+++ b/client/components/task_creation/AddressComponent.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Text, TextInput, View } from 'react-native';
+
+export function AddressComponent() {
+  return (
+    <View className="flex h-full items-center justify-center">
+      <View className="w-3/4">
+        <View className="mb-4">
+          <Text className="font-bold">Street Address</Text>
+          <TextInput
+            className="border-gray-300 w-full rounded-md border px-4 py-2"
+            placeholder="Enter street address"
+          />
+        </View>
+        <View className="mb-4 flex flex-row">
+          <View className="mr-2 w-1/2">
+            <Text className="font-bold">City</Text>
+            <TextInput
+              className="border-gray-300 w-full rounded-md border px-4 py-2"
+              placeholder="Enter city"
+            />
+          </View>
+          <View className="ml-2 w-1/2">
+            <Text className="font-bold">State</Text>
+            <TextInput
+              className="border-gray-300 w-full rounded-md border px-4 py-2"
+              placeholder="Enter state"
+            />
+          </View>
+        </View>
+        <View className="mb-4 flex flex-row">
+          <View className="mr-2 w-1/2">
+            <Text className="font-bold">Zip Code</Text>
+            <TextInput
+              className="border-gray-300 w-full rounded-md border px-4 py-2"
+              placeholder="Enter zip code"
+              keyboardType="numeric"
+            />
+          </View>
+          <View className="ml-2 w-1/2">
+            <Text className="font-bold">Phone Number</Text>
+            <TextInput
+              className="border-gray-300 w-full rounded-md border px-4 py-2"
+              placeholder="Enter phone number"
+              keyboardType="phone-pad"
+            />
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}
diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx
index e18f079..34d6336 100644
--- a/client/screens/TaskCreation.tsx
+++ b/client/screens/TaskCreation.tsx
@@ -4,6 +4,7 @@ import { Text, View } from 'react-native';
 import { RouteProp, useRoute } from '@react-navigation/native';
 
 import { BackButton } from '../components/nav_buttons/BackButton';
+import { AddressComponent } from '../components/task_creation/AddressComponent.tsx';
 import { TaskCreationJson } from '../types/task-creation-json.ts';
 
 type ParamList = {
@@ -33,7 +34,7 @@ export function TaskCreation() {
           Step 1 of 2
         </Text>
       </View>
-
+      <AddressComponent />
       <Text className="text-center text-2xl font-bold">{header}</Text>
     </View>
   );

From 54f55b2320295a1bafc213106ccd8e5ce847bec3 Mon Sep 17 00:00:00 2001
From: oliviaseds <osedarski@gmail.com>
Date: Tue, 19 Mar 2024 18:12:00 -0400
Subject: [PATCH 06/12] feat: frontend components for task creation

---
 client/assets/radio-button-ellipse.svg        |  3 +
 .../task_creation/AddressComponent.tsx        | 74 +++++++++----------
 .../components/task_creation/RadioGroup.tsx   | 29 ++++++++
 .../task_creation/TextInputLine.tsx           | 18 +++++
 .../task_creation/TextInputParagraph.tsx      | 21 ++++++
 client/screens/TaskCreation.tsx               | 11 ++-
 6 files changed, 117 insertions(+), 39 deletions(-)
 create mode 100644 client/assets/radio-button-ellipse.svg
 create mode 100644 client/components/task_creation/RadioGroup.tsx
 create mode 100644 client/components/task_creation/TextInputLine.tsx
 create mode 100644 client/components/task_creation/TextInputParagraph.tsx

diff --git a/client/assets/radio-button-ellipse.svg b/client/assets/radio-button-ellipse.svg
new file mode 100644
index 0000000..489b901
--- /dev/null
+++ b/client/assets/radio-button-ellipse.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12.666" cy="12" r="12" fill="#BEBEBE"/>
+</svg>
diff --git a/client/components/task_creation/AddressComponent.tsx b/client/components/task_creation/AddressComponent.tsx
index e25f415..e95ab34 100644
--- a/client/components/task_creation/AddressComponent.tsx
+++ b/client/components/task_creation/AddressComponent.tsx
@@ -3,48 +3,48 @@ import { Text, TextInput, View } from 'react-native';
 
 export function AddressComponent() {
   return (
-    <View className="flex h-full items-center justify-center">
-      <View className="w-3/4">
-        <View className="mb-4">
-          <Text className="font-bold">Street Address</Text>
+    <View>
+      <View className="m-4 mb-0">
+        <Text className="mb-2">Street Address</Text>
+        <TextInput
+          className="border-gray-300 w-full rounded-md border px-4 py-2"
+          placeholder={'Fill in blank'}
+        />
+      </View>
+
+      <View className="m-4 mb-0 flex flex-row">
+        <View className="w-1/2">
+          <Text className="mb-2">City</Text>
           <TextInput
             className="border-gray-300 w-full rounded-md border px-4 py-2"
-            placeholder="Enter street address"
+            placeholder={'Fill in blank'}
           />
         </View>
-        <View className="mb-4 flex flex-row">
-          <View className="mr-2 w-1/2">
-            <Text className="font-bold">City</Text>
-            <TextInput
-              className="border-gray-300 w-full rounded-md border px-4 py-2"
-              placeholder="Enter city"
-            />
-          </View>
-          <View className="ml-2 w-1/2">
-            <Text className="font-bold">State</Text>
-            <TextInput
-              className="border-gray-300 w-full rounded-md border px-4 py-2"
-              placeholder="Enter state"
-            />
-          </View>
+        <View className="ml-2 w-1/2">
+          <Text className="mb-2">State</Text>
+          <TextInput
+            className="border-gray-300 w-full rounded-md border px-4 py-2"
+            placeholder={'Fill in blank'}
+          />
+        </View>
+      </View>
+
+      <View className="m-4 mb-0 flex flex-row">
+        <View className="w-1/2">
+          <Text className="mb-2">Zip Code</Text>
+          <TextInput
+            className="border-gray-300 w-full rounded-md border px-4 py-2"
+            placeholder={'Fill in blank'}
+            keyboardType="numeric"
+          />
         </View>
-        <View className="mb-4 flex flex-row">
-          <View className="mr-2 w-1/2">
-            <Text className="font-bold">Zip Code</Text>
-            <TextInput
-              className="border-gray-300 w-full rounded-md border px-4 py-2"
-              placeholder="Enter zip code"
-              keyboardType="numeric"
-            />
-          </View>
-          <View className="ml-2 w-1/2">
-            <Text className="font-bold">Phone Number</Text>
-            <TextInput
-              className="border-gray-300 w-full rounded-md border px-4 py-2"
-              placeholder="Enter phone number"
-              keyboardType="phone-pad"
-            />
-          </View>
+        <View className="ml-2 w-1/2">
+          <Text className="mb-2">Phone Number</Text>
+          <TextInput
+            className="border-gray-300 w-full rounded-md border px-4 py-2"
+            placeholder={'Fill in blank'}
+            keyboardType="phone-pad"
+          />
         </View>
       </View>
     </View>
diff --git a/client/components/task_creation/RadioGroup.tsx b/client/components/task_creation/RadioGroup.tsx
new file mode 100644
index 0000000..9357544
--- /dev/null
+++ b/client/components/task_creation/RadioGroup.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import RadioButton from '../../assets/radio-button-ellipse.svg';
+
+interface RadioGroupProps {
+  title: string;
+  options: string[];
+}
+
+export function RadioGroup({ title, options }: RadioGroupProps) {
+  return (
+    <View className="m-4 mb-0">
+      <Text className="mb-2">{title}</Text>
+      <View className="flex flex-row justify-between">
+        {options.map((option, index) => (
+          <TouchableOpacity
+            key={index}
+            className="border-gray-300 flex h-12 flex-row items-center space-x-2 rounded-md border px-4 py-2"
+            onPress={() => {}}
+          >
+            <RadioButton />
+            <Text>{option}</Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+}
diff --git a/client/components/task_creation/TextInputLine.tsx b/client/components/task_creation/TextInputLine.tsx
new file mode 100644
index 0000000..e3c22ed
--- /dev/null
+++ b/client/components/task_creation/TextInputLine.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Text, TextInput, View } from 'react-native';
+
+interface TextInputLineProps {
+  title: string;
+}
+
+export function TextInputLine({ title }: TextInputLineProps) {
+  return (
+    <View className="m-4 mb-0">
+      <Text className="mb-2">{title}</Text>
+      <TextInput
+        className="border-gray-300 w-full rounded-md border px-4 py-2"
+        placeholder={'Fill in blank'}
+      />
+    </View>
+  );
+}
diff --git a/client/components/task_creation/TextInputParagraph.tsx b/client/components/task_creation/TextInputParagraph.tsx
new file mode 100644
index 0000000..55d83e5
--- /dev/null
+++ b/client/components/task_creation/TextInputParagraph.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Text, TextInput, View } from 'react-native';
+
+interface TextInputParagraphProps {
+  title: string;
+}
+
+export function TextInputParagraph({ title }: TextInputParagraphProps) {
+  return (
+    <View className="m-4 mb-0">
+      <Text className="mb-2">{title}</Text>
+      <TextInput
+        style={{ height: 100 }}
+        className="border-gray-300 w-full rounded-md border px-4 py-2"
+        placeholder={'Fill in blank'}
+        multiline={true}
+        numberOfLines={4}
+      />
+    </View>
+  );
+}
diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx
index 34d6336..7e4b7ef 100644
--- a/client/screens/TaskCreation.tsx
+++ b/client/screens/TaskCreation.tsx
@@ -4,7 +4,9 @@ import { Text, View } from 'react-native';
 import { RouteProp, useRoute } from '@react-navigation/native';
 
 import { BackButton } from '../components/nav_buttons/BackButton';
-import { AddressComponent } from '../components/task_creation/AddressComponent.tsx';
+import { RadioGroup } from '../components/task_creation/RadioGroup.tsx';
+import { TextInputLine } from '../components/task_creation/TextInputLine.tsx';
+import { TextInputParagraph } from '../components/task_creation/TextInputParagraph.tsx';
 import { TaskCreationJson } from '../types/task-creation-json.ts';
 
 type ParamList = {
@@ -34,8 +36,13 @@ export function TaskCreation() {
           Step 1 of 2
         </Text>
       </View>
-      <AddressComponent />
+
       <Text className="text-center text-2xl font-bold">{header}</Text>
+      <TextInputLine title={'Drug Name'} />
+      <RadioGroup title={'Drug Form'} options={['Pill', 'Liquid', 'Shot']} />
+      <TextInputLine title={'Diagnosis'} />
+      <TextInputLine title={'Prescribing Physician'} />
+      <TextInputParagraph title={'Care Instructions'} />
     </View>
   );
 }

From 967c9e846a5fa1ef451de2a91d2b6b84096edcdb Mon Sep 17 00:00:00 2001
From: oliviaseds <osedarski@gmail.com>
Date: Tue, 19 Mar 2024 20:18:42 -0400
Subject: [PATCH 07/12] style: formatting

---
 .../task_creation/AddressComponent.tsx        | 11 ++++--
 client/screens/TaskCreation.tsx               | 39 ++++++++++++-------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/client/components/task_creation/AddressComponent.tsx b/client/components/task_creation/AddressComponent.tsx
index e95ab34..6caa256 100644
--- a/client/components/task_creation/AddressComponent.tsx
+++ b/client/components/task_creation/AddressComponent.tsx
@@ -9,18 +9,19 @@ export function AddressComponent() {
         <TextInput
           className="border-gray-300 w-full rounded-md border px-4 py-2"
           placeholder={'Fill in blank'}
+          autoComplete="street-address"
         />
       </View>
 
       <View className="m-4 mb-0 flex flex-row">
-        <View className="w-1/2">
+        <View className="w-[49%]">
           <Text className="mb-2">City</Text>
           <TextInput
             className="border-gray-300 w-full rounded-md border px-4 py-2"
             placeholder={'Fill in blank'}
           />
         </View>
-        <View className="ml-2 w-1/2">
+        <View className="ml-2 w-[49%]">
           <Text className="mb-2">State</Text>
           <TextInput
             className="border-gray-300 w-full rounded-md border px-4 py-2"
@@ -30,19 +31,21 @@ export function AddressComponent() {
       </View>
 
       <View className="m-4 mb-0 flex flex-row">
-        <View className="w-1/2">
+        <View className="w-[49%]">
           <Text className="mb-2">Zip Code</Text>
           <TextInput
             className="border-gray-300 w-full rounded-md border px-4 py-2"
             placeholder={'Fill in blank'}
+            autoComplete="postal-code"
             keyboardType="numeric"
           />
         </View>
-        <View className="ml-2 w-1/2">
+        <View className="ml-2 w-[49%]">
           <Text className="mb-2">Phone Number</Text>
           <TextInput
             className="border-gray-300 w-full rounded-md border px-4 py-2"
             placeholder={'Fill in blank'}
+            autoComplete="tel"
             keyboardType="phone-pad"
           />
         </View>
diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx
index 7e4b7ef..552315b 100644
--- a/client/screens/TaskCreation.tsx
+++ b/client/screens/TaskCreation.tsx
@@ -2,8 +2,13 @@ import React from 'react';
 import { Text, View } from 'react-native';
 
 import { RouteProp, useRoute } from '@react-navigation/native';
+import {
+  GestureHandlerRootView,
+  ScrollView
+} from 'react-native-gesture-handler';
 
 import { BackButton } from '../components/nav_buttons/BackButton';
+import { AddressComponent } from '../components/task_creation/AddressComponent.tsx';
 import { RadioGroup } from '../components/task_creation/RadioGroup.tsx';
 import { TextInputLine } from '../components/task_creation/TextInputLine.tsx';
 import { TextInputParagraph } from '../components/task_creation/TextInputParagraph.tsx';
@@ -27,22 +32,26 @@ export function TaskCreation() {
   console.log(body);
 
   return (
-    <View className="mt-10">
-      <View className="flex w-full flex-row items-center justify-center">
-        <View className="mr-[95px]">
-          <BackButton />
+    <GestureHandlerRootView className="my-10">
+      <ScrollView>
+        <View className="flex w-full flex-row items-center justify-center">
+          <View className="mr-[95px]">
+            <BackButton />
+          </View>
+          <Text className="mr-auto self-center text-center text-carewallet-gray">
+            Step 1 of 2
+          </Text>
         </View>
-        <Text className="mr-auto self-center text-center text-carewallet-gray">
-          Step 1 of 2
-        </Text>
-      </View>
+        <Text className="text-center text-2xl font-bold">{header}</Text>
 
-      <Text className="text-center text-2xl font-bold">{header}</Text>
-      <TextInputLine title={'Drug Name'} />
-      <RadioGroup title={'Drug Form'} options={['Pill', 'Liquid', 'Shot']} />
-      <TextInputLine title={'Diagnosis'} />
-      <TextInputLine title={'Prescribing Physician'} />
-      <TextInputParagraph title={'Care Instructions'} />
-    </View>
+        <TextInputLine title={'Drug Name'} />
+        <RadioGroup title={'Drug Form'} options={['Pill', 'Liquid', 'Shot']} />
+        <TextInputLine title={'Diagnosis'} />
+        <TextInputLine title={'Prescribing Physician'} />
+        <TextInputParagraph title={'Care Instructions'} />
+        <AddressComponent />
+        <AddressComponent />
+      </ScrollView>
+    </GestureHandlerRootView>
   );
 }

From 55d1aa867b7222626c96414e8d4a3a211df1b5d3 Mon Sep 17 00:00:00 2001
From: oliviaseds <osedarski@gmail.com>
Date: Tue, 19 Mar 2024 21:42:33 -0400
Subject: [PATCH 08/12] style: format fix

---
 client/screens/TaskCreation.tsx    | 37 ++++++++++++++++------
 client/types/task-creation-json.ts | 49 ++++++++++++++----------------
 2 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx
index 552315b..d6819b8 100644
--- a/client/screens/TaskCreation.tsx
+++ b/client/screens/TaskCreation.tsx
@@ -23,16 +23,25 @@ type ParamList = {
 export function TaskCreation() {
   const route = useRoute<RouteProp<ParamList, 'mt'>>();
   const { taskType } = route.params;
+
   const header = TaskCreationJson.types.find((t) =>
     taskType.includes(t.Header)
   )?.Header;
+
   const body = TaskCreationJson.types.find((t) =>
     taskType.includes(t.Header)
   )?.Body;
-  console.log(body);
+
+  const compList: { key: string; value: string }[] = [];
+
+  body?.forEach((item) => {
+    Object.entries(item).forEach(([key, value]) => {
+      compList.push({ key, value });
+    });
+  });
 
   return (
-    <GestureHandlerRootView className="my-10">
+    <GestureHandlerRootView>
       <ScrollView>
         <View className="flex w-full flex-row items-center justify-center">
           <View className="mr-[95px]">
@@ -44,13 +53,23 @@ export function TaskCreation() {
         </View>
         <Text className="text-center text-2xl font-bold">{header}</Text>
 
-        <TextInputLine title={'Drug Name'} />
-        <RadioGroup title={'Drug Form'} options={['Pill', 'Liquid', 'Shot']} />
-        <TextInputLine title={'Diagnosis'} />
-        <TextInputLine title={'Prescribing Physician'} />
-        <TextInputParagraph title={'Care Instructions'} />
-        <AddressComponent />
-        <AddressComponent />
+        {compList.map((item, index) => (
+          <View key={index}>
+            {item.key === 'Address' && <AddressComponent />}
+            {item.value === 'TextInputLine' && (
+              <TextInputLine title={item.key} />
+            )}
+            {item.value === 'TextInputParagraph' && (
+              <TextInputParagraph title={item.key} />
+            )}
+            {item.value.startsWith('Radio Group') && (
+              <RadioGroup
+                title={item.key}
+                options={item.value.substring(12).split(', ')}
+              />
+            )}
+          </View>
+        ))}
       </ScrollView>
     </GestureHandlerRootView>
   );
diff --git a/client/types/task-creation-json.ts b/client/types/task-creation-json.ts
index 5a89c9c..c20d785 100644
--- a/client/types/task-creation-json.ts
+++ b/client/types/task-creation-json.ts
@@ -3,75 +3,70 @@ export const TaskCreationJson = {
     {
       Header: 'Medication Management',
       Body: [
-        { 'Drug Name': 'Line text input' },
+        { 'Drug Name': 'TextInputLine' },
         {
-          'Drug Form': ['Pills', 'Liquid', 'Shot']
+          'Drug Form': 'RadioGroup: Pills, Liquid, Shot'
         },
-        { Diagnosis: 'Line text input' },
-        { 'Prescribing Physician': 'Line text input' },
-        { 'Care Instructions': 'Paragraph text input' }
+        { Diagnosis: 'TextInputLine' },
+        { 'Prescribing Physician': 'TextInputLine' },
+        { 'Care Instructions': 'TextInputParagraph' }
       ]
     },
     {
       Header: 'Physician Appointments',
       Body: [
-        { 'Physician Name': 'Line text input' },
+        { 'Physician Name': 'TextInputLine' },
         { Address: '' },
-        { 'Hospital Affiliation': 'Line text input' },
-        { Speciality: 'Line text input' }
+        { 'Hospital Affiliation': 'TextInputLine' },
+        { Speciality: 'TextInputLine' }
       ]
     },
     {
       Header: 'Grooming',
       Body: [
-        { 'Grooming Type': ['Bathing', 'Toileting'] },
-        { 'Care Instructions': 'Paragraph text input' }
+        { 'Grooming Type': 'RadioGroup: Bathing, Toileting' },
+        { 'Care Instructions': 'TextInputParagraph' }
       ]
     },
     {
       Header: 'Family Conversations',
-      Body: [{ Topic: 'Line text input' }, { Notes: 'Paragraph text input' }]
+      Body: [{ Topic: 'TextInputLine' }, { Notes: 'TextInputParagraph' }]
     },
     {
       Header: 'Shopping & Errands',
-      Body: [
-        { Store: 'Line text input' },
-        { Instructions: 'Paragraph text input' }
-      ]
+      Body: [{ Store: 'TextInputLine' }, { Instructions: 'TextInputParagraph' }]
     },
     {
       Header: 'Pay Bills',
       Body: [
-        { 'Bill Reveicer Name': 'Line text input' },
+        { 'Bill Reveicer Name': 'TextInputLine' },
         { Address: '' },
-        { 'Proxy Agent': 'Line text input' }
+        { 'Proxy Agent': 'TextInputLine' }
       ]
     },
     {
       Header: 'Diet',
-      Body: {
-        Instructions: 'Paragraph text input'
-      }
+      Body: [{ Instructions: 'TextInputParagraph' }]
     },
     {
       Header: 'Activities',
-      Body: [{ Instructions: 'Paragraph text input' }]
+      Body: [{ Instructions: 'TextInputParagraph' }]
     },
     {
       Header: 'Health Insurance',
       Body: [
-        { 'ID Number': 'Line text input' },
-        { Provider: 'Line text input' },
-        { 'Proxy Agent': 'Line text input' }
+        { 'ID Number': 'TextInputLine' },
+        { Provider: 'TextInputLine' },
+        { 'Proxy Agent': 'TextInputLine' }
       ]
     },
     {
       Header: 'Other',
       Body: [
-        { Purpose: 'Line text input' },
+        { Purpose: 'TextInputLine' },
         { Address: '' },
-        { Website: 'Line text input' },
-        { Notes: 'Paragraph text input' }
+        { Website: 'TextInputLine' },
+        { Notes: 'TextInputParagraph' }
       ]
     }
   ]

From 4d623ea844c8bdae9ff6d2d6bce231ea55e990d6 Mon Sep 17 00:00:00 2001
From: narayansharma-21 <97.sharman@gmail.com>
Date: Wed, 20 Mar 2024 16:45:38 -0400
Subject: [PATCH 09/12] style(TaskCreation): moved the component down and fixed
 radioButton component

---
 client/screens/TaskCreation.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx
index d6819b8..25464a4 100644
--- a/client/screens/TaskCreation.tsx
+++ b/client/screens/TaskCreation.tsx
@@ -42,7 +42,7 @@ export function TaskCreation() {
 
   return (
     <GestureHandlerRootView>
-      <ScrollView>
+      <ScrollView className="mt-10">
         <View className="flex w-full flex-row items-center justify-center">
           <View className="mr-[95px]">
             <BackButton />
@@ -52,7 +52,6 @@ export function TaskCreation() {
           </Text>
         </View>
         <Text className="text-center text-2xl font-bold">{header}</Text>
-
         {compList.map((item, index) => (
           <View key={index}>
             {item.key === 'Address' && <AddressComponent />}
@@ -62,7 +61,7 @@ export function TaskCreation() {
             {item.value === 'TextInputParagraph' && (
               <TextInputParagraph title={item.key} />
             )}
-            {item.value.startsWith('Radio Group') && (
+            {item.value.startsWith('RadioGroup') && (
               <RadioGroup
                 title={item.key}
                 options={item.value.substring(12).split(', ')}

From bf930dd72b45fc62daaf2dcd76cb12ef0acace18 Mon Sep 17 00:00:00 2001
From: narayansharma-21 <97.sharman@gmail.com>
Date: Wed, 20 Mar 2024 17:18:19 -0400
Subject: [PATCH 10/12] feat(TaskCreation): added functionality to store
 information/input from user

---
 .../components/task_creation/RadioGroup.tsx   | 16 ++++++++++---
 .../task_creation/TextInputLine.tsx           | 16 +++++++++++--
 .../task_creation/TextInputParagraph.tsx      | 19 +++++++++++++--
 client/screens/TaskCreation.tsx               | 23 ++++++++++++++++---
 4 files changed, 64 insertions(+), 10 deletions(-)

diff --git a/client/components/task_creation/RadioGroup.tsx b/client/components/task_creation/RadioGroup.tsx
index 9357544..3d56df8 100644
--- a/client/components/task_creation/RadioGroup.tsx
+++ b/client/components/task_creation/RadioGroup.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
 
 import RadioButton from '../../assets/radio-button-ellipse.svg';
@@ -6,9 +6,19 @@ import RadioButton from '../../assets/radio-button-ellipse.svg';
 interface RadioGroupProps {
   title: string;
   options: string[];
+  onChange?: (value: string) => void;
 }
 
-export function RadioGroup({ title, options }: RadioGroupProps) {
+export function RadioGroup({ title, options, onChange }: RadioGroupProps) {
+  const [, setSelectedOption] = useState('');
+
+  const handleOptionSelect = (option: string) => {
+    setSelectedOption(option);
+    if (onChange) {
+      onChange(option);
+    }
+  };
+
   return (
     <View className="m-4 mb-0">
       <Text className="mb-2">{title}</Text>
@@ -17,7 +27,7 @@ export function RadioGroup({ title, options }: RadioGroupProps) {
           <TouchableOpacity
             key={index}
             className="border-gray-300 flex h-12 flex-row items-center space-x-2 rounded-md border px-4 py-2"
-            onPress={() => {}}
+            onPress={() => handleOptionSelect(option)}
           >
             <RadioButton />
             <Text>{option}</Text>
diff --git a/client/components/task_creation/TextInputLine.tsx b/client/components/task_creation/TextInputLine.tsx
index e3c22ed..38fb8d2 100644
--- a/client/components/task_creation/TextInputLine.tsx
+++ b/client/components/task_creation/TextInputLine.tsx
@@ -1,17 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Text, TextInput, View } from 'react-native';
 
 interface TextInputLineProps {
   title: string;
+  onChange?: (value: string) => void;
 }
 
-export function TextInputLine({ title }: TextInputLineProps) {
+export function TextInputLine({ title, onChange }: TextInputLineProps) {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleInputChange = (value: string) => {
+    setInputValue(value);
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
   return (
     <View className="m-4 mb-0">
       <Text className="mb-2">{title}</Text>
       <TextInput
         className="border-gray-300 w-full rounded-md border px-4 py-2"
         placeholder={'Fill in blank'}
+        onChangeText={handleInputChange}
+        value={inputValue}
       />
     </View>
   );
diff --git a/client/components/task_creation/TextInputParagraph.tsx b/client/components/task_creation/TextInputParagraph.tsx
index 55d83e5..3efb801 100644
--- a/client/components/task_creation/TextInputParagraph.tsx
+++ b/client/components/task_creation/TextInputParagraph.tsx
@@ -1,11 +1,24 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Text, TextInput, View } from 'react-native';
 
 interface TextInputParagraphProps {
   title: string;
+  onChange?: (value: string) => void;
 }
 
-export function TextInputParagraph({ title }: TextInputParagraphProps) {
+export function TextInputParagraph({
+  title,
+  onChange
+}: TextInputParagraphProps) {
+  const [inputValue, setInputValue] = useState('');
+
+  const handleInputChange = (value: string) => {
+    setInputValue(value);
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
   return (
     <View className="m-4 mb-0">
       <Text className="mb-2">{title}</Text>
@@ -15,6 +28,8 @@ export function TextInputParagraph({ title }: TextInputParagraphProps) {
         placeholder={'Fill in blank'}
         multiline={true}
         numberOfLines={4}
+        onChangeText={handleInputChange}
+        value={inputValue}
       />
     </View>
   );
diff --git a/client/screens/TaskCreation.tsx b/client/screens/TaskCreation.tsx
index 25464a4..dd58888 100644
--- a/client/screens/TaskCreation.tsx
+++ b/client/screens/TaskCreation.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Text, View } from 'react-native';
 
 import { RouteProp, useRoute } from '@react-navigation/native';
@@ -40,6 +40,16 @@ export function TaskCreation() {
     });
   });
 
+  const [values, setValues] = useState<{ [key: string]: string }>({});
+
+  const handleChange = (key: string, value: string) => {
+    setValues((prevValues) => ({
+      ...prevValues,
+      [key]: value
+    }));
+    console.log('Current values:', values);
+  };
+
   return (
     <GestureHandlerRootView>
       <ScrollView className="mt-10">
@@ -56,15 +66,22 @@ export function TaskCreation() {
           <View key={index}>
             {item.key === 'Address' && <AddressComponent />}
             {item.value === 'TextInputLine' && (
-              <TextInputLine title={item.key} />
+              <TextInputLine
+                title={item.key}
+                onChange={(value) => handleChange(item.key, value)}
+              />
             )}
             {item.value === 'TextInputParagraph' && (
-              <TextInputParagraph title={item.key} />
+              <TextInputParagraph
+                title={item.key}
+                onChange={(value) => handleChange(item.key, value)}
+              />
             )}
             {item.value.startsWith('RadioGroup') && (
               <RadioGroup
                 title={item.key}
                 options={item.value.substring(12).split(', ')}
+                onChange={(value) => handleChange(item.key, value)}
               />
             )}
           </View>

From ac069db3382df65cf62d9dea09ac0a0237b2a96c Mon Sep 17 00:00:00 2001
From: oliviaseds <osedarski@gmail.com>
Date: Fri, 22 Mar 2024 21:34:38 -0400
Subject: [PATCH 11/12] feat: radio buttons grey when not selected

---
 client/assets/arrow-right.svg                       |  4 ++++
 client/assets/back-arrow.svg                        |  4 ----
 ...o-button-ellipse.svg => radio-button-circle.svg} |  0
 client/components/nav_buttons/BackButton.tsx        |  4 ++--
 client/components/task_creation/RadioGroup.tsx      | 13 ++++++++-----
 5 files changed, 14 insertions(+), 11 deletions(-)
 create mode 100644 client/assets/arrow-right.svg
 delete mode 100644 client/assets/back-arrow.svg
 rename client/assets/{radio-button-ellipse.svg => radio-button-circle.svg} (100%)

diff --git a/client/assets/arrow-right.svg b/client/assets/arrow-right.svg
new file mode 100644
index 0000000..242fcf9
--- /dev/null
+++ b/client/assets/arrow-right.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 12H3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21.7152 12.2034L16.265 16.0964C15.7355 16.4746 15 16.0961 15 15.4454V8.55455C15 7.90385 15.7355 7.52535 16.265 7.90356L21.7152 11.7966C21.8548 11.8963 21.8548 12.1037 21.7152 12.2034Z" fill="black"/>
+</svg>
diff --git a/client/assets/back-arrow.svg b/client/assets/back-arrow.svg
deleted file mode 100644
index 99dedf4..0000000
--- a/client/assets/back-arrow.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 12H21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2.28481 11.7966L7.73501 7.90356C8.2645 7.52535 9 7.90385 9 8.55455V15.4454C9 16.0961 8.2645 16.4746 7.73501 16.0964L2.28481 12.2034C2.14522 12.1037 2.14522 11.8963 2.28481 11.7966Z" fill="black"/>
-</svg>
diff --git a/client/assets/radio-button-ellipse.svg b/client/assets/radio-button-circle.svg
similarity index 100%
rename from client/assets/radio-button-ellipse.svg
rename to client/assets/radio-button-circle.svg
diff --git a/client/components/nav_buttons/BackButton.tsx b/client/components/nav_buttons/BackButton.tsx
index aab16bf..6832559 100644
--- a/client/components/nav_buttons/BackButton.tsx
+++ b/client/components/nav_buttons/BackButton.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { IconButton } from 'react-native-paper';
 
-import BackArrow from '../../assets/back-arrow.svg';
+import ArrowLeft from '../../assets/arrow-left.svg';
 import { AppStackNavigation } from '../../navigation/AppNavigation';
 
 export function BackButton() {
@@ -13,7 +13,7 @@ export function BackButton() {
     <IconButton
       className="align-center m-2 flex h-[50px] w-[52px] justify-center rounded-xl bg-carewallet-gray"
       mode="contained"
-      icon={({ color }) => <BackArrow fill={color} />}
+      icon={({ color }) => <ArrowLeft fill={color} />}
       onPress={() => navigation.goBack()}
     />
   );
diff --git a/client/components/task_creation/RadioGroup.tsx b/client/components/task_creation/RadioGroup.tsx
index 3d56df8..8f25833 100644
--- a/client/components/task_creation/RadioGroup.tsx
+++ b/client/components/task_creation/RadioGroup.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
 
-import RadioButton from '../../assets/radio-button-ellipse.svg';
+import ButtonCircle from '../../assets/radio-button-circle.svg';
 
 interface RadioGroupProps {
   title: string;
@@ -10,10 +10,11 @@ interface RadioGroupProps {
 }
 
 export function RadioGroup({ title, options, onChange }: RadioGroupProps) {
-  const [, setSelectedOption] = useState('');
+  const [selectedOption, setSelectedOption] = useState('');
 
   const handleOptionSelect = (option: string) => {
     setSelectedOption(option);
+    console.log('Selected option:', option);
     if (onChange) {
       onChange(option);
     }
@@ -26,10 +27,12 @@ export function RadioGroup({ title, options, onChange }: RadioGroupProps) {
         {options.map((option, index) => (
           <TouchableOpacity
             key={index}
-            className="border-gray-300 flex h-12 flex-row items-center space-x-2 rounded-md border px-4 py-2"
-            onPress={() => handleOptionSelect(option)}
+            className={`flex h-12 flex-row items-center space-x-2 rounded-md border px-4 py-2 ${option === selectedOption ? 'bg-carewallet-gray' : ''}`}
+            onPress={() => {
+              handleOptionSelect(option);
+            }}
           >
-            <RadioButton />
+            <ButtonCircle />
             <Text>{option}</Text>
           </TouchableOpacity>
         ))}

From 80497c1dea7bacba00f39c38cab77822e3ebf68e Mon Sep 17 00:00:00 2001
From: Matt McCoy <mattcmccoy01@gmail.com>
Date: Mon, 25 Mar 2024 11:52:15 -0400
Subject: [PATCH 12/12] fix: add an add task button to home page

---
 client/navigation/AppNavigation.tsx | 11 +++---
 client/screens/MedicationList.tsx   |  9 +++--
 client/screens/TaskType.tsx         | 52 +++++++++++++++--------------
 3 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/client/navigation/AppNavigation.tsx b/client/navigation/AppNavigation.tsx
index 6f280ae..f340cea 100644
--- a/client/navigation/AppNavigation.tsx
+++ b/client/navigation/AppNavigation.tsx
@@ -9,11 +9,6 @@ import { AppStack } from './types';
 export function AppNavigation() {
   return (
     <AppStack.Navigator>
-      <AppStack.Screen
-        name="TaskType"
-        options={{ headerShown: false }}
-        component={TaskType}
-      />
       <AppStack.Screen
         name="Login"
         options={{ headerShown: true }}
@@ -24,7 +19,11 @@ export function AppNavigation() {
         options={{ headerShown: false }}
         component={AppStackBottomTabNavigator}
       />
-
+      <AppStack.Screen
+        name="TaskType"
+        options={{ headerShown: false }}
+        component={TaskType}
+      />
       <AppStack.Screen
         name="TaskCreation"
         options={{ headerShown: false }}
diff --git a/client/screens/MedicationList.tsx b/client/screens/MedicationList.tsx
index 634fa39..6b22942 100644
--- a/client/screens/MedicationList.tsx
+++ b/client/screens/MedicationList.tsx
@@ -8,6 +8,7 @@ import {
   View
 } from 'react-native';
 
+import { useNavigation } from '@react-navigation/core';
 import { clsx } from 'clsx';
 import { Divider } from 'react-native-paper';
 
@@ -15,12 +16,14 @@ import { ClickableCard } from '../components/ClickableCard';
 import { DocPickerButton } from '../components/DocPickerButton';
 import { PopupModal } from '../components/PopupModal';
 import { useCareWalletContext } from '../contexts/CareWalletContext';
+import { AppStackNavigation } from '../navigation/types';
 import { useAuth } from '../services/auth';
 import { useMedication } from '../services/medication';
 import { Medication } from '../types/medication';
 
 export default function MedicationList() {
   const [selectedMed, setSelectedMed] = useState<Medication>();
+  const navigator = useNavigation<AppStackNavigation>();
 
   const [newMedState, setNewMedState] = useState({ id: '', name: '' });
 
@@ -95,11 +98,13 @@ export default function MedicationList() {
       <View className="flex flex-row items-center">
         <DocPickerButton />
         <Pressable
-          onPress={() => setNewMedVisible(true)}
           className="mb-2 ml-2 mt-2 self-center rounded-md border border-carewallet-gray pl-1 pr-1"
+          onPress={() => {
+            navigator.navigate('TaskType');
+          }}
         >
           <Text className="self-center text-lg text-carewallet-black">
-            Add New Medication
+            Add New Task
           </Text>
         </Pressable>
       </View>
diff --git a/client/screens/TaskType.tsx b/client/screens/TaskType.tsx
index 9cfdfe7..ef02c2c 100644
--- a/client/screens/TaskType.tsx
+++ b/client/screens/TaskType.tsx
@@ -19,8 +19,8 @@ import { Button, Text } from 'react-native-paper';
 
 import { BackButton } from '../components/nav_buttons/BackButton';
 import { CloseButton } from '../components/nav_buttons/CloseButton';
-import { AppStackNavigation } from '../navigation/AppNavigation';
-import { Category, categoryToTypeMap, TypeOfTask } from '../types/type';
+import { AppStackNavigation } from '../navigation/types';
+import { Category, CategoryToTypeMap, TypeOfTask } from '../types/type';
 
 export function TaskType() {
   const navigation = useNavigation<AppStackNavigation>();
@@ -36,7 +36,7 @@ export function TaskType() {
   useEffect(() => {
     setSelectedTypes(
       selectedCategory
-        ? categoryToTypeMap[selectedCategory]
+        ? CategoryToTypeMap[selectedCategory]
         : Object.values(TypeOfTask)
     );
   }, [selectedCategory]);
@@ -71,7 +71,7 @@ export function TaskType() {
   );
 
   return (
-    <GestureHandlerRootView className="mt-10">
+    <GestureHandlerRootView className="bg-carewallet-white pt-10">
       <View className="flex w-full flex-row items-center justify-center">
         <View className="mr-[95px]">
           <BackButton />
@@ -93,28 +93,30 @@ export function TaskType() {
         </Button>
       </View>
 
-      <FlatList
-        className="h-full"
-        data={selectedTypes}
-        renderItem={({ item }) => (
-          <TouchableOpacity
-            className="m-2 h-[50px] overflow-hidden rounded-xl"
-            onPress={() =>
-              navigation.navigate('TaskCreation', {
-                taskType: JSON.stringify(item)
-              })
-            }
-          >
-            <Button
-              className="m-2 h-[50px] items-center justify-center rounded-xl"
-              textColor="black"
-              mode="outlined"
+      <View className="h-[68vh]">
+        <FlatList
+          className="h-[80vh] scroll-pb-96"
+          data={selectedTypes}
+          renderItem={({ item }) => (
+            <TouchableOpacity
+              className="m-2 h-[50px] overflow-hidden rounded-xl"
+              onPress={() =>
+                navigation.navigate('TaskCreation', {
+                  taskType: JSON.stringify(item)
+                })
+              }
             >
-              {item}
-            </Button>
-          </TouchableOpacity>
-        )}
-      />
+              <Button
+                className="m-2 h-[50px] items-center justify-center rounded-xl"
+                textColor="black"
+                mode="outlined"
+              >
+                {item}
+              </Button>
+            </TouchableOpacity>
+          )}
+        />
+      </View>
 
       <BottomSheet
         ref={bottomSheetRef}