Pin/Delete category

client/src/store/actions/actionTypes.ts

@@ -11,6 +11,8 @@ import {
   GetCategoriesAction,
   AddCategoryAction,
   AddBookmarkAction,
+  PinCategoryAction,
+  DeleteCategoryAction,
   // Notifications
   CreateNotificationAction,
   ClearNotificationAction
@@ -34,6 +36,8 @@ export enum ActionTypes {
   getCategoriesError = 'GET_CATEGORIES_ERROR',
   addCategory = 'ADD_CATEGORY',
   addBookmark = 'ADD_BOOKMARK',
+  pinCategory = 'PIN_CATEGORY',
+  deleteCategory = 'DELETE_CATEGORY',
   // Notifications
   createNotification = 'CREATE_NOTIFICATION',
   clearNotification = 'CLEAR_NOTIFICATION'
@@ -52,6 +56,8 @@ export type Action =
   GetCategoriesAction<any> |
   AddCategoryAction |
   AddBookmarkAction |
+  PinCategoryAction |
+  DeleteCategoryAction |
   // Notifications
   CreateNotificationAction |
   ClearNotificationAction;

client/src/store/actions/bookmark.ts

@@ -4,6 +4,9 @@ import { ActionTypes } from './actionTypes';
 import { Category, ApiResponse, NewCategory, Bookmark, NewBookmark } from '../../interfaces';
 import { CreateNotificationAction } from './notification';
 
+/**
+ * GET CATEGORIES
+ */
 export interface GetCategoriesAction<T> {
   type: ActionTypes.getCategories | ActionTypes.getCategoriesSuccess | ActionTypes.getCategoriesError;
   payload: T;
@@ -27,6 +30,9 @@ export const getCategories = () => async (dispatch: Dispatch) => {
   }
 }
 
+/**
+ * ADD CATEGORY
+ */
 export interface AddCategoryAction {
   type: ActionTypes.addCategory,
   payload: Category
@@ -53,6 +59,9 @@ export const addCategory = (formData: NewCategory) => async (dispatch: Dispatch)
   }
 }
 
+/**
+ * ADD BOOKMARK
+ */
 export interface AddBookmarkAction {
   type: ActionTypes.addBookmark,
   payload: Bookmark
@@ -77,4 +86,65 @@ export const addBookmark = (formData: NewBookmark) => async (dispatch: Dispatch)
   } catch (err) {
     console.log(err);
   }
+}
+
+/**
+ * PIN CATEGORY
+ */
+export interface PinCategoryAction {
+  type: ActionTypes.pinCategory,
+  payload: Category
+}
+
+export const pinCategory = (category: Category) => async (dispatch: Dispatch) => {
+  try {
+    const { id, isPinned, name } = category;
+    const res = await axios.put<ApiResponse<Category>>(`/api/categories/${id}`, { isPinned: !isPinned });
+
+    const status = isPinned ? 'unpinned from Homescreen' : 'pinned to Homescreen';
+
+    dispatch<CreateNotificationAction>({
+      type: ActionTypes.createNotification,
+      payload: {
+        title: 'Success',
+        message: `Category ${name} ${status}`
+      }
+    })
+
+    dispatch<PinCategoryAction>({
+      type: ActionTypes.pinCategory,
+      payload: res.data.data
+    })
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+/**
+ * DELETE CATEGORY
+ */
+export interface DeleteCategoryAction {
+  type: ActionTypes.deleteCategory,
+  payload: number
+}
+
+export const deleteCategory = (id: number) => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.delete<ApiResponse<{}>>(`/api/categories/${id}`);
+
+    dispatch<CreateNotificationAction>({
+      type: ActionTypes.createNotification,
+      payload: {
+        title: 'Success',
+        message: `Category deleted`
+      }
+    })
+
+    dispatch<DeleteCategoryAction>({
+      type: ActionTypes.deleteCategory,
+      payload: id
+    })
+  } catch (err) {
+    console.log(err);
+  }
 }

client/src/store/reducers/bookmark.ts

@@ -55,12 +55,37 @@ const addBookmark = (state: State, action: Action): State => {
   }
 }
 
+const pinCategory = (state: State, action: Action): State => {
+  const tmpCategories = [...state.categories];
+  const changedCategory = tmpCategories.find((category: Category) => category.id === action.payload.id);
+
+  if (changedCategory) {
+    changedCategory.isPinned = action.payload.isPinned;
+  }
+
+  return {
+    ...state,
+    categories: tmpCategories
+  }
+}
+
+const deleteCategory = (state: State, action: Action): State => {
+  const tmpCategories = [...state.categories].filter((category: Category) => category.id !== 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);
+    case ActionTypes.pinCategory: return pinCategory(state, action);
+    case ActionTypes.deleteCategory: return deleteCategory(state, action);
     default: return state;
   }
 }