Apps reordering. Sorting apps while adding them

client/src/store/actions/actionTypes.ts

@@ -7,6 +7,7 @@ import {
   AddAppAction,
   DeleteAppAction,
   UpdateAppAction,
+  ReorderAppAction,
   // Categories
   GetCategoriesAction,
   AddCategoryAction,
@@ -37,6 +38,7 @@ export enum ActionTypes {
   addAppSuccess = 'ADD_APP_SUCCESS',
   deleteApp = 'DELETE_APP',
   updateApp = 'UPDATE_APP',
+  reorderApp = 'REORDER_APP',
   // Categories
   getCategories = 'GET_CATEGORIES',
   getCategoriesSuccess = 'GET_CATEGORIES_SUCCESS',
@@ -66,6 +68,7 @@ export type Action =
   AddAppAction |
   DeleteAppAction |
   UpdateAppAction |
+  ReorderAppAction |
   // Categories
   GetCategoriesAction<any> |
   AddCategoryAction |

client/src/store/actions/app.ts

@@ -132,4 +132,36 @@ export const updateApp = (id: number, formData: NewApp) => async (dispatch: Disp
   } catch (err) {
     console.log(err);
   }
+}
+
+export interface ReorderAppAction {
+  type: ActionTypes.reorderApp;
+  payload: App[]
+}
+
+interface ReorderQuery {
+  apps: {
+    id: number;
+    orderId: number;
+  }[]
+}
+
+export const reorderApp = (apps: App[]) => async (dispatch: Dispatch) => {
+  try {
+    const updateQuery: ReorderQuery = { apps: [] }
+
+    apps.forEach((app, index) => updateQuery.apps.push({
+      id: app.id,
+      orderId: index + 1
+    }))
+
+    await axios.put<{}>('/api/apps/0/reorder', updateQuery);
+
+    dispatch<ReorderAppAction>({
+      type: ActionTypes.reorderApp,
+      payload: apps
+    })
+  } catch (err) {
+    console.log(err);
+  }
 }

client/src/store/reducers/app.ts

@@ -52,8 +52,12 @@ const pinApp = (state: State, action: Action): State => {
 }
 
 const addAppSuccess = (state: State, action: Action): State => {
-  const tmpApps = [...state.apps, action.payload];
-
+  const tmpApps: App[] = [...state.apps, action.payload].sort((a: App, b: App) => {
+    if (a.name.toLowerCase() < b.name.toLowerCase()) { return -1 }
+    if (a.name.toLowerCase() > b.name.toLowerCase()) { return 1 }
+    return 0;
+  });
+  
   return {
     ...state,
     apps: tmpApps
@@ -85,6 +89,13 @@ const updateApp = (state: State, action: Action): State => {
   }
 }
 
+const reorderApp = (state: State, action: Action): State => {
+  return {
+    ...state,
+    apps: action.payload
+  }
+}
+
 const appReducer = (state = initialState, action: Action) => {
   switch (action.type) {
     case ActionTypes.getApps: return getApps(state, action);
@@ -94,6 +105,7 @@ const appReducer = (state = initialState, action: Action) => {
     case ActionTypes.addAppSuccess: return addAppSuccess(state, action);
     case ActionTypes.deleteApp: return deleteApp(state, action);
     case ActionTypes.updateApp: return updateApp(state, action);
+    case ActionTypes.reorderApp: return reorderApp(state, action);
     default: return state;
   }
 }