feat: filter progress

GenerateNU · Apr 17, 2024 · d59c94d · d59c94d
1 parent d0c325c
commit d59c94d
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 39 deletions.
diff --git a/client/components/filter/FilterBottomSheet.tsx b/client/components/filter/FilterBottomSheet.tsx
@@ -5,35 +5,36 @@ import BottomSheet from '@gorhom/bottom-sheet';
 import { BottomSheetDefaultBackdropProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetBackdrop/types';
 import { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 
+import { TaskQueryParams } from '../../services/task';
+import { TaskTypeDescriptions } from '../../types/type';
 import { User } from '../../types/user';
 import { FilterCircleCard } from './FilterCircleCard';
 import { TaskListFilter } from './TaskFilter';
 
+// On close, send query with all of the aggregated filters
 export function FilterBottomSheet({
   bottomSheetRef,
   snapPoints,
   renderBackdrop,
   users,
+  categories,
+  labels,
   statuses,
-  setSortBy
-  // setTaskStatus,
-  // setAssignedTo
+  onFilterClose,
+  filters,
+  setFilters
 }: {
   bottomSheetRef: React.RefObject<BottomSheetMethods>;
   snapPoints: string[];
   renderBackdrop: (props: BottomSheetDefaultBackdropProps) => React.JSX.Element;
   users: User[];
+  categories: string[];
   statuses: string[];
-  setSortBy: (sortBy: string) => void;
-  // setTaskStatus: (taskStatus: string[]) => void;
-  // setAssignedTo: (assignedTo: string[]) => void;
+  labels: string[];
+  onFilterClose: () => void;
+  filters: TaskQueryParams;
+  setFilters: (filters: TaskQueryParams) => void;
 }) {
-  // Event handlers for filter options
-  const handleSortByChange = (sortBy: string) => {
-    setSortBy(sortBy);
-    console.log('Selected Sort By:', sortBy);
-  };
-
   return (
     <BottomSheet
       ref={bottomSheetRef}
@@ -42,6 +43,7 @@ export function FilterBottomSheet({
       enablePanDownToClose={true}
       backdropComponent={renderBackdrop}
       style={{ flex: 1, width: '100%' }}
+      onClose={onFilterClose}
     >
       <ScrollView>
         <View className="space-y-5">
@@ -55,37 +57,53 @@ export function FilterBottomSheet({
             items={[
               {
                 title: 'All Tasks',
-                element: (
-                  <FilterCircleCard
-                    selected={true}
-                    title="All Tasks"
-                    onPress={() => handleSortByChange('All Tasks')}
-                  />
-                )
+                element: <FilterCircleCard selected={true} title="All Tasks" />
               },
               {
                 title: 'Quick Tasks',
+                element: (
+                  <FilterCircleCard selected={false} title="Quick Tasks" />
+                )
+              }
+            ]}
+          />
+          <TaskListFilter
+            title="Category"
+            items={categories?.map((category) => {
+              return {
+                title: TaskTypeDescriptions[category] || '',
                 element: (
                   <FilterCircleCard
                     selected={false}
-                    title="Quick Tasks"
-                    onPress={() => handleSortByChange('Quick Tasks')}
+                    title={TaskTypeDescriptions[category] || ''}
+                    onPress={() =>
+                      setFilters({ ...filters, taskType: category })
+                    }
                   />
                 )
-              }
-            ]}
+              };
+            })}
           />
-          <TaskListFilter title="Category" />
           <TaskListFilter
             title="Task Status"
             items={statuses?.map((status) => {
               return {
                 title: status,
-                element: <FilterCircleCard selected={false} title={status} />
+                element: (
+                  <FilterCircleCard
+                    selected={false}
+                    title={status}
+                    onPress={() =>
+                      setFilters({
+                        ...filters,
+                        taskStatus: status.toUpperCase()
+                      })
+                    }
+                  />
+                )
               };
             })}
           />
-          <TaskListFilter title="Task Types" />
           <TaskListFilter
             title="Assigned to"
             items={users?.map((user) => {
@@ -95,12 +113,25 @@ export function FilterBottomSheet({
                   <FilterCircleCard
                     selected={false}
                     title={user?.first_name || ''}
+                    onPress={() =>
+                      setFilters({ ...filters, createdBy: user?.user_id })
+                    }
                   />
                 )
               };
             })}
           />
-          <TaskListFilter title="Labels" />
+          <TaskListFilter
+            title="Labels"
+            items={labels?.map((label) => {
+              return {
+                title: label || '',
+                element: (
+                  <FilterCircleCard selected={false} title={label || ''} />
+                )
+              };
+            })}
+          />
         </View>
       </ScrollView>
     </BottomSheet>

diff --git a/client/components/filter/FilterCircleCard.tsx b/client/components/filter/FilterCircleCard.tsx
@@ -20,7 +20,7 @@ export function FilterCircleCard({
   };
 
   const circleClasses = clsx(
-    'h-34 ml-2 mb-2 mt-3 py-2 flex w-fit flex-row items-center rounded-full pr-3',
+    'h-34 ml-2 mb-1 mt-1 py-2 mr-2 flex w-fit flex-row items-center rounded-full pr-3',
     {
       'border border-carewallet-blue': isSelected,
       'border border-carewallet-gray': !isSelected

diff --git a/client/components/filter/TaskFilter.tsx b/client/components/filter/TaskFilter.tsx
@@ -18,7 +18,7 @@ export function TaskListFilter({
         className="border-bottom border-1px ml-5 mt-3 flex flex-row items-center border-carewallet-gray border-opacity-5"
         onTouchEnd={() => setIsOpen(!isOpen)}
       >
-        <Text className="mr-auto font-carewallet-montserrat">{title}</Text>
+        <Text className="mb-1 mr-auto font-carewallet-montserrat">{title}</Text>
         <View className="mr-10">{isOpen ? <ArrowUp /> : <ArrowDown />}</View>
       </View>
       {isOpen && (

diff --git a/client/screens/TaskList.tsx b/client/screens/TaskList.tsx
@@ -23,7 +23,7 @@ import { useCareWalletContext } from '../contexts/CareWalletContext';
 import { AppStackNavigation } from '../navigation/types';
 import { useGroup } from '../services/group';
 import { useLabelsByTasks } from '../services/label';
-import { useFilteredTasks } from '../services/task';
+import { TaskQueryParams, useFilteredTasks } from '../services/task';
 import { useUsers } from '../services/user';
 import { Task } from '../types/task';
 
@@ -32,9 +32,13 @@ export default function TaskListScreen() {
   const navigator = useNavigation<AppStackNavigation>();
   const [canPress, setCanPress] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
-  const { tasks, tasksIsLoading } = useFilteredTasks({
+  const [filters, setFilters] = useState<TaskQueryParams>({
     groupID: userGroup.groupID
   });
+  const [temporaryFilter, setTemporaryFilter] = useState<TaskQueryParams>({
+    groupID: userGroup.groupID
+  });
+  const { tasks, tasksIsLoading } = useFilteredTasks(filters);
   const { labels, labelsIsLoading } = useLabelsByTasks(
     tasks?.map((task) => task.task_id) ?? []
   );
@@ -55,8 +59,11 @@ export default function TaskListScreen() {
   );
   const { roles } = useGroup(userGroup.groupID);
   const { users } = useUsers(roles?.map((role) => role.user_id) || []);
-  const [sortBy, setSortBy] = useState('All Tasks');
-  console.log(sortBy);
+
+  function handleFilterClose(): void {
+    setFilters({ ...temporaryFilter, groupID: userGroup.groupID });
+    console.log('Filter closed', filters);
+  }
 
   // Filter tasks based on search query in multiple fields and labels
   const filteredTasks = tasks?.filter((task) => {
@@ -177,10 +184,12 @@ export default function TaskListScreen() {
           renderBackdrop={renderBackdrop}
           snapPoints={snapPoints}
           users={users ?? []}
+          categories={[...new Set(tasks?.map((task) => task.task_type))]}
+          labels={[...new Set(labels?.map((label) => label.label_name))]}
           statuses={['Complete', 'Incomplete', 'Partial']}
-          setSortBy={setSortBy}
-          // setTaskStatus={(taskStatus: string[]) => setTaskStatus(taskStatus)}
-          // setAssignedTo={(assignedTo: string[]) => setAssignedTo(assignedTo)}
+          filters={temporaryFilter}
+          setFilters={setTemporaryFilter}
+          onFilterClose={handleFilterClose}
         />
       </GestureHandlerRootView>
     </SafeAreaView>

diff --git a/client/services/task.ts b/client/services/task.ts
@@ -5,7 +5,7 @@ import { TaskLabel } from '../types/label';
 import { Task } from '../types/task';
 import { api_url } from './api-links';
 
-type TaskQueryParams = {
+export type TaskQueryParams = {
   taskID?: string;
   groupID?: number;
   createdBy?: string;
@@ -59,14 +59,19 @@ const editTask = async (taskID: string, updatedTask: Task): Promise<Task> => {
 };
 
 export const useFilteredTasks = (queryParams: TaskQueryParams) => {
-  const { data: tasks, isLoading: tasksIsLoading } = useQuery<Task[]>({
+  const {
+    data: tasks,
+    isLoading: tasksIsLoading,
+    refetch: refetchTask
+  } = useQuery<Task[]>({
     queryKey: ['filteredTaskList'],
     queryFn: () => getFilteredTasks(queryParams),
     refetchInterval: 20000
   });
   return {
     tasks,
-    tasksIsLoading
+    tasksIsLoading,
+    refetchTask
   };
 };