Adding Categories and Bookmarks using form

client/src/store/actions/actionTypes.ts

@@ -1,15 +1,22 @@
 import {
-  GetAppsAction,
+  // Theme
   SetThemeAction,
+  // Apps
+  GetAppsAction,
   PinAppAction,
   AddAppAction,
   DeleteAppAction,
   UpdateAppAction,
-  GetCategoriesAction
+  // Categories
+  GetCategoriesAction,
+  AddCategoryAction,
+  AddBookmarkAction
 } from './';
 
 export enum ActionTypes {
+  // Theme
   setTheme = 'SET_THEME',
+  // Apps
   getApps = 'GET_APPS',
   getAppsSuccess = 'GET_APPS_SUCCESS',
   getAppsError = 'GET_APPS_ERROR',
@@ -18,9 +25,24 @@ export enum ActionTypes {
   addAppSuccess = 'ADD_APP_SUCCESS',
   deleteApp = 'DELETE_APP',
   updateApp = 'UPDATE_APP',
+  // Categories
   getCategories = 'GET_CATEGORIES',
   getCategoriesSuccess = 'GET_CATEGORIES_SUCCESS',
-  getCategoriesError = 'GET_CATEGORIES_ERROR'
+  getCategoriesError = 'GET_CATEGORIES_ERROR',
+  addCategory = 'ADD_CATEGORY',
+  addBookmark = 'ADD_BOOKMARK'
 }
 
-export type Action = GetAppsAction<any> | SetThemeAction | PinAppAction | AddAppAction | DeleteAppAction | UpdateAppAction | GetCategoriesAction<any>;
+export type Action = 
+  // Theme
+  SetThemeAction |
+  // Apps
+  GetAppsAction<any> |
+  PinAppAction |
+  AddAppAction |
+  DeleteAppAction |
+  UpdateAppAction |
+  // Categories
+  GetCategoriesAction<any> |
+  AddCategoryAction |
+  AddBookmarkAction;

client/src/store/actions/bookmark.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Dispatch } from 'redux';
 import { ActionTypes } from './actionTypes';
-import { Category, ApiResponse } from '../../interfaces';
+import { Category, ApiResponse, NewCategory, Bookmark, NewBookmark } from '../../interfaces';
 
 export interface GetCategoriesAction<T> {
   type: ActionTypes.getCategories | ActionTypes.getCategoriesSuccess | ActionTypes.getCategoriesError;
@@ -24,4 +24,40 @@ export const getCategories = () => async (dispatch: Dispatch) => {
   } catch (err) {
     console.log(err);
   }
+}
+
+export interface AddCategoryAction {
+  type: ActionTypes.addCategory,
+  payload: Category
+}
+
+export const addCategory = (formData: NewCategory) => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.post<ApiResponse<Category>>('/api/categories', formData);
+
+    dispatch<AddCategoryAction>({
+      type: ActionTypes.addCategory,
+      payload: res.data.data
+    })
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+export interface AddBookmarkAction {
+  type: ActionTypes.addBookmark,
+  payload: Bookmark
+}
+
+export const addBookmark = (formData: NewBookmark) => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.post<ApiResponse<Bookmark>>('/api/bookmarks', formData);
+
+    dispatch<AddBookmarkAction>({
+      type: ActionTypes.addBookmark,
+      payload: res.data.data
+    })
+  } catch (err) {
+    console.log(err);
+  }
 }

client/src/store/reducers/bookmark.ts

@@ -27,12 +27,40 @@ const getCategoriesSuccess = (state: State, action: Action): State => {
     loading: false,
     categories: action.payload
   }
-} 
+}
+
+const addCategory = (state: State, action: Action): State => {
+  const tmpCategories = [...state.categories, {
+    ...action.payload,
+    bookmarks: []
+  }];
+
+  return {
+    ...state,
+    categories: tmpCategories
+  }
+}
+
+const addBookmark = (state: State, action: Action): State => {
+  const tmpCategories = [...state.categories];
+  const tmpCategory = tmpCategories.find((category: Category) => category.id === action.payload.categoryId);
+
+  if (tmpCategory) {
+    tmpCategory.bookmarks.push(action.payload);
+  }
+
+  return {
+    ...state,
+    categories: tmpCategories
+  }
+}
 
 const bookmarkReducer = (state = initialState, action: Action) => {
   switch (action.type) {
     case ActionTypes.getCategories: return getCategories(state, action);
     case ActionTypes.getCategoriesSuccess: return getCategoriesSuccess(state, action);
+    case ActionTypes.addCategory: return addCategory(state, action);
+    case ActionTypes.addBookmark: return addBookmark(state, action);
     default: return state;
   }
 }