feat(Bottom-Shelf): Adds the quick tasks to the library

client/components/QuickTaskCard.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export const QuickTaskCard = ({
+  name,
+  label
+}: {
+  name: String;
+  label: String;
+}): JSX.Element => {
+  return (
+    <View className="border-black h-[82px] w-[346px] self-center overflow-hidden rounded-[20px] border border-solid">
+      <View className="relative left-[19px] top-[17px] h-[48px] w-[295px]">
+        <View className="absolute left-0 top-0 h-[18px] w-[206px]">
+          <Text className="text-black absolute left-0 top-[2px] w-[206px] whitespace-nowrap text-[18px] font-[400] leading-[22px] tracking-[0px]">
+            {name}
+          </Text>
+        </View>
+        <Text className="text-black absolute left-0 top-[29px] w-[295px] text-[14px] font-[400] leading-[17px] tracking-[0px]">
+          {label}
+        </Text>
+      </View>
+    </View>
+  );
+};

client/navigation/AppStackBottomTabNavigator.tsx

@@ -9,6 +9,7 @@ import Home from '../assets/bottom-nav/home.svg';
 import User from '../assets/bottom-nav/user.svg';
 import MedicationList from '../screens/MedicationList';
 import Profile from '../screens/Profile';
+import QuickTasks from '../screens/QuickTasks';
 
 const AppStackBottomTab = createBottomTabNavigator();
 
@@ -36,7 +37,7 @@ export function AppStackBottomTabNavigator() {
           tabBarIcon: ({ color }) => <Calendar color={color} />,
           tabBarLabel: () => <Text></Text>
         }}
-        component={MedicationList}
+        component={QuickTasks}
       />
       <AppStackBottomTab.Screen
         name="Notifications"

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",
@@ -31,7 +32,9 @@
     "nativewind": "^2.0.11",
     "react": "18.2.0",
     "react-native": "0.73.4",
+    "react-native-gesture-handler": "~2.14.0",
     "react-native-paper": "^5.12.3",
+    "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-svg-transformer": "^1.3.0"

client/screens/QuickTasks.tsx

@@ -0,0 +1,66 @@
+// components/TasksPopup.tsx
+import React, { useCallback, useMemo, useRef } from 'react';
+import { FlatList, Text, View } from 'react-native';
+
+import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet/';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { Button } from 'react-native-paper';
+
+import { QuickTaskCard } from '../components/QuickTaskCard';
+
+// import { fetchTasks } from '../services/taskService';
+
+export default function QuickTasks() {
+  const tasks = [
+    { id: '1', name: 'Take out the trash', label: 'Home' },
+    { id: '2', name: 'Do the laundry', label: 'Laundry' },
+    { id: '3', name: 'Wash the dishes', label: 'Kitchen' }
+  ];
+
+  //   if (isLoading) {
+  //     return <Text>Loading...</Text>;
+  //   }
+
+  const snapPoints = useMemo(() => ['70%'], []);
+  const bottomSheetRef = useRef<BottomSheet>(null);
+
+  const handleOpenPress = () => bottomSheetRef.current?.expand();
+  const handleClosePress = () => bottomSheetRef.current?.close();
+
+  const renderBackdrop = useCallback(
+    (props: any) => (
+      <BottomSheetBackdrop
+        appearsOnIndex={0}
+        disappearsOnIndex={-1}
+        {...props}
+        opacity={0.3}
+      />
+    ),
+    []
+  );
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <Button onPress={handleOpenPress}>Open</Button>
+      <Button onPress={handleClosePress}>Close</Button>
+      <BottomSheet
+        snapPoints={snapPoints}
+        ref={bottomSheetRef}
+        enablePanDownToClose={true}
+        backdropComponent={renderBackdrop}
+        handleIndicatorStyle={{ backgroundColor: 'white' }}
+      >
+        <Text className="ml-6 text-lg font-bold">Today's Quick Tasks</Text>
+        <View style={{ height: 10 }} />
+        <FlatList
+          data={tasks}
+          className="w-full align-middle"
+          ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => (
+            <QuickTaskCard name={item.name} label={item.label} />
+          )}
+        />
+      </BottomSheet>
+    </GestureHandlerRootView>
+  );
+}

client/services/task.ts

@@ -0,0 +1,43 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
+
+import { TaskLabel } from '../types/label';
+import { Task } from '../types/task';
+import { api_url } from './api-links';
+
+type TaskQueryParams = {
+  taskID?: string;
+  groupID?: string;
+  createdBy?: string;
+  taskStatus?: string;
+  taskType?: string;
+  startDate?: string;
+  endDate?: string;
+};
+
+const getFilteredTasks = async (
+  queryParams: TaskQueryParams
+): Promise<Task[]> => {
+  const { data } = await axios.get(`${api_url}/tasks/filtered?`, {
+    params: queryParams
+  });
+  return data;
+};
+
+export const getTaskLabels = async (taskID: string): Promise<TaskLabel[]> => {
+  const { data } = await axios.get(`${api_url}/tasks/${taskID}/labels`);
+  return data;
+};
+
+export const useFilteredTasks = (queryParams: TaskQueryParams) => {
+  const queryClient = useQueryClient();
+  const { data: tasks, isLoading: tasksIsLoading } = useQuery<Task[]>({
+    queryKey: ['filteredTaskList', queryParams],
+    queryFn: () => getFilteredTasks(queryParams),
+    refetchInterval: 20000
+  });
+  return {
+    tasks,
+    tasksIsLoading
+  };
+};

client/types/label.ts

@@ -0,0 +1,5 @@
+export interface TaskLabel {
+  task_id: number;
+  group_id: number;
+  label_name: string;
+}

client/types/task.ts

@@ -0,0 +1,15 @@
+export interface Task {
+  task_id: number;
+  group_id: number;
+  created_by: string;
+  created_date: string;
+  start_date?: string | null;
+  end_date?: string | null;
+  notes?: string | null;
+  repeating: boolean;
+  repeating_interval?: string | null;
+  repeating_end_date?: string | null;
+  task_status: string;
+  task_type: string;
+  task_info?: string | null;
+}