Sorting settings. Sort apps on change/add/update

client/src/store/actions/actionTypes.ts

@@ -7,7 +7,8 @@ import {
   AddAppAction,
   DeleteAppAction,
   UpdateAppAction,
-  ReorderAppAction,
+  ReorderAppsAction,
+  SortAppsAction,
   // Categories
   GetCategoriesAction,
   AddCategoryAction,
@@ -38,7 +39,8 @@ export enum ActionTypes {
   addAppSuccess = 'ADD_APP_SUCCESS',
   deleteApp = 'DELETE_APP',
   updateApp = 'UPDATE_APP',
-  reorderApp = 'REORDER_APP',
+  reorderApps = 'REORDER_APPS',
+  sortApps = 'SORT_APPS',
   // Categories
   getCategories = 'GET_CATEGORIES',
   getCategoriesSuccess = 'GET_CATEGORIES_SUCCESS',
@@ -68,7 +70,8 @@ export type Action =
   AddAppAction |
   DeleteAppAction |
   UpdateAppAction |
-  ReorderAppAction |
+  ReorderAppsAction |
+  SortAppsAction |
   // Categories
   GetCategoriesAction<any> |
   AddCategoryAction |

client/src/store/actions/app.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Dispatch } from 'redux';
 import { ActionTypes } from './actionTypes';
-import { App, ApiResponse, NewApp } from '../../interfaces';
+import { App, ApiResponse, NewApp, Config } from '../../interfaces';
 import { CreateNotificationAction } from './notification';
 
 export interface GetAppsAction<T> {
@@ -73,10 +73,13 @@ export const addApp = (formData: NewApp) => async (dispatch: Dispatch) => {
       }
     })
 
-    dispatch<AddAppAction>({
+    await dispatch<AddAppAction>({
       type: ActionTypes.addAppSuccess,
       payload: res.data.data
     })
+
+    // Sort apps
+    dispatch<any>(sortApps())
   } catch (err) {
     console.log(err);
   }
@@ -125,17 +128,20 @@ export const updateApp = (id: number, formData: NewApp) => async (dispatch: Disp
       }
     })
 
-    dispatch<UpdateAppAction>({
+    await dispatch<UpdateAppAction>({
       type: ActionTypes.updateApp,
       payload: res.data.data
     })
+
+    // Sort apps
+    dispatch<any>(sortApps())
   } catch (err) {
     console.log(err);
   }
 }
 
-export interface ReorderAppAction {
-  type: ActionTypes.reorderApp;
+export interface ReorderAppsAction {
+  type: ActionTypes.reorderApps;
   payload: App[]
 }
 
@@ -146,7 +152,7 @@ interface ReorderQuery {
   }[]
 }
 
-export const reorderApp = (apps: App[]) => async (dispatch: Dispatch) => {
+export const reorderApps = (apps: App[]) => async (dispatch: Dispatch) => {
   try {
     const updateQuery: ReorderQuery = { apps: [] }
 
@@ -157,11 +163,39 @@ export const reorderApp = (apps: App[]) => async (dispatch: Dispatch) => {
 
     await axios.put<{}>('/api/apps/0/reorder', updateQuery);
 
-    dispatch<ReorderAppAction>({
-      type: ActionTypes.reorderApp,
+    dispatch<CreateNotificationAction>({
+      type: ActionTypes.createNotification,
+      payload: {
+        title: 'Success',
+        message: 'New order saved'
+      }
+    })
+
+    dispatch<ReorderAppsAction>({
+      type: ActionTypes.reorderApps,
       payload: apps
     })
   } catch (err) {
     console.log(err);
   }
+}
+
+export interface SortAppsAction {
+  type: ActionTypes.sortApps;
+  payload: {};
+}
+
+export const sortApps = () => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering');
+
+    console.log(res.data.data);
+
+    dispatch<SortAppsAction>({
+      type: ActionTypes.sortApps,
+      payload: res.data.data.value
+    })
+  } catch (err) {
+    console.log(err);
+  }
 }

client/src/store/reducers/app.ts

@@ -1,5 +1,6 @@
 import { ActionTypes, Action } from '../actions';
 import { App } from '../../interfaces/App';
+import { sortData } from '../../utility';
 
 export interface State {
   loading: boolean;
@@ -52,15 +53,9 @@ const pinApp = (state: State, action: Action): State => {
 }
 
 const addAppSuccess = (state: State, action: Action): State => {
-  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
+    apps: [...state.apps, action.payload]
   }
 }
 
@@ -89,13 +84,22 @@ const updateApp = (state: State, action: Action): State => {
   }
 }
 
-const reorderApp = (state: State, action: Action): State => {
+const reorderApps = (state: State, action: Action): State => {
   return {
     ...state,
     apps: action.payload
   }
 }
 
+const sortApps = (state: State, action: Action): State => {
+  const sortedApps = sortData<App>(state.apps, action.payload);
+
+  return {
+    ...state,
+    apps: sortedApps
+  }
+}
+
 const appReducer = (state = initialState, action: Action) => {
   switch (action.type) {
     case ActionTypes.getApps: return getApps(state, action);
@@ -105,7 +109,8 @@ 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);
+    case ActionTypes.reorderApps: return reorderApps(state, action);
+    case ActionTypes.sortApps: return sortApps(state, action);
     default: return state;
   }
 }