From 5520d3c3d6f1ca17b38319076229be6c8573f7bc Mon Sep 17 00:00:00 2001
From: Jan-Willem van Bremen <janwillemvanbremen@live.nl>
Date: Mon, 20 May 2024 21:23:30 +0200
Subject: [PATCH] Cleanup

---
 components/common/Filters.jsx    |  2 +-
 pages/combos/index.jsx           | 12 ++++++------
 pages/dashboard.jsx              | 20 ++++++++++++++------
 pages/flatgroundtricks/index.jsx | 14 ++++++++------
 pages/grinds/index.jsx           | 11 +++++------
 pages/manuals/index.jsx          | 12 ++++++------
 6 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/components/common/Filters.jsx b/components/common/Filters.jsx
index cc66930..5a55e01 100644
--- a/components/common/Filters.jsx
+++ b/components/common/Filters.jsx
@@ -16,7 +16,7 @@ function Filters({ filters = {}, onReset, children }) {
   }, []);
 
   return (
-    <details ref={detailsRef} className="rounded-lg bg-neutral-50 p-4 shadow-lg dark:bg-neutral-800">
+    <details ref={detailsRef} className="rounded-lg bg-neutral-50 p-4 shadow-md dark:bg-neutral-800">
       <summary className="cursor-pointer text-xl font-medium">Filters</summary>
       <div data-contents="">
         <hr className="my-4 border-neutral-800 dark:border-neutral-400" />
diff --git a/pages/combos/index.jsx b/pages/combos/index.jsx
index eeed9a9..db064f2 100644
--- a/pages/combos/index.jsx
+++ b/pages/combos/index.jsx
@@ -39,8 +39,11 @@ export default function CombosPage() {
     }
   };
 
+  const filteredCombos =
+    filters.landed === 'any' ? combos : combos?.filter((combo) => filters.landed === (combo.landed ? 'yes' : 'no'));
+
   return (
-    <div className="flex flex-col gap-16">
+    <div className="flex flex-col gap-12">
       <div>
         <h1 className="text-center text-5xl">Combos</h1>
         <p className="mt-3 text-center">This is an overview of all the combos you've added to your account.</p>
@@ -101,17 +104,14 @@ export default function CombosPage() {
 
         <TransitionScroll hiddenStyle={hiddenStyle} baseStyle={baseStyle} className="flex flex-col">
           <GenericTable
-            objArray={
-              filters.landed === 'any'
-                ? combos
-                : combos?.filter((combo) => filters.landed === (combo.landed ? 'yes' : 'no'))
-            }
+            objArray={filteredCombos}
             columns={[{ trick: { className: 'text-sm font-bold', alias: 'Combo name' } }, landedAtCol]}
             actions={getCommonActions('combos')}
             onAction={handleAction}
             entityName="combo"
             newLink="/new-combo"
             showCount
+            enablePagination
           />
         </TransitionScroll>
       </div>
diff --git a/pages/dashboard.jsx b/pages/dashboard.jsx
index f36d042..6cce396 100644
--- a/pages/dashboard.jsx
+++ b/pages/dashboard.jsx
@@ -35,10 +35,10 @@ import TransitionScroll from 'react-transition-scroll';
 // }
 
 export default function Index() {
-  const [flatgroundTricks, setFlatgroundTricks] = useState({ data: [], count: 0 });
-  const [grinds, setGrinds] = useState({ data: [], count: 0 });
-  const [manuals, setManuals] = useState({ data: [], count: 0 });
-  const [combos, setCombos] = useState({ data: [], count: 0 });
+  const [flatgroundTricks, setFlatgroundTricks] = useState({ data: null, count: 0 });
+  const [grinds, setGrinds] = useState({ data: null, count: 0 });
+  const [manuals, setManuals] = useState({ data: null, count: 0 });
+  const [combos, setCombos] = useState({ data: null, count: 0 });
 
   useAsyncEffect(async () => {
     const fetchAndSetData = async (endpoint, setData) => {
@@ -97,10 +97,10 @@ export default function Index() {
     }
   };
 
-  const formatAdditionalInfo = (count, data) => (count !== 0 && count !== data.length ? count + ' total' : '');
+  const formatAdditionalInfo = (count, data) => (count !== 0 && count !== data?.length ? count + ' total' : '');
 
   return (
-    <div className="flex flex-col gap-16">
+    <div className="flex flex-col gap-12">
       <div>
         <h1 className="text-center text-5xl">Dashboard</h1>
         <p className="mt-3 text-center">This is an overview of all the landed tricks you've added to your account.</p>
@@ -119,6 +119,8 @@ export default function Index() {
           defaultSortColumnIndex={1}
           defaultSortDirection="desc"
           additionalInfo={formatAdditionalInfo(flatgroundTricks.count, flatgroundTricks.data)}
+          additionalInfoLink="/flatgroundtricks"
+          enablePagination
         />
       </TransitionScroll>
 
@@ -136,6 +138,8 @@ export default function Index() {
           defaultSortColumnIndex={1}
           defaultSortDirection="desc"
           additionalInfo={formatAdditionalInfo(grinds.count, grinds.data)}
+          additionalInfoLink="/grinds"
+          enablePagination
         />
       </TransitionScroll>
 
@@ -153,6 +157,8 @@ export default function Index() {
           defaultSortColumnIndex={1}
           defaultSortDirection="desc"
           additionalInfo={formatAdditionalInfo(manuals.count, manuals.data)}
+          additionalInfoLink="/manuals"
+          enablePagination
         />
       </TransitionScroll>
 
@@ -170,6 +176,8 @@ export default function Index() {
           defaultSortColumnIndex={1}
           defaultSortDirection="desc"
           additionalInfo={formatAdditionalInfo(combos.count, combos.data)}
+          additionalInfoLink="/combos"
+          enablePagination
         />
       </TransitionScroll>
     </div>
diff --git a/pages/flatgroundtricks/index.jsx b/pages/flatgroundtricks/index.jsx
index 05e97ce..97f51db 100644
--- a/pages/flatgroundtricks/index.jsx
+++ b/pages/flatgroundtricks/index.jsx
@@ -38,8 +38,13 @@ export default function FlatgroundTricksPage() {
     }
   };
 
+  const filteredFlatgroundTricks =
+    filters.landed === 'any'
+      ? flatgroundTricks
+      : flatgroundTricks?.filter((trick) => filters.landed === (trick.landed ? 'yes' : 'no'));
+
   return (
-    <div className="flex flex-col gap-16">
+    <div className="flex flex-col gap-12">
       <div>
         <h1 className="text-center text-5xl">Flatground Tricks</h1>
         <p className="mt-3 text-center">
@@ -69,11 +74,7 @@ export default function FlatgroundTricksPage() {
 
         <TransitionScroll hiddenStyle={hiddenStyle} baseStyle={baseStyle} className="flex flex-col">
           <GenericTable
-            objArray={
-              filters.landed === 'any'
-                ? flatgroundTricks
-                : flatgroundTricks?.filter((trick) => filters.landed === (trick.landed ? 'yes' : 'no'))
-            }
+            objArray={filteredFlatgroundTricks}
             columns={['stance', 'direction', 'rotation', 'name', trickCol, landedAtCol]}
             actions={getCommonActions('flatgroundtricks')}
             onAction={handleAction}
@@ -81,6 +82,7 @@ export default function FlatgroundTricksPage() {
             newLink="/new-flatground-trick"
             showCount
             defaultSortColumnIndex={4}
+            enablePagination
           />
         </TransitionScroll>
       </div>
diff --git a/pages/grinds/index.jsx b/pages/grinds/index.jsx
index 15783ee..a75e400 100644
--- a/pages/grinds/index.jsx
+++ b/pages/grinds/index.jsx
@@ -37,9 +37,11 @@ export default function GrindsPage() {
         break;
     }
   };
+  const filteredGrinds =
+    filters.landed === 'any' ? grinds : grinds.filter((grind) => filters.landed === (grind.landed ? 'yes' : 'no'));
 
   return (
-    <div className="flex flex-col gap-16">
+    <div className="flex flex-col gap-12">
       <div>
         <h1 className="text-center text-5xl">Grinds</h1>
         <p className="mt-3 text-center">This is an overview of all the grinds you've added to your account.</p>
@@ -66,11 +68,7 @@ export default function GrindsPage() {
 
         <TransitionScroll hiddenStyle={hiddenStyle} baseStyle={baseStyle} className="flex flex-col">
           <GenericTable
-            objArray={
-              filters.landed === 'any'
-                ? grinds
-                : grinds.filter((grind) => filters.landed === (grind.landed ? 'yes' : 'no'))
-            }
+            objArray={filteredGrinds}
             columns={['stance', 'direction', 'name', trickCol, landedAtCol]}
             actions={getCommonActions('grinds')}
             entityName="grind"
@@ -78,6 +76,7 @@ export default function GrindsPage() {
             newLink="/new-grind"
             showCount
             defaultSortColumnIndex={3}
+            enablePagination
           />
         </TransitionScroll>
       </div>
diff --git a/pages/manuals/index.jsx b/pages/manuals/index.jsx
index 1d77eb8..4c012b8 100644
--- a/pages/manuals/index.jsx
+++ b/pages/manuals/index.jsx
@@ -38,8 +38,11 @@ export default function ManualsPage() {
     }
   };
 
+  const filteredManuals =
+    filters.landed === 'any' ? manuals : manuals.filter((manual) => filters.landed === (manual.landed ? 'yes' : 'no'));
+
   return (
-    <div className="flex flex-col gap-16">
+    <div className="flex flex-col gap-12">
       <div>
         <h1 className="text-center text-5xl">Manuals</h1>
         <p className="mt-3 text-center">This is an overview of all the manuals you've added to your account.</p>
@@ -67,17 +70,14 @@ export default function ManualsPage() {
 
         <TransitionScroll hiddenStyle={hiddenStyle} baseStyle={baseStyle} className="flex flex-col">
           <GenericTable
-            objArray={
-              filters.landed === 'any'
-                ? manuals
-                : manuals.filter((manual) => filters.landed === (manual.landed ? 'yes' : 'no'))
-            }
+            objArray={filteredManuals}
             columns={[{ type: { className: 'text-sm font-bold' } }, landedAtCol]}
             actions={getCommonActions('manuals')}
             onAction={handleAction}
             entityName="manual"
             newLink="/new-manual"
             showCount
+            enablePagination
           />
         </TransitionScroll>
       </div>