From 5c779f64bbd26267081033f9193bded4086b7d51 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Tue, 2 Jan 2024 16:17:29 +0000
Subject: [PATCH 01/21] Remove ka-table and add form related deps

---
 package-lock.json | 170 +++++++++++++++++++++++++++++++++++++++++++---
 package.json      |   6 +-
 2 files changed, 164 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 48e69e8..5dccfce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,13 +14,15 @@
         "autoprefixer": "10.4.15",
         "eslint": "8.49.0",
         "eslint-config-next": "13.4.19",
-        "ka-table": "8.3.2",
         "next": "13.4.19",
         "postcss": "8.4.29",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-query": "3.39.3",
+        "swr": "2.2.4",
         "tailwindcss": "3.3.3",
-        "typescript": "5.2.2"
+        "typescript": "5.2.2",
+        "yup": "1.3.2"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -800,6 +802,14 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/big-integer": {
+      "version": "1.6.51",
+      "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz",
+      "integrity": "sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -828,6 +838,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/broadcast-channel": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz",
+      "integrity": "sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "detect-node": "^2.1.0",
+        "js-sha3": "0.8.0",
+        "microseconds": "0.2.0",
+        "nano-time": "1.0.0",
+        "oblivious-set": "1.0.0",
+        "rimraf": "3.0.2",
+        "unload": "2.2.0"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.21.10",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
@@ -1095,6 +1120,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
+      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2448,6 +2478,11 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-sha3": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz",
+      "integrity": "sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q=="
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2504,14 +2539,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/ka-table": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/ka-table/-/ka-table-8.3.2.tgz",
-      "integrity": "sha512-b08of5T1Kpna4Ahnx7BKPmlY5pOuAb516ESqDmNi4oIdnQH5okid5Ah5VswjCCSDXlFYaYrfuN07mm9LdpVcCg==",
-      "peerDependencies": {
-        "react": "^16.8.3 || ^17.0.0-0 || ^18.0.0-0"
-      }
-    },
     "node_modules/keyv": {
       "version": "4.5.3",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz",
@@ -2599,6 +2626,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/match-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
+      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -2619,6 +2655,11 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/microseconds": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz",
+      "integrity": "sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA=="
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2653,6 +2694,14 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nano-time": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz",
+      "integrity": "sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==",
+      "dependencies": {
+        "big-integer": "^1.6.16"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -2882,6 +2931,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/oblivious-set": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz",
+      "integrity": "sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw=="
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -3156,6 +3210,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+      "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA=="
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -3211,6 +3270,31 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-query": {
+      "version": "3.39.3",
+      "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz",
+      "integrity": "sha512-nLfLz7GiohKTJDuT4us4X3h/8unOh+00MLb2yJoGTPjxKs2bc1iDhkNx2bd5MKklXnOD3NrVZ+J2UXujA5In4g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "broadcast-channel": "^3.4.1",
+        "match-sorter": "^6.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -3270,6 +3354,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+    },
     "node_modules/resolve": {
       "version": "1.22.4",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
@@ -3643,6 +3732,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz",
+      "integrity": "sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
@@ -3711,6 +3812,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-case": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+      "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -3722,6 +3828,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+      "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg=="
+    },
     "node_modules/ts-api-utils": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
@@ -3863,6 +3974,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/unload": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz",
+      "integrity": "sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.6.2",
+        "detect-node": "^2.0.4"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
@@ -3900,6 +4020,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -4032,6 +4160,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/yup": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-1.3.2.tgz",
+      "integrity": "sha512-6KCM971iQtJ+/KUaHdrhVr2LDkfhBtFPRnsG1P8F4q3uUVQ2RfEM9xekpha9aA4GXWJevjM10eDcPQ1FfWlmaQ==",
+      "dependencies": {
+        "property-expr": "^2.0.5",
+        "tiny-case": "^1.0.3",
+        "toposort": "^2.0.2",
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/yup/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/zod": {
       "version": "3.21.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
diff --git a/package.json b/package.json
index 3a6668e..927191a 100644
--- a/package.json
+++ b/package.json
@@ -15,12 +15,14 @@
     "autoprefixer": "10.4.15",
     "eslint": "8.49.0",
     "eslint-config-next": "13.4.19",
-    "ka-table": "8.3.2",
     "next": "13.4.19",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-query": "3.39.3",
+    "swr": "2.2.4",
     "tailwindcss": "3.3.3",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "yup": "1.3.2"
   }
 }

From 3eed749b27a5008167b9301af5064bfc205cb3c5 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Tue, 2 Jan 2024 16:19:03 +0000
Subject: [PATCH 02/21] Remove local storage lib

---
 app/lib/useLocalStorage.tsx | 42 -------------------------------------
 1 file changed, 42 deletions(-)
 delete mode 100644 app/lib/useLocalStorage.tsx

diff --git a/app/lib/useLocalStorage.tsx b/app/lib/useLocalStorage.tsx
deleted file mode 100644
index 74638df..0000000
--- a/app/lib/useLocalStorage.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-// credits to https://usehooks.com/useLocalStorage/
-
-import { dequal as deepEqual } from 'dequal'
-import { useCallback, useState } from 'react'
-
-export function useLocalStorage<T = any>(key: string, initialValue: T): [T, (value: T) => void] {
-  // State to store our value
-  // Pass initial state function to useState so logic is only executed once
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    try {
-      // Get from local storage by key
-      const item = window.localStorage.getItem(key)
-      // Parse stored json or if none return initialValue
-      return item ? JSON.parse(item) : initialValue
-    } catch (error) {
-      // If error also return initialValue
-      console.log(error)
-      return initialValue
-    }
-  })
-
-  // Return a wrapped version of useState's setter function that ...
-  // ... persists the new value to localStorage.
-  const setValue = useCallback(
-    (value: T) => {
-      try {
-        if (!deepEqual(storedValue, value)) {
-          // Save state
-          setStoredValue(value)
-          // Save to local storage
-          window.localStorage.setItem(key, JSON.stringify(value))
-        }
-      } catch (error) {
-        // A more advanced implementation would handle the error case
-        console.log(error)
-      }
-    },
-    [key, storedValue]
-  )
-
-  return [storedValue, setValue]
-}

From 307ea9b69ceaf6ee7686315fc391be2bf58cf758 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Tue, 2 Jan 2024 16:19:44 +0000
Subject: [PATCH 03/21] Remove ka table and title components

---
 app/components/suspense-table.tsx | 167 ------------------------------
 app/components/title.tsx          |  16 ---
 2 files changed, 183 deletions(-)
 delete mode 100644 app/components/suspense-table.tsx
 delete mode 100644 app/components/title.tsx

diff --git a/app/components/suspense-table.tsx b/app/components/suspense-table.tsx
deleted file mode 100644
index 1275b0f..0000000
--- a/app/components/suspense-table.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-'use client'
-
-import "ka-table/style.css";
-
-import React, { useState } from 'react';
-
-import { ITableProps, kaReducer, Table } from 'ka-table';
-import { ICellEditorProps, ICellTextProps, IHeadCellProps } from 'ka-table/props';
-import { deleteRow, hideNewRow, saveNewRow, showNewRow } from 'ka-table/actionCreators';
-import { DataType, EditingMode, SortingMode } from 'ka-table/enums';
-import { DispatchFunc } from 'ka-table/types';
-
-import { useLocalStorage } from './../lib/useLocalStorage';
-
-const LOCAL_STORAGE_KEY = 'SuspenseTableData';
-
-const blankRow = {
-  profile: 'Bike name or profile',
-  forkLsc: '0',
-  forkHsc: '0',
-  forkLsr: '0',
-  forkHsr: '0',
-  shockLsc: '0',
-  shockHsc: '0',
-  shockLsr: '0',
-  shockHsr: '0',
-  id: 0,
-};
-
-const columns = [
-  { key: 'profile', title: 'Profile', dataType: DataType.String, width: '30%' },
-  { key: 'forkLsc', title: 'Fork LSC', dataType: DataType.String },
-  { key: 'forkHsc', title: 'Fork HSC', dataType: DataType.String },
-  { key: 'forkLsr', title: 'Fork LSR', dataType: DataType.String },
-  { key: 'forkHsr', title: 'Fork HSR', dataType: DataType.String },
-  { key: 'shockLsc', title: 'Shock LSC', dataType: DataType.String },
-  { key: 'shockHsc', title: 'Shock HSC', dataType: DataType.String },
-  { key: 'shockLsr', title: 'Shock LSR', dataType: DataType.String },
-  { key: 'shockHsr', title: 'Shock HSR', dataType: DataType.String },
-  { key: 'actions', style: {width: 80}},
-];
-
-const SuspenseTable: React.FC = () => {
-  const [tableData, setTableData] = useLocalStorage(LOCAL_STORAGE_KEY, [blankRow]);
-
-  let maxValue = Math.max(...tableData.map(i => i.id));
-  const generateNewId = () => {
-    maxValue++;
-    return maxValue;
-  };
-  const AddButton: React.FC<IHeadCellProps> = ({
-    dispatch,
-  }) => {
-   return (
-    <div className='plus-cell-button'>
-      <img
-        src='static/icons/plus.svg'
-        alt='Add New Row'
-        title='Add New Row'
-        onClick={() => dispatch(showNewRow())}
-      />
-    </div>
-   );
-  };
-
-  const DeleteRow: React.FC<ICellTextProps> = ({
-    dispatch, rowKeyValue,
-  }) => {
-    return (
-      <img
-        src='static/icons/delete.svg'
-        className='delete-row-column-button'
-        onClick={() => dispatch(deleteRow(rowKeyValue))}
-        alt=''
-      />
-    );
-  };
-
-  const RemoveButton: React.FC<ICellEditorProps> = ({
-    dispatch
-  }) => {
-    return (
-      <img
-        src='static/icons/close.svg'
-        className='close-cell-button'
-        alt='Cancel'
-        title='Cancel'
-        onClick={() => dispatch(hideNewRow())}
-      />
-    );
-  };
-
-  const SaveButton: React.FC<ICellEditorProps> = ({
-    dispatch
-  }) => {
-    const saveNewData = () => {
-      const rowKeyValue = generateNewId();
-      dispatch(saveNewRow(rowKeyValue, {
-        validate: true
-      }));
-    };
-    return (
-      <img
-        src='static/icons/save.svg'
-        className='mr-4'
-        alt='Save'
-        title='Save'
-        onClick={saveNewData}
-      />
-    );
-  };
-
-  const tablePropsInit: ITableProps = {
-    columns: columns,
-    data: tableData,
-    editingMode: EditingMode.Cell,
-    rowKeyField: 'id',
-    sortingMode: SortingMode.Single,
-  };
-
-  const [tableProps, changeTableProps] = useState(tablePropsInit);
-
-  const dispatch: DispatchFunc = (action) => {
-    changeTableProps((prevState: ITableProps) => {
-      setTableData(kaReducer(prevState, action).data);
-      return kaReducer(prevState, action)
-    });
-  };
-
-  return (
-    <Table
-      {...tableProps} // ka-table UI is rendered according to props
-      dispatch={dispatch} // dispatch is required for obtain new actions from the UI
-      childComponents={{
-        cellEditor: {
-          content: (props) => {
-            if (props.column.key === 'actions'){
-              return (
-                <div className='justify-center flex cursor-pointer'>
-                  <SaveButton {...props}/>
-                  <RemoveButton {...props}/>
-                </div>
-              );
-            }
-          }
-        },
-        cellText: {
-          content: (props) => {
-            if (props.column.key === 'actions') {
-              return <DeleteRow {...props}/>;
-            }
-          }
-        },
-        headCell: {
-          content: (props) => {
-            if (props.column.key === 'actions'){
-              return <AddButton {...props}/>;
-            }
-          }
-        }
-      }}
-    />
-  );
-};
-
-export default SuspenseTable;
-
diff --git a/app/components/title.tsx b/app/components/title.tsx
deleted file mode 100644
index a9ad3d3..0000000
--- a/app/components/title.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-export default function Title({
-  text, description 
-} : {
-  text: string,
-  description: string
-}) {
-  return (
-    <div className="flex flex-col items-center justify-between p-24">
-      <h1 className="text-4xl font-bold text-center text-gray-900 dark:text-gray-100">{text}</h1>
-      <div className="mt-2 flex items-center text-sm text-gray-500">
-        {description}
-      </div>
-    </div>
-  )
-};
- 

From 8f136d53904457eb0aa73d85921ebedfdf7fd823 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Tue, 2 Jan 2024 16:20:48 +0000
Subject: [PATCH 04/21] Define Profile model

---
 app/types/index.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 app/types/index.ts

diff --git a/app/types/index.ts b/app/types/index.ts
new file mode 100644
index 0000000..dad1eef
--- /dev/null
+++ b/app/types/index.ts
@@ -0,0 +1,16 @@
+export interface ProfileModel {
+    id: number,
+    name: string,
+    forkPsi: number,
+    forkHsc: number,
+    forkLsc: number,
+    forkHsr: number,
+    forkLsr: number,
+    forkSag: number,
+    shockPsi: number,
+    shockHsc: number,
+    shockLsc: number,
+    shockHsr: number,
+    shockLsr: number,
+    shockSag: number,
+}

From 552582ae3acfa4d15dc277ba156c593018d78510 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Tue, 2 Jan 2024 16:21:21 +0000
Subject: [PATCH 05/21] Remove old favicon

---
 app/favicon.ico | Bin 25931 -> 0 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 app/favicon.ico

diff --git a/app/favicon.ico b/app/favicon.ico
deleted file mode 100644
index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25931
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
LrJugUA?W`A8`#=m


From 7295d4b7bb6d3d7f1d696bc44d4cbaab5994bcd6 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Tue, 2 Jan 2024 16:27:05 +0000
Subject: [PATCH 06/21] Add a JSON response fetcher

---
 app/lib/index.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 app/lib/index.ts

diff --git a/app/lib/index.ts b/app/lib/index.ts
new file mode 100644
index 0000000..50b047c
--- /dev/null
+++ b/app/lib/index.ts
@@ -0,0 +1 @@
+export const fetcher = (url: string) => fetch(url).then((res) => res.json());

From 7fdb960fab1e767d1d2eb82ea13295f91cc5cd9e Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Tue, 2 Jan 2024 16:37:30 +0000
Subject: [PATCH 07/21] Add favicon in correct location

---
 favicon.ico | Bin 0 -> 25931 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 favicon.ico

diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..718d6fea4835ec2d246af9800eddb7ffb276240c
GIT binary patch
literal 25931
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
LrJugUA?W`A8`#=m

literal 0
HcmV?d00001


From 8fb4a51e56161c7ed28bb10e48352dc1ce2ada51 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 31 Jan 2024 13:16:39 +0000
Subject: [PATCH 08/21] Add a service to read and write to profiles data

---
 data/profiles.json        |  1 +
 pages/api/profilesRepo.js | 70 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 data/profiles.json
 create mode 100644 pages/api/profilesRepo.js

diff --git a/data/profiles.json b/data/profiles.json
new file mode 100644
index 0000000..fe51488
--- /dev/null
+++ b/data/profiles.json
@@ -0,0 +1 @@
+[]
diff --git a/pages/api/profilesRepo.js b/pages/api/profilesRepo.js
new file mode 100644
index 0000000..ccf82b1
--- /dev/null
+++ b/pages/api/profilesRepo.js
@@ -0,0 +1,70 @@
+const fs = require('fs');
+
+let profiles = require('./../../data/profiles.json');
+
+const getAll = () => {
+  return profiles;
+}
+
+const getById = (id) => {
+  return profiles.find(x => x.id.toString() === id.toString());
+}
+
+const create = ({ name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr }) => {
+  const profile = { name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr };
+
+  // validate
+  if (profiles.find(x => x.name === profile.name))
+    throw `Profile with the name ${profile.name} already exists`;
+
+  // generate new profile id
+  profile.id = profiles.length ? Math.max(...profiles.map(x => x.id)) + 1 : 1;
+
+  // set date created and updated
+  profile.dateCreated = new Date().toISOString();
+  profile.dateUpdated = new Date().toISOString();
+
+  // add and save profile
+  profiles.push(profile);
+  saveData();
+}
+
+const update = (id, { name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr }) => {
+  const params = { name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr };
+  const profile = profiles.find(x => x.id.toString() === id.toString());
+
+  // validate
+  if (params.name !== profile.name && profiles.find(x => x.name === params.name))
+    throw `Profile with the name ${params.name} already exists`;
+
+  // set date updated
+  profile.dateUpdated = new Date().toISOString();
+
+  // update and save
+  Object.assign(profile, params);
+  saveData();
+}
+
+// prefixed with underscore '_' because 'delete' is a reserved word in javascript
+const _delete = (id) => {
+  // filter out deleted profile and save
+  profiles = profiles.filter(x => x.id.toString() !== id.toString());
+  saveData();
+
+}
+
+// private helper functions
+
+const saveData = () => {
+  fs.writeFileSync('data/profiles.json', JSON.stringify(profiles, null, 4));
+}
+
+const profilesRepo = {
+  getAll,
+  getById,
+  create,
+  update,
+  delete: _delete
+};
+
+export default profilesRepo;

From 3ddedb9c32762787eaf47569dd1f5b34da52c051 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 31 Jan 2024 13:17:15 +0000
Subject: [PATCH 09/21] Add API for profiles CRUD operations

---
 pages/api/profiles.ts      | 31 ++++++++++++++++++++++++++++++
 pages/api/profiles/[id].ts | 39 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 pages/api/profiles.ts
 create mode 100644 pages/api/profiles/[id].ts

diff --git a/pages/api/profiles.ts b/pages/api/profiles.ts
new file mode 100644
index 0000000..9d9d555
--- /dev/null
+++ b/pages/api/profiles.ts
@@ -0,0 +1,31 @@
+import profilesRepo from './profilesRepo';
+
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const getProfiles = () => {
+    const profiles = profilesRepo.getAll();
+    return res.status(200).json(profiles);
+  }
+
+  const createProfile = () => {
+    try {
+      profilesRepo.create(req.body);
+      return res.status(200).json({});
+    } catch (error: any) {
+      return res.status(400).json({ message: error });
+    }
+  }
+
+  switch (req.method) {
+    case 'GET':
+      return getProfiles();
+    case 'POST':
+      return createProfile();
+    default:
+      return res.status(405).end(`Method ${req.method} Not Allowed`)
+  }
+}
diff --git a/pages/api/profiles/[id].ts b/pages/api/profiles/[id].ts
new file mode 100644
index 0000000..b0bc5f8
--- /dev/null
+++ b/pages/api/profiles/[id].ts
@@ -0,0 +1,39 @@
+import profilesRepo from './../profilesRepo';
+
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+
+  const getProfileById = () => {
+    const profile = profilesRepo.getById(req.query.id);
+    return res.status(200).json(profile);
+  }
+
+  const updateProfile = () => {
+    try {
+      profilesRepo.update(req.query.id, req.body);
+      return res.status(200).json({});
+    } catch (error) {
+      return res.status(400).json({ message: error });
+    }
+  }
+
+  const deleteProfile = () => {
+    profilesRepo.delete(req.query.id);
+    return res.status(200).json({});
+  }
+
+  switch (req.method) {
+    case 'GET':
+      return getProfileById();
+    case 'PUT':
+      return updateProfile();
+    case 'DELETE':
+      return deleteProfile();
+    default:
+      return res.status(405).end(`Method ${req.method} Not Allowed`)
+  }
+}

From 3fa5940906e9e0e58dd0a9fd39af01062fd89640 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 31 Jan 2024 13:18:16 +0000
Subject: [PATCH 10/21] Add frontend CRUD actions for profiles

---
 app/profiles/create/page.tsx    | 199 +++++++++++++++++++++++++++++
 app/profiles/edit/[id]/page.tsx | 220 ++++++++++++++++++++++++++++++++
 app/profiles/page.tsx           |  62 +++++++++
 app/profiles/read/[id]/page.tsx |  69 ++++++++++
 4 files changed, 550 insertions(+)
 create mode 100644 app/profiles/create/page.tsx
 create mode 100644 app/profiles/edit/[id]/page.tsx
 create mode 100644 app/profiles/page.tsx
 create mode 100644 app/profiles/read/[id]/page.tsx

diff --git a/app/profiles/create/page.tsx b/app/profiles/create/page.tsx
new file mode 100644
index 0000000..ad2b5aa
--- /dev/null
+++ b/app/profiles/create/page.tsx
@@ -0,0 +1,199 @@
+"use client"
+import React, {useState } from 'react'
+import { useRouter } from 'next/navigation'
+export default function ProfileCreate() {
+  const router = useRouter()
+  const [name, setName] = useState<string>('');
+  const [forkPsi, setForkPsi] = useState<string>('');
+  const [forkSag, setForkSag] = useState<string>('');
+  const [forkHsc, setForkHsc] = useState<string>('');
+  const [forkLsc, setForkLsc] = useState<string>('');
+  const [forkHsr, setForkHsr] = useState<string>('');
+  const [forkLsr, setForkLsr] = useState<string>('');
+  const [shockPsi, setShockPsi] = useState<string>('');
+  const [shockSag, setShockSag] = useState<string>('');
+  const [shockHsc, setShockHsc] = useState<string>('');
+  const [shockLsc, setShockLsc] = useState<string>('');
+  const [shockHsr, setShockHsr] = useState<string>('');
+  const [shockLsr, setShockLsr] = useState<string>('');
+
+  const addProfile = async (e: any) => {
+    e.preventDefault()
+    if (name != "") {
+      const formData = {
+        name: name,
+        forkPsi: forkPsi,
+        forkSag: forkSag,
+        forkHsc: forkHsc,
+        forkLsc: forkLsc,
+        forkHsr: forkHsr,
+        forkLsr: forkLsr,
+        shockPsi: shockPsi,
+        shockSag: shockSag,
+        shockHsc: shockHsc,
+        shockLsc: shockLsc,
+        shockHsr: shockHsr,
+        shockLsr: shockLsr
+      }
+      const add = await fetch('/api/profiles', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(formData)
+      });
+      const content = await add.json();
+      if(content.success>0)
+      {
+        router.push('/profile');
+      }
+
+    }
+  };
+
+  const labelClassNames = 'block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4';
+  const inputClassNames = 'bg-gray-200 appearance-none border-2 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500';
+
+  return (
+    <form className="w-full bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={addProfile}>
+      <h1 className="text-xl font-bold">Add profile</h1>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="name">
+            Name
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="name" type="text" onChange={(e:any)=>setName(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkPsi">
+            Fork PSI
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkPsi" type="text"  onChange={(e:any)=>setForkPsi(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkSag">
+            Fork sag
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkSag" type="text"  onChange={(e:any)=>setForkSag(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkHsc">
+            Fork HSC
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkHsc" type="text" onChange={(e:any)=>setForkHsc(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkLsc">
+            Fork LSC
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkLsc" type="text" onChange={(e:any)=>setForkLsc(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkHsr">
+            Fork HSR
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkHsr" type="text" onChange={(e:any)=>setForkHsr(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkLsr">
+            Fork LSR
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkLsr" type="text" onChange={(e:any)=>setForkLsr(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockPsi">
+            Shock PSI
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockPsi" type="text" onChange={(e:any)=>setShockPsi(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockSag">
+            Shock sag
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockSag" type="text" onChange={(e:any)=>setShockSag(e.target.value)}/>
+        </div>
+      </div>
+
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockHsc">
+            Shock HSC
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockHsc" type="text" onChange={(e:any)=>setShockHsc(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockLsc">
+            Shock LSC
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockLsc" type="text" onChange={(e:any)=>setShockLsc(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockHsr">
+            Shock HSR
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockHsr" type="text" onChange={(e:any)=>setShockHsr(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockLsr">
+            Shock LSR
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockLsr" type="text" onChange={(e:any)=>setShockLsr(e.target.value)}/>
+        </div>
+      </div>
+
+      <div className='w-full py-2'>
+        <button className="w-20 p-2 text-white border-gray-200 border-[1px] rounded-sm bg-green-400">Submit</button>
+      </div>
+    </form>
+  )
+}
+
+
diff --git a/app/profiles/edit/[id]/page.tsx b/app/profiles/edit/[id]/page.tsx
new file mode 100644
index 0000000..9fd0f32
--- /dev/null
+++ b/app/profiles/edit/[id]/page.tsx
@@ -0,0 +1,220 @@
+"use client"
+import React, {useState,useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { fetcher } from '@/app/lib'
+import useSWR from 'swr'
+
+export default function ProfileEdit({params} :{params:{id:number}}) {
+  const router = useRouter()
+  const [name, setName] = useState<string>('');
+  const [forkPsi, setForkPsi] = useState<string>('');
+  const [forkSag, setForkSag] = useState<string>('');
+  const [forkHsc, setForkHsc] = useState<string>('');
+  const [forkLsc, setForkLsc] = useState<string>('');
+  const [forkHsr, setForkHsr] = useState<string>('');
+  const [forkLsr, setForkLsr] = useState<string>('');
+  const [shockPsi, setShockPsi] = useState<string>('');
+  const [shockSag, setShockSag] = useState<string>('');
+  const [shockHsc, setShockHsc] = useState<string>('');
+  const [shockLsc, setShockLsc] = useState<string>('');
+  const [shockHsr, setShockHsr] = useState<string>('');
+  const [shockLsr, setShockLsr] = useState<string>('');
+
+  const {data : profile,isLoading, error} = useSWR(`/api/profiles/${params.id}`,fetcher)
+  useEffect(()=>{
+     if(profile){
+         setName(profile.name)
+         setForkPsi(profile.forkPsi)
+         setForkSag(profile.forkSag)
+         setForkHsc(profile.forkHsc)
+         setForkLsc(profile.forkLsc)
+         setForkHsr(profile.forkHsr)
+         setForkLsr(profile.forkLsr)
+         setShockPsi(profile.shockPsi)
+         setShockSag(profile.shockSag)
+         setShockHsc(profile.shockHsc)
+         setShockLsc(profile.shockLsc)
+         setShockHsr(profile.shockHsr)
+         setShockLsr(profile.shockLsr)
+     }
+  },[profile, isLoading])
+  const updateProfile = async (e: any) => {
+    e.preventDefault()
+    if (name != "" && forkPsi != "" && shockPsi != "") {
+      const formData = {
+        name: name,
+        forkPsi: forkPsi,
+        forkSag: forkSag,
+        forkHsc: forkHsc,
+        forkLsc: forkLsc,
+        forkHsr: forkHsr,
+        forkLsr: forkLsr,
+        shockPsi: shockPsi,
+        shockSag: shockSag,
+        shockHsc: shockHsc,
+        shockLsc: shockLsc,
+        shockHsr: shockHsr,
+        shockLsr: shockLsr
+      }
+      const res = await fetch(`/api/profiles/${params.id}`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(formData)
+      });
+      const content = await res.json();
+      if(content.success>0)
+      {
+        router.push('/profile');
+      }
+
+    }
+  };
+  if(isLoading) return <div><span>Loading...</span></div>
+  if (!profile) return null;
+  const labelClassNames = 'block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4';
+  const inputClassNames = 'bg-gray-200 appearance-none border-2 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500';
+
+  return (
+    <form className="w-full bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={updateProfile}>
+      <h1 className="text-xl font-bold">Edit profile</h1>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="name">
+            Name
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="name" type="text" value={name} onChange={(e:any)=>setName(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkPsi">
+            Fork PSI
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkPsi" type="text" value={forkPsi} onChange={(e:any)=>setForkPsi(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkSag">
+            Fork sag
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkSag" type="text" value={forkSag} onChange={(e:any)=>setForkSag(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkHsc">
+            Fork HSC
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkHsc" type="text" value={forkHsc} onChange={(e:any)=>seForkHsc(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkLsc">
+            Fork LSC
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkLsc" type="text" value={forkLsc} onChange={(e:any)=>setForkLsc(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkHsr">
+            Fork HSR
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkHsr" type="text" value={forkHsr} onChange={(e:any)=>setForkHsr(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="forkLsr">
+            Fork LSR
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="forkLsr" type="text" value={forkLsr} onChange={(e:any)=>setForkLsr(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockPsi">
+            Shock PSI
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockPsi" type="text" value={shockPsi} onChange={(e:any)=>setShockPsi(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockSag">
+            Shock sag
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockSag" type="text" value={shockSag} onChange={(e:any)=>setShockSag(e.target.value)}/>
+        </div>
+      </div>
+
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockHsc">
+            Shock HSC
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockHsc" type="text" value={shockHsc} onChange={(e:any)=>setShockHsc(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockLsc">
+            Shock LSC
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockLsc" type="text" value={shockLsc} onChange={(e:any)=>setShockLsc(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockHsr">
+            Shock HSR
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockHsr" type="text" value={shockHsr} onChange={(e:any)=>setShockHsr(e.target.value)}/>
+        </div>
+      </div>
+      <div className="md:flex md:items-center mb-6">
+        <div className="md:w-1/3">
+          <label className={labelClassNames} htmlFor="shockLsr">
+            Shock LSR
+          </label>
+        </div>
+        <div className="md:w-2/3">
+          <input className={inputClassNames} id="shockLsr" type="text" value={shockLsr} onChange={(e:any)=>setShockLsr(e.target.value)}/>
+        </div>
+      </div>
+
+      <div className='w-full py-2'>
+        <button className="w-20 p-2 text-white border-gray-200 border-[1px] rounded-sm bg-green-400">Submit</button>
+      </div>
+    </form>
+  )
+}
+
diff --git a/app/profiles/page.tsx b/app/profiles/page.tsx
new file mode 100644
index 0000000..185f557
--- /dev/null
+++ b/app/profiles/page.tsx
@@ -0,0 +1,62 @@
+"use client";
+import React,{useEffect, useState} from "react";
+import useSWR from "swr";
+import { fetcher } from "../lib";
+import Profile from "../components/Profile";
+import { ProfileModel } from "../types";
+import Link from "next/link";
+
+export default function Profiles() {
+  const [profiles,setProfiles] = useState<ProfileModel[]>([]);
+  const { data, error, isLoading } = useSWR<any>(`/api/profiles`, fetcher);
+  useEffect(()=>{
+    if(data)
+    {
+      setProfiles(data);
+    }
+  },[data,isLoading]);
+  if (error) return <div>Failed to load</div>;
+  if (isLoading) return <div>Loading...</div>;
+  if (!data) return null;
+  let delete_Profile : ProfileModel['deleteProfile']= async (id:number) => {
+    const res = await fetch(`/api/profiles/${id}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+    });
+    const content = await res.json();
+    if(content.success>0)
+    {
+
+      setProfiles(profiles?.filter((profile:ProfileModel)=>{  return profile.id !== id  }));
+    }
+  }
+  return (
+    <div className="w-full max-w-7xl m-auto">
+      <table className="w-full border-collapse border border-slate-400">
+        <thead>
+          <tr className="text-center">
+            <th className="border border-slate-300">Name</th>
+            <th className="border border-slate-300">Fork PSI</th>
+            <th className="border border-slate-300">Fork Sag</th>
+            <th className="border border-slate-300">Shock PSI</th>
+            <th className="border border-slate-300">Shock Sag</th>
+            <th className="border border-slate-300">Action</th>
+          </tr>
+        </thead>
+        <tbody>
+           {
+              profiles && profiles.map((item : ProfileModel)=><Profile key={item.id} {...item} deleteProfile = {delete_Profile} />)
+           }
+           <tr>
+              <td colSpan={6}>
+                 <Link href={`/profiles/create`} className="bg-green-500 p-2 inline-block text-white">Create</Link>
+              </td>
+           </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
diff --git a/app/profiles/read/[id]/page.tsx b/app/profiles/read/[id]/page.tsx
new file mode 100644
index 0000000..311552c
--- /dev/null
+++ b/app/profiles/read/[id]/page.tsx
@@ -0,0 +1,69 @@
+'use client'
+import { fetcher } from '@/app/lib'
+import useSWR from 'swr'
+
+export default function Detail({params}: {params:{id :number}}) {
+  const {data: profile, isLoading, error}  = useSWR(`/api/profiles/${params.id}`,fetcher)
+  if(isLoading) return <div><span>Loading...</span></div>
+  if (!profile) return null;
+  return (
+    <div className='w-full'>
+      <h2 className='text-center font-bold text-3xl py-3'>{profile.name}</h2>
+
+      <div className='w-full max-w-4xl m-auto border-[1px] p-3 border-gray-500 rounded-md'>
+        <dl className='divide-y divide-gray-100'>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold'>Fork PSI</dt>
+            <dd className=' ml-3'>{profile.forkPsi}</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Fork sag</dt>
+            <dd className=' ml-3'>{profile.forkSag}%</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Fork HSC</dt>
+            <dd className=' ml-3'>{profile.forkHsc}</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Fork LSC</dt>
+            <dd className=' ml-3'>{profile.forkLsc}</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Fork HSR</dt>
+            <dd className=' ml-3'>{profile.forkHsr}</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Fork LSR</dt>
+            <dd className=' ml-3'>{profile.forkLsr}</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Shock PSI</dt>
+            <dd className=' ml-3'>{profile.shockPsi}</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Shock sag</dt>
+            <dd className=' ml-3'>{profile.shockSag}</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Shock HSC</dt>
+            <dd className=' ml-3'>{profile.shockHsc}</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Shock LSC</dt>
+            <dd className=' ml-3'>{profile.shockLsc}</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Shock HSR</dt>
+            <dd className=' ml-3'>{profile.shockHsr}</dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className='font-bold '>Shock LSR</dt>
+            <dd className=' ml-3'>{profile.shockLsr}</dd>
+          </div>
+         </dl>
+       </div>
+    </div>
+  )
+}
+
+

From 9e900af4bd1338316ff9447b61acef0f47f6c60b Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 31 Jan 2024 13:19:14 +0000
Subject: [PATCH 11/21] Refactor layout and other frontend components

Simplify and refactor profiles to work in a standard CRUD pattern using
the underlying profiles API and CRUD actions.
---
 app/components/Header.tsx  | 10 ++++++++++
 app/components/Profile.tsx | 21 +++++++++++++++++++++
 app/globals.css            | 24 ------------------------
 app/layout.tsx             | 12 +++++++++---
 app/page.tsx               | 16 +++-------------
 index.tsx                  | 13 +++++++++++++
 jsconfig.json              |  6 ++++++
 7 files changed, 62 insertions(+), 40 deletions(-)
 create mode 100644 app/components/Header.tsx
 create mode 100644 app/components/Profile.tsx
 create mode 100644 index.tsx
 create mode 100644 jsconfig.json

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
new file mode 100644
index 0000000..d4cea35
--- /dev/null
+++ b/app/components/Header.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default function Header() {
+  return (
+    <div className='w-full m-auto text-center p-4'>
+      <h1 className='font-bold text-4xl'>Suspense</h1>
+      <p className='text-sm'>Record your suspension settings</p>
+    </div>
+  )
+}
diff --git a/app/components/Profile.tsx b/app/components/Profile.tsx
new file mode 100644
index 0000000..2181217
--- /dev/null
+++ b/app/components/Profile.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { ProfileModel } from '../types'
+import Link from 'next/link'
+export default function Profile(params: ProfileModel) {
+  return (
+    <tr className="text-center">
+      <td className='border border-slate-300'>
+        <Link href={`/profiles/read/${params.id}`} className='underline text-blue-600 hover:text-blue-800 visited:text-purple-600'>{params.name}</Link>
+      </td>
+      <td className='border border-slate-300'>{params.forkPsi}</td>
+      <td className='border border-slate-300'>{params.forkSag}%</td>
+      <td className='border border-slate-300'>{params.shockPsi}</td>
+      <td className='border border-slate-300'>{params.shockSag}%</td>
+      <td className='w-52 border border-slate-300'>
+        <Link href={`/profiles/edit/${params.id}`} className='bg-yellow-500 p-2 inline-block text-white text-sm'>Edit</Link>
+        <span onClick={()=>params.deleteProfile(params.id)} className='bg-red-500 ml-3 p-2 inline-block text-white text-sm'>Delete</span>
+      </td>
+    </tr>
+  )
+}
+
diff --git a/app/globals.css b/app/globals.css
index fd81e88..b5c61c9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,27 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index f37a270..badec46 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,12 +1,13 @@
 import './globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
+import Header from './components/Header'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Suspense',
-  description: 'Record your suspension settings',
+  title: 'Create Next App',
+  description: 'Generated by create next app',
 }
 
 export default function RootLayout({
@@ -16,7 +17,12 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Header />
+        <div className='w-full m-auto'>
+            {children}
+        </div>
+      </body>
     </html>
   )
 }
diff --git a/app/page.tsx b/app/page.tsx
index 61ff6b1..209125c 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,17 +1,7 @@
-import Image from 'next/image'
-import Title from './components/title'
-import dynamic from 'next/dynamic'
-const SuspenseTable = dynamic(() => import('./components/suspense-table'), { ssr: false });
-
+import Profiles from './profiles/page'
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center p-24">
-      <div className="z-10 max-w-10xl w-full items-center font-mono text-sm lg:flex">
-        <Title text="Suspense" description="Record your suspension settings" />
-      </div>
-      <div className="z-10 max-w-10xl w-full items-center font-mono text-sm lg:flex">
-        <SuspenseTable />
-      </div>
-    </main>
+    <Profiles />
   )
 }
+
diff --git a/index.tsx b/index.tsx
new file mode 100644
index 0000000..c880492
--- /dev/null
+++ b/index.tsx
@@ -0,0 +1,13 @@
+import { Link } from 'components';
+
+export default Home;
+
+function Home() {
+  return (
+    <div>
+      <h1>Next.js 10 - CRUD Example with React Hook Form</h1>
+      <p>An example app showing how to list, add, edit and delete user records with Next.js 10 and the React Hook Form library.</p>
+      <p><Link href="/profiles">&gt;&gt; Manage Profiles</Link></p>
+    </div>
+  );
+}
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 0000000..d056459
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    // make all imports without a dot '.' prefix relative to the base url
+    "baseUrl": "."
+  }
+}

From 0a56a33e05e8c5db49a7508c1a4111f428f53d32 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 31 Jan 2024 14:42:39 +0000
Subject: [PATCH 12/21] Add common form components

---
 app/components/form/Label.tsx             |  16 +++
 app/components/form/LabelAndTextField.tsx |  24 ++++
 app/components/form/Submit.tsx            |   9 ++
 app/components/form/TextField.tsx         |  19 +++
 app/profiles/create/page.tsx              | 164 +++-------------------
 5 files changed, 90 insertions(+), 142 deletions(-)
 create mode 100644 app/components/form/Label.tsx
 create mode 100644 app/components/form/LabelAndTextField.tsx
 create mode 100644 app/components/form/Submit.tsx
 create mode 100644 app/components/form/TextField.tsx

diff --git a/app/components/form/Label.tsx b/app/components/form/Label.tsx
new file mode 100644
index 0000000..f32935b
--- /dev/null
+++ b/app/components/form/Label.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface LabelProps {
+  fieldName: string;
+  labelText: string;
+}
+
+export default function Label({fieldName, labelText}: LabelProps) {
+  const classNames = 'block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4';
+
+  return (
+    <label className={classNames} htmlFor={fieldName}>
+      {labelText}
+    </label>
+  )
+}
diff --git a/app/components/form/LabelAndTextField.tsx b/app/components/form/LabelAndTextField.tsx
new file mode 100644
index 0000000..ca777a1
--- /dev/null
+++ b/app/components/form/LabelAndTextField.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { SyntheticEvent } from 'react'
+import Label from './Label'
+import TextField from './TextField'
+
+interface LabelAndTextFieldProps {
+  fieldName: string;
+  fieldSetter: Function;
+  labelText: string;
+}
+
+export default function LabelAndTextField({fieldName, fieldSetter, labelText}: LabelAndTextFieldProps) {
+
+  return (
+    <div className="md:flex md:items-center mb-6">
+      <div className="md:w-1/4">
+        <Label fieldName={fieldName} labelText={labelText} />
+      </div>
+      <div className="md:w-2/4">
+        <TextField fieldName={fieldName} fieldSetter={fieldSetter} />
+      </div>
+    </div>
+  )
+}
diff --git a/app/components/form/Submit.tsx b/app/components/form/Submit.tsx
new file mode 100644
index 0000000..1aa2a40
--- /dev/null
+++ b/app/components/form/Submit.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Submit() {
+  return (
+    <div className='w-full py-2 text-center'>
+      <button className="w-20 p-2 text-white border-gray-200 border-[1px] rounded-sm bg-green-400">Submit</button>
+    </div>
+  )
+}
diff --git a/app/components/form/TextField.tsx b/app/components/form/TextField.tsx
new file mode 100644
index 0000000..f4014e0
--- /dev/null
+++ b/app/components/form/TextField.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { SyntheticEvent } from 'react'
+
+interface TextFieldProps {
+  fieldName: string;
+  fieldSetter: Function;
+}
+
+export default function TextField({fieldName, fieldSetter}: TextFieldProps) {
+  const classNames = 'bg-gray-200 appearance-none border-2 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500';
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    fieldSetter(e.currentTarget.value);
+  }
+
+  return (
+    <input className={classNames} id={fieldName} type="text" onChange={onChange}/>
+  )
+}
diff --git a/app/profiles/create/page.tsx b/app/profiles/create/page.tsx
index ad2b5aa..4142d6f 100644
--- a/app/profiles/create/page.tsx
+++ b/app/profiles/create/page.tsx
@@ -1,6 +1,9 @@
 "use client"
 import React, {useState } from 'react'
 import { useRouter } from 'next/navigation'
+import LabelAndTextField from '../../components/form/LabelAndTextField'
+import Submit from '../../components/form/Submit'
+
 export default function ProfileCreate() {
   const router = useRouter()
   const [name, setName] = useState<string>('');
@@ -43,157 +46,34 @@ export default function ProfileCreate() {
         body: JSON.stringify(formData)
       });
       const content = await add.json();
-      if(content.success>0)
-      {
-        router.push('/profile');
+      if(content.success > 0) {
+        router.push(`/profiles/read/${content.id}`);
       }
-
     }
   };
 
-  const labelClassNames = 'block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4';
-  const inputClassNames = 'bg-gray-200 appearance-none border-2 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500';
-
   return (
     <form className="w-full bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={addProfile}>
-      <h1 className="text-xl font-bold">Add profile</h1>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="name">
-            Name
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="name" type="text" onChange={(e:any)=>setName(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkPsi">
-            Fork PSI
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkPsi" type="text"  onChange={(e:any)=>setForkPsi(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkSag">
-            Fork sag
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkSag" type="text"  onChange={(e:any)=>setForkSag(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkHsc">
-            Fork HSC
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkHsc" type="text" onChange={(e:any)=>setForkHsc(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkLsc">
-            Fork LSC
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkLsc" type="text" onChange={(e:any)=>setForkLsc(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkHsr">
-            Fork HSR
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkHsr" type="text" onChange={(e:any)=>setForkHsr(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkLsr">
-            Fork LSR
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkLsr" type="text" onChange={(e:any)=>setForkLsr(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockPsi">
-            Shock PSI
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockPsi" type="text" onChange={(e:any)=>setShockPsi(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockSag">
-            Shock sag
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockSag" type="text" onChange={(e:any)=>setShockSag(e.target.value)}/>
-        </div>
-      </div>
 
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockHsc">
-            Shock HSC
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockHsc" type="text" onChange={(e:any)=>setShockHsc(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockLsc">
-            Shock LSC
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockLsc" type="text" onChange={(e:any)=>setShockLsc(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockHsr">
-            Shock HSR
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockHsr" type="text" onChange={(e:any)=>setShockHsr(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockLsr">
-            Shock LSR
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockLsr" type="text" onChange={(e:any)=>setShockLsr(e.target.value)}/>
-        </div>
+      <div className="m-auto w-full text-center mb-10">
+        <h1 className="text-xl font-bold">Add a new suspension profile</h1>
       </div>
 
-      <div className='w-full py-2'>
-        <button className="w-20 p-2 text-white border-gray-200 border-[1px] rounded-sm bg-green-400">Submit</button>
-      </div>
+      <LabelAndTextField fieldName={'name'} fieldSetter={setName} labelText={'Name'} />
+      <LabelAndTextField fieldName={'forkPsi'} fieldSetter={setForkPsi} labelText={'Fork PSI'} />
+      <LabelAndTextField fieldName={'forkSag'} fieldSetter={setForkSag} labelText={'Fork sag'} />
+      <LabelAndTextField fieldName={'forkHsc'} fieldSetter={setForkHsc} labelText={'Fork HSC'} />
+      <LabelAndTextField fieldName={'forkLsc'} fieldSetter={setForkLsc} labelText={'Fork LSC'} />
+      <LabelAndTextField fieldName={'forkHsr'} fieldSetter={setForkHsr} labelText={'Fork HSR'} />
+      <LabelAndTextField fieldName={'forkLsr'} fieldSetter={setForkLsr} labelText={'Fork LSR'} />
+      <LabelAndTextField fieldName={'shockPsi'} fieldSetter={setShockPsi} labelText={'Shock PSI'} />
+      <LabelAndTextField fieldName={'shockSag'} fieldSetter={setShockSag} labelText={'Shock sag'} />
+      <LabelAndTextField fieldName={'shockHsc'} fieldSetter={setShockHsc} labelText={'Shock HSC'} />
+      <LabelAndTextField fieldName={'shockLsc'} fieldSetter={setShockLsc} labelText={'Shock LSC'} />
+      <LabelAndTextField fieldName={'shockHsr'} fieldSetter={setShockHsr} labelText={'Shock HSR'} />
+      <LabelAndTextField fieldName={'shockLsr'} fieldSetter={setShockLsr} labelText={'Shock LSR'} />
+
+      <Submit />
     </form>
   )
 }
-
-

From 594344a8a08b72b07895d26b046f2d8d4d624d30 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 21 Feb 2024 11:11:11 +0000
Subject: [PATCH 13/21] Use common components on edit form

---
 app/components/form/Label.tsx             |   2 +-
 app/components/form/LabelAndTextField.tsx |   5 +-
 app/components/form/TextField.tsx         |   4 +-
 app/profiles/edit/[id]/page.tsx           | 158 +++-------------------
 app/profiles/page.tsx                     |  16 +--
 index.tsx                                 |   7 +-
 6 files changed, 27 insertions(+), 165 deletions(-)

diff --git a/app/components/form/Label.tsx b/app/components/form/Label.tsx
index f32935b..045b3b9 100644
--- a/app/components/form/Label.tsx
+++ b/app/components/form/Label.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 
-interface LabelProps {
+interface LabelProps extends React.HTMLAttributes<any> {
   fieldName: string;
   labelText: string;
 }
diff --git a/app/components/form/LabelAndTextField.tsx b/app/components/form/LabelAndTextField.tsx
index ca777a1..fc2ac35 100644
--- a/app/components/form/LabelAndTextField.tsx
+++ b/app/components/form/LabelAndTextField.tsx
@@ -3,14 +3,13 @@ import { SyntheticEvent } from 'react'
 import Label from './Label'
 import TextField from './TextField'
 
-interface LabelAndTextFieldProps {
+interface LabelAndTextFieldProps extends React.HTMLAttributes<any> {
   fieldName: string;
-  fieldSetter: Function;
+  fieldSetter: React.Dispatch<React.SetStateAction<string>>;
   labelText: string;
 }
 
 export default function LabelAndTextField({fieldName, fieldSetter, labelText}: LabelAndTextFieldProps) {
-
   return (
     <div className="md:flex md:items-center mb-6">
       <div className="md:w-1/4">
diff --git a/app/components/form/TextField.tsx b/app/components/form/TextField.tsx
index f4014e0..1e28df5 100644
--- a/app/components/form/TextField.tsx
+++ b/app/components/form/TextField.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import { SyntheticEvent } from 'react'
 
-interface TextFieldProps {
+interface TextFieldProps extends React.HTMLAttributes<any> {
   fieldName: string;
-  fieldSetter: Function;
+  fieldSetter: React.Dispatch<React.SetStateAction<string>>;
 }
 
 export default function TextField({fieldName, fieldSetter}: TextFieldProps) {
diff --git a/app/profiles/edit/[id]/page.tsx b/app/profiles/edit/[id]/page.tsx
index 9fd0f32..87f7bd0 100644
--- a/app/profiles/edit/[id]/page.tsx
+++ b/app/profiles/edit/[id]/page.tsx
@@ -4,6 +4,9 @@ import { useRouter } from 'next/navigation'
 import { fetcher } from '@/app/lib'
 import useSWR from 'swr'
 
+import LabelAndTextField from '@/app/components/form/LabelAndTextField';
+import Submit from '@/app/components/form/Submit';
+
 export default function ProfileEdit({params} :{params:{id:number}}) {
   const router = useRouter()
   const [name, setName] = useState<string>('');
@@ -20,7 +23,7 @@ export default function ProfileEdit({params} :{params:{id:number}}) {
   const [shockHsr, setShockHsr] = useState<string>('');
   const [shockLsr, setShockLsr] = useState<string>('');
 
-  const {data : profile,isLoading, error} = useSWR(`/api/profiles/${params.id}`,fetcher)
+  const {data : profile, isLoading, error} = useSWR(`/api/profiles/${params.id}`,fetcher)
   useEffect(()=>{
      if(profile){
          setName(profile.name)
@@ -66,155 +69,32 @@ export default function ProfileEdit({params} :{params:{id:number}}) {
       const content = await res.json();
       if(content.success>0)
       {
-        router.push('/profile');
+        router.push('/profiles');
       }
 
     }
   };
   if(isLoading) return <div><span>Loading...</span></div>
   if (!profile) return null;
-  const labelClassNames = 'block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4';
-  const inputClassNames = 'bg-gray-200 appearance-none border-2 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500';
 
   return (
     <form className="w-full bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={updateProfile}>
       <h1 className="text-xl font-bold">Edit profile</h1>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="name">
-            Name
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="name" type="text" value={name} onChange={(e:any)=>setName(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkPsi">
-            Fork PSI
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkPsi" type="text" value={forkPsi} onChange={(e:any)=>setForkPsi(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkSag">
-            Fork sag
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkSag" type="text" value={forkSag} onChange={(e:any)=>setForkSag(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkHsc">
-            Fork HSC
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkHsc" type="text" value={forkHsc} onChange={(e:any)=>seForkHsc(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkLsc">
-            Fork LSC
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkLsc" type="text" value={forkLsc} onChange={(e:any)=>setForkLsc(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkHsr">
-            Fork HSR
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkHsr" type="text" value={forkHsr} onChange={(e:any)=>setForkHsr(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="forkLsr">
-            Fork LSR
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="forkLsr" type="text" value={forkLsr} onChange={(e:any)=>setForkLsr(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockPsi">
-            Shock PSI
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockPsi" type="text" value={shockPsi} onChange={(e:any)=>setShockPsi(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockSag">
-            Shock sag
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockSag" type="text" value={shockSag} onChange={(e:any)=>setShockSag(e.target.value)}/>
-        </div>
-      </div>
-
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockHsc">
-            Shock HSC
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockHsc" type="text" value={shockHsc} onChange={(e:any)=>setShockHsc(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockLsc">
-            Shock LSC
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockLsc" type="text" value={shockLsc} onChange={(e:any)=>setShockLsc(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockHsr">
-            Shock HSR
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockHsr" type="text" value={shockHsr} onChange={(e:any)=>setShockHsr(e.target.value)}/>
-        </div>
-      </div>
-      <div className="md:flex md:items-center mb-6">
-        <div className="md:w-1/3">
-          <label className={labelClassNames} htmlFor="shockLsr">
-            Shock LSR
-          </label>
-        </div>
-        <div className="md:w-2/3">
-          <input className={inputClassNames} id="shockLsr" type="text" value={shockLsr} onChange={(e:any)=>setShockLsr(e.target.value)}/>
-        </div>
-      </div>
+      <LabelAndTextField fieldName={'name'} fieldSetter={setName} labelText={'Name'} />
+      <LabelAndTextField fieldName={'forkPsi'} fieldSetter={setForkPsi} labelText={'Fork PSI'} />
+      <LabelAndTextField fieldName={'forkSag'} fieldSetter={setForkSag} labelText={'Fork sag'} />
+      <LabelAndTextField fieldName={'forkHsc'} fieldSetter={setForkHsc} labelText={'Fork HSC'} />
+      <LabelAndTextField fieldName={'forkLsc'} fieldSetter={setForkLsc} labelText={'Fork LSC'} />
+      <LabelAndTextField fieldName={'forkHsr'} fieldSetter={setForkHsr} labelText={'Fork HSR'} />
+      <LabelAndTextField fieldName={'forkLsr'} fieldSetter={setForkLsr} labelText={'Fork LSR'} />
+      <LabelAndTextField fieldName={'shockPsi'} fieldSetter={setShockPsi} labelText={'Shock PSI'} />
+      <LabelAndTextField fieldName={'shockSag'} fieldSetter={setShockSag} labelText={'Shock sag'} />
+      <LabelAndTextField fieldName={'shockHsc'} fieldSetter={setShockHsc} labelText={'Shock HSC'} />
+      <LabelAndTextField fieldName={'shockLsc'} fieldSetter={setShockLsc} labelText={'Shock LSC'} />
+      <LabelAndTextField fieldName={'shockHsr'} fieldSetter={setShockHsr} labelText={'Shock HSR'} />
+      <LabelAndTextField fieldName={'shockLsr'} fieldSetter={setShockLsr} labelText={'Shock LSR'} />
 
-      <div className='w-full py-2'>
-        <button className="w-20 p-2 text-white border-gray-200 border-[1px] rounded-sm bg-green-400">Submit</button>
-      </div>
+      <Submit />
     </form>
   )
 }
-
diff --git a/app/profiles/page.tsx b/app/profiles/page.tsx
index 185f557..7f138d3 100644
--- a/app/profiles/page.tsx
+++ b/app/profiles/page.tsx
@@ -18,20 +18,7 @@ export default function Profiles() {
   if (error) return <div>Failed to load</div>;
   if (isLoading) return <div>Loading...</div>;
   if (!data) return null;
-  let delete_Profile : ProfileModel['deleteProfile']= async (id:number) => {
-    const res = await fetch(`/api/profiles/${id}`, {
-      method: 'DELETE',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-    });
-    const content = await res.json();
-    if(content.success>0)
-    {
 
-      setProfiles(profiles?.filter((profile:ProfileModel)=>{  return profile.id !== id  }));
-    }
-  }
   return (
     <div className="w-full max-w-7xl m-auto">
       <table className="w-full border-collapse border border-slate-400">
@@ -47,7 +34,7 @@ export default function Profiles() {
         </thead>
         <tbody>
            {
-              profiles && profiles.map((item : ProfileModel)=><Profile key={item.id} {...item} deleteProfile = {delete_Profile} />)
+              profiles && profiles.map((item : ProfileModel)=><Profile key={item.id} {...item} />)
            }
            <tr>
               <td colSpan={6}>
@@ -59,4 +46,3 @@ export default function Profiles() {
     </div>
   );
 }
-
diff --git a/index.tsx b/index.tsx
index c880492..f6f79f5 100644
--- a/index.tsx
+++ b/index.tsx
@@ -1,8 +1,5 @@
-import { Link } from 'components';
-
-export default Home;
-
-function Home() {
+import Link from "next/link";
+export default function Home() {
   return (
     <div>
       <h1>Next.js 10 - CRUD Example with React Hook Form</h1>

From 99cf4f21486f6f92985f78080e8b690e5a2e90b8 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 21 Feb 2024 11:12:00 +0000
Subject: [PATCH 14/21] Use API to delete profiles

---
 app/components/Profile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Profile.tsx b/app/components/Profile.tsx
index 2181217..08d9cee 100644
--- a/app/components/Profile.tsx
+++ b/app/components/Profile.tsx
@@ -13,7 +13,7 @@ export default function Profile(params: ProfileModel) {
       <td className='border border-slate-300'>{params.shockSag}%</td>
       <td className='w-52 border border-slate-300'>
         <Link href={`/profiles/edit/${params.id}`} className='bg-yellow-500 p-2 inline-block text-white text-sm'>Edit</Link>
-        <span onClick={()=>params.deleteProfile(params.id)} className='bg-red-500 ml-3 p-2 inline-block text-white text-sm'>Delete</span>
+        <Link href={`/profiles/delete/${params.id}`} className='bg-red-500 ml-3 p-2 inline-block text-white text-sm'>Delete</Link>
       </td>
     </tr>
   )

From 604744ec3811928cf9e0427a9b6438e67ab62b6e Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 21 Feb 2024 11:12:26 +0000
Subject: [PATCH 15/21] Add success to API responses

---
 pages/api/profiles.ts      | 6 +++---
 pages/api/profiles/[id].ts | 4 ++--
 pages/api/profilesRepo.js  | 7 ++++++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/pages/api/profiles.ts b/pages/api/profiles.ts
index 9d9d555..47bd927 100644
--- a/pages/api/profiles.ts
+++ b/pages/api/profiles.ts
@@ -8,13 +8,13 @@ export default function handler(
 ) {
   const getProfiles = () => {
     const profiles = profilesRepo.getAll();
-    return res.status(200).json(profiles);
+    return res.status(200).json({profiles: profiles, success: 1});
   }
 
   const createProfile = () => {
     try {
-      profilesRepo.create(req.body);
-      return res.status(200).json({});
+      const profile = profilesRepo.create(req.body);
+      return res.status(200).json({success:1, id: profile.id});
     } catch (error: any) {
       return res.status(400).json({ message: error });
     }
diff --git a/pages/api/profiles/[id].ts b/pages/api/profiles/[id].ts
index b0bc5f8..ee73afb 100644
--- a/pages/api/profiles/[id].ts
+++ b/pages/api/profiles/[id].ts
@@ -15,7 +15,7 @@ export default function handler(
   const updateProfile = () => {
     try {
       profilesRepo.update(req.query.id, req.body);
-      return res.status(200).json({});
+      return res.status(200).json({success:1});
     } catch (error) {
       return res.status(400).json({ message: error });
     }
@@ -23,7 +23,7 @@ export default function handler(
 
   const deleteProfile = () => {
     profilesRepo.delete(req.query.id);
-    return res.status(200).json({});
+    return res.status(200).json({success:1});
   }
 
   switch (req.method) {
diff --git a/pages/api/profilesRepo.js b/pages/api/profilesRepo.js
index ccf82b1..63014ca 100644
--- a/pages/api/profilesRepo.js
+++ b/pages/api/profilesRepo.js
@@ -11,7 +11,10 @@ const getById = (id) => {
 }
 
 const create = ({ name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr }) => {
-  const profile = { name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr };
+  const profile = {
+    id, name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr,
+    shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr
+  };
 
   // validate
   if (profiles.find(x => x.name === profile.name))
@@ -27,6 +30,8 @@ const create = ({ name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, sh
   // add and save profile
   profiles.push(profile);
   saveData();
+
+  return profile;
 }
 
 const update = (id, { name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr }) => {

From 63fb7b7eeade9fb4680c2aade0ef6f50616e3863 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 21 Feb 2024 11:13:02 +0000
Subject: [PATCH 16/21] Add delete action

---
 app/profiles/delete/[id]/page.tsx | 49 +++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 app/profiles/delete/[id]/page.tsx

diff --git a/app/profiles/delete/[id]/page.tsx b/app/profiles/delete/[id]/page.tsx
new file mode 100644
index 0000000..6021f4e
--- /dev/null
+++ b/app/profiles/delete/[id]/page.tsx
@@ -0,0 +1,49 @@
+"use client"
+import React, {useState,useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+import { fetcher } from '@/app/lib'
+import useSWR from 'swr'
+
+export default function ProfileDelete({params} :{params:{id:number}}) {
+  const router = useRouter()
+  const [name, setName] = useState<string>('');
+  const {data : profile,isLoading, error} = useSWR(`/api/profiles/${params.id}`,fetcher)
+
+  useEffect(()=>{
+    if (profile) {
+      setName(profile.name);
+    }
+  },[profile, isLoading])
+
+  const deleteProfile = async (e: any) => {
+    e.preventDefault()
+    const res = await fetch(`/api/profiles/${params.id}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+    });
+    const content = await res.json();
+    if(content.success > 0)
+    {
+      router.push('/profiles');
+    }
+  };
+
+  if (isLoading) return <div><span>Loading...</span></div>
+  if (!profile) return null;
+  
+  const labelClassNames = 'block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4';
+  const inputClassNames = 'bg-gray-200 appearance-none border-2 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500';
+
+  return (
+    <form className="w-full bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={deleteProfile}>
+      <h1 className="text-xl font-bold">Are you sure you want to delete suspension profile {profile.name}?</h1>
+
+      <div className='w-full py-2'>
+        <button className="w-20 p-2 text-white border-gray-200 border-[1px] rounded-sm bg-red-400">Delete</button>
+      </div>
+    </form>
+  )
+}
+

From 052014184c6cdec4dd1e6290e7f90b6440ae6637 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 21 Feb 2024 11:13:28 +0000
Subject: [PATCH 17/21] Read success attribute from API response

---
 app/profiles/create/page.tsx    |  2 +-
 app/profiles/page.tsx           | 15 ++++++++-------
 app/profiles/read/[id]/page.tsx |  5 +++--
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/app/profiles/create/page.tsx b/app/profiles/create/page.tsx
index 4142d6f..e36774b 100644
--- a/app/profiles/create/page.tsx
+++ b/app/profiles/create/page.tsx
@@ -47,7 +47,7 @@ export default function ProfileCreate() {
       });
       const content = await add.json();
       if(content.success > 0) {
-        router.push(`/profiles/read/${content.id}`);
+        router.push(`/profiles/read/${content.profile.id}`);
       }
     }
   };
diff --git a/app/profiles/page.tsx b/app/profiles/page.tsx
index 7f138d3..d30f257 100644
--- a/app/profiles/page.tsx
+++ b/app/profiles/page.tsx
@@ -7,18 +7,19 @@ import { ProfileModel } from "../types";
 import Link from "next/link";
 
 export default function Profiles() {
-  const [profiles,setProfiles] = useState<ProfileModel[]>([]);
+  const [profiles, setProfiles] = useState<ProfileModel[]>([]);
   const { data, error, isLoading } = useSWR<any>(`/api/profiles`, fetcher);
-  useEffect(()=>{
-    if(data)
-    {
-      setProfiles(data);
+
+  useEffect(() => {
+    if (data) {
+      setProfiles(data.profiles);
     }
-  },[data,isLoading]);
+  }, [data,isLoading]);
+  
   if (error) return <div>Failed to load</div>;
   if (isLoading) return <div>Loading...</div>;
   if (!data) return null;
-
+  
   return (
     <div className="w-full max-w-7xl m-auto">
       <table className="w-full border-collapse border border-slate-400">
diff --git a/app/profiles/read/[id]/page.tsx b/app/profiles/read/[id]/page.tsx
index 311552c..ccd82db 100644
--- a/app/profiles/read/[id]/page.tsx
+++ b/app/profiles/read/[id]/page.tsx
@@ -3,9 +3,10 @@ import { fetcher } from '@/app/lib'
 import useSWR from 'swr'
 
 export default function Detail({params}: {params:{id :number}}) {
-  const {data: profile, isLoading, error}  = useSWR(`/api/profiles/${params.id}`,fetcher)
+  const {data: data, isLoading, error}  = useSWR(`/api/profiles/${params.id}`,fetcher)
   if(isLoading) return <div><span>Loading...</span></div>
-  if (!profile) return null;
+  if (!data || !data.profile) return null;
+  const profile = data.profile;
   return (
     <div className='w-full'>
       <h2 className='text-center font-bold text-3xl py-3'>{profile.name}</h2>

From fe76bdc4c99fb776d5565d93b2255938e3d18916 Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 21 Feb 2024 13:17:53 +0000
Subject: [PATCH 18/21] Add fieldValue attribute

---
 app/components/form/LabelAndTextField.tsx | 6 +++---
 app/components/form/TextField.tsx         | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/components/form/LabelAndTextField.tsx b/app/components/form/LabelAndTextField.tsx
index fc2ac35..eb6394f 100644
--- a/app/components/form/LabelAndTextField.tsx
+++ b/app/components/form/LabelAndTextField.tsx
@@ -1,22 +1,22 @@
 import React from 'react'
-import { SyntheticEvent } from 'react'
 import Label from './Label'
 import TextField from './TextField'
 
 interface LabelAndTextFieldProps extends React.HTMLAttributes<any> {
   fieldName: string;
+  fieldValue: string;
   fieldSetter: React.Dispatch<React.SetStateAction<string>>;
   labelText: string;
 }
 
-export default function LabelAndTextField({fieldName, fieldSetter, labelText}: LabelAndTextFieldProps) {
+export default function LabelAndTextField({fieldName, fieldValue, fieldSetter, labelText}: LabelAndTextFieldProps) {
   return (
     <div className="md:flex md:items-center mb-6">
       <div className="md:w-1/4">
         <Label fieldName={fieldName} labelText={labelText} />
       </div>
       <div className="md:w-2/4">
-        <TextField fieldName={fieldName} fieldSetter={fieldSetter} />
+        <TextField fieldName={fieldName} fieldSetter={fieldSetter} fieldValue={fieldValue} />
       </div>
     </div>
   )
diff --git a/app/components/form/TextField.tsx b/app/components/form/TextField.tsx
index 1e28df5..30b2e4e 100644
--- a/app/components/form/TextField.tsx
+++ b/app/components/form/TextField.tsx
@@ -3,10 +3,11 @@ import { SyntheticEvent } from 'react'
 
 interface TextFieldProps extends React.HTMLAttributes<any> {
   fieldName: string;
+  fieldValue: string;
   fieldSetter: React.Dispatch<React.SetStateAction<string>>;
 }
 
-export default function TextField({fieldName, fieldSetter}: TextFieldProps) {
+export default function TextField({fieldName, fieldValue, fieldSetter}: TextFieldProps) {
   const classNames = 'bg-gray-200 appearance-none border-2 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500';
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
@@ -14,6 +15,6 @@ export default function TextField({fieldName, fieldSetter}: TextFieldProps) {
   }
 
   return (
-    <input className={classNames} id={fieldName} type="text" onChange={onChange}/>
+    <input className={classNames} id={fieldName} value={fieldValue} type="text" onChange={onChange}/>
   )
 }

From 4bf1ad05cedd032a8047e311e3e7ca387af1478e Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 21 Feb 2024 13:20:21 +0000
Subject: [PATCH 19/21] Populate fieldValue attribute on edit

---
 app/profiles/create/page.tsx    | 27 +++++++-------
 app/profiles/edit/[id]/page.tsx | 64 +++++++++++++++++----------------
 2 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/app/profiles/create/page.tsx b/app/profiles/create/page.tsx
index e36774b..d73edaa 100644
--- a/app/profiles/create/page.tsx
+++ b/app/profiles/create/page.tsx
@@ -58,20 +58,19 @@ export default function ProfileCreate() {
       <div className="m-auto w-full text-center mb-10">
         <h1 className="text-xl font-bold">Add a new suspension profile</h1>
       </div>
-
-      <LabelAndTextField fieldName={'name'} fieldSetter={setName} labelText={'Name'} />
-      <LabelAndTextField fieldName={'forkPsi'} fieldSetter={setForkPsi} labelText={'Fork PSI'} />
-      <LabelAndTextField fieldName={'forkSag'} fieldSetter={setForkSag} labelText={'Fork sag'} />
-      <LabelAndTextField fieldName={'forkHsc'} fieldSetter={setForkHsc} labelText={'Fork HSC'} />
-      <LabelAndTextField fieldName={'forkLsc'} fieldSetter={setForkLsc} labelText={'Fork LSC'} />
-      <LabelAndTextField fieldName={'forkHsr'} fieldSetter={setForkHsr} labelText={'Fork HSR'} />
-      <LabelAndTextField fieldName={'forkLsr'} fieldSetter={setForkLsr} labelText={'Fork LSR'} />
-      <LabelAndTextField fieldName={'shockPsi'} fieldSetter={setShockPsi} labelText={'Shock PSI'} />
-      <LabelAndTextField fieldName={'shockSag'} fieldSetter={setShockSag} labelText={'Shock sag'} />
-      <LabelAndTextField fieldName={'shockHsc'} fieldSetter={setShockHsc} labelText={'Shock HSC'} />
-      <LabelAndTextField fieldName={'shockLsc'} fieldSetter={setShockLsc} labelText={'Shock LSC'} />
-      <LabelAndTextField fieldName={'shockHsr'} fieldSetter={setShockHsr} labelText={'Shock HSR'} />
-      <LabelAndTextField fieldName={'shockLsr'} fieldSetter={setShockLsr} labelText={'Shock LSR'} />
+      <LabelAndTextField fieldName={'name'} fieldValue={name} fieldSetter={setName} labelText={'Name'} />
+      <LabelAndTextField fieldName={'forkPsi'} fieldValue={forkPsi} fieldSetter={setForkPsi} labelText={'Fork PSI'} />
+      <LabelAndTextField fieldName={'forkSag'} fieldValue={forkSag} fieldSetter={setForkSag} labelText={'Fork sag'} />
+      <LabelAndTextField fieldName={'forkHsc'} fieldValue={forkHsc} fieldSetter={setForkHsc} labelText={'Fork HSC'} />
+      <LabelAndTextField fieldName={'forkLsc'} fieldValue={forkLsc} fieldSetter={setForkLsc} labelText={'Fork LSC'} />
+      <LabelAndTextField fieldName={'forkHsr'} fieldValue={forkHsr} fieldSetter={setForkHsr} labelText={'Fork HSR'} />
+      <LabelAndTextField fieldName={'forkLsr'} fieldValue={forkLsr} fieldSetter={setForkLsr} labelText={'Fork LSR'} />
+      <LabelAndTextField fieldName={'shockPsi'} fieldValue={shockPsi} fieldSetter={setShockPsi} labelText={'Shock PSI'} />
+      <LabelAndTextField fieldName={'shockSag'} fieldValue={shockSag} fieldSetter={setShockSag} labelText={'Shock sag'} />
+      <LabelAndTextField fieldName={'shockHsc'} fieldValue={shockHsc} fieldSetter={setShockHsc} labelText={'Shock HSC'} />
+      <LabelAndTextField fieldName={'shockLsc'} fieldValue={shockLsc} fieldSetter={setShockLsc} labelText={'Shock LSC'} />
+      <LabelAndTextField fieldName={'shockHsr'} fieldValue={shockHsr} fieldSetter={setShockHsr} labelText={'Shock HSR'} />
+      <LabelAndTextField fieldName={'shockLsr'} fieldValue={shockLsr} fieldSetter={setShockLsr} labelText={'Shock LSR'} />
 
       <Submit />
     </form>
diff --git a/app/profiles/edit/[id]/page.tsx b/app/profiles/edit/[id]/page.tsx
index 87f7bd0..549573c 100644
--- a/app/profiles/edit/[id]/page.tsx
+++ b/app/profiles/edit/[id]/page.tsx
@@ -8,7 +8,7 @@ import LabelAndTextField from '@/app/components/form/LabelAndTextField';
 import Submit from '@/app/components/form/Submit';
 
 export default function ProfileEdit({params} :{params:{id:number}}) {
-  const router = useRouter()
+  const router = useRouter();
   const [name, setName] = useState<string>('');
   const [forkPsi, setForkPsi] = useState<string>('');
   const [forkSag, setForkSag] = useState<string>('');
@@ -23,24 +23,26 @@ export default function ProfileEdit({params} :{params:{id:number}}) {
   const [shockHsr, setShockHsr] = useState<string>('');
   const [shockLsr, setShockLsr] = useState<string>('');
 
-  const {data : profile, isLoading, error} = useSWR(`/api/profiles/${params.id}`,fetcher)
+  const {data: profile, isLoading, error} = useSWR(`/api/profiles/${params.id}`,fetcher);
+
   useEffect(()=>{
-     if(profile){
-         setName(profile.name)
-         setForkPsi(profile.forkPsi)
-         setForkSag(profile.forkSag)
-         setForkHsc(profile.forkHsc)
-         setForkLsc(profile.forkLsc)
-         setForkHsr(profile.forkHsr)
-         setForkLsr(profile.forkLsr)
-         setShockPsi(profile.shockPsi)
-         setShockSag(profile.shockSag)
-         setShockHsc(profile.shockHsc)
-         setShockLsc(profile.shockLsc)
-         setShockHsr(profile.shockHsr)
-         setShockLsr(profile.shockLsr)
-     }
+    if (profile){
+      setName(profile.name)
+      setForkPsi(profile.forkPsi)
+      setForkSag(profile.forkSag)
+      setForkHsc(profile.forkHsc)
+      setForkLsc(profile.forkLsc)
+      setForkHsr(profile.forkHsr)
+      setForkLsr(profile.forkLsr)
+      setShockPsi(profile.shockPsi)
+      setShockSag(profile.shockSag)
+      setShockHsc(profile.shockHsc)
+      setShockLsc(profile.shockLsc)
+      setShockHsr(profile.shockHsr)
+      setShockLsr(profile.shockLsr)
+    }
   },[profile, isLoading])
+
   const updateProfile = async (e: any) => {
     e.preventDefault()
     if (name != "" && forkPsi != "" && shockPsi != "") {
@@ -67,7 +69,7 @@ export default function ProfileEdit({params} :{params:{id:number}}) {
         body: JSON.stringify(formData)
       });
       const content = await res.json();
-      if(content.success>0)
+      if(content.success > 0)
       {
         router.push('/profiles');
       }
@@ -80,19 +82,19 @@ export default function ProfileEdit({params} :{params:{id:number}}) {
   return (
     <form className="w-full bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={updateProfile}>
       <h1 className="text-xl font-bold">Edit profile</h1>
-      <LabelAndTextField fieldName={'name'} fieldSetter={setName} labelText={'Name'} />
-      <LabelAndTextField fieldName={'forkPsi'} fieldSetter={setForkPsi} labelText={'Fork PSI'} />
-      <LabelAndTextField fieldName={'forkSag'} fieldSetter={setForkSag} labelText={'Fork sag'} />
-      <LabelAndTextField fieldName={'forkHsc'} fieldSetter={setForkHsc} labelText={'Fork HSC'} />
-      <LabelAndTextField fieldName={'forkLsc'} fieldSetter={setForkLsc} labelText={'Fork LSC'} />
-      <LabelAndTextField fieldName={'forkHsr'} fieldSetter={setForkHsr} labelText={'Fork HSR'} />
-      <LabelAndTextField fieldName={'forkLsr'} fieldSetter={setForkLsr} labelText={'Fork LSR'} />
-      <LabelAndTextField fieldName={'shockPsi'} fieldSetter={setShockPsi} labelText={'Shock PSI'} />
-      <LabelAndTextField fieldName={'shockSag'} fieldSetter={setShockSag} labelText={'Shock sag'} />
-      <LabelAndTextField fieldName={'shockHsc'} fieldSetter={setShockHsc} labelText={'Shock HSC'} />
-      <LabelAndTextField fieldName={'shockLsc'} fieldSetter={setShockLsc} labelText={'Shock LSC'} />
-      <LabelAndTextField fieldName={'shockHsr'} fieldSetter={setShockHsr} labelText={'Shock HSR'} />
-      <LabelAndTextField fieldName={'shockLsr'} fieldSetter={setShockLsr} labelText={'Shock LSR'} />
+      <LabelAndTextField fieldName={'name'} fieldValue={name} fieldSetter={setName} labelText={'Name'} />
+      <LabelAndTextField fieldName={'forkPsi'} fieldValue={forkPsi} fieldSetter={setForkPsi} labelText={'Fork PSI'} />
+      <LabelAndTextField fieldName={'forkSag'} fieldValue={forkSag} fieldSetter={setForkSag} labelText={'Fork sag'} />
+      <LabelAndTextField fieldName={'forkHsc'} fieldValue={forkHsc} fieldSetter={setForkHsc} labelText={'Fork HSC'} />
+      <LabelAndTextField fieldName={'forkLsc'} fieldValue={forkLsc} fieldSetter={setForkLsc} labelText={'Fork LSC'} />
+      <LabelAndTextField fieldName={'forkHsr'} fieldValue={forkHsr} fieldSetter={setForkHsr} labelText={'Fork HSR'} />
+      <LabelAndTextField fieldName={'forkLsr'} fieldValue={forkLsr} fieldSetter={setForkLsr} labelText={'Fork LSR'} />
+      <LabelAndTextField fieldName={'shockPsi'} fieldValue={shockPsi} fieldSetter={setShockPsi} labelText={'Shock PSI'} />
+      <LabelAndTextField fieldName={'shockSag'} fieldValue={shockSag} fieldSetter={setShockSag} labelText={'Shock sag'} />
+      <LabelAndTextField fieldName={'shockHsc'} fieldValue={shockHsc} fieldSetter={setShockHsc} labelText={'Shock HSC'} />
+      <LabelAndTextField fieldName={'shockLsc'} fieldValue={shockLsc} fieldSetter={setShockLsc} labelText={'Shock LSC'} />
+      <LabelAndTextField fieldName={'shockHsr'} fieldValue={shockHsr} fieldSetter={setShockHsr} labelText={'Shock HSR'} />
+      <LabelAndTextField fieldName={'shockLsr'} fieldValue={shockLsr} fieldSetter={setShockLsr} labelText={'Shock LSR'} />
 
       <Submit />
     </form>

From 4e22d1138eb801d34d5fc1546f6984c3109ebebf Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Wed, 21 Feb 2024 13:20:49 +0000
Subject: [PATCH 20/21] Fix imports and metadata

---
 app/layout.tsx               | 8 ++++----
 app/page.tsx                 | 2 +-
 app/profiles/create/page.tsx | 4 ++--
 app/profiles/page.tsx        | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index badec46..7759301 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,13 +1,13 @@
-import './globals.css'
+import '@/app/globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
-import Header from './components/Header'
+import Header from '@/app/components/Header'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'Suspense',
+  description: 'Record your suspension settings',
 }
 
 export default function RootLayout({
diff --git a/app/page.tsx b/app/page.tsx
index 209125c..e6dfef2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,4 @@
-import Profiles from './profiles/page'
+import Profiles from '@/app/profiles/page'
 export default function Home() {
   return (
     <Profiles />
diff --git a/app/profiles/create/page.tsx b/app/profiles/create/page.tsx
index d73edaa..7893c8f 100644
--- a/app/profiles/create/page.tsx
+++ b/app/profiles/create/page.tsx
@@ -1,8 +1,8 @@
 "use client"
 import React, {useState } from 'react'
 import { useRouter } from 'next/navigation'
-import LabelAndTextField from '../../components/form/LabelAndTextField'
-import Submit from '../../components/form/Submit'
+import LabelAndTextField from '@/app/components/form/LabelAndTextField'
+import Submit from '@/app/components/form/Submit'
 
 export default function ProfileCreate() {
   const router = useRouter()
diff --git a/app/profiles/page.tsx b/app/profiles/page.tsx
index d30f257..8cdb752 100644
--- a/app/profiles/page.tsx
+++ b/app/profiles/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 import React,{useEffect, useState} from "react";
 import useSWR from "swr";
-import { fetcher } from "../lib";
-import Profile from "../components/Profile";
-import { ProfileModel } from "../types";
+import { fetcher } from "@/app/lib";
+import Profile from "@/app/components/Profile";
+import { ProfileModel } from "@/app/types";
 import Link from "next/link";
 
 export default function Profiles() {

From 66494b64461467e3c8a76c8186ef259dd086b27e Mon Sep 17 00:00:00 2001
From: Steve Laing <steve.laing@gmail.com>
Date: Thu, 22 Feb 2024 16:57:52 +0000
Subject: [PATCH 21/21] Convert profilesRepo to typescript

---
 app/types/index.ts                            |  2 ++
 pages/api/profiles/[id].ts                    |  6 ++--
 .../api/{profilesRepo.js => profilesRepo.ts}  | 29 +++++++++----------
 3 files changed, 19 insertions(+), 18 deletions(-)
 rename pages/api/{profilesRepo.js => profilesRepo.ts} (60%)

diff --git a/app/types/index.ts b/app/types/index.ts
index dad1eef..5a61277 100644
--- a/app/types/index.ts
+++ b/app/types/index.ts
@@ -13,4 +13,6 @@ export interface ProfileModel {
     shockHsr: number,
     shockLsr: number,
     shockSag: number,
+    dateCreated: string,
+    dateUpdated: string
 }
diff --git a/pages/api/profiles/[id].ts b/pages/api/profiles/[id].ts
index ee73afb..65ea7e4 100644
--- a/pages/api/profiles/[id].ts
+++ b/pages/api/profiles/[id].ts
@@ -8,13 +8,13 @@ export default function handler(
 ) {
 
   const getProfileById = () => {
-    const profile = profilesRepo.getById(req.query.id);
+    const profile = profilesRepo.getById(Number(req.query.id));
     return res.status(200).json(profile);
   }
 
   const updateProfile = () => {
     try {
-      profilesRepo.update(req.query.id, req.body);
+      profilesRepo.update(Number(req.query.id), req.body);
       return res.status(200).json({success:1});
     } catch (error) {
       return res.status(400).json({ message: error });
@@ -22,7 +22,7 @@ export default function handler(
   }
 
   const deleteProfile = () => {
-    profilesRepo.delete(req.query.id);
+    profilesRepo.delete(Number(req.query.id));
     return res.status(200).json({success:1});
   }
 
diff --git a/pages/api/profilesRepo.js b/pages/api/profilesRepo.ts
similarity index 60%
rename from pages/api/profilesRepo.js
rename to pages/api/profilesRepo.ts
index 63014ca..b2aecc0 100644
--- a/pages/api/profilesRepo.js
+++ b/pages/api/profilesRepo.ts
@@ -1,28 +1,27 @@
 const fs = require('fs');
-
-let profiles = require('./../../data/profiles.json');
+import { ProfileModel } from '@/app/types/index';
+let profiles = require('@/data/profiles.json');
 
 const getAll = () => {
   return profiles;
 }
 
-const getById = (id) => {
-  return profiles.find(x => x.id.toString() === id.toString());
+const getById = (id:number) => {
+  return profiles.find((x:ProfileModel) => x.id.toString() === id.toString());
 }
 
-const create = ({ name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr }) => {
-  const profile = {
+const create = ({ name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr }:ProfileModel) => {
+  const id:number = profiles.length ? Math.max(...profiles.map((x:ProfileModel) => x.id)) + 1 : 1;
+
+  const profile = <ProfileModel>{
     id, name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr,
     shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr
   };
 
   // validate
-  if (profiles.find(x => x.name === profile.name))
+  if (profiles.find((x:ProfileModel) => x.name === profile.name))
     throw `Profile with the name ${profile.name} already exists`;
 
-  // generate new profile id
-  profile.id = profiles.length ? Math.max(...profiles.map(x => x.id)) + 1 : 1;
-
   // set date created and updated
   profile.dateCreated = new Date().toISOString();
   profile.dateUpdated = new Date().toISOString();
@@ -34,12 +33,12 @@ const create = ({ name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, sh
   return profile;
 }
 
-const update = (id, { name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr }) => {
+const update = (id:number, { name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr }:ProfileModel) => {
   const params = { name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr, shockPsi, shockSag, shockHsc, shockLsc, shockHsr, shockLsr };
-  const profile = profiles.find(x => x.id.toString() === id.toString());
+  const profile = profiles.find((x:ProfileModel) => x.id.toString() === id.toString());
 
   // validate
-  if (params.name !== profile.name && profiles.find(x => x.name === params.name))
+  if (params.name !== profile.name && profiles.find((x:ProfileModel) => x.name === params.name))
     throw `Profile with the name ${params.name} already exists`;
 
   // set date updated
@@ -51,9 +50,9 @@ const update = (id, { name, forkPsi, forkSag, forkHsc, forkLsc, forkHsr, forkLsr
 }
 
 // prefixed with underscore '_' because 'delete' is a reserved word in javascript
-const _delete = (id) => {
+const _delete = (id:number) => {
   // filter out deleted profile and save
-  profiles = profiles.filter(x => x.id.toString() !== id.toString());
+  profiles = profiles.filter((x:ProfileModel) => x.id.toString() !== id.toString());
   saveData();
 
 }