From cc5f9140a4c0ce09f24d8a36bd09eb239a8e371c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8Dvar=20Oddsson?= <ivaroddsson@gmail.com>
Date: Fri, 10 May 2024 14:01:03 +0000
Subject: [PATCH] Use Table component for appealed cases

---
 .../AppealCasesTable/AppealCasesTable.tsx     | 182 ++++++++----------
 apps/judicial-system/web/src/types/index.ts   |   6 +-
 2 files changed, 83 insertions(+), 105 deletions(-)

diff --git a/apps/judicial-system/web/src/components/Table/AppealCasesTable/AppealCasesTable.tsx b/apps/judicial-system/web/src/components/Table/AppealCasesTable/AppealCasesTable.tsx
index b9f60671cd20..61ce59fff810 100644
--- a/apps/judicial-system/web/src/components/Table/AppealCasesTable/AppealCasesTable.tsx
+++ b/apps/judicial-system/web/src/components/Table/AppealCasesTable/AppealCasesTable.tsx
@@ -1,7 +1,5 @@
 import React, { useMemo } from 'react'
 import { useIntl } from 'react-intl'
-import cn from 'classnames'
-import { AnimatePresence } from 'framer-motion'
 
 import { Box, Text } from '@island.is/island-ui/core'
 import { theme } from '@island.is/island-ui/theme'
@@ -15,24 +13,17 @@ import {
   CourtCaseNumber,
   DefendantInfo,
   getDurationDate,
-  SortButton,
-  TableContainer,
-  TableHeaderText,
 } from '@island.is/judicial-system-web/src/components/Table'
-import {
-  CaseDecision,
-  CaseListEntry,
-  CaseState,
-  Defendant,
-} from '@island.is/judicial-system-web/src/graphql/schema'
+import { CaseListEntry } from '@island.is/judicial-system-web/src/graphql/schema'
 import {
   useCaseList,
   useSortAppealCases,
   useViewport,
 } from '@island.is/judicial-system-web/src/utils/hooks'
 
+import { useContextMenu } from '../../ContextMenu/ContextMenu'
+import Table, { TableWrapper } from '../Table'
 import MobileAppealCase from './MobileAppealCase'
-import * as styles from '../Table.css'
 
 interface Props {
   cases: CaseListEntry[]
@@ -43,10 +34,9 @@ interface Props {
 const AppealCasesTable: React.FC<Props> = (props) => {
   const { cases, loading, showingCompletedCases } = props
   const { formatMessage } = useIntl()
-  const { isOpeningCaseId, handleOpenCase, LoadingIndicator, showLoading } =
-    useCaseList()
-  const { sortedData, requestSort, getClassNamesFor, isActiveColumn } =
-    useSortAppealCases('appealedDate', 'descending', cases)
+  const { isOpeningCaseId, handleOpenCase, showLoading } = useCaseList()
+  const { sortedData } = useSortAppealCases('appealedDate', 'descending', cases)
+  const { openCaseInNewTabMenuItem } = useContextMenu()
   const activeCasesData = useMemo(
     () =>
       cases.sort((a: CaseListEntry, b: CaseListEntry) =>
@@ -70,7 +60,7 @@ const AppealCasesTable: React.FC<Props> = (props) => {
               <Text fontWeight={'medium'} variant="small">
                 {isRestrictionCase(theCase.type)
                   ? `${formatDate(theCase.rulingDate ?? '', 'd.M.y')} -
-                      ${formatDate(theCase.validToDate ?? '', 'd.M.y')}`
+                  ${formatDate(theCase.validToDate ?? '', 'd.M.y')}`
                   : ''}
               </Text>
             )}
@@ -79,101 +69,85 @@ const AppealCasesTable: React.FC<Props> = (props) => {
       ))}
     </>
   ) : (
-    <TableContainer
-      loading={loading}
-      tableHeader={
-        <>
-          <TableHeaderText title={formatMessage(tables.caseNumber)} />
-          <th className={cn(styles.th, styles.largeColumn)}>
-            <SortButton
-              title={capitalize(formatMessage(core.defendant, { suffix: 'i' }))}
-              onClick={() => requestSort('defendant')}
-              sortAsc={getClassNamesFor('defendant') === 'ascending'}
-              sortDes={getClassNamesFor('defendant') === 'descending'}
-              isActive={isActiveColumn('defendant')}
-            />
-          </th>
-          <TableHeaderText title={formatMessage(tables.type)} />
-          <TableHeaderText title={formatMessage(tables.state)} />
-          {showingCompletedCases ? (
-            <TableHeaderText title={formatMessage(tables.duration)} />
-          ) : (
-            <th className={cn(styles.th, styles.largeColumn)}>
-              <SortButton
-                title={formatMessage(tables.appealDate)}
-                onClick={() => requestSort('appealedDate')}
-                sortAsc={getClassNamesFor('appealedDate') === 'ascending'}
-                sortDes={getClassNamesFor('appealedDate') === 'descending'}
-                isActive={isActiveColumn('appealedDate')}
-              />
-            </th>
-          )}
-          <th></th>
-        </>
-      }
-    >
-      {sortedData.map((column) => {
-        return (
-          <tr
-            className={styles.row}
-            onClick={() => handleOpenCase(column.id)}
-            key={column.id}
-          >
-            <td>
+    <TableWrapper loading={loading}>
+      <Table
+        thead={[
+          {
+            title: formatMessage(tables.caseNumber),
+          },
+          {
+            title: capitalize(formatMessage(core.defendant, { suffix: 'i' })),
+            sortable: { isSortable: true, key: 'defendant' },
+          },
+          {
+            title: formatMessage(tables.type),
+          },
+          { title: formatMessage(tables.state) },
+          {
+            title: showingCompletedCases
+              ? formatMessage(tables.duration)
+              : formatMessage(tables.appealDate),
+            sortable: showingCompletedCases
+              ? undefined
+              : { isSortable: true, key: 'appealedDate' },
+          },
+        ]}
+        data={sortedData}
+        generateContextMenuItems={(row) => {
+          return [openCaseInNewTabMenuItem(row.id)]
+        }}
+        columns={[
+          {
+            cell: (row) => (
               <CourtCaseNumber
-                courtCaseNumber={column.courtCaseNumber ?? ''}
-                policeCaseNumbers={column.policeCaseNumbers ?? []}
-                appealCaseNumber={column.appealCaseNumber ?? ''}
+                courtCaseNumber={row.courtCaseNumber ?? ''}
+                policeCaseNumbers={row.policeCaseNumbers ?? []}
+                appealCaseNumber={row.appealCaseNumber ?? ''}
               />
-            </td>
-            <td className={cn(styles.td, styles.largeColumn)}>
-              <DefendantInfo defendants={column.defendants as Defendant[]} />
-            </td>
-            <td>
+            ),
+          },
+          {
+            cell: (row) => <DefendantInfo defendants={row.defendants} />,
+          },
+          {
+            cell: (row) => (
               <ColumnCaseType
-                type={column.type}
-                decision={column.decision as CaseDecision}
-                parentCaseId={column.parentCaseId ?? ''}
+                type={row.type}
+                decision={row.decision}
+                parentCaseId={row.parentCaseId ?? ''}
               />
-            </td>
-            <td>
+            ),
+          },
+          {
+            cell: (row) => (
               <TagAppealState
-                appealState={column.appealState}
-                appealRulingDecision={column.appealRulingDecision}
-                appealCaseNumber={column.appealCaseNumber}
+                appealState={row.appealState}
+                appealRulingDecision={row.appealRulingDecision}
+                appealCaseNumber={row.appealCaseNumber}
               />
-            </td>
-            <td>
-              {showingCompletedCases ? (
-                <Text>
-                  {isRestrictionCase(column.type)
+            ),
+          },
+          {
+            cell: (row) => (
+              <Text>
+                {showingCompletedCases
+                  ? isRestrictionCase(row.type)
                     ? getDurationDate(
-                        column.state as CaseState,
-                        column.validToDate,
-                        column.initialRulingDate,
-                        column.rulingDate,
+                        row.state,
+                        row.validToDate,
+                        row.initialRulingDate,
+                        row.rulingDate,
                       )
-                    : ''}
-                </Text>
-              ) : (
-                <Text>
-                  {column.appealedDate
-                    ? formatDate(column.appealedDate, 'd.M.y')
-                    : '-'}
-                </Text>
-              )}
-            </td>
-            <td className={styles.loadingContainer}>
-              <AnimatePresence>
-                {isOpeningCaseId === column.id && showLoading && (
-                  <LoadingIndicator />
-                )}
-              </AnimatePresence>
-            </td>
-          </tr>
-        )
-      })}
-    </TableContainer>
+                    : ''
+                  : row.appealedDate
+                  ? formatDate(row.appealedDate, 'd.M.y')
+                  : '-'}
+              </Text>
+            ),
+          },
+        ]}
+      />
+    </TableWrapper>
   )
 }
 
diff --git a/apps/judicial-system/web/src/types/index.ts b/apps/judicial-system/web/src/types/index.ts
index d935da6c3913..7ff58f6efd25 100644
--- a/apps/judicial-system/web/src/types/index.ts
+++ b/apps/judicial-system/web/src/types/index.ts
@@ -18,7 +18,11 @@ export enum LoginErrorCodes {
 }
 
 export type directionType = 'ascending' | 'descending'
-export type sortableTableColumn = 'defendant' | 'createdAt' | 'courtDate'
+export type sortableTableColumn =
+  | 'defendant'
+  | 'createdAt'
+  | 'courtDate'
+  | 'appealedDate'
 
 export interface SortConfig {
   column: sortableTableColumn