Fix/pagination (#159)

* fix pagination on /roles page * minor design updates * use Ownpagination on Forum page * getting rid of console.logs * disgusting fix * prettier run
kir-dev · Jan 18, 2025 · b522f23 · b522f23
1 parent 6a9c0e4
commit b522f23
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 126 deletions.
diff --git a/apps/frontend/src/app/globals.css b/apps/frontend/src/app/globals.css
@@ -3,68 +3,68 @@
 @tailwind utilities;
 
 @layer base {
-    :root {
-        --background: 0 0% 100%;
-        --foreground: 222.2 84% 4.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 222.2 84% 4.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 222.2 84% 4.9%;
-        --primary: 222.2 47.4% 11.2%;
-        --primary-foreground: 210 40% 98%;
-        --secondary: 210 40% 96.1%;
-        --secondary-foreground: 222.2 47.4% 11.2%;
-        --muted: 210 40% 96.1%;
-        --muted-foreground: 215.4 16.3% 46.9%;
-        --accent: 210 40% 96.1%;
-        --accent-foreground: 222.2 47.4% 11.2%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 210 40% 98%;
-        --border: 214.3 31.8% 91.4%;
-        --input: 214.3 31.8% 91.4%;
-        --ring: 222.2 84% 4.9%;
-        --radius: 0.5rem;
-        --chart-1: 12 76% 61%;
-        --chart-2: 173 58% 39%;
-        --chart-3: 197 37% 24%;
-        --chart-4: 43 74% 66%;
-        --chart-5: 27 87% 67%;
-    }
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
 
-    .dark {
-        --background: 222.2 84% 4.9%;
-        --foreground: 210 40% 98%;
-        --card: 222.2 84% 4.9%;
-        --card-foreground: 210 40% 98%;
-        --popover: 222.2 84% 4.9%;
-        --popover-foreground: 210 40% 98%;
-        --primary: 210 40% 98%;
-        --primary-foreground: 222.2 47.4% 11.2%;
-        --secondary: 217.2 32.6% 17.5%;
-        --secondary-foreground: 210 40% 98%;
-        --muted: 217.2 32.6% 17.5%;
-        --muted-foreground: 215 20.2% 65.1%;
-        --accent: 217.2 32.6% 17.5%;
-        --accent-foreground: 210 40% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 210 40% 98%;
-        --border: 217.2 32.6% 17.5%;
-        --input: 217.2 32.6% 17.5%;
-        --ring: 212.7 26.8% 83.9%;
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
-    }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
 }
 
 @layer base {
-    * {
-        @apply border-border;
-    }
+  * {
+    @apply border-border;
+  }
 
-    body {
-        @apply bg-background text-foreground;
-    }
-}
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/apps/frontend/src/app/roles/page.tsx b/apps/frontend/src/app/roles/page.tsx
@@ -17,6 +17,7 @@ export default function Page() {
   const [search, setSearch] = React.useState('');
   const [pageIndex, setPageIndex] = React.useState(0);
   const users = useUsers(search, pageIndex);
+
   async function onChange(newRole: Role, userId: string) {
     try {
       await api.patch(`/users/${userId}`, { role: newRole });
@@ -55,6 +56,7 @@ export default function Page() {
             pageIndex: pageIndex,
             setPageIndex: setPageIndex,
             limit: users.data ? users.data.totalUsers : 10,
+            isLoading: users.isLoading,
           }}
         />
       )}
@@ -72,6 +74,7 @@ export default function Page() {
             pageIndex: pageIndex,
             setPageIndex: setPageIndex,
             limit: users.data ? users.data.totalUsers : 10,
+            isLoading: users.isLoading,
           }}
         />
       )}

diff --git a/apps/frontend/src/components/ui/Forum.tsx b/apps/frontend/src/components/ui/Forum.tsx
@@ -6,18 +6,11 @@ import api from '@/components/network/apiSetup';
 import { Button } from '@/components/ui/button';
 import LoadingCard from '@/components/ui/LoadingCard';
 import NewsCard from '@/components/ui/NewsCard';
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from '@/components/ui/pagination';
 import PostCreateOrEditDialog from '@/components/ui/PostCreateOrEditDialog';
 import usePosts from '@/hooks/usePosts';
 import useProfile from '@/hooks/useProfile';
 import { PostEntity } from '@/types/post-entity';
+import OwnPagination from '@/components/ui/ownPagination';
 
 export default function Forum() {
   const [pageIndex, setPageIndex] = React.useState(0);
@@ -70,32 +63,15 @@ export default function Forum() {
           <NewsCard post={post} key={post.id} onDelete={onDelete} onEdit={onEdit} />
         ))}
       {posts && posts.total > 0 && (
-        <Pagination>
-          <PaginationContent>
-            <PaginationItem
-              onClick={() => {
-                if (pageIndex === 0) return;
-                setPageIndex(pageIndex - 1);
-              }}
-              aria-disabled={pageIndex <= 0}
-              className={pageIndex <= 0 ? 'pointer-events-none opacity-50' : ''}
-            >
-              <PaginationPrevious href='#' />
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href='#' isActive>
-                {pageIndex + 1}
-              </PaginationLink>
-            </PaginationItem>
-            <PaginationItem
-              onClick={() => setPageIndex(pageIndex + 1)}
-              aria-disabled={posts.limit >= pageIndex}
-              className={posts.limit >= pageIndex ? 'pointer-events-none opacity-50' : ''}
-            >
-              <PaginationNext href='#' />
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
+        <OwnPagination
+          props={{
+            page_size: 10,
+            pageIndex: pageIndex,
+            setPageIndex: setPageIndex,
+            limit: posts.total,
+            isLoading: isLoading,
+          }}
+        />
       )}
     </div>
   );

diff --git a/apps/frontend/src/components/ui/ownPagination.tsx b/apps/frontend/src/components/ui/ownPagination.tsx
@@ -17,13 +17,22 @@ type props = {
   limit: number;
   firstLastHide?: boolean;
   prevNextHide?: boolean;
+  isLoading?: boolean;
+  page_size?: number;
 };
 
-const PAGES_PER_PAGE = 50;
+const DEFAULT_PAGE_SIZE = 50;
 const NEIGHBOUR_BTN_NUM = 2;
 export default function OwnPagination({ props }: { props: props }) {
   const [buttons, setButtons] = React.useState<number[]>([]);
-  const lastPageIndex = Math.ceil(props.limit / PAGES_PER_PAGE) - 1;
+  const lastPageIndex = Math.ceil(props.limit / (props.page_size ?? DEFAULT_PAGE_SIZE)) - 1;
+  const dummyChars = [
+    { id: 1, char: '?' },
+    { id: 2, char: '#' },
+    { id: 3, char: '@' },
+    { id: 4, char: '!' },
+    { id: 5, char: '%' },
+  ];
   useEffect(() => {
     const buttons = [];
     const lowerBound = props.pageIndex - NEIGHBOUR_BTN_NUM > 0 ? props.pageIndex - NEIGHBOUR_BTN_NUM : 0;
@@ -60,13 +69,23 @@ export default function OwnPagination({ props }: { props: props }) {
             <PaginationPrevious />
           </PaginationItem>
         )}
-        {buttons.map((button) => (
-          <PaginationItem key={button} onClick={() => props.setPageIndex(button)}>
-            <PaginationLink isActive={button === props.pageIndex} href='#'>
-              {button + 1}
-            </PaginationLink>
-          </PaginationItem>
-        ))}
+        {props.isLoading && (
+          <>
+            {dummyChars.map((value) => (
+              <PaginationItem key={value.id}>
+                <PaginationLink>{value.char}</PaginationLink>
+              </PaginationItem>
+            ))}
+          </>
+        )}
+        {!props.isLoading &&
+          buttons.map((button) => (
+            <PaginationItem key={button} onClick={() => props.setPageIndex(button)}>
+              <PaginationLink isActive={button === props.pageIndex} href='#'>
+                {button + 1}
+              </PaginationLink>
+            </PaginationItem>
+          ))}
         {!props.prevNextHide && (
           <PaginationItem
             onClick={() => {

diff --git a/apps/frontend/src/hooks/useUsers.ts b/apps/frontend/src/hooks/useUsers.ts
@@ -4,12 +4,12 @@ import { axiosGetFetcher } from '@/lib/fetchers';
 import { UserEntityPagination } from '@/types/user-entity';
 
 export function useUsers(query: string, page?: number) {
-  let requestPath = `users/search?query=${query}`;
+  let requestPath;
   if (query.length < 3) {
-    if (page) {
-      requestPath = `users?page=${page}&pageSize=50`;
-    }
-    requestPath = `users?page=0&pageSize=50`;
+    const pageNumber = page !== undefined ? page : 0;
+    requestPath = `users?page=${pageNumber}&pageSize=50`;
+  } else {
+    requestPath = `users/search?query=${query}`;
   }
   return useSWR<UserEntityPagination>(requestPath, axiosGetFetcher);
 }
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
@@ -1,10 +1,6 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -22,20 +18,10 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
     "target": "ES2017"
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts",
-    "eslint.config.mjs"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "eslint.config.mjs"],
+  "exclude": ["node_modules"]
 }