Feature/type of task screen

backend/schema/tasks/task_test.go

@@ -236,8 +236,6 @@ func TestTaskGroup(t *testing.T) {
 			},
 		}
 
-		fmt.Println("Expected: ", expectedTasks)
-		fmt.Println("Response: ", responseTasks)
 		if !reflect.DeepEqual(expectedTasks, responseTasks) {
 			t.Error("Result was not correct")
 		}

backend/schema/tasks/transactions.go

@@ -136,7 +136,6 @@ func GetTasksByAssignedFromDB(pool *pgx.Conn, userIDs []string) ([]models.Task,
 				print(err, "error scanning task ID")
 				return nil, err
 			}
-			fmt.Println(task_id)
 			task_ids = append(task_ids, task_id)
 		}
 	}

client/babel.config.js

@@ -3,6 +3,10 @@ module.exports = function (api) {
 
   return {
     presets: ['babel-preset-expo'],
-    plugins: ['react-native-paper/babel', 'nativewind/babel']
+    plugins: [
+      'react-native-paper/babel',
+      'nativewind/babel',
+      'react-native-reanimated/plugin'
+    ]
   };
 };

client/components/TaskType/BackButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { useNavigation } from '@react-navigation/native';
+import { IconButton } from 'react-native-paper';
+
+import BackArrow from '../../assets/back-arrow.svg';
+import { AppStackNavigation } from '../../navigation/AppNavigation';
+
+export function BackButton() {
+  const navigation = useNavigation<AppStackNavigation>();
+
+  return (
+    <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} />}
+      onPress={() => navigation.goBack()}
+    />
+  );
+}

client/components/TaskType/CloseButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { IconButton } from 'react-native-paper';
+
+import Close from '../../assets/close.svg';
+
+export function CloseButton({ onPress }: { onPress: () => void }) {
+  return (
+    <IconButton
+      className="align-center m-2 flex h-[50px] w-[52px] justify-center rounded-xl bg-carewallet-gray"
+      mode="contained"
+      icon={Close}
+      onPress={onPress}
+    />
+  );
+}

client/navigation/AppNavigation.tsx

@@ -4,9 +4,11 @@ import { NavigationProp } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import LoginPage from '../screens/LoginPage';
+import { TaskType } from '../screens/TaskType';
 import { AppStackBottomTabNavigator } from './AppStackBottomTabNavigator';
 
 export type AppStackParamList = {
+  TaskType: undefined;
   Main: undefined;
   Home: undefined;
   Login: undefined;
@@ -20,6 +22,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 }}

client/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@firebase/auth": "^1.5.1",
+    "@gorhom/bottom-sheet": "^4.6.1",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@react-navigation/bottom-tabs": "^6.5.11",
     "@react-navigation/native": "^6.1.9",
@@ -23,18 +24,21 @@
     "@types/react": "^18.2.55",
     "axios": "^1.6.4",
     "clsx": "^2.1.0",
-    "expo": "50.0.6",
+    "expo": "^50.0.11",
     "expo-document-picker": "~11.10.1",
     "expo-file-system": "~16.0.6",
     "expo-status-bar": "~1.11.1",
     "firebase": "^10.7.2",
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.73.4",
+    "react-native-dropdown-picker": "^5.4.6",
     "react-native-paper": "^5.12.3",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
-    "react-native-svg-transformer": "^1.3.0"
+    "react-native-svg-transformer": "^1.3.0",
+    "react-native-reanimated": "~3.6.2",
+    "react-native-gesture-handler": "~2.14.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

client/screens/TaskType.tsx

@@ -0,0 +1,147 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import { FlatList, View } from 'react-native';
+
+import BottomSheet, {
+  BottomSheetBackdrop,
+  TouchableOpacity
+} from '@gorhom/bottom-sheet';
+import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
+import { useNavigation } from '@react-navigation/native';
+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 { AppStackNavigation } from '../navigation/AppNavigation';
+import { Category, categoryToTypeMap, TypeOfTask } from '../types/type';
+
+export function TaskType() {
+  const navigation = useNavigation<AppStackNavigation>();
+
+  const [open, setOpen] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<null | Category>(
+    null
+  );
+  const [selectedTypes, setSelectedTypes] = useState<TypeOfTask[]>(
+    Object.values(TypeOfTask)
+  );
+
+  useEffect(() => {
+    setSelectedTypes(
+      selectedCategory
+        ? categoryToTypeMap[selectedCategory]
+        : Object.values(TypeOfTask)
+    );
+  }, [selectedCategory]);
+
+  const filters = Object.values(Category).map((filter) => ({
+    label: filter,
+    value: filter
+  }));
+
+  const snapPoints = useMemo(() => ['60%'], []);
+
+  const bottomSheetRef = useRef<BottomSheet>(null);
+
+  const closeBottomSheet = () => {
+    if (bottomSheetRef.current) {
+      bottomSheetRef.current.close(); // Close the BottomSheet
+    }
+  };
+
+  const snapToIndex = (index: number) =>
+    bottomSheetRef.current?.snapToIndex(index);
+  const renderBackdrop = useCallback(
+    (props: BottomSheetDefaultBackdropProps) => (
+      <BottomSheetBackdrop
+        appearsOnIndex={0}
+        disappearsOnIndex={-1}
+        {...props}
+      />
+    ),
+    []
+  );
+
+  return (
+    <GestureHandlerRootView className="mt-10">
+      <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="text-center text-2xl font-bold">Type of Task</Text>
+      <View className="mr-2 flex flex-row justify-end">
+        <Button
+          className="h-[40px] items-center justify-center rounded-xl text-sm"
+          textColor="black"
+          mode="outlined"
+          onPress={() => snapToIndex(0)}
+        >
+          Filter
+        </Button>
+      </View>
+
+      <FlatList
+        className="h-full"
+        data={selectedTypes}
+        renderItem={({ item }) => (
+          <TouchableOpacity
+            className="m-2 h-[50px] overflow-hidden rounded-xl"
+            onPress={() => navigation.navigate('New ' + item + ' Task')}
+          >
+            <Button
+              className="m-2 h-[50px] items-center justify-center rounded-xl"
+              textColor="black"
+              mode="outlined"
+            >
+              {item}
+            </Button>
+          </TouchableOpacity>
+        )}
+      />
+
+      <BottomSheet
+        ref={bottomSheetRef}
+        index={-1}
+        snapPoints={snapPoints}
+        enablePanDownToClose={true}
+        backdropComponent={renderBackdrop}
+      >
+        <View>
+          <View className="flex flex-row justify-between">
+            <Text className="m-5 text-2xl font-bold">Filter</Text>
+            <CloseButton onPress={closeBottomSheet} />
+          </View>
+
+          <DropDownPicker
+            open={open}
+            value={selectedCategory}
+            items={filters}
+            setOpen={setOpen}
+            setValue={setSelectedCategory}
+            placeholder="Category"
+            style={{
+              width: '95%',
+              marginLeft: 'auto',
+              marginRight: 'auto',
+              borderRadius: 0,
+              borderColor: 'transparent',
+              borderBottomColor: 'black'
+            }}
+          />
+        </View>
+      </BottomSheet>
+    </GestureHandlerRootView>
+  );
+}

client/types/type.ts

@@ -0,0 +1,66 @@
+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'
+}
+
+export enum Category {
+  ALL = '',
+  HEALTH = 'Health & Medical',
+  PERSONAL = 'Personal',
+  HOME = 'Home & Lifestyle',
+  FINANCIAL = 'Financial & Legal',
+  OTHER = 'Other'
+}
+
+export const categoryToTypeMap: Record<Category, TypeOfTask[]> = {
+  [Category.ALL]: [],
+  [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.OTHER]: [TypeOfTask.OTHER]
+};