Add app categories (#2)

add app categories

client/src/components/Apps/Apps.tsx

@@ -25,7 +25,7 @@ interface ComponentProps {
 
 export enum ContentType {
   category,
-  app,
+  app
 }
 
 const Apps = (props: ComponentProps): JSX.Element => {
@@ -34,26 +34,24 @@ const Apps = (props: ComponentProps): JSX.Element => {
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [formContentType, setFormContentType] = useState(ContentType.category);
   const [isInEdit, setIsInEdit] = useState(false);
-  const [tableContentType, setTableContentType] = useState(
-    ContentType.category
-  );
+  const [tableContentType, setTableContentType] = useState(ContentType.category);
   const [isInUpdate, setIsInUpdate] = useState(false);
   const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
-    name: "",
+    name: '',
     id: -1,
     isPinned: false,
     orderId: 0,
-    type: "apps",
+    type: 'apps',
     apps: [],
     bookmarks: [],
     createdAt: new Date(),
-    updatedAt: new Date(),
-  });
+    updatedAt: new Date()
+  })
   const [appInUpdate, setAppInUpdate] = useState<App>({
-    name: "string",
-    url: "string",
+    name: 'string',
+    url: 'string',
     categoryId: -1,
-    icon: "string",
+    icon: 'string',
     isPinned: false,
     orderId: 0,
     id: 0,

client/src/components/Bookmarks/BookmarkTable/BookmarkTable.tsx

@@ -191,9 +191,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
                                   </div>
                                   <div
                                     className={classes.TableAction}
-                                    onClick={() =>
-                                      props.pinBookmarkCategory(category)
-                                    }
+                                    onClick={() => props.pinBookmarkCategory(category)}
                                     onKeyDown={(e) =>
                                       keyboardActionHandler(
                                         e,

client/src/store/actions/app.ts

@@ -138,30 +138,29 @@ export interface AddAppAction {
   payload: App;
 }
 
-export const addApp =
-  (formData: NewApp | FormData) => async (dispatch: Dispatch) => {
-    try {
-      const res = await axios.post<ApiResponse<App>>("/api/apps", formData);
+export const addApp = (formData: NewApp | FormData) => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.post<ApiResponse<App>>("/api/apps", formData);
 
-      dispatch<CreateNotificationAction>({
-        type: ActionTypes.createNotification,
-        payload: {
-          title: "Success",
-          message: `App ${res.data.data.name} added`,
-        },
-      });
+    dispatch<CreateNotificationAction>({
+      type: ActionTypes.createNotification,
+      payload: {
+        title: "Success",
+        message: `App ${res.data.data.name} added`,
+      },
+    });
 
-      await dispatch<AddAppAction>({
-        type: ActionTypes.addAppSuccess,
-        payload: res.data.data,
-      });
+    await dispatch<AddAppAction>({
+      type: ActionTypes.addAppSuccess,
+      payload: res.data.data,
+    });
 
-      // Sort apps
-      dispatch<any>(sortApps());
-    } catch (err) {
-      console.log(err);
-    }
-  };
+    // Sort apps
+    dispatch<any>(sortApps());
+  } catch (err) {
+    console.log(err);
+  }
+};
 
 /**
  * PIN CATEGORY

client/src/store/reducers/app.ts

@@ -88,9 +88,7 @@ const pinCategory = (state: State, action: Action): State => {
 
 const pinApp = (state: State, action: Action): State => {
   const tmpApps = [...state.apps];
-  const changedApp = tmpApps.find(
-    (app: App) => app.id === action.payload.id
-  );
+  const changedApp = tmpApps.find((app: App) => app.id === action.payload.id);
 
   if (changedApp) {
     changedApp.isPinned = action.payload.isPinned;
@@ -245,6 +243,16 @@ const reorderApps = (state: State, action: Action): State => {
 };
 
 const sortApps = (state: State, action: Action): State => {
+  // const tmpCategories = [...state.categories];
+
+  // tmpCategories.forEach((category: Category) => {
+  //   category.apps = sortData<App>(category.apps, action.payload);
+  // });
+
+  // return {
+  //   ...state,
+  //   categories: tmpCategories,
+  // };
   const sortedApps = sortData<App>(state.apps, action.payload);
 
   return {