Updates:

-Add localForage for persitent data
-Rename in store index.js to theme.js and its variables
-Start to use recovery data from persistent storage to state storage

package-lock.json

@@ -5191,6 +5191,11 @@
       "dev": true,
       "optional": true
     },
+    "immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -5726,6 +5731,14 @@
         "klona": "^2.0.4"
       }
     },
+    "lie": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
+      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
+      "requires": {
+        "immediate": "~3.0.5"
+      }
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -5760,6 +5773,14 @@
         }
       }
     },
+    "localforage": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
+      "integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
+      "requires": {
+        "lie": "3.1.1"
+      }
+    },
     "locate-path": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",

package.json

@@ -31,6 +31,7 @@
     "dom7": "^3.0.0",
     "framework7": "^6.0.16",
     "framework7-icons": "^4.0.2",
+    "localforage": "^1.9.0",
     "skeleton-elements": "^3.3.0",
     "swiper": "^6.5.7"
   },

src/app.f7.html

@@ -8,11 +8,11 @@
   </div>
 </template>
 <script>
-import store from './js/stores/index.js';
+import themes from './js/stores/theme.js';
 
 export default (props, { $f7, $update }) => {
 
-  let theme = store.getters.themeName.value;
+  let theme = themes.getters.Name.value;
 
   return $render;
 }

src/js/app.js

@@ -69,7 +69,7 @@ var app = new Framework7({
       http.interceptors.response.use(undefined, function (err) {
         return new Promise(function (resolve, reject) {
           if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
-            this.$store.dispatch(logout);
+            //user.dispatch('logout'); //To fix
           }
           throw err;
         });

src/js/stores/index.js

@@ -1,21 +0,0 @@
-import { createStore } from 'framework7';
-
-const store = createStore({
-  state: {
-    theme: {
-      name: 'theme-dark',
-    }
-  },
-  actions: {
-    changeTheme({ state }, name) {
-      state.theme.name = name;
-    },
-  },
-  getters: {
-    themeName({ state }) {
-      return state.theme.name;
-    }
-  },
-})
-
-export default store;

src/js/stores/theme.js

@@ -0,0 +1,19 @@
+import { createStore } from 'framework7';
+
+const theme = createStore({
+  state: {
+    name: 'theme-dark',
+  },
+  actions: {
+    changeTheme({ state }, name) {
+      state.name = name;
+    },
+  },
+  getters: {
+    Name({ state }) {
+      return state.name;
+    }
+  },
+})
+
+export default theme;

src/js/stores/user.js

@@ -15,7 +15,7 @@ const user = createStore({
         http.post('/user/login', data).then(response => {
           const token = response.data.token;
           delete response.data.token;
-          const user = response.data;
+          const user = response.data.user;
           const roles = [1, 4, 14]; //Owner, Customer, Seller, Deliverer//response.data.roles;
           localStorage.setItem('token', token);
           http.defaults.headers.common['Authorization'] = token;

src/pages/home/panel-left.f7.html

@@ -127,7 +127,7 @@
 </template>
 <script>
 import $ from 'dom7';
-import store from '../../js/stores/index.js';
+import themes from '../../js/stores/theme.js';
 import user from '../../js/stores/user.js';
 
 export default (props, { $f7, $on, $update, }) => {
@@ -135,7 +135,7 @@ export default (props, { $f7, $on, $update, }) => {
   let isSeller = false;
   let isCustomer = false;
   let isDeliverer = false;
-  let theme = store.getters.themeName.value;
+  let theme = themes.getters.Name.value;
   const userRoles = user.getters.roles.value;
 
   const onPanelOpen = () => {

src/pages/home/panel-right.f7.html

@@ -62,16 +62,21 @@
 </template>
 <script>
 import $ from 'dom7';
-import store from '../../js/stores/index.js';
+import * as localForage from "localforage";
+import themes from '../../js/stores/theme.js';
 import user from '../../js/stores/user.js';
 
 export default (props, { $f7, $on, $update, $f7router }) => {
-  let theme = store.getters.themeName.value;
+  let theme = themes.getters.Name.value;
   let isLogged = user.getters.isLogged.value;
   let displayName = user.getters.displayName.value['contactName'] || '';
 
   const onPanelOpen = () => {
-    $('#light-theme').prop('checked', (theme != 'theme-dark') ? true : false );
+    localForage.getItem('theme').then((value)=>{
+      //if (value != 'theme-dark'){$('#light-theme').click()}
+      //$('#light-theme').prop('checked', (value != 'theme-dark') ? true : false );
+      //$update();
+    });
   };
 
   const logout = () => {
@@ -89,7 +94,11 @@ export default (props, { $f7, $on, $update, $f7router }) => {
       $("#app, .panel-right").addClass("theme-dark");
     }
     theme = !$("#light-theme").prop('checked') ? 'theme-dark' : '';
-    store.dispatch('changeTheme', theme);
+    localForage.setItem('theme', theme).then((val)=>{
+      // console.log("... ", theme);
+      // console.log(",,, ",val);
+      themes.dispatch('changeTheme', theme);
+    });
   };
 
   return $render;