refactor table

fullstacksjs · Aug 14, 2023 · f5be35d · f5be35d
1 parent 62c835b
commit f5be35d
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 39 deletions.
diff --git a/app/Dashboard/Households/HouseholdDetail/_components/MemberForm/MemberForm.tsx b/app/Dashboard/Households/HouseholdDetail/_components/MemberForm/MemberForm.tsx
@@ -25,7 +25,7 @@ import {
   nationalities,
   religions,
 } from '@camp/domain';
-import { ArrowDownIcon, CheckIcon, EditIcon, TrashIcon } from '@camp/icons';
+import { CheckIcon, ChevronDownIcon, EditIcon, TrashIcon } from '@camp/icons';
 import { messages } from '@camp/messages';
 import { createTestAttr } from '@camp/test';
 import { isNull } from '@fullstacksjs/toolbox';
@@ -180,7 +180,7 @@ export const MemberForm = ({
     <DashboardCard
       left={
         <ActionIcon onClick={toggle}>
-          <ArrowDownIcon width="16" height="16" color="black" />
+          <ChevronDownIcon width="16" height="16" color="black" />
         </ActionIcon>
       }
       right={

diff --git a/app/Dashboard/Households/HouseholdList/HouseholdList.tsx b/app/Dashboard/Households/HouseholdList/HouseholdList.tsx
@@ -100,19 +100,15 @@ export const HouseholdList = () => {
   if (isNull(households)) return null;
   if (isEmpty(households)) return <HouseholdEmptyState />;
 
-  const householdRow = <HouseholdTableRow rows={table} />;
-
-  const householdColumn = <HouseholdTableColumn col={table} />;
-
   return (
     <DashboardCard
       left={<CreateHouseholdButton />}
       right={<DashboardTitle>{t.title}</DashboardTitle>}
     >
       <Table
         id={ids.householdTableId}
-        columns={householdColumn}
-        rows={householdRow}
+        columns={<HouseholdTableColumn col={table} />}
+        rows={<HouseholdTableRow rows={table} />}
       />
     </DashboardCard>
   );

diff --git a/app/Dashboard/Households/HouseholdList/HouseholdTableColumn.tsx b/app/Dashboard/Households/HouseholdList/HouseholdTableColumn.tsx
@@ -1,42 +1,49 @@
 import type { HouseholdKeys, HouseholdListItem } from '@camp/domain';
+import type { Icon } from '@camp/icons';
+import { ArrowDownIcon, ArrowUpIcon } from '@camp/icons';
 import { Text } from '@mantine/core';
 import type { Table } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
-import { ArrowDown, ArrowUp } from 'react-feather';
 
 interface Props {
   col: Table<HouseholdKeys & HouseholdListItem>;
 }
 
+const iconMap: Record<string, Icon> = {
+  asc: ArrowUpIcon,
+  desc: ArrowDownIcon,
+} as const;
+
 export const HouseholdTableColumn = ({ col }: Props) => {
   return col.getHeaderGroups().map(headerGroup => (
     <tr key={headerGroup.id}>
-      {headerGroup.headers.map(header => (
-        <th key={header.id} colSpan={header.colSpan}>
-          {header.isPlaceholder ? null : (
-            <Text
-              sx={{
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 5,
-              }}
-              {...{
-                className: header.column.getCanSort()
-                  ? 'cursor-pointer select-none'
-                  : '',
-                onClick: header.column.getToggleSortingHandler(),
-              }}
-            >
-              {flexRender(header.column.columnDef.header, header.getContext())}
-              {{
-                asc: <ArrowUp size={14} />,
-                desc: <ArrowDown size={14} />,
-              }[header.column.getIsSorted() as string] ?? null}
-            </Text>
-          )}
-        </th>
-      ))}
+      {headerGroup.headers.map(header => {
+        const Icon = iconMap[header.column.getIsSorted() as string];
+        const canSort = header.column.getCanSort();
+
+        return (
+          <th key={header.id} colSpan={header.colSpan}>
+            {header.isPlaceholder ? null : (
+              <Text
+                sx={{
+                  cursor: canSort ? 'pointer' : undefined,
+                  display: 'flex',
+                  alignItems: 'center',
+                  userSelect: canSort ? 'none' : undefined,
+                  gap: 5,
+                }}
+                onClick={header.column.getToggleSortingHandler()}
+              >
+                {flexRender(
+                  header.column.columnDef.header,
+                  header.getContext(),
+                )}
+                {Icon ? <Icon size={14} /> : null}
+              </Text>
+            )}
+          </th>
+        );
+      })}
     </tr>
   ));
 };
diff --git a/app/Dashboard/Projects/ProjectList/ProjectTableColumn.tsx b/app/Dashboard/Projects/ProjectList/ProjectTableColumn.tsx
@@ -1,8 +1,8 @@
 import type { ProjectKeys, ProjectListItem } from '@camp/domain';
+import { ArrowDownIcon, ArrowUpIcon } from '@camp/icons';
 import { Title } from '@mantine/core';
 import type { Table } from '@tanstack/react-table';
 import { flexRender } from '@tanstack/react-table';
-import { ArrowDown, ArrowUp } from 'react-feather';
 
 interface Props {
   col: Table<ProjectKeys & ProjectListItem>;
@@ -17,8 +17,8 @@ export const ProjectTableColumn = ({ col }: Props) => {
             <Title size="xs" onClick={header.column.getToggleSortingHandler()}>
               {flexRender(header.column.columnDef.header, header.getContext())}
               {{
-                asc: <ArrowUp />,
-                desc: <ArrowDown />,
+                asc: <ArrowUpIcon />,
+                desc: <ArrowDownIcon />,
               }[header.column.getIsSorted() as string] ?? null}
             </Title>
           )}

diff --git a/libs/icons/index.ts b/libs/icons/index.ts
@@ -1,8 +1,10 @@
+export type { Icon } from 'react-feather';
 export {
-  ChevronDown as ArrowDownIcon,
+  ArrowDown as ArrowDownIcon,
   ArrowUp as ArrowUpIcon,
   Calendar as CalendarIcon,
   Check as CheckIcon,
+  ChevronDown as ChevronDownIcon,
   ChevronLeft as ChevronLeftIcon,
   Home as DashboardIcon,
   Edit as EditIcon,