From d59c94d8e747f8fc45f7b8c6fdf33acbdb8e5044 Mon Sep 17 00:00:00 2001 From: Chris <125088905+wyattchris@users.noreply.github.com> Date: Wed, 17 Apr 2024 17:14:00 -0400 Subject: [PATCH] feat: filter progress --- .../components/filter/FilterBottomSheet.tsx | 85 +++++++++++++------ client/components/filter/FilterCircleCard.tsx | 2 +- client/components/filter/TaskFilter.tsx | 2 +- client/screens/TaskList.tsx | 23 +++-- client/services/task.ts | 11 ++- 5 files changed, 84 insertions(+), 39 deletions(-) diff --git a/client/components/filter/FilterBottomSheet.tsx b/client/components/filter/FilterBottomSheet.tsx index 9e08c8f..95ff6d6 100644 --- 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; 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 ( @@ -55,37 +57,53 @@ export function FilterBottomSheet({ items={[ { title: 'All Tasks', - element: ( - handleSortByChange('All Tasks')} - /> - ) + element: }, { title: 'Quick Tasks', + element: ( + + ) + } + ]} + /> + { + return { + title: TaskTypeDescriptions[category] || '', element: ( handleSortByChange('Quick Tasks')} + title={TaskTypeDescriptions[category] || ''} + onPress={() => + setFilters({ ...filters, taskType: category }) + } /> ) - } - ]} + }; + })} /> - { return { title: status, - element: + element: ( + + setFilters({ + ...filters, + taskStatus: status.toUpperCase() + }) + } + /> + ) }; })} /> - { @@ -95,12 +113,25 @@ export function FilterBottomSheet({ + setFilters({ ...filters, createdBy: user?.user_id }) + } /> ) }; })} /> - + { + return { + title: label || '', + element: ( + + ) + }; + })} + /> diff --git a/client/components/filter/FilterCircleCard.tsx b/client/components/filter/FilterCircleCard.tsx index fa83cc8..58a2788 100644 --- 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 index c58f81e..db78597 100644 --- 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)} > - {title} + {title} {isOpen ? : } {isOpen && ( diff --git a/client/screens/TaskList.tsx b/client/screens/TaskList.tsx index be419e9..f8b669e 100644 --- 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(); const [canPress, setCanPress] = useState(true); const [searchQuery, setSearchQuery] = useState(''); - const { tasks, tasksIsLoading } = useFilteredTasks({ + const [filters, setFilters] = useState({ groupID: userGroup.groupID }); + const [temporaryFilter, setTemporaryFilter] = useState({ + 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} /> diff --git a/client/services/task.ts b/client/services/task.ts index 4b40cae..3bedece 100644 --- 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 => { }; export const useFilteredTasks = (queryParams: TaskQueryParams) => { - const { data: tasks, isLoading: tasksIsLoading } = useQuery({ + const { + data: tasks, + isLoading: tasksIsLoading, + refetch: refetchTask + } = useQuery({ queryKey: ['filteredTaskList'], queryFn: () => getFilteredTasks(queryParams), refetchInterval: 20000 }); return { tasks, - tasksIsLoading + tasksIsLoading, + refetchTask }; };