Chore/typings and refactor category item actions (#243)

* Change semicolon rule in tslint

* tslint rule added

* typings and category item actions refactored

front/client/components/ArticleContent.vue

@@ -95,6 +95,7 @@
 // import Component from 'vue-class-component'
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
 import ConfirmDialog from 'client/components/ConfirmDialog.vue'
+import { ICategoryItem } from 'client/service/CategoryItem.ts'
 
 @Component({
   components: {
@@ -125,10 +126,8 @@ export default class ArticleContent extends Vue {
     this.isNoteExpanded = false
   }
 
-  async deleteArticleContent (itemId: any) {
-    await this.$store.dispatch('categoryItem/deleteItem', {
-      id: itemId
-    })
+  async deleteArticleContent (itemId: ICategoryItem['uid']): Promise<void> {
+    await this.$store.dispatch('categoryItem/deleteItemById', itemId)
   }
 
   openConfirmDialog () {

front/client/components/Categories.vue

@@ -106,7 +106,7 @@ import _sortBy from 'lodash/sortBy'
 import _fromPairs from 'lodash/fromPairs'
 import Vue from 'vue'
 import Component from 'vue-class-component'
-import { ICategory, CategoryStatus } from 'client/service/Category'
+import { ICategoryInfo, CategoryStatus } from 'client/service/Category'
 import AddCategoryDialog from 'client/components/AddCategoryDialog.vue'
 
 @Component({
@@ -119,17 +119,16 @@ export default class Categories extends Vue {
   addCategoryGroupName: string = ''
   isAddGroupDialogOpen: boolean = false
 
-  async asyncData() {
+  async asyncData () {
     return this.$store.dispatch('category/loadCategoryList')
   }
-  // TODO create state getter and replace to it
-  get categories() {
+  get categories () {
     return this.$store.state.category.categoryList
   }
-  get groups() {
-    const groupedByGroupName: object = _groupBy(this.categories, 'group')
+  get groups () {
+    const groupedByGroupName = _groupBy(this.categories, 'group')
     const groupedEntries = Object.entries(groupedByGroupName)
-    const groupedAlsoByStatus = groupedEntries.map(([key, value]: [string, ICategory[]]) => {
+    const groupedAlsoByStatus = groupedEntries.map(([key, value]: [string, ICategoryInfo[]]) => {
       const grouppedCategoriesByStatus = _groupBy(value, 'status')
       return [key, grouppedCategoriesByStatus]
     })
@@ -138,11 +137,11 @@ export default class Categories extends Vue {
     const sortedAlphabetically = _sortBy(groupedAlsoByStatus, entriesKeyIndex)
     return _fromPairs(sortedAlphabetically)
   }
-  openAddCategoryDialog(groupName: string) {
+  openAddCategoryDialog (groupName: string) {
     this.addCategoryGroupName = groupName
     this.isAddGroupDialogOpen = true
   }
-  getCategoryUrl(category: ICategory): string {
+  getCategoryUrl (category: ICategoryInfo): string {
     return `${_toKebabCase(category.title)}-${category.uid}`
   }
 }

front/client/service/Category.ts

@@ -1,12 +1,18 @@
-import axios from "axios";
+import axios from 'axios'
+import { ICategoryItem } from './CategoryItem'
 
 class CategoryService {
-  async  getCategoryList(): Promise<ICategory[]> {
-    const { data } = await axios.get("api/categories", {})
+  async getCategoryById (): Promise<ICategoryFull[]> {
+    const { data } = await axios.get('api/category/sth6l9jl', {})
     return data
   }
 
-  async  createCategory({ title, group }: ICategory): Promise<ICategory['uid']> {
+  async getCategoryList (): Promise<ICategoryInfo[]> {
+    const { data } = await axios.get('api/categories', {})
+    return data
+  }
+
+  async createCategory ({ title, group }: { title: ICategoryInfo['title'], group: ICategoryInfo['group'] }): Promise<ICategoryInfo['uid']> {
     const { data } = await axios.post('api/category', null, {
       params: {
         title,
@@ -21,19 +27,25 @@ export enum CategoryStatus {
   finished = 'CategoryFinished',
   inProgress = 'CategoryWIP',
   toBeWritten = 'CategoryStub'
-
-}
-export interface ICategory {
-  created?: string
-  group?: string
-  status?: CategoryStatus
-  title?: string
-  uid?: string,
-  items?: any[]
 }
 
+export interface ICategoryInfo {
+  uid: string
+  title: string
+  created: string
+  group: string
+  status: CategoryStatus
+}
+
+export interface ICategoryFull {
+  uid: string
+  title: string
+  group: string
+  status: CategoryStatus
+  description: object
+  items: ICategoryItem[]
+}
 
 const categoryServiceInstance = new CategoryService()
 
-
 export { categoryServiceInstance as CategoryService }

front/client/service/CategoryItem.ts

@@ -1,13 +1,9 @@
 import axios from 'axios'
-import { awaitExpression } from 'babel-types';
+import { ICategoryFull } from './Category'
 
 class CategoryItemService {
-  async getCategoryItem(): Promise<ICategoryItem[]> {
-    const { data } = await axios.get('api/category/sth6l9jl', {})
-    return data
-  }
 
-  async addItem({ category, name }: ICategoryItem) {
+  async addItem ({ category, name }: ICreateCategoryItem) {
     const { data } = await axios.post('api/item/sth6l9jl', null, {
       params: {
         category,
@@ -16,20 +12,34 @@ class CategoryItemService {
     })
     return data
   }
-  
-  async deleteItem({ id }: ICategoryItem) {
-    const { data } = await axios.delete(`api/item/${id}`)
-    return data
+  async deleteItemById (id: ICategoryItem['uid']): Promise<void> {
+    await axios.delete(`api/item/${id}`)
   }
 }
 
+export interface ICreateCategoryItem {
+  category: ICategoryFull['title'],
+  name: ICategoryItem['name']
+}
+
 export interface ICategoryItem {
-  status?: string,
-  group?: string,
-  uid?: string,
-  items?: any[],
-  title?: string,
-  description?: object
+  uid: string
+  name: string
+  created: string
+  group?: string
+  description: object
+  pros: ITrait[]
+  cons: ITrait[]
+  ecosystem: object
+  notes: object
+  link?: string
+  kind: object
+
+}
+
+export interface ITrait {
+  uid: string
+  content: object
 }
 
 const catItemServiceInstance = new CategoryItemService()

front/client/store/modules/category.ts

@@ -1,22 +1,25 @@
 import { ActionTree, GetterTree, MutationTree, ActionContext, Module } from 'vuex'
-import { ICategory, CategoryService } from 'client/service/Category'
+import { ICategoryInfo, CategoryService } from 'client/service/Category'
 
-interface CategoryState {
-  categoryList: ICategory[]
+interface ICategoryState {
+  categoryList: ICategoryInfo[]
 }
 
-const state: CategoryState = {
+const state: ICategoryState = {
   categoryList: []
 }
 
-const getters: GetterTree<CategoryState, any> = {}
+const getters: GetterTree<ICategoryState, any> = {}
 
-const actions: ActionTree<CategoryState, any> = {
-  async loadCategoryList({ commit }: ActionContext<CategoryState, any>): Promise<any> {
-    const data: ICategory[] = await CategoryService.getCategoryList()
+const actions: ActionTree<ICategoryState, any> = {
+  async loadCategoryList ({ commit }: ActionContext<ICategoryState, any>): Promise<any> {
+    const data: ICategoryInfo[] = await CategoryService.getCategoryList()
     commit('setCategoryList', data)
   },
-  async createCategory({ dispatch }, { title, group }: ICategory): Promise<ICategory['uid']> {
+  async createCategory (
+    { dispatch }: ActionContext<ICategoryState, any>,
+    { title, group }: { title: ICategoryInfo['title'], group: ICategoryInfo['group'] }
+  ): Promise<ICategoryInfo['uid']> {
     const createdId = await CategoryService.createCategory({
       title,
       group
@@ -26,13 +29,13 @@ const actions: ActionTree<CategoryState, any> = {
   }
 }
 
-const mutations: MutationTree<CategoryState> = {
-  setCategoryList: (state: CategoryState, payload: ICategory[]) => {
+const mutations: MutationTree<ICategoryState> = {
+  setCategoryList: (state: ICategoryState, payload: ICategoryInfo[]) => {
     state.categoryList = payload
   }
 }
 
-const category: Module<CategoryState, any> = {
+const category: Module<ICategoryState, any> = {
   namespaced: true,
   state,
   getters,

front/client/store/modules/categoryItem.ts

@@ -1,22 +1,26 @@
 import { ActionTree, GetterTree, MutationTree, ActionContext, Module } from 'vuex'
-import { ICategoryItem, CategoryItemService } from 'client/service/CategoryItem'
+import { ICategoryItem, CategoryItemService, ICreateCategoryItem } from 'client/service/CategoryItem'
+import { CategoryService, ICategoryFull } from 'client/service/Category'
 
-interface CategoryItemState {
+interface ICategoryItemState {
   categoryItemList: ICategoryItem[]
 }
 
-const state: CategoryItemState = {
+const state: ICategoryItemState = {
   categoryItemList: []
 }
 
-const getters: GetterTree<CategoryItemState, any> = {}
+const getters: GetterTree<ICategoryItemState, any> = {}
 
-const actions: ActionTree<CategoryItemState, any> = {
-  async loadCategoryItem({ commit }: ActionContext<CategoryItemState, any>): Promise<any> {
-    const data: ICategoryItem[] = await CategoryItemService.getCategoryItem()
+const actions: ActionTree<ICategoryItemState, any> = {
+  async loadCategoryItem ({ commit }: ActionContext<ICategoryItemState, any>): Promise<void> {
+    const data: ICategoryFull[] = await CategoryService.getCategoryById()
     commit('setCategoryItem', data)
   },
-  async createItem({ dispatch }, { category, name }: ICategoryItem): Promise<any> {
+  async createItem (
+    { dispatch }: ActionContext<ICategoryItemState, any>,
+    { category, name }: ICreateCategoryItem
+  ): Promise<ICategoryItem['uid']> {
     const createdId = await CategoryItemService.addItem({
       category,
       name
@@ -24,22 +28,20 @@ const actions: ActionTree<CategoryItemState, any> = {
     dispatch('loadCategoryItem')
     return createdId
   },
-  async deleteItem({ dispatch }, { id }: ICategoryItem) {
-    const deletedId = await CategoryItemService.deleteItem({
-      id
-    })
+  async deleteItemById ({ dispatch }: ActionContext<ICategoryItemState, any>, id: ICategoryItem['uid']) {
+    const deletedId = await CategoryItemService.deleteItemById(id)
     dispatch('loadCategoryItem')
     return deletedId
   }
 }
 
-const mutations: MutationTree<CategoryItemState> = {
-  setCategoryItem: (state: CategoryItemState, payload: ICategoryItem[]) => {
+const mutations: MutationTree<ICategoryItemState> = {
+  setCategoryItem: (state: ICategoryItemState, payload: ICategoryItem[]) => {
     state.categoryItemList = payload
   }
 }
 
-const categoryItem: Module<CategoryItemState, any> = {
+const categoryItem: Module<ICategoryItemState, any> = {
   namespaced: true,
   state,
   getters,

front/tslint.json

@@ -14,13 +14,14 @@
     "no-string-literal": false,
     "no-shadowed-variable": false,
     "no-angle-bracket-type-assertion": false,
+    "max-line-length": false,
     "no-unused-expression": [true, "allow-fast-null-checks"],
     "no-var-requires": false,
     "object-literal-sort-keys": false,
     "only-arrow-functions": false,
     "quotemark": [true, "single"],
     "no-unused-variable": true,
-    "semicolon": [false, "never"],
+    "semicolon": [true, "never"],
     "no-trailing-whitespace": true,
     "space-before-function-paren": true,
     "whitespace": [true, "check-module"],