Typescript refactor.

src/components/hooks/useApiFilter.ts

@@ -1,28 +0,0 @@
-import { useState } from 'react';
-
-export function useApiFilter() {
-  const [filter, setFilter] = useState();
-  const [filterType, setFilterType] = useState('All');
-  const [page, setPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-
-  const handleFilterChange = value => setFilter(value);
-  const handlePageChange = value => setPage(value);
-  const handlePageSizeChange = value => setPageSize(value);
-
-  return {
-    filter,
-    setFilter,
-    filterType,
-    setFilterType,
-    page,
-    setPage,
-    pageSize,
-    setPageSize,
-    handleFilterChange,
-    handlePageChange,
-    handlePageSizeChange,
-  };
-}
-
-export default useApiFilter;

src/components/hooks/useDateRange.ts

@@ -6,7 +6,7 @@ import websiteStore, { setWebsiteDateRange } from 'store/websites';
 import appStore, { setDateRange } from 'store/app';
 import useApi from './useApi';
 
-export function useDateRange(websiteId: string) {
+export function useDateRange(websiteId?: string) {
   const { get } = useApi();
   const { locale } = useLocale();
   const websiteConfig = websiteStore(state => state[websiteId]?.dateRange);

src/components/hooks/useFilterQuery.ts

@@ -1,24 +1,33 @@
+import { UseQueryOptions } from '@tanstack/react-query';
 import { useState, Dispatch, SetStateAction } from 'react';
 import { useApi } from 'components/hooks/useApi';
-import { SearchFilter, FilterResult } from 'lib/types';
+import { FilterResult, SearchFilter } from 'lib/types';
 
 export interface FilterQueryResult<T> {
-  result: FilterResult<any[]>;
+  result: FilterResult<T>;
   query: any;
   params: SearchFilter;
   setParams: Dispatch<SetStateAction<T | SearchFilter>>;
 }
 
-export function useFilterQuery<T>(props = {}): FilterQueryResult<T> {
+export function useFilterQuery<T>({
+  queryKey,
+  queryFn,
+  ...options
+}: UseQueryOptions): FilterQueryResult<T> {
   const [params, setParams] = useState<T | SearchFilter>({
     query: '',
     page: 1,
   });
   const { useQuery } = useApi();
-  const { data, ...query } = useQuery<FilterResult<any[]>>({ ...props });
+  const { data, ...query } = useQuery({
+    queryKey: [...queryKey, params],
+    queryFn: (data: any) => queryFn({ ...data, ...params }),
+    ...options,
+  });
 
   return {
-    result: data,
+    result: data as FilterResult<any>,
     query,
     params,
     setParams,

src/components/hooks/useNavigation.ts

@@ -2,7 +2,12 @@ import { useMemo } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { buildUrl } from 'next-basics';
 
-export function useNavigation() {
+export function useNavigation(): {
+  pathname: string;
+  query: { [key: string]: string };
+  router: any;
+  makeUrl: (params: any, reset?: boolean) => string;
+} {
   const router = useRouter();
   const pathname = usePathname();
   const params = useSearchParams();

src/components/hooks/useReports.ts

@@ -1,19 +1,19 @@
 import { useState } from 'react';
 import useApi from './useApi';
-import useApiFilter from 'components/hooks/useApiFilter';
+import useFilterQuery from 'components/hooks/useFilterQuery';
 
-export function useReports() {
+export function useReports(websiteId?: string) {
   const [modified, setModified] = useState(Date.now());
-  const { get, useQuery, del, useMutation } = useApi();
-  const { mutate } = useMutation(reportId => del(`/reports/${reportId}`));
-  const { filter, page, pageSize, handleFilterChange, handlePageChange, handlePageSizeChange } =
-    useApiFilter();
-  const { data, error, isLoading } = useQuery({
-    queryKey: ['reports', { modified, filter, page, pageSize }],
-    queryFn: () => get(`/reports`, { filter, page, pageSize }),
+  const { get, del, useMutation } = useApi();
+  const { mutate } = useMutation({ mutationFn: (reportId: string) => del(`/reports/${reportId}`) });
+  const queryResult = useFilterQuery({
+    queryKey: ['reports', { websiteId, modified }],
+    queryFn: (params: any) => {
+      return get(websiteId ? `/websites/${websiteId}/reports` : `/reports`, params);
+    },
   });
 
-  const deleteReport = id => {
+  const deleteReport = (id: any) => {
     mutate(id, {
       onSuccess: () => {
         setModified(Date.now());
@@ -22,16 +22,8 @@ export function useReports() {
   };
 
   return {
-    reports: data,
-    error,
-    isLoading,
+    ...queryResult,
     deleteReport,
-    filter,
-    page,
-    pageSize,
-    handleFilterChange,
-    handlePageChange,
-    handlePageSizeChange,
   };
 }
 

src/components/hooks/useShareToken.ts

@@ -3,7 +3,11 @@ import useApi from './useApi';
 
 const selector = (state: { shareToken: string }) => state.shareToken;
 
-export function useShareToken(shareId: string) {
+export function useShareToken(shareId: string): {
+  shareToken: any;
+  isLoading?: boolean;
+  error?: Error;
+} {
   const shareToken = useStore(selector);
   const { get, useQuery } = useApi();
   const { isLoading, error } = useQuery({