Updated Dashboard Edits

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

@@ -59,7 +59,6 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
     setOrder(orderedWebsites.map(website => website?.id || 0));
     setEdited(true);
   }
-
   function handleActiveWebsites(id: string) {
     setActive(prevActive =>
       prevActive.includes(id) ? prevActive.filter(a => a !== id) : [...prevActive, id],

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

@@ -1,5 +1,5 @@
 'use client';
-import { Icon, Icons, Loading, Text } from 'react-basics';
+import { Icon, Icons, Loading, Text, Button } from 'react-basics';
 import PageHeader from '@/components/layout/PageHeader';
 import Pager from '@/components/common/Pager';
 import WebsiteChartList from '../websites/[websiteId]/WebsiteChartList';
@@ -7,20 +7,22 @@ import DashboardSettingsButton from '@/app/(main)/dashboard/DashboardSettingsBut
 import DashboardEdit from '@/app/(main)/dashboard/DashboardEdit';
 import EmptyPlaceholder from '@/components/common/EmptyPlaceholder';
 import { useMessages, useLocale, useTeamUrl, useWebsites } from '@/components/hooks';
-import useDashboard from '@/store/dashboard';
+import useDashboard, { saveDashboard } from '@/store/dashboard';
 import LinkButton from '@/components/common/LinkButton';
 
 export function DashboardPage() {
   const { formatMessage, labels, messages } = useMessages();
   const { teamId, renderTeamUrl } = useTeamUrl();
-  const { showCharts, editing, isEdited } = useDashboard();
+  const { showCharts, editing, isEdited, websiteActive } = useDashboard();
   const { dir } = useLocale();
-  const pageSize = isEdited ? 200 : 10;
+  const pageSize = isEdited ? 10 : 200;
+  const handleEdit = () => {
+    saveDashboard({ editing: true });
+  };
 
   const { result, query, params, setParams } = useWebsites({ teamId }, { pageSize });
   const { page } = params;
   const hasData = !!result?.data?.length;
-
   const handlePageChange = (page: number) => {
     setParams({ ...params, page });
   };
@@ -28,7 +30,6 @@ export function DashboardPage() {
   if (query.isLoading) {
     return <Loading />;
   }
-
   return (
     <section style={{ marginBottom: 60 }}>
       <PageHeader title={formatMessage(labels.dashboard)}>
@@ -47,21 +48,31 @@ export function DashboardPage() {
       {hasData && (
         <>
           {editing && <DashboardEdit teamId={teamId} />}
-          {!editing && (
+          {!editing &&
-            <>
+            (websiteActive.length != 0 ? (
-              <WebsiteChartList
+              <>
-                websites={result?.data as any}
+                <WebsiteChartList
-                showCharts={showCharts}
+                  websites={result?.data as any}
-                limit={pageSize}
+                  showCharts={showCharts}
-              />
+                  limit={pageSize}
-              <Pager
+                />
-                page={page}
+                <Pager
-                pageSize={pageSize}
+                  page={page}
-                count={result?.count}
+                  pageSize={pageSize}
-                onPageChange={handlePageChange}
+                  count={websiteActive.length}
-              />
+                  onPageChange={handlePageChange}
-            </>
+                />
-          )}
+              </>
+            ) : (
+              <EmptyPlaceholder message={formatMessage(messages.noWebsitesToggled)}>
+                <Button onClick={handleEdit}>
+                  <Icon rotate={dir === 'rtl' ? 180 : 0}>
+                    <Icons.ArrowRight />
+                  </Icon>
+                  <Text>{formatMessage(messages.goToEdit)}</Text>
+                </Button>
+              </EmptyPlaceholder>
+            ))}
         </>
       )}
     </section>

src/app/(main)/settings/websites/WebsiteAddForm.tsx

@@ -10,7 +10,7 @@ import {
 import { useApi } from '@/components/hooks';
 import { DOMAIN_REGEX } from '@/lib/constants';
 import { useMessages } from '@/components/hooks';
-
+import useDashboard, { saveDashboard } from '@/store/dashboard';
 export function WebsiteAddForm({
   teamId,
   onSave,
@@ -22,8 +22,15 @@ export function WebsiteAddForm({
 }) {
   const { formatMessage, labels, messages } = useMessages();
   const { post, useMutation } = useApi();
+  const settings = useDashboard();
+  const { websiteActive } = settings;
   const { mutate, error, isPending } = useMutation({
     mutationFn: (data: any) => post('/websites', { ...data, teamId }),
+    onSuccess: data => {
+      saveDashboard({
+        websiteActive: [...websiteActive, data.id],
+      });
+    },
   });
 
   const handleSubmit = async (data: any) => {

src/app/(main)/websites/[websiteId]/WebsiteChartList.tsx

@@ -21,10 +21,9 @@ export default function WebsiteChartList({
   const { websiteOrder, websiteActive } = useDashboard();
   const { renderTeamUrl } = useTeamUrl();
   const { dir } = useLocale();
-
   const ordered = useMemo(() => {
     return websites
-      .filter(website => (websiteActive.length ? websiteActive.includes(website.id) : true))
+      .filter(website => websiteActive.includes(website.id))
       .map(website => ({ ...website, order: websiteOrder.indexOf(website.id) || 0 }))
       .sort(firstBy('order'));
   }, [websites, websiteOrder, websiteActive]);

src/components/messages.ts

@@ -388,6 +388,11 @@ export const messages = defineMessages({
     id: 'message.no-websites-configured',
     defaultMessage: 'You do not have any websites configured.',
   },
+  noWebsitesToggled: {
+    id: 'message.no-websites-toggled',
+    defaultMessage: 'You havent Toggled any websites',
+  },
+
   noTeamWebsites: {
     id: 'message.no-team-websites',
     defaultMessage: 'This team does not have any websites.',
@@ -401,6 +406,10 @@ export const messages = defineMessages({
     id: 'message.go-to-settings',
     defaultMessage: 'Go to settings',
   },
+  goToEdit: {
+    id: 'message.go-to-edit',
+    defaultMessage: 'Edit Dashboard',
+  },
   activeUsers: {
     id: 'message.active-users',
     defaultMessage: '{x} current {x, plural, one {visitor} other {visitors}}',