refactor: ⚡ component Repo in TS

Components/Repo/Repo.tsx

@@ -9,29 +9,40 @@ import {
   IconBellOff,
   IconLockPlus,
 } from '@tabler/icons-react';
-import timestampConverter from '../../helpers/functions/timestampConverter';
+import { timestampConverter } from '~/helpers/functions';
 import StorageBar from '../UI/StorageBar/StorageBar';
 import QuickCommands from './QuickCommands/QuickCommands';
+import { Repository } from '~/domain/repository';
 
-export default function Repo(props) {
+type RepoProps = Repository & {
+  repoManageEditHandler: () => void;
+  wizardEnv: string;
+};
+
+export default function Repo(props: RepoProps) {
   //Load displayDetails from LocalStorage
-  const displayDetailsFromLS = () => {
+  const displayDetailsFromLS = (): boolean => {
+    const key = `displayDetailsRepo${props.id}`;
+
     try {
-      if (localStorage.getItem('displayDetailsRepo' + props.id) === null) {
-        localStorage.setItem('displayDetailsRepo' + props.id, JSON.stringify(true));
-        return true;
-      } else {
-        return JSON.parse(localStorage.getItem('displayDetailsRepo' + props.id));
+      const storedValue = localStorage.getItem(key);
+
+      if (storedValue === null) {
+        const defaultValue = true;
+        localStorage.setItem(key, JSON.stringify(defaultValue));
+        return defaultValue;
       }
+
+      const parsedValue = JSON.parse(storedValue);
+      if (typeof parsedValue === 'boolean') {
+        return parsedValue;
+      }
+
+      localStorage.removeItem(key);
+      return true;
     } catch (error) {
-      console.log(
-        'LocalStorage error, key',
-        'displayDetailsRepo' + props.id,
-        'will be removed. Try again.',
-        'Error message on this key : ',
-        error
-      );
-      localStorage.removeItem('displayDetailsRepo' + props.id);
+      localStorage.removeItem(key);
+      return true;
     }
   };
 
@@ -39,7 +50,7 @@ export default function Repo(props) {
   const [displayDetails, setDisplayDetails] = useState(displayDetailsFromLS);
 
   //BUTTON : Display or not repo details for ONE repo
-  const displayDetailsForOneHandler = (boolean) => {
+  const displayDetailsForOneHandler = (boolean: boolean) => {
     //Update localStorage
     localStorage.setItem('displayDetailsRepo' + props.id, JSON.stringify(boolean));
     setDisplayDetails(boolean);

Containers/RepoList/RepoList.tsx

@@ -88,7 +88,7 @@ export default function RepoList() {
   };
 
   //BUTTON : Display RepoManage component box for EDIT
-  const repoManageEditHandler = (id) => {
+  const repoManageEditHandler = (id: number) => {
     router.replace('/manage-repo/edit/' + id);
   };
 

domain/repository.ts

@@ -0,0 +1,16 @@
+export type Repository = {
+  id: number;
+  alias: string;
+  repositoryName: string;
+  status: boolean;
+  lastSave: number;
+  alert: number;
+  storageSize: number;
+  storageUsed: number;
+  sshPublicKey: string;
+  comment: string;
+  displayDetails: boolean;
+  unixUser: string;
+  lanCommand: boolean;
+  appendOnlyMode: boolean;
+};

helpers/functions/index.ts

@@ -0,0 +1,7 @@
+export * from './auth';
+export * from './lanCommandOption';
+export * from './isSshPubKeyDuplicate';
+export * from './nodemailerSMTP';
+export * from './repoHistory';
+export * from './timestampConverter';
+export * from './tokenController';

helpers/functions/timestampConverter.ts

@@ -1,5 +1,5 @@
 // This function is used to parse the date and time into a human readable format from the timestamp.
-export default function timestampConverter(UNIX_timestamp) {
+export function timestampConverter(UNIX_timestamp) {
   const a = new Date(UNIX_timestamp * 1000);
   const year = a.getFullYear();
   const month = a.getMonth() + 1;

tsconfig.json

@@ -1,5 +1,9 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"]
+    },
     "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": false,