Typescript refactor.

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

@@ -0,0 +1,79 @@
+'use client';
+import { Button, Icon, Icons, Loading, Text } from 'react-basics';
+import Link from 'next/link';
+import PageHeader from 'components/layout/PageHeader';
+import Pager from 'components/common/Pager';
+import WebsiteChartList from '../../(main)/websites/[id]/WebsiteChartList';
+import DashboardSettingsButton from 'app/(main)/dashboard/DashboardSettingsButton';
+import DashboardEdit from 'app/(main)/dashboard/DashboardEdit';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import useApi from 'components/hooks/useApi';
+import useDashboard from 'store/dashboard';
+import useMessages from 'components/hooks/useMessages';
+import useLocale from 'components/hooks/useLocale';
+import useFilterQuery from 'components/hooks/useFilterQuery';
+
+export function Dashboard() {
+  const { formatMessage, labels, messages } = useMessages();
+  const { showCharts, editing } = useDashboard();
+  const { dir } = useLocale();
+  const { get } = useApi();
+  const pageSize = 10;
+
+  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" />;
+  }
+
+  return (
+    <>
+      <PageHeader title={formatMessage(labels.dashboard)}>
+        {!editing && hasData && <DashboardSettingsButton />}
+      </PageHeader>
+      {!hasData && (
+        <EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)}>
+          <Link href="/settings/websites">
+            <Button>
+              <Icon rotate={dir === 'rtl' ? 180 : 0}>
+                <Icons.ArrowRight />
+              </Icon>
+              <Text>{formatMessage(messages.goToSettings)}</Text>
+            </Button>
+          </Link>
+        </EmptyPlaceholder>
+      )}
+      {hasData && (
+        <>
+          {editing && <DashboardEdit />}
+          {!editing && (
+            <>
+              <WebsiteChartList websites={data} showCharts={showCharts} limit={pageSize} />
+              <Pager
+                page={page}
+                pageSize={pageSize}
+                count={count}
+                onPageChange={handlePageChange}
+              />
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+}
+
+export default Dashboard;