Merge branch 'main' into feat/72

package.json

@@ -18,6 +18,7 @@
     "@types/react-dom": "^18.0.6",
     "axios": "^1.1.3",
     "bootstrap": "^5.2.1",
+    "date-fns": "^2.30.0",
     "formik": "^2.2.9",
     "google-libphonenumber": "^3.2.32",
     "react": "^18.2.0",
@@ -64,11 +65,11 @@
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "eslint": "^8.23.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-standard-with-typescript": "^23.0.0",
     "eslint-plugin-n": "^15.3.0",
     "eslint-plugin-promise": "^6.1.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",

src/components/DivingCylinderSet/DivingCylinderSetList.tsx

@@ -9,26 +9,36 @@ import { archiveDivingCylinderSet } from '../../lib/apiRequests/divingCylinderSe
 import { useDivingCylinderQuery } from '../../lib/queries/divingCylinderQuery';
 import { DIVING_CYLINDER_SETS_QUERY_KEY } from '../../lib/queries/queryKeys';
 import { getUserIdFromAccessToken } from '../../lib/utils';
-import { CommonTable, TableColumn, TableRow } from '../common/Table';
+import {
+  CommonTable,
+  TableColumn,
+  TableRow,
+} from '../common/Table/CommonTable';
 
 const DIVING_CYLINDER_SET_COLUMNS: TableColumn[] = [
   {
     title: 'Nimi',
+    shortTitle: 'Nimi',
   },
   {
     title: 'Koko (l)',
+    shortTitle: 'l',
   },
   {
     title: 'Materiaali',
+    shortTitle: 'Mat',
   },
   {
     title: 'Suurin täyttöpaine (bar)',
+    shortTitle: 'bar',
   },
   {
     title: 'Sarjanumero',
+    shortTitle: 'SN',
   },
   {
     title: 'Katsastusvuosi',
+    shortTitle: 'KV',
   },
 ];
 

src/components/FillEvents/ListFillEvents.tsx

@@ -1,58 +1,69 @@
+import format from 'date-fns/format';
 import { useFillEventQuery } from '../../lib/queries/FillEventQuery';
-import { FillEvent } from '../../interfaces/FillEvent';
 import { formatEurCentsToEur } from '../../lib/utils';
+import {
+  CommonTable,
+  TableColumn,
+  TableRow,
+} from '../common/Table/CommonTable';
+import { useMemo } from 'react';
 
-const FillEventRow = ({
-  data,
-  index,
-}: {
-  data: FillEvent;
-  index: number;
-}): JSX.Element => {
-  return (
-    <tr className={index % 2 === 0 ? 'evenRow' : 'oddRow'}>
-      <td>{data.createdAt}</td>
-      <td>{data.cylinderSetName}</td>
-      <td>{data.gasMixture}</td>
-      <td>{data.description}</td>
-      <td>{formatEurCentsToEur(data.price)}</td>
-    </tr>
-  );
-};
+const FILL_EVENT_COLUMNS: TableColumn[] = [
+  {
+    title: 'Päivämäärä',
+    shortTitle: 'Pvm',
+  },
+  {
+    title: 'Pullosetti',
+    shortTitle: 'PS',
+  },
+  {
+    title: 'Kaasuseos',
+    shortTitle: 'KS',
+  },
+  {
+    title: 'Lisätiedot',
+    shortTitle: 'LT',
+  },
+  {
+    title: 'Hinta (€)',
+    shortTitle: '€',
+  },
+];
 
-export const ListFillEvents = (): JSX.Element => {
-  const fillEvents: FillEvent[] = useFillEventQuery().data ?? [];
+const dateFormatter = (date: string): string =>
+  format(new Date(date), 'd.MM.yy');
 
+export const ListFillEvents = (): JSX.Element => {
+  const { data: fillEvents } = useFillEventQuery();
+  const rows: TableRow[] = useMemo(
+    () =>
+      fillEvents?.map((fillEvent) => ({
+        id: fillEvent.id,
+        mainRow: [
+          dateFormatter(fillEvent.createdAt),
+          fillEvent.cylinderSetName,
+          fillEvent.gasMixture,
+          fillEvent.description,
+          formatEurCentsToEur(fillEvent.price),
+        ],
+      })) ?? [],
+    [fillEvents]
+  );
   return (
     <div>
-      <div className="d-flex flex-row justify-content-between">
-        <h1 className="pb-4">Täyttöhistoria</h1>
-        <div className="d-flex flex-column align-items-center">
-          <h2>Täyttöjen hinta yhteensä</h2>
-          <h3>
-            {formatEurCentsToEur(
-              fillEvents.reduce((acc, fillEvent) => acc + fillEvent.price, 0)
-            )}{' '}
-            €
-          </h3>
-        </div>
+      <div className="d-flex flex-row justify-content-between pb-4">
+        <h1>Täyttöhistoria</h1>
+        <h2>
+          Täyttöjen hinta yhteensä:{' '}
+          {formatEurCentsToEur(
+            fillEvents?.reduce((acc, fillEvent) => acc + fillEvent.price, 0) ??
+              0
+          )}{' '}
+          €
+        </h2>
       </div>
-      <table className="table">
-        <thead className="tableHead">
-          <tr>
-            <th>Päivämäärä</th>
-            <th>pullosetti</th>
-            <th>kaasuseos</th>
-            <th>lisätiedot</th>
-            <th>hinta (€)</th>
-          </tr>
-        </thead>
-        <tbody>
-          {fillEvents.map((fillEvent, index) => (
-            <FillEventRow key={fillEvent.id} data={fillEvent} index={index} />
-          ))}
-        </tbody>
-      </table>
+      <CommonTable columns={FILL_EVENT_COLUMNS} rows={rows} />
     </div>
   );
 };