Added App Edit Functionality

client/src/store/actions/actionTypes.ts

@@ -3,7 +3,8 @@ import {
   SetThemeAction,
   PinAppAction,
   AddAppAction,
-  DeleteAppAction
+  DeleteAppAction,
+  UpdateAppAction
 } from './';
 
 export enum ActionTypes {
@@ -14,7 +15,8 @@ export enum ActionTypes {
   pinApp = 'PIN_APP',
   addApp = 'ADD_APP',
   addAppSuccess = 'ADD_APP_SUCCESS',
-  deleteApp = 'DELETE_APP'
+  deleteApp = 'DELETE_APP',
+  updateApp = 'UPDATE_APP'
 }
 
-export type Action = GetAppsAction<any> | SetThemeAction | PinAppAction | AddAppAction | DeleteAppAction;
+export type Action = GetAppsAction<any> | SetThemeAction | PinAppAction | AddAppAction | DeleteAppAction | UpdateAppAction;

client/src/store/actions/app.ts

@@ -81,4 +81,22 @@ export const deleteApp = (id: number) => async (dispatch: Dispatch) => {
   } catch (err) {
     console.log(err);
   }
+}
+
+export interface UpdateAppAction {
+  type: ActionTypes.updateApp;
+  payload: App;
+}
+
+export const updateApp = (id: number, formData: NewApp) => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.put<ApiResponse<App>>(`/api/apps/${id}`, formData);
+
+    dispatch<UpdateAppAction>({
+      type: ActionTypes.updateApp,
+      payload: res.data.data
+    })
+  } catch (err) {
+    console.log(err);
+  }
 }

client/src/store/reducers/app.ts

@@ -69,6 +69,22 @@ const deleteApp = (state: State, action: Action): State => {
   }
 }
 
+const updateApp = (state: State, action: Action): State => {
+  const tmpApps = [...state.apps];
+  const appInUpdate = tmpApps.find((app: App) => app.id === action.payload.id);
+
+  if (appInUpdate) {
+    appInUpdate.name = action.payload.name;
+    appInUpdate.url = action.payload.url;
+    appInUpdate.icon = action.payload.icon;
+  }
+
+  return {
+    ...state,
+    apps: tmpApps
+  }
+}
+
 const appReducer = (state = initialState, action: Action) => {
   switch (action.type) {
     case ActionTypes.getApps: return getApps(state, action);
@@ -77,6 +93,7 @@ const appReducer = (state = initialState, action: Action) => {
     case ActionTypes.pinApp: return pinApp(state, action);
     case ActionTypes.addAppSuccess: return addAppSuccess(state, action);
     case ActionTypes.deleteApp: return deleteApp(state, action);
+    case ActionTypes.updateApp: return updateApp(state, action);
     default: return state;
   }
 }