feat(config): add button to clear local storage

5 files changed, 44 insertions, 13 deletions

diff --git a/src/components/Config.js b/src/components/Config.js
index 6f4c336..01bc4bd 100644
--- a/src/components/Config.js
+++ b/src/components/Config.js
@@ -3,11 +3,13 @@ import PropTypes from 'prop-types';
 import { useStoreState, useActions } from 'm/store';
 
 import { getConfigs, fetchConfigs, updateConfigs } from 'd/configs';
+import { clearStorage } from 'd/app';
 
 import ContentHeader from 'c/ContentHeader';
 import Switch from 'c/Switch';
 import ToggleSwitch from 'c/ToggleSwitch';
 import Input from 'c/Input';
+import Button from 'c/Button';
 import s0 from 'c/Config.module.css';
 
 const optionsRule = [
@@ -190,6 +192,15 @@ function Config({ configs }) {
           />
         </div>
       </div>
+
+      <div className={s0.sep}>
+        <div />
+      </div>
+
+      <div className={s0.section}>
+        <div className={s0.label}>Actions</div>
+        <Button label="Log out" onClick={clearStorage} />
+      </div>
     </div>
   );
 }
diff --git a/src/components/Config.module.css b/src/components/Config.module.css
index 1d747b4..2f9fad2 100644
--- a/src/components/Config.module.css
+++ b/src/components/Config.module.css
@@ -6,6 +6,17 @@
   }
 }
 
+.section {
+  padding: 10px 40px 40px;
+}
+
+.sep {
+  padding: 0 40px;
+  > div {
+    border-top: 1px dashed #373737;
+  }
+}
+
 .label {
   padding: 16px 0;
 }
diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css
index 0df0030..1b183bc 100644
--- a/src/components/Modal.module.css
+++ b/src/components/Modal.module.css
@@ -5,6 +5,7 @@
   left: 0;
   bottom: 0;
   background: #444;
+  z-index: 1024;
 }
 
 .content {
diff --git a/src/ducks/app.js b/src/ducks/app.js
index db32e17..399a66e 100644
--- a/src/ducks/app.js
+++ b/src/ducks/app.js
@@ -1,16 +1,13 @@
-import { loadState, saveState } from 'm/storage';
+import { loadState, saveState, clearState } from 'm/storage';
 import { fetchConfigs } from 'd/configs';
 import { closeModal } from 'd/modals';
 
 const UpdateClashAPIConfig = 'app/UpdateClashAPIConfig';
 const SwitchTheme = 'app/SwitchTheme';
 
-const StorageKey = 'yacd.haishan.me';
-
 export const getClashAPIConfig = s => s.app.clashAPIConfig;
 export const getTheme = s => s.app.theme;
 
-// TODO to support secret
 export function updateClashAPIConfig({ hostname: iHostname, port, secret }) {
   return async (dispatch, getState) => {
     const hostname = iHostname.trim().replace(/^http(s):\/\//, '');
@@ -20,7 +17,7 @@ export function updateClashAPIConfig({ hostname: iHostname, port, secret }) {
     });
 
     // side effect
-    saveState(StorageKey, getState().app);
+    saveState(getState().app);
 
     dispatch(closeModal('apiConfig'));
     dispatch(fetchConfigs());
@@ -46,10 +43,19 @@ export function switchTheme() {
     setTheme(theme);
     dispatch({ type: SwitchTheme, payload: { theme } });
     // side effect
-    saveState(StorageKey, getState().app);
+    saveState(getState().app);
   };
 }
 
+export function clearStorage() {
+  clearState();
+  try {
+    location.reload();
+  } catch (err) {
+    // ignore
+  }
+}
+
 // type Theme = 'light' | 'dark';
 const defaultState = {
   clashAPIConfig: {
@@ -73,7 +79,7 @@ function parseConfigQueryString() {
 }
 
 function getInitialState() {
-  let s = loadState(StorageKey);
+  let s = loadState();
   if (!s) s = defaultState;
   // TODO flat clashAPIConfig?
 
diff --git a/src/misc/storage.js b/src/misc/storage.js
index ce22038..7424ae1 100644
--- a/src/misc/storage.js
+++ b/src/misc/storage.js
@@ -1,8 +1,10 @@
 // manage localStorage
 
-function loadState(key) {
+const StorageKey = 'yacd.haishan.me';
+
+function loadState() {
   try {
-    const serialized = localStorage.getItem(key);
+    const serialized = localStorage.getItem(StorageKey);
     if (!serialized) return undefined;
     return JSON.parse(serialized);
   } catch (err) {
@@ -10,18 +12,18 @@ function loadState(key) {
   }
 }
 
-function saveState(key, state) {
+function saveState(state) {
   try {
     const serialized = JSON.stringify(state);
-    localStorage.setItem(key, serialized);
+    localStorage.setItem(StorageKey, serialized);
   } catch (err) {
     // ignore
   }
 }
 
-function clearState(key) {
+function clearState() {
   try {
-    localStorage.removeItem(key);
+    localStorage.removeItem(StorageKey);
   } catch (err) {
     // ignore
   }