Fix dashboard to track server state

Author: DaneEveritt

resources/assets/scripts/components/dashboard/Dashboard.vue

@@ -7,7 +7,7 @@
                 <input type="text"
                        :placeholder="$t('dashboard.index.search')"
                        @input="onChange"
-                       v-model="search"
+                       v-model="searchTerm"
                        ref="search"
                 />
             </div>
@@ -34,6 +34,8 @@
     import Flash from '../Flash';
     import ServerBox from './ServerBox';
     import Navigation from '../core/Navigation';
+    import isObject from 'lodash/isObject';
+    import {mapState} from 'vuex';
 
     export default {
         name: 'dashboard',
@@ -42,17 +44,18 @@
             return {
                 backgroundedAt: new Date(),
                 documentVisible: true,
-                loading: true,
-                search: '',
-                servers: [],
+                loading: false,
             }
         },
 
         /**
-         * Start loading the servers before the DOM $.el is created.
+         * Start loading the servers before the DOM $.el is created. If we already have servers
+         * stored in vuex shows those and don't fire another API call just to load them again.
          */
         created: function () {
-            this.loadServers();
+            if (this.servers.length === 0) {
+                this.loadServers();
+            }
 
             document.addEventListener('visibilitychange', () => {
                 this.documentVisible = document.visibilityState === 'visible';
@@ -68,36 +71,37 @@
             this._iterateServerResourceUse();
         },
 
+        computed: {
+            ...mapState('dashboard', ['servers']),
+            searchTerm: {
+                get: function () {
+                    return this.$store.getters['dashboard/getSearchTerm'];
+                },
+                set: function (value) {
+                    this.$store.dispatch('dashboard/setSearchTerm', value);
+                }
+            }
+        },
+
         methods: {
             /**
              * Load the user's servers and render them onto the dashboard.
-             *
-             * @param {string} query
              */
-            loadServers: function (query = '') {
+            loadServers: function () {
                 this.loading = true;
-                window.axios.get(this.route('api.client.index'), {
-                    params: { query },
-                })
+                this.$store.dispatch('dashboard/loadServers')
                     .finally(() => {
                         this.clearFlashes();
                     })
-                    .then(response => {
-                        this.servers = [];
-                        response.data.data.forEach(obj => {
-                            const s = new Server(obj.attributes);
-                            this.servers.push(s);
-                            this.getResourceUse(s);
-                        });
-
+                    .then(() => {
                         if (this.servers.length === 0) {
                             this.info(this.$t('dashboard.index.no_matches'));
                         }
                     })
                     .catch(err => {
                         console.error(err);
                         const response = err.response;
-                        if (response.data && _.isObject(response.data.errors)) {
+                        if (response.data && isObject(response.data.errors)) {
                             response.data.errors.forEach(error => {
                                 this.error(error.detail);
                             });
@@ -113,7 +117,7 @@
              * at the fastest.
              */
             onChange: debounce(function () {
-                this.loadServers(this.$data.search);
+                this.loadServers();
             }, 500),
 
             /**

resources/assets/scripts/components/dashboard/ServerBox.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="server-box animate fadein">
-        <router-link :to="{ name: 'server', params: { serverID: server.identifier }}" class="content">
+        <router-link :to="{ name: 'server', params: { id: server.identifier }}" class="content">
             <div class="float-right">
                 <div class="indicator" :class="status"></div>
             </div>

resources/assets/scripts/router.js

@@ -46,21 +46,18 @@ const router = new VueRouter({
 // have no JWT or the JWT is expired and wouldn't be accepted by the Panel.
 router.beforeEach((to, from, next) => {
     if (to.path === route('auth.logout')) {
-        console.log('logging out');
         return window.location = route('auth.logout');
     }
 
     const user = store.getters['auth/getUser'];
 
     // Check that if we're accessing a non-auth route that a user exists on the page.
     if (!to.path.startsWith('/auth') && !(user instanceof User)) {
-        console.log('logging out 2');
         store.commit('auth/logout');
         return window.location = route('auth.logout');
     }
 
     // Continue on through the pipeline.
-    console.log('continuing');
     return next();
 });
 

resources/assets/scripts/store/index.js

@@ -1,22 +1,22 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import server from "./modules/server";
-import auth from "./modules/auth";
+import auth from './modules/auth';
+import dashboard from './modules/dashboard';
 
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
     strict: process.env.NODE_ENV !== 'production',
-    modules: { auth },
+    modules: { auth, dashboard },
 });
 
 if (module.hot) {
     module.hot.accept(['./modules/auth'], () => {
         const newAuthModule = require('./modules/auth').default;
-        // const newServerModule = require('./modules/server').default;
+        const newDashboardModule = require('./modules/dashboard').default;
 
         store.hotUpdate({
-            modules: { newAuthModule },
+            modules: { newAuthModule, newDashboardModule },
         });
     });
 }

resources/assets/scripts/store/modules/dashboard.js

@@ -0,0 +1,63 @@
+import Server from './../../models/server';
+const route = require('./../../../../../vendor/tightenco/ziggy/src/js/route').default;
+
+export default {
+    namespaced: true,
+    state: {
+        servers: [],
+        searchTerm: '',
+    },
+    getters: {
+        getSearchTerm: function (state) {
+            return state.searchTerm;
+        }
+    },
+    actions: {
+        /**
+         * Retrieve all of the servers for a user matching the query.
+         *
+         * @param commit
+         * @param {String} query
+         * @returns {Promise<any>}
+         */
+        loadServers: ({commit, state}) => {
+            return new Promise((resolve, reject) => {
+                window.axios.get(route('api.client.index'), {
+                    params: { query: state.searchTerm },
+                })
+                    .then(response => {
+                        // If there is a 302 redirect or some other odd behavior (basically, response that isnt
+                        // in JSON format) throw an error and don't try to continue with the request processing.
+                        if (!(response.data instanceof Object)) {
+                            return reject(new Error('An error was encountered while processing this request.'));
+                        }
+
+                        // Remove all of the existing servers.
+                        commit('clearServers');
+
+                        response.data.data.forEach(obj => {
+                            commit('addServer', obj.attributes);
+                        });
+
+                        resolve();
+                    })
+                    .catch(reject);
+            });
+        },
+
+        setSearchTerm: ({commit}, term) => {
+            commit('setSearchTerm', term);
+        },
+    },
+    mutations: {
+        addServer: function (state, data) {
+            state.servers.push(new Server(data));
+        },
+        clearServers: function (state) {
+            state.servers = [];
+        },
+        setSearchTerm: function (state, term) {
+            state.searchTerm = term;
+        },
+    },
+};