Add app store

src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <div class="left-panel" 
         :class="{'left-panel-closed': leftPanelClosed}">
-      <LeftPanel @closeLeftPanel="closeLeftPanel()"></LeftPanel>
+      <LeftPanel></LeftPanel>
     </div>
     <div class="content w-100" 
         :class="{'content-when-left-panel-open': !leftPanelClosed}">
@@ -45,6 +45,8 @@ import LeftPanel from '@/components/LeftPanel.vue'
 
 import LottieAnimation from "lottie-vuejs/src/LottieAnimation.vue";
 
+import { StoreType } from '@/store';
+
 interface AnimData {
   direction: number;
   currentTime: number;
@@ -73,8 +75,6 @@ interface ILottieAnimation {
   },
 })
 export default class App extends Vue {
-  public leftPanelClosed: boolean = true;
-
   @Ref('close-icon') public readonly closeIcon!: ILottieAnimation;
 
   setAnimController(controller: IAnimController) {
@@ -111,6 +111,17 @@ export default class App extends Vue {
 
     this.leftPanelClosed = true;
   }
+
+  get leftPanelClosed(): boolean {
+    return (this.$store as StoreType).state.app.leftPanelClosed;
+  }
+
+  set leftPanelClosed(value: boolean) {
+    const store = (this.$store as StoreType);
+
+    store.dispatch('app/setLeftPanelCloseStatus', value)
+      .catch(error => console.log(error));
+  }
 }
 </script>
 

src/components/LeftPanel.vue

@@ -43,26 +43,36 @@
 </template>
 
 <script lang="ts">
+import 'reflect-metadata';
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-@Component
+import { StoreType } from '@/store';
-export default class LeftPanel extends Vue {
-  public closed: boolean = true;
 
+@Component({
+  name: 'LeftPanel',
+})
+export default class LeftPanel extends Vue {
   isActiveLink(name: string): boolean {
     return this.$route.name === name;
   }
 
+  closeLeftPanel() {
+    (this.$store as StoreType).dispatch('app/setLeftPanelCloseStatus', true)
+      .catch(error => console.log(error));
+  }
+
   goToHome() {
+    if (this.$route.name !== "Home")
       this.$router.push({'name': 'Home'});
 
-    this.$emit('closeLeftPanel');
+    this.closeLeftPanel();
   }
 
   goToAboutMe() {
+    if (this.$route.name !== "About Me")
       this.$router.push({'name': 'About Me'});
 
-    this.$emit('closeLeftPanel');
+    this.closeLeftPanel();
   }
 }
 </script>

src/store/albums/actions.ts

@@ -1,9 +1,7 @@
 import { Actions } from 'vuex-smart-module';
-import Vue from 'vue';
+import AlbumsState, { IAlbum } from './state';
-import { AxiosResponse, AxiosError } from 'axios';
-import AlbumsState from './state';
 import AlbumsGetters from './getters';
-import AlbumsMutations from './muttations';
+import AlbumsMutations from './mutations';
 
 export default class AlbumsActions extends Actions<
   AlbumsState,
@@ -11,5 +9,53 @@ export default class AlbumsActions extends Actions<
   AlbumsMutations,
   AlbumsActions
 > {
+  $init() {
+    const albums: IAlbum[] = [
+      {
+        name: 'Test',
+        description: 'Test description',
+        protected: false,
   
+        folderName: 'test',
+        files: [
+          'p (1).jpg',
+          'p (2).jpg',
+          'p (3).jpg',
+          'p (4).jpg',
+          'p (5).jpg',
+          'p (6).jpg',
+        ]
+      },
+      {
+        name: 'Test 2',
+        description: 'Test 2 description',
+        protected: false,
+  
+        folderName: 'test2',
+        files: [
+          'p (1).jpg',
+          'p (2).jpg',
+          'p (3).jpg',
+          'p (4).jpg',
+          'p (5).jpg',
+        ]
+      },
+      {
+        name: 'Test 3',
+        description: 'Test 3 description',
+        protected: false,
+  
+        folderName: 'test3',
+        files: [
+          'p (1).jpg',
+          'p (2).jpg',
+          'p (3).jpg',
+          'p (4).jpg',
+          'p (5).jpg',
+        ]
+      }
+    ];
+  
+    setTimeout(() => this.commit('updateAlbums', albums), 500);
+  }
 }

src/store/albums/index.ts

@@ -1,7 +1,7 @@
 import { Module } from 'vuex-smart-module';
 import AlbumsState from './state';
 import AlbumsGetters from './getters';
-import AlbumsMutations from './muttations';
+import AlbumsMutations from './mutations';
 import AlbumsActions from './actions';
 
 

src/store/app/actions.ts

@@ -0,0 +1,15 @@
+import { Actions } from 'vuex-smart-module';
+import AppState from './state';
+import AppGetters from './getters';
+import AppMutations from './mutations';
+
+export default class AppActions extends Actions<
+  AppState,
+  AppGetters,
+  AppMutations,
+  AppActions
+> {
+  setLeftPanelCloseStatus(value: boolean) {
+    this.commit("setLeftPanelCloseStatus", value);
+  }
+}

src/store/app/getters.ts

@@ -0,0 +1,6 @@
+import { Getters } from 'vuex-smart-module';
+import AppState from './state';
+
+export default class AppGetters extends Getters<AppState> {
+  
+}

src/store/app/index.ts

@@ -0,0 +1,16 @@
+import { Module } from 'vuex-smart-module';
+import AppState from './state';
+import AppGetters from './getters';
+import AppMutations from './mutations';
+import AppActions from './actions';
+import AlbumsMutations from '../albums/mutations';
+
+
+const appModule = new Module({
+  state: AppState,
+  getters: AppGetters,
+  mutations: AppMutations,
+  actions: AppActions,
+});
+
+export default appModule;

src/store/app/mutations.ts

@@ -0,0 +1,8 @@
+import { Mutations } from 'vuex-smart-module';
+import AppState from './state';
+
+export default class AppMutations extends Mutations<AppState> {
+  setLeftPanelCloseStatus(value: boolean) {
+    this.state.leftPanelClosed = value;
+  }
+}

src/store/app/state.ts

@@ -0,0 +1,3 @@
+export default class AppState {
+  leftPanelClosed: boolean = true;
+}

src/store/index.ts

@@ -7,11 +7,15 @@ import { Store } from 'vuex';
 import albums from './albums';
 import albumsState from './albums/state';
 
+import app from './app';
+import appState from './app/state';
+
 
 Vue.use(Vuex);
 
 interface IStore {
-  albums: albumsState
+  albums: albumsState,
+  app: appState
 }
 
 export type StoreType = Store<IStore>;
@@ -20,6 +24,7 @@ const store: StoreType = createStore(
   new Module({
     modules: {
       albums,
+      app
     }
   }),
   {

src/views/Album.vue

@@ -1,6 +1,10 @@
 <template>
   <div>
-    <LeftBlock title="HOME" description="kreorg photos" picture="/pictures/home.jpg" :leftPanelClosed="leftPanelClosed"></LeftBlock>
+    <LeftBlock 
+      title="HOME" 
+      description="kreorg photos" 
+      picture="/pictures/home.jpg" 
+      :leftPanelClosed="leftPanelClosed"></LeftBlock>
     
   </div>
 </template>

src/views/Home.vue

@@ -11,11 +11,13 @@
 
 <script lang="ts">
 import 'reflect-metadata';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 
 import LeftBlock from '@/components/LeftBlock.vue';
 import Album from '@/components/Album.vue';
-import { IAlbum } from '@/store/albums/state'
+
+import { IAlbum } from '@/store/albums/state';
+import { StoreType } from '@/store';
 
 
 @Component({
@@ -30,57 +32,34 @@ export default class Home extends Vue {
 
   public albums: IAlbum[] = [];
 
-  public sourceAlbums: IAlbum[] = [
+  public timeoutsIds: number[] = [];
-    {
-      name: 'Test',
-      description: 'Test description',
-      protected: false,
 
-      folderName: 'test',
+  get albumsSource() {
-      files: [
+    const store = (this.$store as StoreType);
-        'p (1).jpg',
-        'p (2).jpg',
-        'p (3).jpg',
-        'p (4).jpg',
-        'p (5).jpg',
-        'p (6).jpg',
-      ]
-    },
-    {
-      name: 'Test 2',
-      description: 'Test 2 description',
-      protected: false,
 
-      folderName: 'test2',
+    const albums = store.state.albums.albums;
-      files: [
-        'p (1).jpg',
-        'p (2).jpg',
-        'p (3).jpg',
-        'p (4).jpg',
-        'p (5).jpg',
-      ]
-    },
-    {
-      name: 'Test 3',
-      description: 'Test 3 description',
-      protected: false,
 
-      folderName: 'test3',
+    if (albums === null)
-      files: [
+      return [];
-        'p (1).jpg',
+    return albums;
-        'p (2).jpg',
-        'p (3).jpg',
-        'p (4).jpg',
-        'p (5).jpg',
-      ]
   }
-  ];
 
-  mounted() {
+  @Watch('albumsSource')
-    this.sourceAlbums.forEach((item, index) => {
+  onAlbumsSourceChanged(val: IAlbum[], oldVal: IAlbum[] | null) {
+    this.updateAlbums();
+  }
+
+  updateAlbums() {
+    this.albums = [];
+
+    this.albumsSource.forEach((item, index) => {
       setTimeout(() => this.albums.push(item), 300 * index);
     })
   }
+
+  mounted() {
+    this.updateAlbums();
+  }
 }
 </script>