Updating categories using form

client/src/store/actions/actionTypes.ts

@@ -13,6 +13,7 @@ import {
   AddBookmarkAction,
   PinCategoryAction,
   DeleteCategoryAction,
+  UpdateCategoryAction,
   // Notifications
   CreateNotificationAction,
   ClearNotificationAction
@@ -38,6 +39,7 @@ export enum ActionTypes {
   addBookmark = 'ADD_BOOKMARK',
   pinCategory = 'PIN_CATEGORY',
   deleteCategory = 'DELETE_CATEGORY',
+  updateCategory = 'UPDATE_CATEGORY',
   // Notifications
   createNotification = 'CREATE_NOTIFICATION',
   clearNotification = 'CLEAR_NOTIFICATION'
@@ -58,6 +60,7 @@ export type Action =
   AddBookmarkAction |
   PinCategoryAction |
   DeleteCategoryAction |
+  UpdateCategoryAction |
   // Notifications
   CreateNotificationAction |
   ClearNotificationAction;

client/src/store/actions/bookmark.ts

@@ -147,4 +147,33 @@ export const deleteCategory = (id: number) => async (dispatch: Dispatch) => {
   } catch (err) {
     console.log(err);
   }
+}
+
+/**
+ * UPDATE CATEGORY
+ */
+export interface UpdateCategoryAction {
+  type: ActionTypes.updateCategory,
+  payload: Category
+}
+
+export const updateCategory = (id: number, formData: NewCategory) => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.put<ApiResponse<Category>>(`/api/categories/${id}`, formData);
+
+    dispatch<CreateNotificationAction>({
+      type: ActionTypes.createNotification,
+      payload: {
+        title: 'Success',
+        message: `Category ${formData.name} updated`
+      }
+    })
+
+    dispatch<UpdateCategoryAction>({
+      type: ActionTypes.updateCategory,
+      payload: res.data.data
+    })
+  } catch (err) {
+    console.log(err);
+  }
 }

client/src/store/reducers/bookmark.ts

@@ -78,6 +78,20 @@ const deleteCategory = (state: State, action: Action): State => {
   }
 }
 
+const updateCategory = (state: State, action: Action): State => {
+  const tmpCategories = [...state.categories];
+  const categoryInUpdate = tmpCategories.find((category: Category) => category.id === action.payload.id);
+
+  if (categoryInUpdate) {
+    categoryInUpdate.name = action.payload.name;
+  }
+
+  return {
+    ...state,
+    categories: tmpCategories
+  }
+}
+
 const bookmarkReducer = (state = initialState, action: Action) => {
   switch (action.type) {
     case ActionTypes.getCategories: return getCategories(state, action);
@@ -86,6 +100,7 @@ const bookmarkReducer = (state = initialState, action: Action) => {
     case ActionTypes.addBookmark: return addBookmark(state, action);
     case ActionTypes.pinCategory: return pinCategory(state, action);
     case ActionTypes.deleteCategory: return deleteCategory(state, action);
+    case ActionTypes.updateCategory: return updateCategory(state, action);
     default: return state;
   }
 }