From be9acc2f29c135be34f166dbc36a2846d99dc766 Mon Sep 17 00:00:00 2001
From: Travis Shivers <ttshivers@gmail.com>
Date: Sun, 24 May 2020 19:31:33 -0500
Subject: [PATCH] Cleaned up recentRooms logic and storage

---
 src/components/application/joinroom.vue      | 44 ++++++------------
 src/store.js                                 |  2 -
 src/store/modules/settings/settings.store.js | 28 +++++++++++
 src/store/modules/synclounge.js              | 49 +++++++++++---------
 4 files changed, 67 insertions(+), 56 deletions(-)

diff --git a/src/components/application/joinroom.vue b/src/components/application/joinroom.vue
index c185decf..db537d66 100644
--- a/src/components/application/joinroom.vue
+++ b/src/components/application/joinroom.vue
@@ -30,13 +30,13 @@
           <v-flex
             xs12
             class="nicelist pa-4"
-            v-if="!context.getters.getConnected && recents && Object.keys(recents).length > 0"
+            v-if="!context.getters.getConnected && this.recentRooms.length > 0"
             style="color:white !important;"
           >
             <v-subheader>Recent Rooms</v-subheader>
             <v-list class="pa-0">
-              <template v-for="(item, index) in recentsSorted">
-                <v-list-tile :key="index" v-if="index < 5" avatar @click="recentConnect(item)">
+              <template v-for="(item, index) in this.recentRooms.slice(0, 3)">
+                <v-list-tile :key="index" avatar @click="recentConnect(item)">
                   <v-list-tile-avatar>
                     <img :src="logos.light.small" style="width: 32px; height: auto" />
                   </v-list-tile-avatar>
@@ -53,7 +53,7 @@
                         color="white"
                         dark
                         slot="activator"
-                        @click.stop="removeHistoryItem(item)"
+                        @click.stop="REMOVE_RECENT_ROOM(item)"
                       >close</v-icon>Remove
                     </v-tooltip>
                   </v-list-tile-action>
@@ -211,7 +211,7 @@
 import Vue from 'vue';
 import axios from 'axios';
 
-import { mapGetters, mapMutations } from 'vuex';
+import { mapGetters, mapMutations, mapActions } from 'vuex';
 
 export default {
   props: ['object'],
@@ -251,21 +251,14 @@ export default {
     if (this.slRoom && this.slConnected && this.slServer) {
       this.$router.push('/browse');
     }
-    this.getRecents();
   },
   methods: {
     ...mapMutations('settings', [
       'SET_CUSTOM_SERVER_USER_INPUTTED_URL'
     ]),
-    getRecents() {
-      this.recents = JSON.parse(window.localStorage.getItem('recentrooms'));
-    },
-    removeHistoryItem(item) {
-      const recents = JSON.parse(window.localStorage.getItem('recentrooms'));
-      delete recents[`${item.server}/${item.room}`];
-      window.localStorage.setItem('recentrooms', JSON.stringify(recents));
-      return this.getRecents();
-    },
+    ...mapActions('settings', [
+      'REMOVE_RECENT_ROOM'
+    ]),
     connectionQualityClass(value) {
       if (value < 50) {
         return ['green--text', 'text--lighten-1'];
@@ -419,7 +412,8 @@ export default {
   computed: {
     ...mapGetters({
       'syncloungeServers': 'GET_SYNCLOUNGE_SERVERS',
-      'GET_CUSTOM_SERVER_USER_INPUTTED_URL': 'settings/GET_CUSTOM_SERVER_USER_INPUTTED_URL'
+      'GET_CUSTOM_SERVER_USER_INPUTTED_URL': 'settings/GET_CUSTOM_SERVER_USER_INPUTTED_URL',
+      'recentRooms': 'settings/GET_RECENT_ROOMS'
     }),
     plex() {
       return this.$store.state.plex;
@@ -429,22 +423,10 @@ export default {
     },
     context() {
       return this.$store;
-    },
-    recentsSorted() {
-      if (!this.recents) {
-        return [];
-      }
-      let arr = [];
-      for (const i in this.recents) {
-        const item = this.recents[i];
-        arr.push(item);
-      }
-      arr = arr.sort((a, b) => b.time - a.time);
-      if (arr.length > 3) {
-        return arr.slice(0, 3);
-      }
-      return arr;
     }
+  },
+  mounted() {
+    console.log(this.recentRooms)
   }
 };
 </script>
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index 3765521d..aa11ba03 100644
--- a/src/store.js
+++ b/src/store.js
@@ -217,8 +217,6 @@ const actions = {
       // Playing something different!
       const server = state.plex.servers[mediaContainer.machineIdentifier];
       commit('settings/SET_LASTSERVER', mediaContainer.machineIdentifier);
-      // state.settings.LASTSERVER = mediaContainer.machineIdentifier;
-      // window.localStorage.setItem('LASTSERVER', mediaContainer.machineIdentifier);
       if (!server) {
         return;
       }
diff --git a/src/store/modules/settings/settings.store.js b/src/store/modules/settings/settings.store.js
index 5bb20d6b..591e3729 100644
--- a/src/store/modules/settings/settings.store.js
+++ b/src/store/modules/settings/settings.store.js
@@ -26,6 +26,7 @@ const state = () => ({
   CLIENTIDENTIFIER: `${generateGuid()}-${generateGuid()}`,
   lastServer: null,
   plexAuthToken: null,
+  recentRooms: [],
 });
 
 // Use stored value if not null, othewise fallback to config, then default values
@@ -78,6 +79,7 @@ const getters = {
   GET_LASTSERVER: state => state.lastServer,
   GET_CUSTOM_SERVER_USER_INPUTTED_URL: state => state.customServerUserInputtedUrl,
   GET_PLEX_AUTH_TOKEN: state => state.plexAuthToken,
+  GET_RECENT_ROOMS: state => state.recentRooms,
 };
 
 const mutations = {
@@ -94,6 +96,31 @@ const mutations = {
   SET_LASTSERVER: (state, server) => (state.lastServer = server),
   SET_SLPLAYERVOLUME: (state, volume) => (state.slPlayerVolume = volume),
   SET_PLEX_AUTH_TOKEN: (state, token) => (state.plexAuthToken = token),
+  SET_RECENT_ROOMS: (state, rooms) => (state.recentRooms = rooms),
+};
+
+const actions = {
+  ADD_RECENT_ROOM: ({ commit, getters }, newRoom) => {
+    console.log('first filter');
+    const lol = Array.of(newRoom).concat(getters.GET_RECENT_ROOMS.filter((room) => {
+      console.log(`${room.server} !== ${newRoom.server}: ${room.server !== newRoom.server}`);
+      console.log(`${room.room} !== ${newRoom.room}: ${room.room !== newRoom.room}`);
+      console.log(`${room.server !== newRoom.server && room.room !== newRoom.room}`);
+      return room.server !== newRoom.server || room.room !== newRoom.room;
+    }));
+    console.log('new rooms');
+    console.log(lol);
+    commit(
+      'SET_RECENT_ROOMS',
+      Array.of(newRoom).concat(getters.GET_RECENT_ROOMS.filter(room => room.server !== newRoom.server || room.room !== newRoom.room)),
+    );
+  },
+
+  REMOVE_RECENT_ROOM: ({ commit, getters }, roomToRemove) =>
+    commit(
+      'SET_RECENT_ROOMS',
+      getters.GET_RECENT_ROOMS.filter(room => room.server !== roomToRemove.server || room.room !== roomToRemove.room),
+    ),
 };
 
 export default {
@@ -101,4 +128,5 @@ export default {
   state,
   mutations,
   getters,
+  actions,
 };
diff --git a/src/store/modules/synclounge.js b/src/store/modules/synclounge.js
index 53b8721a..ceef94a2 100644
--- a/src/store/modules/synclounge.js
+++ b/src/store/modules/synclounge.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import axios from 'axios';
 import moment from 'moment';
+
 const EventEmitter = require('events');
 
 function sendNotification(message) {
@@ -82,7 +83,7 @@ export default {
 
   actions: {
     async autoJoin({
-      state, commit, rootState, dispatch
+      state, commit, rootState, dispatch,
     }, data) {
       await dispatch('socketConnect', {
         address: data.server,
@@ -141,7 +142,9 @@ export default {
         });
       });
     },
-    joinRoom({ state, commit, rootState, rootGetters }, data) {
+    joinRoom({
+      state, commit, dispatch, rootState, rootGetters,
+    }, data) {
       return new Promise(async (resolve, reject) => {
         if (!state._socket || !state.connected) {
           throw new Error('Not connected to a server!');
@@ -155,7 +158,7 @@ export default {
         let username = data.user.username;
 
         if (rootGetters['settings/GET_HIDEUSERNAME']) {
-          username = rootGetters['settings/GET_ALTUSERNAME']
+          username = rootGetters['settings/GET_ALTUSERNAME'];
         }
         state._socket.emit(
           'join',
@@ -174,22 +177,20 @@ export default {
 
               sendNotification(`Joined room: ${_data.room}`);
               // Add this item to our recently-connected list
-              let recents = window.localStorage.getItem('recentrooms');
-              if (!recents) {
-                recents = {};
-              } else {
-                recents = JSON.parse(recents);
-              }
-              recents[`${state.server}/${state.room}`] = {
-                server: state.server,
-                room: state.room,
-                password: state.password,
-                time: new Date().getTime(),
-              };
-              window.localStorage.setItem('recentrooms', JSON.stringify(recents));
+              dispatch(
+                'settings/ADD_RECENT_ROOM',
+                {
+                  server: state.server,
+                  room: state.room,
+                  password: state.password,
+                  time: new Date().getTime(),
+                },
+                { root: true },
+              );
 
               // Generate our short url/invite link
-              let urlOrigin = window.location.origin + (rootGetters['config/GET_CONFIG'].webroot || '');
+              let urlOrigin =
+                window.location.origin + (rootGetters['config/GET_CONFIG'].webroot || '');
               if (process.env.NODE_ENV === 'development') {
                 urlOrigin = 'http://app.synclounge.tv';
               }
@@ -301,8 +302,9 @@ export default {
                     }
                     // Check if we need to autoplay
                     if (
-                      (ourTimeline.state === 'stopped' || !ourTimeline.state) &&
-                      hostTimeline.playerState !== 'stopped' || rootState.rawTitle !== hostTimeline.rawTitle
+                      ((ourTimeline.state === 'stopped' || !ourTimeline.state) &&
+                        hostTimeline.playerState !== 'stopped') ||
+                      rootState.rawTitle !== hostTimeline.rawTitle
                     ) {
                       if (rootState.blockAutoPlay || !hostTimeline.rawTitle) {
                         return resolve();
@@ -332,7 +334,9 @@ export default {
                         .catch(async (e) => {
                           const hostServer = rootState.plex.servers[hostTimeline.machineIdentifier];
                           if (hostServer && hostTimeline.key) {
-                            if (!rootGetters['settings/GET_BLOCKEDSERVERS'].includes(hostTimeline.machineIdentifier)) {
+                            if (
+                              !rootGetters['settings/GET_BLOCKEDSERVERS'].includes(hostTimeline.machineIdentifier)
+                            ) {
                               try {
                                 await rootState.chosenClient.playMedia({
                                   ratingKey: hostTimeline.key,
@@ -344,12 +348,12 @@ export default {
                                   rootState.blockAutoPlay = false;
                                 }, 15000);
                                 return resolve();
-                              } catch (e) { }
+                              } catch (e) {}
                             }
                           }
                           sendNotification(`Failed to find a compatible copy of ${
                             hostTimeline.rawTitle
-                            }. If you have access to the content try manually playing it.`);
+                          }. If you have access to the content try manually playing it.`);
                           setTimeout(() => {
                             rootState.blockAutoPlay = false;
                           }, 15000);
@@ -541,6 +545,5 @@ export default {
         });
       }
     },
-    getServerList() { },
   },
 };