✨#6 - Localstorage

Using localstorage to store last session information (todos, nb of todos finished, nb sessions, song, theme color, etc.).

src/components/Infos.vue

@@ -18,7 +18,7 @@
       </div>
       <div id="btn-newword">
         <button @click="getNewWordEveryday" id="fetch" class="btn">
-          Generate a word
+          📝 Generate a word
         </button>
       </div>
       <hr>
@@ -26,16 +26,22 @@
     <div id="stats">
       <div class="center" v-if="displayWord">
         <button @click="displayWord = false" class="btn">
-          Session stats
+          📊 Session stats
         </button>
       </div>
       <div v-else>
         Total todo: {{ this.nbItemsFinished }}
         <br>
-        Total sessions: {{ this.$store.getters.nbSessions }}
+        Total sessions: {{ this.nbSessions }}
+        <br>
+        <span id="hint">(from last session)</span>
         <div class="center">
+          <button @click="resetStats" class="btn" id="reset">
+            🔁 Reset
+          </button>
+          <br>
           <button class="btn" id="see-words" @click="displayWord = true">
-            English word
+            🇬🇧 English word
           </button>
         </div>
       </div>
@@ -134,6 +140,9 @@ export default {
         console.log(error);
       });
     },
+    resetStats() {
+      this.$store.commit('resetStats');
+    },
   },
   mounted() {
     this.generateDateOfTheDay();
@@ -141,15 +150,15 @@ export default {
     this.getNewWordEveryday();
   },
   computed: {
-    itemsFinished() {
-      return this.$store.getters.itemsFinished;
-    },
     nbItemsFinished() {
-      return this.$store.getters.itemsFinished.length;
+      return parseInt(this.$store.getters.globalState.nbItemsFinished) + this.$store.getters.itemsFinished.length
     },
     colorSelected() {
       return this.$store.getters.colorSelected;
     },
+    nbSessions() {
+      return parseInt(this.$store.getters.globalState.nbSessions) + this.$store.getters.nbSessions
+    }
   },
   watch: {
     colorSelected: function(color) {
@@ -216,10 +225,19 @@ export default {
   text-align: center;
 }
 
-#see-words {
+#hint {
+  font-size: 18px;
+  font-weight: lighter;
+}
+
+#reset {
   margin-top: 16px;
 }
 
+#see-words {
+  margin-top: 8px;
+}
+
 /* ********** */
 /* RESPONSIVE */
 /* ********** */

src/components/Pomodoro.vue

@@ -136,6 +136,7 @@ export default {
           alert("SESSION TERMINÉE 👏");
           this.nbSessionsFinished++;
           this.$store.commit("updateNbSessionsFinished");
+          localStorage.setItem("nbSessions", this.$store.getters.nbSessions);
           if (this.nbSessionsFinished === 4) {
             this.setupPauseTimer(LONG_PAUSE);
             this.nbSessionsFinished = 0;

src/components/Settings.vue

@@ -2,7 +2,7 @@
 <div id="settings-container">
   <div id="color-palette" class="bubble-container">
     <div v-for="color in colors" :key="color.id">
-      <div class="bubble-item" :style="{backgroundColor: color, borderColor: activeColor}" @click="setBackgroundColor($event, color)"></div>
+      <div class="bubble-item" :id="color" :style="{backgroundColor: color, borderColor: activeColor}" @click="setBackgroundColor($event, color)"></div>
     </div>
   </div>
 </div>
@@ -30,6 +30,7 @@ export default {
       event.target.style.borderColor = this.activeColor;
       document.body.style.backgroundColor = color;
       this.$store.commit("setColorSelected", color);
+      localStorage.setItem("themeColor", this.$store.getters.colorSelected)
     },
     removeActiveColorFromPalette() {
       const palette = document.querySelectorAll(".bubble-item");
@@ -38,9 +39,9 @@ export default {
       }
     },
     setFirstColor() {
-      // get first div of color-palette
-      const palette = document.querySelectorAll(".bubble-item");
-      palette[0].style.borderColor = this.activeColor;
+      const color = this.$store.getters.globalState.themeColor;
+      document.getElementById(color).style.borderColor = this.activeColor;
+      document.body.style.backgroundColor = color;
     }
   },
   mounted() {

src/components/ToDoList.vue

@@ -32,7 +32,7 @@ export default {
   data() {
     return {
       item: "",
-      items: []
+      items: JSON.parse(this.$store.getters.globalState.currentItems)
     }
   },
   methods: {
@@ -47,6 +47,7 @@ export default {
       }
       this.sortArrayPinnedElements()
       this.clearItem()
+      this.saveCurrentItems()
     },
     removeItem(item) {
       this.items = this.items.filter(e =>
@@ -54,6 +55,8 @@ export default {
       )
       this.$store.commit("addItemFinished", item);
       this.clearItem()
+      this.saveCurrentItems()
+      localStorage.setItem("nbItemsFinished", this.$store.getters.itemsFinished.length);
     },
     clearItem() {
       this.item = ""
@@ -69,6 +72,7 @@ export default {
           list.scrollTo({top: 0, behavior: 'smooth'});
         }
         this.sortArrayPinnedElements()
+        this.saveCurrentItems()
       }
     },
     sortArrayPinnedElements() {
@@ -81,6 +85,9 @@ export default {
           return 0
         }
       })
+    },
+    saveCurrentItems(){
+      localStorage.setItem("currentItems", JSON.stringify(this.items));
     }
   }
 }

src/components/YtbPlayer.vue

@@ -30,7 +30,7 @@ export default {
       livesId: [],
       easterEggs: [],
       easterEggsSongsId: -1,
-      songId: 0,
+      songId: this.$store.getters.globalState.currentSongIndex,
       muted: true
     }
   },
@@ -42,11 +42,13 @@ export default {
     },
     nextPlaylist() {
       this.songId++ === this.livesId.length - 1 ? this.songId = 0 : this.songId;
+      localStorage.setItem("currentSongIndex", this.songId);
       let id = this.livesId[this.songId];
       this.loadVideoFromApi(id)
     },
     prevPlaylist() {
       --this.songId === -1 ? this.songId = this.livesId.length - 1 : this.songId;
+      localStorage.setItem("currentSongIndex", this.songId);
       let id = this.livesId[this.songId];
       this.loadVideoFromApi(id)
     },
@@ -73,13 +75,17 @@ export default {
       this.muted = !this.muted;
     },
     loadVideoFromApi(id) {
+      this.saveLocalStorage(id);
       player.loadVideoById(id);
     },
+    saveLocalStorage(id) {
+      localStorage.setItem("lastSong", id);
+    },
     loadApi() {
       window.onYouTubeIframeAPIReady = () => {
         // eslint-disable-next-line no-unused-vars
         player = new window.YT.Player("player", {
-          videoId: "XDh0JcxrbPM",
+          videoId: this.$store.getters.globalState.lastSong,
           playerVars: {
             'autoplay': 1,
             'mute': 1,

src/store/index.js

@@ -8,7 +8,15 @@ export default new Vuex.Store({
     state: {
         itemsFinished: [],
         colorSelected: "",
-        nbSessions: 0
+        nbSessions: 0,
+        globalState: {
+            currentItems: localStorage.getItem("currentItems") ? localStorage.getItem("currentItems") : JSON.stringify([]),
+            nbItemsFinished: localStorage.getItem("nbItemsFinished") ? localStorage.getItem("nbItemsFinished") : 0,
+            nbSessions: localStorage.getItem("nbSessions") ? localStorage.getItem("nbSessions") : 0,
+            lastSong: localStorage.getItem("lastSong") ? localStorage.getItem("lastSong") : "XDh0JcxrbPM",
+            currentSongIndex: localStorage.getItem("currentSongIndex") ? localStorage.getItem("currentSongIndex") : 0,
+            themeColor: localStorage.getItem("themeColor") ? localStorage.getItem("themeColor") : "#fdde95",
+        }
     },
     getters: {
         itemsFinished(state) {
@@ -19,6 +27,9 @@ export default new Vuex.Store({
         },
         nbSessions(state) {
             return state.nbSessions;
+        },
+        globalState(state) {
+            return state.globalState;
         }
     },
     mutations: {
@@ -30,6 +41,10 @@ export default new Vuex.Store({
         },
         updateNbSessionsFinished(state) {
             state.nbSessions++;
+        },
+        resetStats(state) {
+            state.globalState.nbItemsFinished = 0;
+            state.globalState.nbSessions = 0;
         }
     },
     actions: {