From a1256cd1573a04f42e65f769fb7eef5ce4318ed8 Mon Sep 17 00:00:00 2001
From: unegbu Clinton <unegbuclinton5@gmail.com>
Date: Thu, 20 Jun 2024 17:59:09 +0100
Subject: [PATCH 1/4] abstract localstorage useage

---
 src/app/components/Indicator/Indicator.tsx | 44 +++++++++++++++-------
 src/app/utils/useVersion.tsx               | 24 ++++++++++++
 2 files changed, 55 insertions(+), 13 deletions(-)
 create mode 100644 src/app/utils/useVersion.tsx

diff --git a/src/app/components/Indicator/Indicator.tsx b/src/app/components/Indicator/Indicator.tsx
index d2e172b..1d33e68 100644
--- a/src/app/components/Indicator/Indicator.tsx
+++ b/src/app/components/Indicator/Indicator.tsx
@@ -1,31 +1,49 @@
-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 function Indicator({ isConnected }: IndicatorProps): React.JSX.Element {
-  const osVersion = localStorage.getItem("version");
+  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>
     </>
-  );
+  )
 }
diff --git a/src/app/utils/useVersion.tsx b/src/app/utils/useVersion.tsx
new file mode 100644
index 0000000..5273d91
--- /dev/null
+++ b/src/app/utils/useVersion.tsx
@@ -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) {
+      console.error('Error accessing localStorage:', error)
+    }
+  }, [key])
+
+  return version
+}
+
+export default useVersion

From 682137e59fbf0c09406535e3154e421a3172bb81 Mon Sep 17 00:00:00 2001
From: unegbu Clinton <unegbuclinton5@gmail.com>
Date: Mon, 8 Jul 2024 11:10:15 +0100
Subject: [PATCH 2/4] resolved merge conflict

---
 src/app/utils/useVersion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/utils/useVersion.tsx b/src/app/utils/useVersion.tsx
index 5273d91..097690e 100644
--- a/src/app/utils/useVersion.tsx
+++ b/src/app/utils/useVersion.tsx
@@ -14,7 +14,7 @@ const useVersion = (key: string): string => {
         setVersion(storedVersion)
       }
     } catch (error) {
-      console.error('Error accessing localStorage:', error)
+      throw error
     }
   }, [key])
 

From bf39c3435b05b367696e1d11ef4bf5bcc97967e5 Mon Sep 17 00:00:00 2001
From: unegbu Clinton <unegbuclinton5@gmail.com>
Date: Mon, 8 Jul 2024 11:11:52 +0100
Subject: [PATCH 3/4] resolved merge conflict

---
 src/app/utils/useVersion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/utils/useVersion.tsx b/src/app/utils/useVersion.tsx
index 097690e..fc93fb3 100644
--- a/src/app/utils/useVersion.tsx
+++ b/src/app/utils/useVersion.tsx
@@ -14,7 +14,7 @@ const useVersion = (key: string): string => {
         setVersion(storedVersion)
       }
     } catch (error) {
-      throw error
+      throw new Error('Error assessing the local storage')
     }
   }, [key])
 

From 8b914d050764b8ec98d1e9f073a7388c4f9a6a6d Mon Sep 17 00:00:00 2001
From: Clinton <unegbuclinton5@gmail.com>
Date: Tue, 30 Jul 2024 11:02:31 +0100
Subject: [PATCH 4/4] remame file

---
 src/app/utils/{useVersion.tsx => useVersion.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/app/utils/{useVersion.tsx => useVersion.ts} (100%)

diff --git a/src/app/utils/useVersion.tsx b/src/app/utils/useVersion.ts
similarity index 100%
rename from src/app/utils/useVersion.tsx
rename to src/app/utils/useVersion.ts