Functionality to delete and edit custom themes

client/src/store/action-creators/theme.ts

@@ -1,8 +1,11 @@
 import { Dispatch } from 'redux';
 import {
   AddThemeAction,
+  DeleteThemeAction,
+  EditThemeAction,
   FetchThemesAction,
   SetThemeAction,
+  UpdateThemeAction,
 } from '../actions/theme';
 import { ActionType } from '../action-types';
 import { Theme, ApiResponse, ThemeColors } from '../../interfaces';
@@ -71,3 +74,54 @@ export const addTheme =
       });
     }
   };
+
+export const deleteTheme =
+  (name: string) => async (dispatch: Dispatch<DeleteThemeAction>) => {
+    try {
+      const res = await axios.delete<ApiResponse<Theme[]>>(
+        `/api/themes/${name}`,
+        { headers: applyAuth() }
+      );
+
+      dispatch({
+        type: ActionType.deleteTheme,
+        payload: res.data.data,
+      });
+
+      dispatch<any>({
+        type: ActionType.createNotification,
+        payload: {
+          title: 'Success',
+          message: 'Theme deleted',
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+export const editTheme =
+  (theme: Theme | null) => (dispatch: Dispatch<EditThemeAction>) => {
+    dispatch({
+      type: ActionType.editTheme,
+      payload: theme,
+    });
+  };
+
+export const updateTheme =
+  (theme: Theme) => async (dispatch: Dispatch<UpdateThemeAction>) => {
+    try {
+      const res = await axios.put<ApiResponse<Theme[]>>(
+        `/api/themes/${theme.name}`,
+        theme,
+        { headers: applyAuth() }
+      );
+
+      dispatch({
+        type: ActionType.updateTheme,
+        payload: res.data.data,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };

client/src/store/action-types/index.ts

@@ -3,6 +3,9 @@ export enum ActionType {
   setTheme = 'SET_THEME',
   fetchThemes = 'FETCH_THEMES',
   addTheme = 'ADD_THEME',
+  deleteTheme = 'DELETE_THEME',
+  updateTheme = 'UPDATE_THEME',
+  editTheme = 'EDIT_THEME',
   // CONFIG
   getConfig = 'GET_CONFIG',
   updateConfig = 'UPDATE_CONFIG',

client/src/store/actions/index.ts

@@ -1,6 +1,13 @@
 import { App } from '../../interfaces';
 
-import { SetThemeAction } from './theme';
+import {
+  AddThemeAction,
+  DeleteThemeAction,
+  EditThemeAction,
+  FetchThemesAction,
+  SetThemeAction,
+  UpdateThemeAction,
+} from './theme';
 
 import {
   AddQueryAction,
@@ -54,6 +61,11 @@ import {
 export type Action =
   // Theme
   | SetThemeAction
+  | FetchThemesAction
+  | AddThemeAction
+  | DeleteThemeAction
+  | UpdateThemeAction
+  | EditThemeAction
   // Config
   | GetConfigAction
   | UpdateConfigAction

client/src/store/actions/theme.ts

@@ -15,3 +15,18 @@ export interface AddThemeAction {
   type: ActionType.addTheme;
   payload: Theme;
 }
+
+export interface DeleteThemeAction {
+  type: ActionType.deleteTheme;
+  payload: Theme[];
+}
+
+export interface UpdateThemeAction {
+  type: ActionType.updateTheme;
+  payload: Theme[];
+}
+
+export interface EditThemeAction {
+  type: ActionType.editTheme;
+  payload: Theme | null;
+}

client/src/store/reducers/theme.ts

@@ -1,12 +1,13 @@
 import { Action } from '../actions';
 import { ActionType } from '../action-types';
-import { Theme, ThemeColors } from '../../interfaces/Theme';
+import { Theme } from '../../interfaces/Theme';
 import { arrayPartition, parsePABToTheme } from '../../utility';
 
 interface ThemeState {
   activeTheme: Theme;
   themes: Theme[];
   userThemes: Theme[];
+  themeInEdit: Theme | null;
 }
 
 const savedTheme = localStorage.theme
@@ -23,6 +24,7 @@ const initialState: ThemeState = {
   },
   themes: [],
   userThemes: [],
+  themeInEdit: null,
 };
 
 export const themeReducer = (
@@ -60,6 +62,27 @@ export const themeReducer = (
       };
     }
 
+    case ActionType.deleteTheme: {
+      return {
+        ...state,
+        userThemes: action.payload,
+      };
+    }
+
+    case ActionType.editTheme: {
+      return {
+        ...state,
+        themeInEdit: action.payload,
+      };
+    }
+
+    case ActionType.updateTheme: {
+      return {
+        ...state,
+        userThemes: action.payload,
+      };
+    }
+
     default:
       return state;
   }