From 8fb9d5ada8aa75b36ce0943cb7b1229fbe670ae3 Mon Sep 17 00:00:00 2001
From: Kenneth Kwan <123370597+kennethkn@users.noreply.github.com>
Date: Thu, 1 Feb 2024 13:58:30 +0800
Subject: [PATCH] Add localStorage for settings

---
 src/App.tsx | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cad7300..3fa314d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,9 +4,18 @@ import OutputCard from './OutputCard'
 function App() {
   const [text, setText] = useState('')
   const [oldText, setOldText] = useState('')
-  const [useSucheng, setUseSucheng] = useState(false)
-  const [showChi, setShowChi] = useState(true)
-  const [showEng, setShowEng] = useState(true)
+  const [useSucheng, setUseSucheng] = useState(() => {
+    const data = localStorage.getItem('useSucheng')
+    return data ? data === 'true' : false
+  })
+  const [showChi, setShowChi] = useState(() => {
+    const data = localStorage.getItem('showChi')
+    return data ? data === 'true' : true
+  })
+  const [showEng, setShowEng] = useState(() => {
+    const data = localStorage.getItem('showEng')
+    return data ? data === 'true' : true
+  })
   const [output, setOutput] = useState<string[][]>([])
   const [resetBtnClicked, setResetBtnClicked] = useState(false)
   const [UndoBtnCountdown, setUndoBtnCountdown] = useState(5)
@@ -149,7 +158,11 @@ function App() {
               type="checkbox"
               id="use-sucheng"
               className="mr-1"
-              onChange={() => setUseSucheng(!useSucheng)}></input>
+              onChange={() => {
+                localStorage.setItem('useSucheng', (!useSucheng).toString())
+                setUseSucheng(!useSucheng)
+              }}
+              defaultChecked={useSucheng}></input>
             Use Sucheng/Quick
           </label>
           <label htmlFor="show-chi" className="flex items-center">
@@ -157,8 +170,11 @@ function App() {
               type="checkbox"
               id="show-chi"
               className="mr-1"
-              onChange={() => setShowChi(!showChi)}
-              defaultChecked></input>
+              onChange={() => {
+                localStorage.setItem('showChi', (!showChi).toString())
+                setShowChi(!showChi)
+              }}
+              defaultChecked={showChi}></input>
             Show Chinese Code
           </label>
           <label htmlFor="show-eng" className="flex items-center">
@@ -166,8 +182,11 @@ function App() {
               type="checkbox"
               id="show-eng"
               className="mr-1"
-              onChange={() => setShowEng(!showEng)}
-              defaultChecked></input>
+              onChange={() => {
+                localStorage.setItem('showEng', (!showEng).toString())
+                setShowEng(!showEng)
+              }}
+              defaultChecked={showEng}></input>
             Show English Code
           </label>
         </div>