abstract localstorage useage

src/app/components/Indicator/Indicator.tsx

@@ -1,31 +1,48 @@
-import * as React from "react";
-import "./indicator.css";
+import * as React from 'react'
+import './indicator.css'
 
 // @ts-ignore
-import check from "../../icons/check.png";
-import { launchPiecesOS } from "../../utils/launchPiecesOS";
+import check from '../../icons/check.png'
+import { launchPiecesOS } from '../../utils/launchPiecesOS'
+import useVersion from '../../utils/useVersion'
 
 interface IndicatorProps {
-  isConnected: boolean;
+  isConnected: boolean
 }
 
-// this is your indicator badge that we will manipulate through the initial connect call. it will either
-// be green or red depending on the current status.
 
-export const Indicator = React.memo(({ isConnected }: IndicatorProps): React.JSX.Element => {
-  const osVersion = localStorage.getItem("version");
+
+export function Indicator({ isConnected }: IndicatorProps): React.JSX.Element {
+  const osVersion = useVersion('version')
   return (
     <>
-      <div className="center-container">
-        <button className="custom-button">
-          <div id="indicator" className={isConnected ? 'indicator green' : 'indicator red'} onClick={launchPiecesOS}>
-            <span id="indicator_text" className={`indicator-text ${isConnected ? 'connected' : 'disconnected'}`}>
-              {isConnected ? "You're Connected" : "You're Not Connected"} v {osVersion}
+      <div className='center-container'>
+        <button className='custom-button'>
+          <div
+            id='indicator'
+            className={isConnected ? 'indicator green' : 'indicator red'}
+            onClick={launchPiecesOS}
+          >
+            <span
+              id='indicator_text'
+              className={`indicator-text ${
+                isConnected ? 'connected' : 'disconnected'
+              }`}
+            >
+              {isConnected ? "You're Connected" : "You're Not Connected"} v{' '}
+              {osVersion}
             </span>
-            <img id="checkmark" src={check} alt="checkmark" className= {`checkmark ${isConnected ? 'connected' : 'disconnected'}`} />
+            <img
+              id='checkmark'
+              src={check}
+              alt='checkmark'
+              className={`checkmark ${
+                isConnected ? 'connected' : 'disconnected'
+              }`}
+            />
           </div>
         </button>
       </div>
     </>
-  );
-});
+  )
+}

src/app/utils/useVersion.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react'
+
+const useVersion = (key: string): string => {
+  const [version, setVersion] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return
+    }
+
+    try {
+      const storedVersion = localStorage.getItem(key)
+      if (storedVersion !== null) {
+        setVersion(storedVersion)
+      }
+    } catch (error) {
+      throw new Error('Error assessing the local storage')
+    }
+  }, [key])
+
+  return version
+}
+
+export default useVersion