From 93982a061ce2e68b0df9bba3577e338909fcac4d Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 28 Apr 2024 01:18:40 +0500
Subject: [PATCH] frontend: add saving of settings state. move logout button in
 navigation. add close button to settings dialog.

---
 frontend/app/App.jsx                          |  7 ++-
 .../NavigationRail/NavigationRail.jsx         | 20 ++++----
 frontend/app/components/Settings/Settings.jsx | 49 ++++++++++++++-----
 frontend/app/store/settings-store.js          | 25 ++++++++++
 4 files changed, 78 insertions(+), 23 deletions(-)
 create mode 100644 frontend/app/store/settings-store.js

diff --git a/frontend/app/App.jsx b/frontend/app/App.jsx
index dab21a5..eb5ec4a 100644
--- a/frontend/app/App.jsx
+++ b/frontend/app/App.jsx
@@ -71,7 +71,12 @@ export const App = (props) => {
             setColorPicker={setColorPicker}
           />
         )}
-        {settingsPopup && <Settings />}
+        {settingsPopup && (
+          <Settings
+            settingsPopup={settingsPopup}
+            setSettingsPopup={setSettingsPopup}
+          />
+        )}
       </div>
       <main className="responsive">{props.children}</main>
     </body>
diff --git a/frontend/app/components/NavigationRail/NavigationRail.jsx b/frontend/app/components/NavigationRail/NavigationRail.jsx
index 877bef0..97ae4a5 100644
--- a/frontend/app/components/NavigationRail/NavigationRail.jsx
+++ b/frontend/app/components/NavigationRail/NavigationRail.jsx
@@ -77,6 +77,15 @@ export const NavigationRail = (props) => {
         );
       })}
 
+      {userStore.isAuth && (
+        <button
+          className="circle transparent"
+          onClick={() => userStore.logout()}
+        >
+          <i>logout</i>
+        </button>
+      )}
+
       <span className="max"></span>
       <button
         className="circle transparent"
@@ -91,17 +100,6 @@ export const NavigationRail = (props) => {
       >
         <i>palette</i>
       </button>
-
-      {userStore.isAuth ? (
-        <button
-          className="circle transparent"
-          onClick={() => userStore.logout()}
-        >
-          <i>logout</i>
-        </button>
-      ) : (
-        ""
-      )}
     </nav>
   );
 };
diff --git a/frontend/app/components/Settings/Settings.jsx b/frontend/app/components/Settings/Settings.jsx
index 27861e3..5c19989 100644
--- a/frontend/app/components/Settings/Settings.jsx
+++ b/frontend/app/components/Settings/Settings.jsx
@@ -1,5 +1,8 @@
 "use client";
 
+import { useUserStore } from "@/app/store/user-store";
+import { useSettingsStore } from "@/app/store/settings-store";
+
 function deleteAllSettings() {
   localStorage.removeItem("mode");
   localStorage.removeItem("theme");
@@ -9,7 +12,10 @@ function deleteSearchHistory() {
   localStorage.removeItem("searches");
 }
 
-export default function Settings() {
+export default function Settings(props) {
+  const userStore = useUserStore();
+  const settingsStore = useSettingsStore();
+
   return (
     <>
       <dialog
@@ -17,16 +23,28 @@ export default function Settings() {
         style={{ blockSize: "unset" }}
       >
         <h5>Настройки</h5>
-        <nav className="wrap">
-          <div className="max">
-            <h6 className="small">сохранение в истории просмотров</h6>
-          </div>
-          <label className="switch">
-            <input type="checkbox" />
-            <span></span>
-          </label>
-        </nav>
-        <li className="small-divider"></li>
+        {userStore.isAuth && (
+          <>
+            <nav className="wrap">
+              <div className="max">
+                <h6 className="small">сохранение в истории просмотров</h6>
+              </div>
+              <label className="switch">
+                <input
+                  type="checkbox"
+                  checked={settingsStore.saveToHistory}
+                  onChange={() =>
+                    settingsStore.setSettings({
+                      saveToHistory: !settingsStore.saveToHistory,
+                    })
+                  }
+                />
+                <span></span>
+              </label>
+            </nav>
+            <li className="small-divider"></li>
+          </>
+        )}
         <nav className="wrap small-space">
           <button className="red" onClick={() => deleteAllSettings()}>
             <i>delete_forever</i>
@@ -37,6 +55,15 @@ export default function Settings() {
             <span>Удалить историю поиска</span>
           </button>
         </nav>
+        <div className="medium-divider"></div>
+        <nav>
+          <button
+            className={`circle small transparent `}
+            onClick={() => props.setSettingsPopup(!props.settingsPopup)}
+          >
+            <i>close</i>
+          </button>
+        </nav>
       </dialog>
     </>
   );
diff --git a/frontend/app/store/settings-store.js b/frontend/app/store/settings-store.js
new file mode 100644
index 0000000..141bb9c
--- /dev/null
+++ b/frontend/app/store/settings-store.js
@@ -0,0 +1,25 @@
+"use client";
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+
+function saveSettings(dict) {
+  localStorage.setItem("settings", JSON.stringify(dict));
+}
+
+function loadSettings() {
+  return JSON.parse(localStorage.getItem("settings"));
+}
+
+export const useSettingsStore = create(
+  persist(
+    (set, get) => ({
+      saveToHistory: true,
+      setSettings: (dict) => {
+        set(dict);
+      },
+    }),
+    {
+      name: "settings",
+    },
+  ),
+);