Updated profile menu. Fixed dashboard.

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

@@ -7,39 +7,30 @@ import WebsiteChartList from '../websites/[websiteId]/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';
+import { useMessages, useLocale, useTeamContext, useWebsites } from 'components/hooks';
 import useDashboard from 'store/dashboard';
-import { useMessages, useLocale, useLogin, useFilterQuery } from 'components/hooks';
 
 export function Dashboard() {
   const { formatMessage, labels, messages } = useMessages();
-  const { user } = useLogin();
+  const { teamId } = useTeamContext();
   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(`/users/${user.id}/websites`, { ...params, includeTeams: true, pageSize });
-    },
-  });
+  const { result, query, params, setParams } = useWebsites({}, { pageSize });
+  const { page } = params;
+  const hasData = !!result?.data;
 
   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 />;
   }
 
   return (
-    <>
+    <section style={{ marginBottom: 60 }}>
       <PageHeader title={formatMessage(labels.dashboard)}>
         {!editing && hasData && <DashboardSettingsButton />}
       </PageHeader>
@@ -57,21 +48,25 @@ export function Dashboard() {
       )}
       {hasData && (
         <>
-          {editing && <DashboardEdit />}
+          {editing && <DashboardEdit teamId={teamId} />}
           {!editing && (
             <>
-              <WebsiteChartList websites={data as any} showCharts={showCharts} limit={pageSize} />
+              <WebsiteChartList
+                websites={result?.data as any}
+                showCharts={showCharts}
+                limit={pageSize}
+              />
               <Pager
                 page={page}
                 pageSize={pageSize}
-                count={count}
+                count={result?.count}
                 onPageChange={handlePageChange}
               />
             </>
           )}
         </>
       )}
-    </>
+    </section>
   );
 }
 

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

@@ -2,31 +2,30 @@
 import { useState, useMemo } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
-import { Button } from 'react-basics';
+import { Button, Loading } from 'react-basics';
 import { firstBy } from 'thenby';
 import useDashboard, { saveDashboard } from 'store/dashboard';
-import { useMessages } from 'components/hooks';
-import { useApi } from 'components/hooks';
+import { useMessages, useWebsites } from 'components/hooks';
 import styles from './DashboardEdit.module.css';
 
-const dragId = 'dashboard-website-ordering';
+const DRAG_ID = 'dashboard-website-ordering';
 
-export function DashboardEdit() {
+export function DashboardEdit({ teamId }: { teamId: string }) {
   const settings = useDashboard();
   const { websiteOrder } = settings;
   const { formatMessage, labels } = useMessages();
   const [order, setOrder] = useState(websiteOrder || []);
-  const { get, useQuery } = useApi();
-  const { data: result } = useQuery({
-    queryKey: ['websites'],
-    queryFn: () => get('/websites'),
-  });
-  const { data: websites } = result || {};
+  const {
+    result,
+    query: { isLoading },
+  } = useWebsites({ teamId });
+
+  const websites = result?.data;
 
   const ordered = useMemo(() => {
     if (websites) {
       return websites
-        .map(website => ({ ...website, order: order.indexOf(website.id) }))
+        .map((website: { id: any }) => ({ ...website, order: order.indexOf(website.id) }))
         .sort(firstBy('order'));
     }
     return [];
@@ -57,6 +56,10 @@ export function DashboardEdit() {
     setOrder([]);
   }
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   return (
     <>
       <div className={styles.buttons}>
@@ -72,7 +75,7 @@ export function DashboardEdit() {
       </div>
       <div className={styles.dragActive}>
         <DragDropContext onDragEnd={handleWebsiteDrag}>
-          <Droppable droppableId={dragId}>
+          <Droppable droppableId={DRAG_ID}>
             {(provided, snapshot) => (
               <div
                 {...provided.droppableProps}
@@ -80,7 +83,7 @@ export function DashboardEdit() {
                 style={{ marginBottom: snapshot.isDraggingOver ? 260 : null }}
               >
                 {ordered.map(({ id, name, domain }, index) => (
-                  <Draggable key={id} draggableId={`${dragId}-${id}`} index={index}>
+                  <Draggable key={id} draggableId={`${DRAG_ID}-${id}`} index={index}>
                     {(provided, snapshot) => (
                       <div
                         ref={provided.innerRef}