update pinned ui. remove paging if dashboard edited

src/app/(main)/dashboard/DashboardEdit.module.css

@@ -17,11 +17,6 @@
   padding: 5px;
 }
 
-.pin {
-  width: 20px;
-  height: 20px;
-}
-
 .item h1 {
   font-weight: 600;
   font-size: 16px;

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

@@ -1,7 +1,7 @@
 import { useState, useMemo, useEffect } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import classNames from 'classnames';
-import { Button, Loading } from 'react-basics';
+import { Button, Icon, Loading } from 'react-basics';
 import Icons from 'components/icons';
 import { firstBy } from 'thenby';
 import useDashboard, { saveDashboard } from 'store/dashboard';
@@ -12,10 +12,11 @@ const DRAG_ID = 'dashboard-website-ordering';
 
 export function DashboardEdit({ teamId }: { teamId: string }) {
   const settings = useDashboard();
-  const { websiteOrder, websiteActive } = settings;
+  const { websiteOrder, websiteActive, isEdited } = settings;
   const { formatMessage, labels } = useMessages();
   const [order, setOrder] = useState(websiteOrder || []);
   const [active, setActive] = useState(websiteActive || []);
+  const [edited, setEdited] = useState(isEdited);
   const [websites, setWebsites] = useState([]);
 
   const {
@@ -39,7 +40,10 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
   const ordered = useMemo(() => {
     if (websites) {
       return websites
-        .map((website: { id: any }) => ({ ...website, order: order.indexOf(website.id) }))
+        .map((website: { id: any; name: string; domain: string }) => ({
+          ...website,
+          order: order.indexOf(website.id),
+        }))
         .sort(firstBy('order'));
     }
     return [];
@@ -53,29 +57,33 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
     orderedWebsites.splice(destination.index, 0, removed);
 
     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],
     );
+    setEdited(true);
   }
 
   function handleSave() {
     saveDashboard({
       editing: false,
+      isEdited: edited,
       websiteOrder: order,
       websiteActive: active,
     });
   }
 
   function handleCancel() {
-    saveDashboard({ editing: false, websiteOrder, websiteActive });
+    saveDashboard({ editing: false, websiteOrder, websiteActive, isEdited });
   }
 
   function handleReset() {
     setOrder([]);
     setActive([]);
+    setEdited(false);
   }
 
   if (isLoading) {
@@ -115,11 +123,14 @@ export function DashboardEdit({ teamId }: { teamId: string }) {
                         })}
                         {...provided.draggableProps}
                         {...provided.dragHandleProps}
-                        onClick={() => handleActiveWebsites(id)}
                       >
                         <div className={styles.text}>
                           <div className={styles.pinActive}>
-                            {active.includes(id) ? <Icons.PushPin className={styles.pin} /> : null}
+                            <Button size="sm" onClick={() => handleActiveWebsites(id)}>
+                              <Icon rotate={active.includes(id) ? 0 : 45}>
+                                <Icons.PushPin />
+                              </Icon>
+                            </Button>
                           </div>
                           <h1>{name}</h1>
                           <h2>{domain}</h2>

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

@@ -13,9 +13,9 @@ import LinkButton from 'components/common/LinkButton';
 export function DashboardPage() {
   const { formatMessage, labels, messages } = useMessages();
   const { teamId, renderTeamUrl } = useTeamUrl();
-  const { showCharts, editing } = useDashboard();
+  const { showCharts, editing, isEdited } = useDashboard();
   const { dir } = useLocale();
-  const pageSize = 10;
+  const pageSize = isEdited ? 200 : 10;
 
   const { result, query, params, setParams } = useWebsites({ teamId }, { pageSize });
   const { page } = params;

src/store/dashboard.ts

@@ -8,6 +8,7 @@ export const initialState = {
   websiteOrder: [],
   websiteActive: [],
   editing: false,
+  isEdited: false,
 };
 
 const store = create(() => ({ ...initialState, ...getItem(DASHBOARD_CONFIG) }));