FEAT: Persist in query params

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.lintstagedrc

@@ -1,6 +1,6 @@
 {
   "*.{js,jsx,ts,tsx}": [
-    "pnpm run lint",
-    "pnpm run format"
+    "npm run lint",
+    "npm run format"
   ]
 }

biome.json

@@ -81,9 +81,15 @@
       ".github/**",
       ".husky/**",
       ".vscode/**",
+      "dist/**",
       "coverage/**",
+      "playwright-report/**",
+      "test-results/**",
       "public/**",
-      "node_modules/**"
+      "node_modules/**",
+      "tsconfig.app.json",
+      "tsconfig.json",
+      "tsconfig.node.json"
     ]
   }
 }

components.json

@@ -18,4 +18,4 @@
     "hooks": "@/hooks"
   },
   "iconLibrary": "lucide"
-}
+}

playwright.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from '@playwright/test'
 
 /**
  * Read environment variables from file.
@@ -80,4 +80,4 @@ export default defineConfig({
     url: 'http://localhost:3000',
     reuseExistingServer: !process.env.CI,
   },
-});
+})

src/App.tsx

@@ -1,17 +1,19 @@
-import { Route, Routes } from 'react-router-dom';
-import { SWRConfig } from 'swr';
-import { Layout } from './components/Layout';
-import { localCache } from './lib/cache';
-import { About } from './views/About';
-import { Detail } from './views/Detail';
-import ErrorPage from './views/Error';
-import { Home } from './views/Home';
+import { Route, Routes } from 'react-router-dom'
+import { SWRConfig } from 'swr'
+import { Layout } from './components/Layout'
+import { localCache } from './lib/cache'
+import { About } from './views/About'
+import { Detail } from './views/Detail'
+import ErrorPage from './views/Error'
+import { Home } from './views/Home'
 
 export default function App() {
   return (
-    <SWRConfig value={{
-      provider: localCache,
-    }}>
+    <SWRConfig
+      value={{
+        provider: localCache,
+      }}
+    >
       <Routes>
         <Route path="/" element={<Layout />}>
           <Route index element={<Home />} />
@@ -21,5 +23,5 @@ export default function App() {
         </Route>
       </Routes>
     </SWRConfig>
-  );
+  )
 }

src/components/CopyButton.tsx

@@ -31,12 +31,12 @@ export function CopyButton({
         disabled={isCopied}
         data-copied={`${isCopied}`}
         onClick={() => {
-          setIsCopied(true);
-          copyTextToClipboard(`${text}`);
+          setIsCopied(true)
+          copyTextToClipboard(`${text}`)
 
           setTimeout(() => {
-            setIsCopied(false);
-          }, 3000);
+            setIsCopied(false)
+          }, 3000)
         }}
       >
         {isCopied ? (
@@ -49,5 +49,5 @@ export function CopyButton({
         ) : null}
       </Button>
     </div>
-  );
+  )
 }

src/components/EmptyState.tsx

@@ -1,16 +1,16 @@
-import { Link } from "react-router-dom";
-import { Button } from "./ui/button";
+import { Link } from 'react-router-dom'
+import { Button } from './ui/button'
 
 export const EmptyState = ({
   title,
   subtitle,
   actionLink = '/',
   actionTarget = 'Back to Homepage',
 }: {
-  title: string;
-  subtitle?: string;
-  actionTarget?: string;
-  actionLink?: string;
+  title: string
+  subtitle?: string
+  actionTarget?: string
+  actionLink?: string
 }) => {
   return (
     <div className="relative py-16 max-w-4xl mx-auto flex flex-col justify-center items-center gap-8 text-center">
@@ -34,5 +34,5 @@ export const EmptyState = ({
         <Link to={actionLink}>{actionTarget}</Link>
       </Button>
     </div>
-  );
-};
+  )
+}

src/components/GhCalendar.tsx

@@ -1,14 +1,14 @@
-import GitHubCalendar from 'react-github-calendar';
-import { useTheme } from './theme-provider';
+import GitHubCalendar from 'react-github-calendar'
+import { useTheme } from './theme-provider'
 
 export const GhCalendar = ({ username }: { username: string }) => {
-  const { theme } = useTheme();
+  const { theme } = useTheme()
 
   return (
     <GitHubCalendar
       username={username}
       blockSize={16}
       colorScheme={theme === 'system' ? undefined : theme}
     />
-  );
-};
+  )
+}

src/components/Layout.tsx

@@ -1,9 +1,9 @@
-import { Analytics } from '@vercel/analytics/react';
-import { GithubIcon } from "lucide-react";
-import { Link, Outlet } from "react-router-dom"
-import { ModeToggle } from "./mode-toggle";
-import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
-import { Button } from "./ui/button";
+import { Analytics } from '@vercel/analytics/react'
+import { GithubIcon } from 'lucide-react'
+import { Link, Outlet } from 'react-router-dom'
+import { ModeToggle } from './mode-toggle'
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
+import { Button } from './ui/button'
 
 export const Layout = () => {
   return (
@@ -38,8 +38,10 @@ export const Layout = () => {
       </main>
       <footer className="w-full p-4 border-t">
         <div className="container mx-auto text-center text-muted-foreground">
+          <span>© 2023, built with ☕️</span>
+          <br />
           <span>
-            Since 2023, built with ☕️ by{' '}
+            By{' '}
             <a
               href="https://github.com/depapp/IndoGitHubers/graphs/contributors"
               target="_blank"
@@ -53,5 +55,5 @@ export const Layout = () => {
       </footer>
       <Analytics />
     </>
-  );
+  )
 }

src/components/Spinner.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils';
+import { cn } from '@/lib/utils'
 
 export const Spinner = ({ className = '' }: { className?: string }) => {
   return (
@@ -8,7 +8,7 @@ export const Spinner = ({ className = '' }: { className?: string }) => {
           aria-hidden="true"
           className={cn(
             'inline w-10 h-10 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600',
-            className
+            className,
           )}
           viewBox="0 0 100 101"
           fill="none"
@@ -26,5 +26,5 @@ export const Spinner = ({ className = '' }: { className?: string }) => {
         <span className="sr-only">Loading...</span>
       </div>
     </div>
-  );
-};
+  )
+}

src/components/TableUser/card-users.tsx

@@ -1,9 +1,8 @@
-'use client';
+'use client'
 
-import type { User } from '@/lib/api';
-import { formatLastUpdated, formatNumber, makeInitial } from '@/lib/utils';
+import type { User } from '@/lib/api'
+import { formatLastUpdated, formatNumber, makeInitial } from '@/lib/utils'
 import {
-  type ColumnDef,
   type ColumnFiltersState,
   type Row,
   type SortingState,
@@ -15,24 +14,19 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
-} from '@tanstack/react-table';
-import { ClockIcon } from 'lucide-react';
-import { Fragment, useState } from 'react';
-import { Link } from 'react-router-dom';
-import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
-import { DEFAULT_CLASSNAMES_RANK, renderRank } from './column';
-import { DataTablePagination } from './data-table-pagination';
-import { DataTableRowActions } from './data-table-row-actions';
-import { DataTableToolbar } from './data-table-toolbar';
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-  updatedAt?: Date;
-}
+} from '@tanstack/react-table'
+import { ClockIcon } from 'lucide-react'
+import { Fragment, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'
+import { DEFAULT_CLASSNAMES_RANK, renderRank } from './column'
+import { DataTablePagination } from './data-table-pagination'
+import { DataTableRowActions } from './data-table-row-actions'
+import { DataTableToolbar } from './data-table-toolbar'
+import type { DataTableProps } from './types'
 
 function renderRowUser({ row }: { row: Row<User> }) {
-  const user = row.original as User;
+  const user = row.original as User
   return (
     <div className="w-full px-4 py-2 rounded gap-4 grid border-b">
       <div className="flex justify-between">
@@ -80,17 +74,39 @@ function renderRowUser({ row }: { row: Row<User> }) {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 export function CardUsers<TData, TValue>({
   columns,
   data,
   updatedAt,
+
+  pageIndex,
+  pageSize,
+  setPageParams,
+
+  filterBy,
+  filterValue,
+  setFilterParams,
+
+  sortBy,
+  sortDir,
+  setSortParams,
 }: DataTableProps<TData, TValue>) {
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([
+    {
+      id: filterBy,
+      value: filterValue,
+    },
+  ])
+  const [sorting, setSorting] = useState<SortingState>([
+    {
+      id: sortBy,
+      desc: sortDir === 'desc',
+    },
+  ])
 
   const table = useReactTable({
     data,
@@ -108,14 +124,18 @@ export function CardUsers<TData, TValue>({
       sorting,
       columnVisibility,
       columnFilters,
+      pagination: {
+        pageSize: pageSize,
+        pageIndex: pageIndex,
+      },
     },
     initialState: {
       columnVisibility: {
         username: true,
         name: true,
       },
     },
-  });
+  })
 
   return (
     <div className="grid gap-2">
@@ -125,6 +145,9 @@ export function CardUsers<TData, TValue>({
             table={table}
             withTableViewOptions={false}
             withSortOptions={true}
+            filterValue={filterValue}
+            setFilterParams={setFilterParams}
+            setSortParams={setSortParams}
           />
         </div>
         <div className="grid gap-2">
@@ -144,7 +167,11 @@ export function CardUsers<TData, TValue>({
         </div>
 
         <div className="p-4">
-          <DataTablePagination table={table} withPageSize={false} />
+          <DataTablePagination
+            table={table}
+            withPageSize={false}
+            setPageParams={setPageParams}
+          />
         </div>
       </div>
 
@@ -153,5 +180,5 @@ export function CardUsers<TData, TValue>({
         {formatLastUpdated(updatedAt)}
       </p>
     </div>
-  );
+  )
 }