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 => {

client/src/components/Bookmarks/BookmarkForm/BookmarkForm.tsx

@@ -37,13 +37,13 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
   const [useCustomIcon, setUseCustomIcon] = useState<boolean>(false);
   const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [categoryData, setCategoryData] = useState<NewCategory>({
-    name: "",
-    type: "bookmarks",
+    name: '',
+    type: 'bookmarks',
   });
 
   const [bookmarkData, setBookmarkData] = useState<NewBookmark>({
-    name: "",
-    url: "",
+    name: '',
+    url: '',
     categoryId: -1,
     icon: '',
   });
@@ -53,7 +53,7 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
     if (props.category) {
       setCategoryData({ name: props.category.name, type: props.category.type });
     } else {
-      setCategoryData({ name: "", type: "bookmarks" });
+      setCategoryData({ name: '', type: 'bookmarks' });
     }
   }, [props.category]);
 
@@ -68,8 +68,8 @@ const BookmarkForm = (props: ComponentProps): JSX.Element => {
       });
     } else {
       setBookmarkData({
-        name: "",
-        url: "",
+        name: '',
+        url: '',
         categoryId: -1,
         icon: '',
       });

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

@@ -232,7 +232,7 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
       <Fragment>
         <div className={classes.Message}>
           {isCustomOrder ? (
-            <p>You can drag and drop single rows to reorder bookmarklication</p>
+            <p>You can drag and drop single rows to reorder bookmark</p>
           ) : (
             <p>
               Custom order is disabled. You can change it in{" "}

client/src/components/Home/Home.tsx

@@ -59,6 +59,13 @@ const Home = (props: ComponentProps): JSX.Element => {
     }
   }, [getAppCategories]);
 
+  // Load app categories
+  useEffect(() => {
+    if (appCategories.length === 0) {
+      getAppCategories();
+    }
+  }, [getAppCategories]);
+
   // Load apps
   useEffect(() => {
     if (apps.length === 0) {

client/src/store/reducers/app.ts

@@ -245,6 +245,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 {