feat: use localStorage to remember data

gjgd · Sep 5, 2020 · 275d7ad · 275d7ad
1 parent d31e3f0
commit 275d7ad
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 23 deletions.
diff --git a/packages/app/src/components/CheckFileTab.tsx b/packages/app/src/components/CheckFileTab.tsx
@@ -22,11 +22,8 @@ const useStyles = makeStyles((theme) => ({
 
 const CheckFileTab: React.FunctionComponent<{}> = () => {
   const [url, setUrl] = React.useState(() => {
-    const urlQueryParameter = getData('url');
-    if (urlQueryParameter) {
-      return decodeURIComponent(urlQueryParameter);
-    }
-    return 'https://raw.githubusercontent.com/transmute-industries/universal-wallet/master/docs/index.html';
+    const urlData = getData('url');
+    return urlData;
   });
 
   const [docs, setDocs] = React.useState<Array<any>>([]);

diff --git a/packages/app/src/components/CheckJsonTab.tsx b/packages/app/src/components/CheckJsonTab.tsx
@@ -4,7 +4,6 @@ import { CheckResult as JsonLdCheckResult } from 'jsonld-checker';
 import JsonEditor from './JsonEditor';
 import JsonLdPlaygroundButton from './JsonLdPlaygroundButton';
 import CheckJsonButton from './CheckJsonButton';
-import defaultValueJson from '../data/defaultValue.json';
 import CheckResult from './CheckResult';
 import ShareButton from './ShareButton';
 import { getData, updateData } from '../utils';
@@ -26,11 +25,8 @@ const useStyles = makeStyles((theme) => ({
 const CheckJsonTab: React.FunctionComponent<{}> = () => {
   const classes = useStyles();
   const [jsonValue, setJsonValue] = React.useState(() => {
-    const jsonQueryParameter = getData('json');
-    if (jsonQueryParameter) {
-      return decodeURIComponent(jsonQueryParameter);
-    }
-    return JSON.stringify(defaultValueJson, null, 2);
+    const jsonData = getData('json');
+    return jsonData;
   });
 
   const [result, setResult] = React.useState<JsonLdCheckResult>();

diff --git a/packages/app/src/components/CheckRepoTab.tsx b/packages/app/src/components/CheckRepoTab.tsx
@@ -22,11 +22,8 @@ const CheckRepoTab: React.FunctionComponent<{}> = () => {
   const classes = useStyles();
 
   const [repo, setRepo] = React.useState(() => {
-    const repoQueryParameter = getData('repo');
-    if (repoQueryParameter) {
-      return decodeURIComponent(repoQueryParameter);
-    }
-    return 'https://github.com/transmute-industries/universal-wallet';
+    const repoData = getData('repo');
+    return repoData;
   });
   const [files, setFiles] = React.useState<
     Array<{ path: string; url: string }>

diff --git a/packages/app/src/components/Tabs.tsx b/packages/app/src/components/Tabs.tsx
@@ -47,10 +47,10 @@ const useStyles = makeStyles((theme) => ({
 export default function SimpleTabs() {
   const classes = useStyles();
   const [tab, setTab] = React.useState(() => {
-    const tabQueryParameter = getData('tab');
+    const tabData = getData('tab');
     let defaultTab: number;
-    if (tabQueryParameter) {
-      defaultTab = Number.parseInt(tabQueryParameter, 10);
+    if (tabData) {
+      defaultTab = Number.parseInt(tabData, 10);
       if (defaultTab > 2) {
         defaultTab = 0;
       }

diff --git a/packages/app/src/utils/LocalStorageStore.ts b/packages/app/src/utils/LocalStorageStore.ts
@@ -0,0 +1,13 @@
+import Store from './Store';
+
+export default class LocalStorageStore implements Store {
+  private storage = localStorage;
+
+  public update(key: string, value: string): void {
+    this.storage.setItem(key, value);
+  }
+
+  public get(key: string): string | null {
+    return this.storage.getItem(key);
+  }
+}
diff --git a/packages/app/src/utils/index.ts b/packages/app/src/utils/index.ts
@@ -1,8 +1,9 @@
 import QueryParameterStore from './QueryParameterStore';
-// import LocalStorageStore from './LocalStorageStore';
+import LocalStorageStore from './LocalStorageStore';
+import defaultValueJson from '../data/defaultValue.json';
 
 const queryParameters = new QueryParameterStore();
-// const localStore = new LocalStorageStore();
+const localStore = new LocalStorageStore();
 
 const switchTab = (newTab: number) => {
   queryParameters.reset();
@@ -11,10 +12,35 @@ const switchTab = (newTab: number) => {
 
 const updateData = (key: string, value: string): void => {
   queryParameters.update(key, value);
+  localStore.update(key, value);
 };
 
-const getData = (key: string): string | null => {
-  return queryParameters.get(key);
+const getData = (key: string): string => {
+  // First see if url contains the data
+  const queryParameterData = queryParameters.get(key);
+  if (queryParameterData) {
+    console.debug(`Loading ${key} from query parameters`);
+    return decodeURIComponent(queryParameterData);
+  }
+  // Then see if local store contains the data
+  const localStorageData = localStore.get(key);
+  if (localStorageData) {
+    console.debug(`Loading ${key} from local storage`);
+    return decodeURIComponent(localStorageData);
+  }
+  // Else return a default value
+  switch (key) {
+    case 'url':
+      return 'https://raw.githubusercontent.com/transmute-industries/universal-wallet/master/docs/index.html';
+    case 'repo':
+      return 'https://github.com/transmute-industries/universal-wallet';
+    case 'json':
+      return JSON.stringify(defaultValueJson, null, 2);
+    case 'tab':
+      return '0';
+    default:
+      throw new Error(`Unkown data key: ${key}`);
+  }
 };
 
 const getGithubInfo = (url: string) => {