Refactor -again- change theme.

src/app.f7.html

@@ -1,6 +1,6 @@
 
 <template>
-  <div id="app" class="${theme == 'theme-dark' && $h`theme-dark`}">
+  <div id="app" class="theme-dark">
 
     <!-- Your main view, should have "view-main" class -->
     <div class="view view-main view-init safe-areas" data-url="/"></div>
@@ -9,19 +9,12 @@
 </template>
 <script>
 import themes from './js/stores/theme.js';
-import * as localForage from "localforage";
 
 export default (props, { $f7, $, $update, $onMounted }) => {
 
-  let theme = themes.getters.Name.value;
-
   $onMounted(async () => {
-    const items = await localForage.length();
+    const selector = '#app';
-    if (items > 0){
+    await themes.dispatch('initTheme', { selector });
-      theme = await localForage.getItem('theme');
-      if (theme != 'theme-dark'){ $("#app").removeClass("theme-dark"); }
-      themes.dispatch('changeTheme', theme);
-    }
   });
 
   return $render;

src/js/stores/theme.js

@@ -1,4 +1,6 @@
 import { createStore } from 'framework7';
+import $ from 'dom7';
+import * as localForage from "localforage";
 
 const theme = createStore({
   state: {
@@ -8,6 +10,21 @@ const theme = createStore({
     changeTheme({ state }, name) {
       state.name = name;
     },
+    async checkTheme({ state, dispatch }, { selector }){
+      let theme = await localForage.getItem('theme');
+      if (theme != 'theme-dark'){ $(selector).removeClass('theme-dark'); }
+      dispatch('changeTheme', theme);
+    },
+    async initTheme({state, dispatch}, { selector }){
+      let items = await localForage.length();
+      if (items > 0){
+        await dispatch('checkTheme', { selector });
+      }
+    },
+    async setTheme({ state, dispatch }, name){
+      await localForage.setItem('theme', name);
+      dispatch('changeTheme', name);
+    },
   },
   getters: {
     Name({ state }) {

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

@@ -1,6 +1,6 @@
 <template>
 <!-- Left panel with cover effect-->
-<div class="panel panel-left panel-reveal ${theme == 'theme-dark' && $h`theme-dark`}" @panel:open=${onPanelOpen}>
+<div class="panel panel-left panel-reveal theme-dark" @panel:open=${onPanelOpen}>
   <div class="view">
     <div class="page">
       <div class="navbar">
@@ -126,7 +126,6 @@
 </div>
 </template>
 <script>
-import * as localForage from "localforage";
 import themes from '../../js/stores/theme.js';
 import user from '../../js/stores/user.js';
 
@@ -135,16 +134,14 @@ export default (props, { $f7, $, $onMounted, $update, }) => {
   let isSeller = false;
   let isCustomer = false;
   let isDeliverer = false;
-  let theme = themes.getters.Name.value;
   const userRoles = user.getters.roles.value;
 
   const onPanelOpen = () => {
   };
 
-  $onMounted(() => {
+  $onMounted(async () => {
-    localForage.getItem('theme').then( (value) => {
+    const selector = '.panel-left';
-      if (value != 'theme-dark'){ $(".panel-left").removeClass("theme-dark"); }
+    await themes.dispatch('checkTheme', { selector });
-    });
 
     if (isLogged){
       isCustomer = userRoles.includes(4); //Customer,

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

@@ -1,6 +1,6 @@
 <template>
 <!-- Right panel with reveal effect-->
-<div class="panel panel-right panel-reveal ${theme == 'theme-dark' && $h`theme-dark`}" @panel:open=${onPanelOpen}>
+<div class="panel panel-right panel-reveal theme-dark" @panel:open=${onPanelOpen}>
   <div class="view">
     <div class="page">
       <div class="navbar">
@@ -61,7 +61,6 @@
 </div>
 </template>
 <script>
-import * as localForage from "localforage";
 import themes from '../../js/stores/theme.js';
 import user from '../../js/stores/user.js';
 
@@ -73,11 +72,10 @@ export default (props, { $f7, $, $on, $onMounted, $update, $f7router }) => {
   const onPanelOpen = () => {
   };
 
-  $onMounted(() => {
+  $onMounted(async () => {
     $('#light-theme').prop('checked', (theme != 'theme-dark') ? true : false );
-    localForage.getItem('theme').then( (value) => {
+    const selector = '.panel-right'
-      if (value != 'theme-dark'){ $(".panel-right").removeClass("theme-dark"); }
+    await themes.dispatch('checkTheme', { selector });
-    });
   });
 
   const logout = () => {
@@ -87,17 +85,15 @@ export default (props, { $f7, $, $on, $onMounted, $update, $f7router }) => {
     });
   };
 
-  const setTheme = () => {
+  const setTheme = async () => {
     if ($("#light-theme").prop('checked')){
       $("#app, .panel-right").removeClass("theme-dark");
     }
     else{
       $("#app, .panel-right").addClass("theme-dark");
     }
-    theme = !$("#light-theme").prop('checked') ? 'theme-dark' : '';
+    let name = !$("#light-theme").prop('checked') ? 'theme-dark' : '';
-    localForage.setItem('theme', theme).then( (val) => {
+    await themes.dispatch('setTheme', name);
-      themes.dispatch('changeTheme', theme);
-    });
   };
 
   return $render;