useProjectQuery

The useProjectQuery hook is a custom hook used to fetch, sort, and filter projects.

Components

Atoms

Two atoms are defined for state management:

• sortAtom: Stores the current sort type.

• searchAtom: Stores the current search string.

The useAtom hook is used to get and set the current sort type and search string.

Query

const { data, isLoading } = useQuery({
    queryKey: projectQueryKeys.all,
    queryFn: () => fetchProjects()
})

Uses the useQuery hook from @tanstack/react-query to fetch project data from the API. Here, data and isLoading property is destructured from the result of useQuery.

const flattenedProjects = useMemo(() => {
    if (data?.length > 0) {
      return data.map((item: any) => ({
        ...item.project,
        role: item.role,
        image: item.project.image || imageArr[item.project.cover]
      }))
    }
    return []
}, [data])

Flattens the received data.

Sorting

switch (sortType) {
    case ProjectSort.Name:
        return sortName(a.name, b.name)
    case ProjectSort.DateCreated:
        return sortDate(a.createdAt, b.createdAt)
    case ProjectSort.LastModified:
        return sortDate(a.lastModified, b.lastModified)
    default:
        return 0
}

Sorts the flattened projects based on the current sort type.

Filtering

Filters the sorted projects based on the current search string.

Behavior

The hook returns the sorted and filtered projects, the loading state, and functions to set the sort type and search string.