Server-side-rendering of categories

front/client/components/Categories.vue

@@ -1,28 +1,35 @@
 <template>
-  <v-container
-    grid-list-md 
-    text-xs-center
-  >
-    <v-layout row wrap>
+  <v-container grid-list-md>
+    <v-layout
+      row
+      wrap
+      justify-space-between
+    >
       <v-flex
-        class="flex-1"
-        v-for="(categories, index) in chunkedCategories" 
+        class="mr-3"
+        column
+        xs12
+        sm5
+        md3
+        lg3
+        xl1
+        v-for="(groupCategories, groupName, index) in groups" 
         :key="index"
       >
-        <div
-          class="categoryGroup"
-          v-for="(groupCategories, index) in categories" 
-          :key="index"
-        >
-          <h1> {{ groupCategories[0].group }} </h1>
-          <a href="#"> 
-            <h4 
-              class="ml-2" 
-              v-for="(category, index) in groupCategories" 
+        <div class="category-group">
+          <h4 class="display-1 font-weight-black"> {{ groupName }} </h4>
+          <a
+            class="category-title"
+            v-for="(category, index) in groupCategories"
+            :key="index"
+            href="#"
+          >
+            <h6
+              class="ml-2 subheading font-weight-bold"
               :key="index"
-            > 
+            >
               {{ category.title }} 
-            </h4>
+            </h6>
           </a>
         </div>
       </v-flex>
@@ -31,31 +38,34 @@
 </template>
 
 <script lang="ts">
-import axios from "axios";
 import _groupBy from 'lodash/groupBy'
-import _chunk from 'lodash/chunk'
 import Vue from 'vue'
 import Component from 'vue-class-component'
 
 @Component
-export default class Index extends Vue {
-  categories = []
-
-  async mounted() {
-    const { data: categories } = await axios.get("api/categories")
-    this.categories = Object.values(_groupBy(categories, 'group'))
+export default class Categories extends Vue {
+  // TODO add type for store
+  async asyncData({ store }) {
+    return store.dispatch('category/loadCategoryList')
   }
-  // Returns any number of categories devided to setted number of arrays
-  // Its usefull for rendering predifined number of columns 
-  get chunkedCategories() {
-    const numberOfArrayToDevideTo = 3
-    return _chunk(this.categories, Math.ceil(this.categories.length/numberOfArrayToDevideTo))
+  // TODO create state getter and replace to it
+  get categories() {
+    return this.$store.state.category.categoryList
+  }
+  get groups() {
+    return _groupBy(this.categories, 'group')
   }
 }
 </script>
 
-<style scoped> 
-.categoryGroup {
+<style scoped>
+.category-group {
   text-align: left;
 }
+.category-title {
+  text-decoration-line: none;
+}
+.category-title:hover {
+  text-decoration-line: underline;
+}
 </style>

front/client/service/Category.ts

@@ -0,0 +1,21 @@
+import axios from "axios";
+
+class CategoryService {
+  async  getCategoryList(): Promise<ICategory[]> {
+    const { data } = await axios.get("api/categories", {})
+    return data
+  }
+}
+
+export interface ICategory {
+  created: string
+  group: string
+  status: string
+  title: string
+  uid: string
+}
+
+const categoryServiceInstance = new CategoryService()
+
+
+export { categoryServiceInstance as CategoryService }

front/client/service/categories.ts

@@ -1,21 +0,0 @@
-import axios from "axios";
-
-class CategoryService {
-  async getCategoriesList(): Promise<ICategory[]> {
-    const { data } = await axios.get("api/categories")
-    return data
-  }
-}
-
-interface ICategory {
-  created: string
-  group: string
-  status: string
-  title: string
-  uid: string
-}
-
-export {
-  CategoryService,
-  ICategory
-}

front/client/store/index.ts

@@ -1,7 +1,15 @@
 import Vuex from 'vuex'
+import category from 'client/store/modules/category'
 
-function createStore () {
+function createStore() {
+  // TODO loggins mutations in dev
   return new Vuex.Store({
+    state: {},
+    actions: {},
+    mutations: {},
+    modules: {
+      category
+    }
   })
 }
 

front/client/store/modules/category.ts

@@ -0,0 +1,35 @@
+import { ActionTree, GetterTree, MutationTree, ActionContext, Module } from 'vuex'
+import { ICategory, CategoryService } from 'client/service/Category'
+
+interface CategoryState {
+  categoryList: ICategory[]
+}
+
+const state: CategoryState = {
+  categoryList: []
+}
+
+const getters: GetterTree<CategoryState, any> = {}
+
+const actions: ActionTree<CategoryState, any> = {
+  async loadCategoryList({ commit }: ActionContext<CategoryState, any>): Promise<any> {
+    const data: ICategory[] = await CategoryService.getCategoryList()
+    commit('setCategoryList', data)
+  }
+}
+
+const mutations: MutationTree<CategoryState> = {
+  setCategoryList: (state: CategoryState, payload: ICategory[]) => {
+    state.categoryList = payload
+  }
+}
+
+const category: Module<CategoryState, any> = {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+};
+
+export default category