Typescript refactor.

src/app/(main)/dashboard/Dashboard.tsx

@@ -11,23 +11,31 @@ import useApi from 'components/hooks/useApi';
 import useDashboard from 'store/dashboard';
 import useMessages from 'components/hooks/useMessages';
 import useLocale from 'components/hooks/useLocale';
-import useApiFilter from 'components/hooks/useApiFilter';
+import useFilterQuery from 'components/hooks/useFilterQuery';
 
 export function Dashboard() {
   const { formatMessage, labels, messages } = useMessages();
   const { showCharts, editing } = useDashboard();
   const { dir } = useLocale();
-  const { get, useQuery } = useApi();
-  const { page, handlePageChange } = useApiFilter();
+  const { get } = useApi();
   const pageSize = 10;
-  const { data: result, isLoading } = useQuery({
-    queryKey: ['websites', page, pageSize],
-    queryFn: () => get('/websites', { includeTeams: 1, page, pageSize }),
-  });
-  const { data, count } = result || {};
-  const hasData = data && data?.length !== 0;
 
-  if (isLoading) {
+  const { query, params, setParams, result } = useFilterQuery({
+    queryKey: ['dashboard:websites'],
+    queryFn: (params: any) => {
+      return get(`/websites`, { ...params, includeTeams: true, pageSize });
+    },
+  });
+
+  const handlePageChange = (page: number) => {
+    setParams({ ...params, page });
+  };
+
+  const { data, count } = result || {};
+  const hasData = !!(data as any)?.length;
+  const { page } = params;
+
+  if (query.isLoading) {
     return <Loading size="lg" />;
   }
 

src/app/(main)/dashboard/DashboardEdit.tsx

@@ -60,13 +60,13 @@ export function DashboardEdit() {
   return (
     <>
       <div className={styles.buttons}>
-        <Button onClick={handleSave} variant="action" size="small">
+        <Button onClick={handleSave} variant="primary" size="sm">
           {formatMessage(labels.save)}
         </Button>
-        <Button onClick={handleCancel} size="small">
+        <Button onClick={handleCancel} size="sm">
           {formatMessage(labels.cancel)}
         </Button>
-        <Button onClick={handleReset} size="small">
+        <Button onClick={handleReset} size="sm">
           {formatMessage(labels.reset)}
         </Button>
       </div>