proper checks in router

Author: jthoms1

src/api/index.ts

@@ -3,3 +3,24 @@ import locations from './data/locations.json';
 export async function getLocations() {
   return Promise.resolve(locations);
 }
+
+export const loadLocalStore = () => {
+  try {
+    const serializedState = localStorage.getItem('state');
+    if (serializedState === null) {
+      return undefined;
+    }
+    return JSON.parse(serializedState);
+  } catch(e) {
+    return undefined;
+  }
+}
+
+export const saveToLocalStore = (state: any) => {
+  try {
+    const serializedState = JSON.stringify(state);
+    localStorage.setItem('state', serializedState);
+  } catch(e) {
+    //ignore errors
+  }
+}

src/components/Home.vue renamed to src/components/App.vue

@@ -1,19 +1,20 @@
 import Vue from 'vue';
 import Router, { NavigationGuard } from 'vue-router';
-import Tutorial from './views/Tutorial.vue';
+import store from './store';
+import Tutorial from './components/Tutorial.vue';
 
 Vue.use(Router);
 
 const privateRoute: NavigationGuard = function (to, from, next) {
-  if (!User.isAuthenticated) {
+  if (!store.state.user.isAuthenticated) {
     next({ name: 'login' });
   } else {
     next();
   }
 }
 
 const requiresTutorialRoute: NavigationGuard = function (to, from, next) {
-  if (!hasSeenTutorial) {
+  if (!store.state.user.hasSeenTutorial) {
     next({ name: 'tutorial' });
   } else {
     next();
@@ -27,7 +28,7 @@ export default new Router({
     {
       path: '/',
       name: 'app',
-      component: () => import(/* webpackChunkName: "about" */ './views/App.vue'),
+      component: () => import(/* webpackChunkName: "about" */ './components/App.vue'),
       beforeEnter: requiresTutorialRoute
     },
     {
@@ -38,25 +39,25 @@ export default new Router({
     {
       path: '/account',
       name: 'account',
-      component: () => import(/* webpackChunkName: "about" */ './views/Account.vue'),
+      component: () => import(/* webpackChunkName: "about" */ './components/Account.vue'),
       beforeEnter: privateRoute
     },
     {
       path: '/support',
       name: 'support',
-      component: () => import(/* webpackChunkName: "about" */ './views/Support.vue'),
+      component: () => import(/* webpackChunkName: "about" */ './components/Support.vue'),
       beforeEnter: requiresTutorialRoute
     },
     {
       path: '/login',
       name: 'login',
-      component: () => import(/* webpackChunkName: "about" */ './views/Login.vue'),
+      component: () => import(/* webpackChunkName: "about" */ './components/Login.vue'),
       beforeEnter: requiresTutorialRoute
     },
     {
       path: '/signup',
       name: 'signup',
-      component: () => import(/* webpackChunkName: "about" */ './views/Signup.vue'),
+      component: () => import(/* webpackChunkName: "about" */ './components/Signup.vue'),
       beforeEnter: requiresTutorialRoute
     }
   ]

src/router.ts

@@ -1,18 +1,25 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import locations from './modules/locations';
-import sessions from './modules/sessions';
-import speakers from './modules/speakers';
-import user from './modules/user';
+import locations, { LocationState } from './modules/locations';
+import sessions, { SessionState } from './modules/sessions';
+import speakers, { Speaker} from './modules/speakers';
+import user, { User } from './modules/user';
 
-Vue.use(Vuex)
+export interface StoreState {
+  locations: LocationState,
+  sessions: SessionState,
+  speakers: Speaker[],
+  user: User
+}
 
-export default new Vuex.Store({
+Vue.use(Vuex);
+
+export default new Vuex.Store<StoreState>({
   modules: {
     locations,
     sessions,
     speakers,
     user
   },
   strict: process.env.NODE_ENV !== 'production'
-})
+});

src/store/index.ts

@@ -1,4 +1,4 @@
-import { StoreOptions } from 'vuex';
+import { Module } from 'vuex';
 
 export interface Location {
   name?: string;
@@ -11,7 +11,7 @@ export interface LocationState {
   locations: Location[]
 }
 
-const locationStore: StoreOptions<LocationState> = {
+const locationStore: Module<LocationState, {}> = {
   state: {
     mapCenter: {
       lat: 43.071584,

src/store/modules/locations.ts

@@ -1,4 +1,4 @@
-import { StoreOptions } from 'vuex';
+import { Module } from 'vuex';
 
 export interface Session {
   id: number,
@@ -27,7 +27,7 @@ const defaultState: SessionState = {
   filterFavorites: false
 }
 
-const sessionStore: StoreOptions<SessionState> = {
+const sessionStore: Module<SessionState, {}> = {
   state: defaultState,
   mutations: {
     setSearchText(state, searchText: string) {

src/store/modules/sessions.ts

@@ -1,4 +1,4 @@
-import { StoreOptions } from 'vuex';
+import { Module } from 'vuex';
 
 export interface Speaker {
   id: number,
@@ -11,7 +11,7 @@ export interface Speaker {
   phone: string
 }
 
-const speakerStore: StoreOptions<Speaker[]> = {
+const speakerStore: Module<Speaker[], {}> = {
   state: []
 };
 

src/store/modules/speakers.ts

@@ -1,4 +1,4 @@
-import { StoreOptions } from 'vuex';
+import { Module } from 'vuex';
 
 export interface User {
   pictureLocation: string | null;
@@ -14,7 +14,7 @@ const defaultState: User = {
   hasSeenTutorial: false
 };
 
-const userStore: StoreOptions<User> = {
+const userStore: Module<User, {}> = {
   state: defaultState,
   mutations: {
     sawTutorial(state) {

src/store/modules/user.ts

@@ -0,0 +1,20 @@
+export const loadState = () => {
+  try {
+    const serializedState = localStorage.getItem('state');
+    if (serializedState === null) {
+      return undefined;
+    }
+    return JSON.parse(serializedState);
+  } catch(e) {
+    return undefined;
+  }
+}
+
+export const saveState = (state: any) => {
+  try {
+    const serializedState = JSON.stringify(state);
+    localStorage.setItem('state', serializedState);
+  } catch(e) {
+    //ignore errors
+  }
+}