add bookmark sorting (#3)

client/src/components/Apps/AppGrid/AppGrid.tsx

@@ -6,7 +6,7 @@ import classes from './AppGrid.module.css';
 
 interface ComponentProps {
   categories: Category[];
-  apps: App[]
+  apps: App[];
   totalCategories?: number;
   searching: boolean;
 }

client/src/components/Apps/AppTable/AppTable.tsx

@@ -29,7 +29,7 @@ interface ComponentProps {
   reorderAppCategories: (categories: Category[]) => void;
   updateHandler: (data: Category | App) => void;
   pinApp: (app: App) => void;
-  deleteApp: (id: number) => void;
+  deleteApp: (id: number, categoryId: number) => void;
   reorderApps: (apps: App[]) => void;
   updateConfig: (formData: any) => void;
   createNotification: (notification: NewNotification) => void;
@@ -75,7 +75,7 @@ const AppTable = (props: ComponentProps): JSX.Element => {
     );
 
     if (proceed) {
-      props.deleteApp(app.id);
+      props.deleteApp(app.id, app.categoryId);
     }
   };
 

client/src/components/Apps/Apps.tsx

@@ -25,23 +25,18 @@ interface ComponentProps {
 
 export enum ContentType {
   category,
-  app
+  app,
 }
 
 const Apps = (props: ComponentProps): JSX.Element => {
-  const {
+  const { apps, getApps, getAppCategories, categories, loading, searching = false } = props;
-    apps,
-    getApps,
-    getAppCategories,
-    categories,
-    loading,
-    searching = false 
-  } = props;
 
   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: "",
@@ -49,10 +44,11 @@ const Apps = (props: ComponentProps): JSX.Element => {
     isPinned: false,
     orderId: 0,
     type: "apps",
+    apps: [],
     bookmarks: [],
     createdAt: new Date(),
-    updatedAt: new Date()
+    updatedAt: new Date(),
-  })
+  });
   const [appInUpdate, setAppInUpdate] = useState<App>({
     name: "string",
     url: "string",
@@ -75,18 +71,17 @@ const Apps = (props: ComponentProps): JSX.Element => {
     if (categories.length === 0) {
       getAppCategories();
     }
-  }, [getAppCategories])
+  }, [getAppCategories]);
 
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);
-    // setIsInUpdate(false);
+  };
-  }
 
   const addActionHandler = (contentType: ContentType) => {
     setFormContentType(contentType);
     setIsInUpdate(false);
     toggleModal();
-  }
+  };
 
   const editActionHandler = (contentType: ContentType) => {
     // We"re in the edit mode and the same button was clicked - go back to list
@@ -96,11 +91,11 @@ const Apps = (props: ComponentProps): JSX.Element => {
       setIsInEdit(true);
       setTableContentType(contentType);
     }
-  }
+  };
 
   const instanceOfCategory = (object: any): object is Category => {
     return "apps" in object;
-  }
+  };
 
   const goToUpdateMode = (data: Category | App): void => {
     setIsInUpdate(true);
@@ -112,7 +107,7 @@ const Apps = (props: ComponentProps): JSX.Element => {
       setAppInUpdate(data);
     }
     toggleModal();
-  }
+  };
 
   return (
     <Container>
@@ -157,7 +152,7 @@ const mapStateToProps = (state: GlobalState) => {
     loading: state.app.loading,
     categories: state.app.categories,
     apps: state.app.apps,
-  }
+  };
-}
+};
 
 export default connect(mapStateToProps, { getApps, getAppCategories })(Apps);

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.tsx

@@ -1,12 +1,14 @@
-import { Bookmark, Category } from '../../../interfaces';
-import classes from './BookmarkCard.module.css';
-
-import Icon from '../../UI/Icons/Icon/Icon';
-import { iconParser, urlParser, searchConfig } from '../../../utility';
 import { Fragment } from 'react';
 
+import { Bookmark, Category } from '../../../interfaces';
+import { iconParser, searchConfig, urlParser } from '../../../utility';
+import Icon from '../../UI/Icons/Icon/Icon';
+import classes from './BookmarkCard.module.css';
+
 interface ComponentProps {
   category: Category;
+  bookmarks: Bookmark[]
+  pinHandler?: Function;
 }
 
 const BookmarkCard = (props: ComponentProps): JSX.Element => {
@@ -14,7 +16,7 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
     <div className={classes.BookmarkCard}>
       <h3>{props.category.name}</h3>
       <div className={classes.Bookmarks}>
-        {props.category.bookmarks.map((bookmark: Bookmark) => {
+        {props.bookmarks.map((bookmark: Bookmark) => {
           const redirectUrl = urlParser(bookmark.url)[1];
 
           let iconEl: JSX.Element = <Fragment></Fragment>;

client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.tsx

@@ -1,11 +1,12 @@
 import { Link } from 'react-router-dom';
 
-import { Category } from '../../../interfaces';
+import { Bookmark, Category } from '../../../interfaces';
 import BookmarkCard from '../BookmarkCard/BookmarkCard';
 import classes from './BookmarkGrid.module.css';
 
 interface ComponentProps {
   categories: Category[];
+  bookmarks: Bookmark[];
   totalCategories?: number;
   searching: boolean;
 }
@@ -25,7 +26,7 @@ const BookmarkGrid = (props: ComponentProps): JSX.Element => {
         <div className={classes.BookmarkGrid}>
           {props.categories.map(
             (category: Category): JSX.Element => (
-              <BookmarkCard category={category} key={category.id} />
+              <BookmarkCard key={category.id} category={category} bookmarks={props.bookmarks.filter( (bookmark: Bookmark) => bookmark.categoryId === category.id)} />
             )
           )}
         </div>

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

@@ -8,8 +8,11 @@ import {
   createNotification,
   deleteBookmark,
   deleteBookmarkCategory,
+  pinBookmark,
   pinBookmarkCategory,
   reorderBookmarkCategories,
+  reorderBookmarks,
+  updateConfig,
 } from '../../../store/actions';
 import { searchConfig } from '../../../utility';
 import Icon from '../../UI/Icons/Icon/Icon';
@@ -20,16 +23,21 @@ import classes from './BookmarkTable.module.css';
 interface ComponentProps {
   contentType: ContentType;
   categories: Category[];
+  bookmarks: Bookmark[];
   pinBookmarkCategory: (category: Category) => void;
   deleteBookmarkCategory: (id: number) => void;
-  updateHandler: (data: Category | Bookmark) => void;
-  deleteBookmark: (bookmarkId: number, categoryId: number) => void;
-  createNotification: (notification: NewNotification) => void;
   reorderBookmarkCategories: (categories: Category[]) => void;
+  updateHandler: (data: Category | Bookmark) => void;
+  pinBookmark: (bookmark: Bookmark) => void;
+  deleteBookmark: (id: number, categoryId: number) => void;
+  reorderBookmarks: (bookmarks: Bookmark[]) => void;
+  updateConfig: (formData: any) => void;
+  createNotification: (notification: NewNotification) => void;
 }
 
 const BookmarkTable = (props: ComponentProps): JSX.Element => {
   const [localCategories, setLocalCategories] = useState<Category[]>([]);
+  const [localBookmarks, setLocalBookmarks] = useState<Bookmark[]>([]);
   const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
 
   // Copy categories array
@@ -37,6 +45,11 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
     setLocalCategories([...props.categories]);
   }, [props.categories]);
 
+  // Copy bookmarks array
+  useEffect(() => {
+    setLocalBookmarks([...props.bookmarks]);
+  }, [props.bookmarks]);
+
   // Check ordering
   useEffect(() => {
     const order = searchConfig("useOrdering", "");
@@ -66,13 +79,14 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
     }
   };
 
+  // Support keyboard navigation for actions
   const keyboardActionHandler = (
     e: KeyboardEvent,
-    category: Category,
+    object: any,
     handler: Function
   ) => {
     if (e.key === "Enter") {
-      handler(category);
+      handler(object);
     }
   };
 
@@ -89,12 +103,21 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
       return;
     }
 
+    if (props.contentType === ContentType.bookmark) {
+      const tmpBookmarks = [...localBookmarks];
+      const [movedBookmark] = tmpBookmarks.splice(result.source.index, 1);
+      tmpBookmarks.splice(result.destination.index, 0, movedBookmark);
+
+      setLocalBookmarks(tmpBookmarks);
+      props.reorderBookmarks(tmpBookmarks);
+    } else if (props.contentType === ContentType.category) {
       const tmpCategories = [...localCategories];
       const [movedCategory] = tmpCategories.splice(result.source.index, 1);
       tmpCategories.splice(result.destination.index, 0, movedCategory);
 
       setLocalCategories(tmpCategories);
       props.reorderBookmarkCategories(tmpCategories);
+    }
   };
 
   if (props.contentType === ContentType.category) {
@@ -168,7 +191,9 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
                                   </div>
                                   <div
                                     className={classes.TableAction}
-                                    onClick={() => props.pinBookmarkCategory(category)}
+                                    onClick={() =>
+                                      props.pinBookmarkCategory(category)
+                                    }
                                     onKeyDown={(e) =>
                                       keyboardActionHandler(
                                         e,
@@ -203,47 +228,132 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
       </Fragment>
     );
   } else {
-    const bookmarks: { bookmark: Bookmark; categoryName: string }[] = [];
+    return (
-    props.categories.forEach((category: Category) => {
+      <Fragment>
-      category.bookmarks.forEach((bookmark: Bookmark) => {
+        <div className={classes.Message}>
-        bookmarks.push({
+          {isCustomOrder ? (
-          bookmark,
+            <p>You can drag and drop single rows to reorder bookmarklication</p>
-          categoryName: category.name,
+          ) : (
-        });
+            <p>
-      });
+              Custom order is disabled. You can change it in{" "}
-    });
+              <Link to="/settings/other">settings</Link>
+            </p>
+          )}
+        </div>
+        <DragDropContext onDragEnd={dragEndHandler}>
+          <Droppable droppableId="bookmarks">
+            {(provided) => (
+              <Table
+                headers={["Name", "URL", "Icon", "Category", "Actions"]}
+                innerRef={provided.innerRef}
+              >
+                {localBookmarks.map(
+                  (bookmark: Bookmark, index): JSX.Element => {
+                    return (
+                      <Draggable
+                        key={bookmark.id}
+                        draggableId={bookmark.id.toString()}
+                        index={index}
+                      >
+                        {(provided, snapshot) => {
+                          const style = {
+                            border: snapshot.isDragging
+                              ? "1px solid var(--color-accent)"
+                              : "none",
+                            borderRadius: "4px",
+                            ...provided.draggableProps.style,
+                          };
+
+                          const category = localCategories.find(
+                            (category: Category) =>
+                              category.id === bookmark.categoryId
+                          );
+                          const categoryName = category?.name;
 
                           return (
-      <Table headers={["Name", "URL", "Icon", "Category", "Actions"]}>
+                            <tr
-        {bookmarks.map(
+                              {...provided.draggableProps}
-          (bookmark: { bookmark: Bookmark; categoryName: string }) => {
+                              {...provided.dragHandleProps}
-            return (
+                              ref={provided.innerRef}
-              <tr key={bookmark.bookmark.id}>
+                              style={style}
-                <td>{bookmark.bookmark.name}</td>
+                            >
-                <td>{bookmark.bookmark.url}</td>
+                              <td style={{ width: "200px" }}>
-                <td>{bookmark.bookmark.icon}</td>
+                                {bookmark.name}
-                <td>{bookmark.categoryName}</td>
+                              </td>
+                              <td style={{ width: "200px" }}>{bookmark.url}</td>
+                              <td style={{ width: "200px" }}>
+                                {bookmark.icon}
+                              </td>
+                              <td style={{ width: "200px" }}>{categoryName}</td>
+                              {!snapshot.isDragging && (
                                 <td className={classes.TableActions}>
                                   <div
                                     className={classes.TableAction}
-                    onClick={() => deleteBookmarkHandler(bookmark.bookmark)}
+                                    onClick={() =>
+                                      deleteBookmarkHandler(bookmark)
+                                    }
+                                    onKeyDown={(e) =>
+                                      keyboardActionHandler(
+                                        e,
+                                        bookmark,
+                                        deleteBookmarkHandler
+                                      )
+                                    }
                                     tabIndex={0}
                                   >
                                     <Icon icon="mdiDelete" />
                                   </div>
                                   <div
                                     className={classes.TableAction}
-                    onClick={() => props.updateHandler(bookmark.bookmark)}
+                                    onClick={() =>
+                                      props.updateHandler(bookmark)
+                                    }
+                                    onKeyDown={(e) =>
+                                      keyboardActionHandler(
+                                        e,
+                                        bookmark,
+                                        props.updateHandler
+                                      )
+                                    }
                                     tabIndex={0}
                                   >
                                     <Icon icon="mdiPencil" />
                                   </div>
+                                  <div
+                                    className={classes.TableAction}
+                                    onClick={() => props.pinBookmark(bookmark)}
+                                    onKeyDown={(e) =>
+                                      keyboardActionHandler(
+                                        e,
+                                        bookmark,
+                                        props.pinBookmark
+                                      )
+                                    }
+                                    tabIndex={0}
+                                  >
+                                    {bookmark.isPinned ? (
+                                      <Icon
+                                        icon="mdiPinOff"
+                                        color="var(--color-accent)"
+                                      />
+                                    ) : (
+                                      <Icon icon="mdiPin" />
+                                    )}
+                                  </div>
                                 </td>
+                              )}
                             </tr>
                           );
+                        }}
+                      </Draggable>
+                    );
                   }
                 )}
               </Table>
+            )}
+          </Droppable>
+        </DragDropContext>
+      </Fragment>
     );
   }
 };
@@ -251,9 +361,12 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
 const actions = {
   pinBookmarkCategory,
   deleteBookmarkCategory,
-  deleteBookmark,
-  createNotification,
   reorderBookmarkCategories,
+  pinBookmark,
+  deleteBookmark,
+  reorderBookmarks,
+  updateConfig,
+  createNotification,
 };
 
 export default connect(null, actions)(BookmarkTable);

client/src/components/Bookmarks/Bookmarks.tsx

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { Bookmark, Category, GlobalState } from '../../interfaces';
-import { getBookmarkCategories } from '../../store/actions';
+import { getBookmarkCategories, getBookmarks } from '../../store/actions';
 import ActionButton from '../UI/Buttons/ActionButton/ActionButton';
 import Headline from '../UI/Headlines/Headline/Headline';
 import { Container } from '../UI/Layout/Layout';
@@ -18,6 +18,8 @@ interface ComponentProps {
   loading: boolean;
   categories: Category[];
   getBookmarkCategories: () => void;
+  bookmarks: Bookmark[];
+  getBookmarks: () => void;
   searching: boolean;
 }
 
@@ -27,7 +29,7 @@ export enum ContentType {
 }
 
 const Bookmarks = (props: ComponentProps): JSX.Element => {
-  const { getBookmarkCategories, categories, loading, searching = false } = props;
+  const { bookmarks, getBookmarks, getBookmarkCategories, categories, loading, searching = false } = props;
 
   const [modalIsOpen, setModalIsOpen] = useState(false);
   const [formContentType, setFormContentType] = useState(ContentType.category);
@@ -37,25 +39,34 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
   );
   const [isInUpdate, setIsInUpdate] = useState(false);
   const [categoryInUpdate, setCategoryInUpdate] = useState<Category>({
-    name: '',
+    name: "",
     id: -1,
     isPinned: false,
     orderId: 0,
-    type: 'bookmarks',
+    type: "bookmarks",
+    apps: [],
     bookmarks: [],
     createdAt: new Date(),
     updatedAt: new Date(),
   });
   const [bookmarkInUpdate, setBookmarkInUpdate] = useState<Bookmark>({
-    name: '',
+    name: "",
-    url: '',
+    url: "",
     categoryId: -1,
-    icon: '',
+    icon: "",
-    id: -1,
+    isPinned: false,
+    orderId: 0,
+    id: 0,
     createdAt: new Date(),
     updatedAt: new Date(),
   });
 
+  useEffect(() => {
+    if (bookmarks.length === 0) {
+      getBookmarks();
+    }
+  }, [getBookmarks]);
+
   useEffect(() => {
     if (categories.length === 0) {
       getBookmarkCategories();
@@ -83,7 +94,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
   };
 
   const instanceOfCategory = (object: any): object is Category => {
-    return 'bookmarks' in object;
+    return "bookmarks" in object;
   };
 
   const goToUpdateMode = (data: Category | Bookmark): void => {
@@ -149,11 +160,12 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
       {loading ? (
         <Spinner />
       ) : !isInEdit ? (
-        <BookmarkGrid categories={categories} searching />
+        <BookmarkGrid categories={categories} bookmarks={bookmarks} searching />
       ) : (
         <BookmarkTable
           contentType={tableContentType}
           categories={categories}
+          bookmarks={bookmarks}
           updateHandler={goToUpdateMode}
         />
       )}
@@ -168,4 +180,4 @@ const mapStateToProps = (state: GlobalState) => {
   };
 };
 
-export default connect(mapStateToProps, { getBookmarkCategories })(Bookmarks);
+export default connect(mapStateToProps, { getBookmarks, getBookmarkCategories })(Bookmarks);

client/src/components/Home/Home.tsx

@@ -2,9 +2,8 @@ import { Fragment, useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { App, Bookmark, Category } from '../../interfaces';
+import { App, Bookmark, Category, GlobalState } from '../../interfaces';
-import { GlobalState } from '../../interfaces/GlobalState';
+import { getAppCategories, getApps, getBookmarkCategories, getBookmarks } from '../../store/actions';
-import { getAppCategories, getApps, getBookmarkCategories } from '../../store/actions';
 import { searchConfig } from '../../utility';
 import AppGrid from '../Apps/AppGrid/AppGrid';
 import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
@@ -21,12 +20,14 @@ import classes from './Home.module.css';
 interface ComponentProps {
   getApps: () => void;
   getAppCategories: () => void;
+  getBookmarks: () => void;
   getBookmarkCategories: () => void;
   appsLoading: boolean;
   bookmarkCategoriesLoading: boolean;
   appCategories: Category[];
   apps: App[];
   bookmarkCategories: Category[];
+  bookmarks: Bookmark[];
 }
 
 const Home = (props: ComponentProps): JSX.Element => {
@@ -34,9 +35,11 @@ const Home = (props: ComponentProps): JSX.Element => {
     getAppCategories,
     getApps,
     getBookmarkCategories,
+    getBookmarks,
     appCategories,
     apps,
     bookmarkCategories,
+    bookmarks,
     appsLoading,
     bookmarkCategoriesLoading,
   } = props;
@@ -70,12 +73,19 @@ const Home = (props: ComponentProps): JSX.Element => {
     }
   }, [getBookmarkCategories]);
 
+  // Load bookmarks
+  useEffect(() => {
+    if (bookmarks.length === 0) {
+      getBookmarks();
+    }
+  }, [getBookmarks]);
+
   // Refresh greeter and time
   useEffect(() => {
     let interval: any;
 
     // Start interval only when hideHeader is false
-    if (searchConfig('hideHeader', 0) !== 1) {
+    if (searchConfig("hideHeader", 0) !== 1) {
       interval = setInterval(() => {
         setHeader({
           dateTime: dateTime(),
@@ -87,12 +97,16 @@ const Home = (props: ComponentProps): JSX.Element => {
     return () => clearInterval(interval);
   }, []);
 
-  // Search bookmarks
+  // Search categories
-  const searchBookmarks = (query: string, categoriesToSearch: Category[]): Category[] => {
+  const searchInCategories = (query: string, categoriesToSearch: Category[]): Category[] => {
     const category: Category = {
       name: "Search Results",
       type: categoriesToSearch[0].type,
       isPinned: true,
+      apps: categoriesToSearch
+        .map((c: Category) => c.apps)
+        .flat()
+        .filter((app: App) => new RegExp(query, 'i').test(app.name)),
       bookmarks: categoriesToSearch
         .map((c: Category) => c.bookmarks)
         .flat()
@@ -136,7 +150,11 @@ const Home = (props: ComponentProps): JSX.Element => {
             <Spinner />
           ) : (
             <AppGrid
-              categories={appCategories.filter((category: Category) => category.isPinned)}
+              categories={
+                  !localSearch
+                    ? appCategories.filter((category: Category) => category.isPinned)
+                    : searchInCategories(localSearch, appCategories)
+              }
               apps={
                 !localSearch
                   ? apps.filter((app: App) => app.isPinned)
@@ -154,7 +172,7 @@ const Home = (props: ComponentProps): JSX.Element => {
         <div></div>
       )}
 
-      {searchConfig('hideCategories', 0) !== 1 ? (
+      {searchConfig('hideBookmarks', 0) !== 1 ? (
         <Fragment>
           <SectionHeadline title="Bookmarks" link="/bookmarks" />
           {bookmarkCategoriesLoading ? (
@@ -164,7 +182,14 @@ const Home = (props: ComponentProps): JSX.Element => {
               categories={
                 !localSearch
                   ? bookmarkCategories.filter((category: Category) => category.isPinned)
-                  : searchBookmarks(localSearch, bookmarkCategories)
+                  : searchInCategories(localSearch, bookmarkCategories)
+              }
+              bookmarks={
+                !localSearch
+                  ? bookmarks.filter((bookmark: Bookmark) => bookmark.isPinned)
+                  : bookmarks.filter((bookmark: Bookmark) =>
+                      new RegExp(localSearch, 'i').test(bookmark.name)
+                    )
               }
               totalCategories={bookmarkCategories.length}
               searching={!!localSearch}
@@ -189,7 +214,8 @@ const mapStateToProps = (state: GlobalState) => {
     apps: state.app.apps,
     bookmarkCategoriesLoading: state.bookmark.loading,
     bookmarkCategories: state.bookmark.categories,
+    bookmarks: state.bookmark.bookmarks,
   }
 }
 
-export default connect(mapStateToProps, { getApps, getAppCategories, getBookmarkCategories })(Home);
+export default connect(mapStateToProps, { getApps, getAppCategories, getBookmarks, getBookmarkCategories })(Home);

client/src/components/Settings/OtherSettings/OtherSettings.tsx

@@ -28,10 +28,11 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
   const [formData, setFormData] = useState<SettingsForm>({
     customTitle: document.title,
     pinAppsByDefault: 1,
+    pinBookmarksByDefault: 1,
     pinCategoriesByDefault: 1,
     hideHeader: 0,
     hideApps: 0,
-    hideCategories: 0,
+    hideBookmarks: 0,
     useOrdering: 'createdAt',
     appsSameTab: 0,
     bookmarksSameTab: 0,
@@ -46,10 +47,11 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
     setFormData({
       customTitle: searchConfig('customTitle', 'Flame'),
       pinAppsByDefault: searchConfig('pinAppsByDefault', 1),
+      pinBookmarksByDefault: searchConfig('pinBookmarksByDefault', 1),
       pinCategoriesByDefault: searchConfig('pinCategoriesByDefault', 1),
       hideHeader: searchConfig('hideHeader', 0),
       hideApps: searchConfig('hideApps', 0),
-      hideCategories: searchConfig('hideCategories', 0),
+      hideBookmarks: searchConfig('hideBookmarks', 0),
       useOrdering: searchConfig('useOrdering', 'createdAt'),
       appsSameTab: searchConfig('appsSameTab', 0),
       bookmarksSameTab: searchConfig('bookmarksSameTab', 0),
@@ -125,6 +127,18 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+      <InputGroup>
+        <label htmlFor="pinBookmarksByDefault">Pin new bookmarks by default</label>
+        <select
+          id="pinBookmarksByDefault"
+          name="pinBookmarksByDefault"
+          value={formData.pinBookmarksByDefault}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
       <InputGroup>
         <label htmlFor="pinCategoriesByDefault">
           Pin new categories by default
@@ -204,11 +218,11 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
         </select>
       </InputGroup>
       <InputGroup>
-        <label htmlFor="hideCategories">Hide categories</label>
+        <label htmlFor="hideBookmarks">Hide bookmarks</label>
         <select
-          id="hideCategories"
+          id="hideBookmarks"
-          name="hideCategories"
+          name="hideBookmarks"
-          value={formData.hideCategories}
+          value={formData.hideBookmarks}
           onChange={(e) => inputChangeHandler(e, true)}
         >
           <option value={1}>True</option>

client/src/interfaces/Bookmark.ts

@@ -5,6 +5,8 @@ export interface Bookmark extends Model {
   url: string;
   categoryId: number;
   icon: string;
+  isPinned: boolean;
+  orderId: number;
 }
 
 export interface NewBookmark {

client/src/interfaces/Category.ts

@@ -1,10 +1,11 @@
-import { Bookmark, Model } from '.';
+import { App, Bookmark, Model } from '.';
 
 export interface Category extends Model {
   name: string;
   type: string;
   isPinned: boolean;
   orderId: number;
+  apps: App[];
   bookmarks: Bookmark[];
 }
 

client/src/interfaces/Forms.ts

@@ -14,10 +14,11 @@ export interface SearchForm {
 export interface SettingsForm {
   customTitle: string;
   pinAppsByDefault: number;
+  pinBookmarksByDefault: number;
   pinCategoriesByDefault: number;
   hideHeader: number;
   hideApps: number;
-  hideCategories: number;
+  hideBookmarks: number;
   // hideSearch: number;
   // defaultSearchProvider: string;
   useOrdering: string;

client/src/store/actions/actionTypes.ts

@@ -12,17 +12,21 @@ import {
   GetAppCategoriesAction,
   GetAppsAction,
   GetBookmarkCategoriesAction,
+  GetBookmarksAction,
   GetConfigAction,
   PinAppAction,
   PinAppCategoryAction,
+  PinBookmarkAction,
   PinBookmarkCategoryAction,
   ReorderAppCategoriesAction,
   ReorderAppsAction,
   ReorderBookmarkCategoriesAction,
+  ReorderBookmarksAction,
   SetThemeAction,
   SortAppCategoriesAction,
   SortAppsAction,
   SortBookmarkCategoriesAction,
+  SortBookmarksAction,
   UpdateAppAction,
   UpdateAppCategoryAction,
   UpdateBookmarkAction,
@@ -66,9 +70,16 @@ export enum ActionTypes {
   sortBookmarkCategories = 'SORT_BOOKMARK_CATEGORIES',
   reorderBookmarkCategories = 'REORDER_BOOKMARK_CATEGORIES',
   // Bookmarks
+  getBookmarks = 'GET_BOOKMARKS',
+  getBookmarksSuccess = 'GET_BOOKMARKS_SUCCESS',
+  getBookmarksError = 'GET_BOOKMARKS_ERROR',
+  pinBookmark = 'PIN_BOOKMARK',
   addBookmark = 'ADD_BOOKMARK',
+  addBookmarkSuccess = 'ADD_BOOKMARK_SUCCESS',
   deleteBookmark = 'DELETE_BOOKMARK',
   updateBookmark = 'UPDATE_BOOKMARK',
+  reorderBookmarks = 'REORDER_BOOKMARKS',
+  sortBookmarks = 'SORT_BOOKMARKS',
   // Notifications
   createNotification = 'CREATE_NOTIFICATION',
   clearNotification = 'CLEAR_NOTIFICATION',
@@ -109,9 +120,13 @@ export type Action =
   | SortBookmarkCategoriesAction
   | ReorderBookmarkCategoriesAction
   // Bookmarks
+  | GetBookmarksAction<any>
+  | PinBookmarkAction
   | AddBookmarkAction
   | DeleteBookmarkAction
   | UpdateBookmarkAction
+  | ReorderBookmarksAction
+  | SortBookmarksAction
   // Notifications
   | CreateNotificationAction
   | ClearNotificationAction

client/src/store/actions/app.ts

@@ -31,11 +31,14 @@ export const getApps = () => async (dispatch: Dispatch) => {
   }
 };
 
+/**
+ * GET CATEGORIES
+ */
 export interface GetAppCategoriesAction<T> {
   type:
     | ActionTypes.getAppCategories
     | ActionTypes.getAppCategoriesSuccess
-    | ActionTypes.getAppCategoriesSuccess;
+    | ActionTypes.getAppCategoriesError;
   payload: T;
 }
 
@@ -59,6 +62,9 @@ export const getAppCategories = () => async (dispatch: Dispatch) => {
   }
 };
 
+/**
+ * ADD CATEGORY
+ */
 export interface AddAppCategoryAction {
   type: ActionTypes.addAppCategory;
   payload: Category;
@@ -124,6 +130,9 @@ export const pinApp = (app: App) => async (dispatch: Dispatch) => {
   }
 };
 
+/**
+ * ADD APP
+ */ 
 export interface AddAppAction {
   type: ActionTypes.addAppSuccess;
   payload: App;
@@ -255,14 +264,21 @@ export const updateAppCategory =
     }
   };
 
+/**
+ * DELETE APP
+ */
 export interface DeleteAppAction {
   type: ActionTypes.deleteApp;
-  payload: number;
+  payload: {
+    appId: number;
+    categoryId: number;
+  };
 }
 
-export const deleteApp = (id: number) => async (dispatch: Dispatch) => {
+export const deleteApp =
+  (appId: number, categoryId: number) => async (dispatch: Dispatch) => {
     try {
-    await axios.delete<ApiResponse<{}>>(`/api/apps/${id}`);
+      await axios.delete<ApiResponse<{}>>(`/api/apps/${appId}`);
 
       dispatch<CreateNotificationAction>({
         type: ActionTypes.createNotification,
@@ -274,22 +290,28 @@ export const deleteApp = (id: number) => async (dispatch: Dispatch) => {
 
       dispatch<DeleteAppAction>({
         type: ActionTypes.deleteApp,
-      payload: id,
+        payload: {
+          appId,
+          categoryId,
+        },
       });
     } catch (err) {
       console.log(err);
     }
   };
 
+/**
+ * UPDATE APP
+ */
 export interface UpdateAppAction {
   type: ActionTypes.updateApp;
   payload: App;
 }
 
-export const updateApp =  (id: number, formData: NewApp | FormData) => async (dispatch: Dispatch) => {
+export const updateApp = (appId: number, formData: NewApp | FormData, previousCategoryId: number) => async (dispatch: Dispatch) => {
     try {
       const res = await axios.put<ApiResponse<App>>(
-        `/api/apps/${id}`,
+        `/api/apps/${appId}`,
         formData
       );
 
@@ -301,13 +323,31 @@ export const updateApp =  (id: number, formData: NewApp | FormData) => async (di
         },
       });
 
-      await dispatch<UpdateAppAction>({
+      // Check if category was changed
+      const categoryWasChanged = res.data.data.categoryId !== previousCategoryId;
+
+      if (categoryWasChanged) {
+        // Delete app from old category
+        dispatch<DeleteAppAction>({
+          type: ActionTypes.deleteApp,
+          payload: {
+            appId,
+            categoryId: previousCategoryId,
+          },
+        });
+
+        // Add app to the new category
+        dispatch<AddAppAction>({
+          type: ActionTypes.addAppSuccess,
+          payload: res.data.data,
+        });
+      } else {
+        // Else update only name/url
+        dispatch<UpdateAppAction>({
           type: ActionTypes.updateApp,
           payload: res.data.data,
         });
-
+      }
-      // Sort apps
-      dispatch<any>(sortApps());
     } catch (err) {
       console.log(err);
     }

client/src/store/actions/bookmark.ts

@@ -5,69 +5,140 @@ import { ApiResponse, Bookmark, Category, Config, NewBookmark, NewCategory } fro
 import { ActionTypes } from './actionTypes';
 import { CreateNotificationAction } from './notification';
 
+export interface GetBookmarksAction<T> {
+  type:
+    | ActionTypes.getBookmarks
+    | ActionTypes.getBookmarksSuccess
+    | ActionTypes.getBookmarksError;
+  payload: T;
+}
+
+export const getBookmarks = () => async (dispatch: Dispatch) => {
+  dispatch<GetBookmarksAction<undefined>>({
+    type: ActionTypes.getBookmarks,
+    payload: undefined,
+  });
+
+  try {
+    const res = await axios.get<ApiResponse<Bookmark[]>>("/api/bookmarks");
+
+    dispatch<GetBookmarksAction<Bookmark[]>>({
+      type: ActionTypes.getBookmarksSuccess,
+      payload: res.data.data,
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+
 /**
  * GET CATEGORIES
  */
 export interface GetBookmarkCategoriesAction<T> {
-  type: ActionTypes.getBookmarkCategories | ActionTypes.getBookmarkCategoriesSuccess | ActionTypes.getBookmarkCategoriesError;
+  type:
+    | ActionTypes.getBookmarkCategories
+    | ActionTypes.getBookmarkCategoriesSuccess
+    | ActionTypes.getBookmarkCategoriesError;
   payload: T;
 }
 
 export const getBookmarkCategories = () => async (dispatch: Dispatch) => {
   dispatch<GetBookmarkCategoriesAction<undefined>>({
     type: ActionTypes.getBookmarkCategories,
-    payload: undefined
+    payload: undefined,
-  })
+  });
 
   try {
-    const res = await axios.get<ApiResponse<Category[]>>('/api/categories');
+    const res = await axios.get<ApiResponse<Category[]>>("/api/categories");
 
     dispatch<GetBookmarkCategoriesAction<Category[]>>({
       type: ActionTypes.getBookmarkCategoriesSuccess,
-      payload: res.data.data.filter((category: Category) => category.type === 'bookmarks'),
+      payload: res.data.data.filter(
-    })
+        (category: Category) => category.type === "bookmarks"
+      ),
+    });
   } catch (err) {
     console.log(err);
   }
-}
+};
 
 /**
  * ADD CATEGORY
  */
 export interface AddBookmarkCategoryAction {
-  type: ActionTypes.addBookmarkCategory,
+  type: ActionTypes.addBookmarkCategory;
-  payload: Category
+  payload: Category;
 }
 
-export const addBookmarkCategory = (formData: NewCategory) => async (dispatch: Dispatch) => {
+export const addBookmarkCategory =
+  (formData: NewCategory) => async (dispatch: Dispatch) => {
     try {
-    const res = await axios.post<ApiResponse<Category>>('/api/categories', formData);
+      const res = await axios.post<ApiResponse<Category>>(
+        "/api/categories",
+        formData
+      );
 
       dispatch<CreateNotificationAction>({
         type: ActionTypes.createNotification,
         payload: {
-        title: 'Success',
+          title: "Success",
-        message: `Category ${formData.name} created`
+          message: `Category ${formData.name} created`,
-      }
+        },
-    })
+      });
 
       dispatch<AddBookmarkCategoryAction>({
         type: ActionTypes.addBookmarkCategory,
-      payload: res.data.data
+        payload: res.data.data,
-    })
+      });
 
       dispatch<any>(sortBookmarkCategories());
     } catch (err) {
       console.log(err);
     }
+  };
+
+export interface PinBookmarkAction {
+  type: ActionTypes.pinBookmark;
+  payload: Bookmark;
 }
 
+export const pinBookmark =
+  (bookmark: Bookmark) => async (dispatch: Dispatch) => {
+    try {
+      const { id, isPinned, name } = bookmark;
+      const res = await axios.put<ApiResponse<Bookmark>>(
+        `/api/bookmarks/${id}`,
+        {
+          isPinned: !isPinned,
+        }
+      );
+
+      const status = isPinned
+        ? "unpinned from Homescreen"
+        : "pinned to Homescreen";
+
+      dispatch<CreateNotificationAction>({
+        type: ActionTypes.createNotification,
+        payload: {
+          title: "Success",
+          message: `Bookmark ${name} ${status}`,
+        },
+      });
+
+      dispatch<PinBookmarkAction>({
+        type: ActionTypes.pinBookmark,
+        payload: res.data.data,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
 /**
  * ADD BOOKMARK
- */
+ */ export interface AddBookmarkAction {
-export interface AddBookmarkAction {
+  type: ActionTypes.addBookmarkSuccess;
-  type: ActionTypes.addBookmark,
+  payload: Bookmark;
-  payload: Bookmark
 }
 
 export const addBookmark = (formData: NewBookmark | FormData) => async (dispatch: Dispatch) => {
@@ -78,175 +149,188 @@ export const addBookmark = (formData: NewBookmark | FormData) => async (dispatch
       type: ActionTypes.createNotification,
       payload: {
         title: 'Success',
-        message: `Bookmark created`
+        message: `Bookmark ${res.data.data.name} created`,
       }
     })
 
-    dispatch<AddBookmarkAction>({
+      await dispatch<AddBookmarkAction>({
-      type: ActionTypes.addBookmark,
+        type: ActionTypes.addBookmarkSuccess,
-      payload: res.data.data
+        payload: res.data.data,
-    })
+      });
+
+      // Sort bookmarks
+      dispatch<any>(sortBookmarks());
     } catch (err) {
       console.log(err);
     }
-}
+  };
 
 /**
  * PIN CATEGORY
  */
 export interface PinBookmarkCategoryAction {
-  type: ActionTypes.pinBookmarkCategory,
+  type: ActionTypes.pinBookmarkCategory;
-  payload: Category
+  payload: Category;
 }
 
-export const pinBookmarkCategory = (category: Category) => async (dispatch: Dispatch) => {
+export const pinBookmarkCategory =
+  (category: Category) => async (dispatch: Dispatch) => {
     try {
       const { id, isPinned, name } = category;
-    const res = await axios.put<ApiResponse<Category>>(`/api/categories/${id}`, { isPinned: !isPinned });
+      const res = await axios.put<ApiResponse<Category>>(
+        `/api/categories/${id}`,
+        { isPinned: !isPinned }
+      );
 
-    const status = isPinned ? 'unpinned from Homescreen' : 'pinned to Homescreen';
+      const status = isPinned
+        ? "unpinned from Homescreen"
+        : "pinned to Homescreen";
 
       dispatch<CreateNotificationAction>({
         type: ActionTypes.createNotification,
         payload: {
-        title: 'Success',
+          title: "Success",
-        message: `Category ${name} ${status}`
+          message: `Category ${name} ${status}`,
-      }
+        },
-    })
+      });
 
       dispatch<PinBookmarkCategoryAction>({
         type: ActionTypes.pinBookmarkCategory,
-      payload: res.data.data
+        payload: res.data.data,
-    })
+      });
     } catch (err) {
       console.log(err);
     }
-}
+  };
 
 /**
  * DELETE CATEGORY
  */
 export interface DeleteBookmarkCategoryAction {
-  type: ActionTypes.deleteBookmarkCategory,
+  type: ActionTypes.deleteBookmarkCategory;
-  payload: number
+  payload: number;
 }
 
-export const deleteBookmarkCategory = (id: number) => async (dispatch: Dispatch) => {
+export const deleteBookmarkCategory =
+  (id: number) => async (dispatch: Dispatch) => {
     try {
       await axios.delete<ApiResponse<{}>>(`/api/categories/${id}`);
 
       dispatch<CreateNotificationAction>({
         type: ActionTypes.createNotification,
         payload: {
-        title: 'Success',
+          title: "Success",
-        message: `Category deleted`
+          message: `Category deleted`,
-      }
+        },
-    })
+      });
 
       dispatch<DeleteBookmarkCategoryAction>({
         type: ActionTypes.deleteBookmarkCategory,
-      payload: id
+        payload: id,
-    })
+      });
     } catch (err) {
       console.log(err);
     }
-}
+  };
 
 /**
  * UPDATE CATEGORY
  */
 export interface UpdateBookmarkCategoryAction {
-  type: ActionTypes.updateBookmarkCategory,
+  type: ActionTypes.updateBookmarkCategory;
-  payload: Category
+  payload: Category;
 }
 
-export const updateBookmarkCategory = (id: number, formData: NewCategory) => async (dispatch: Dispatch) => {
+export const updateBookmarkCategory =
+  (id: number, formData: NewCategory) => async (dispatch: Dispatch) => {
     try {
-    const res = await axios.put<ApiResponse<Category>>(`/api/categories/${id}`, formData);
+      const res = await axios.put<ApiResponse<Category>>(
+        `/api/categories/${id}`,
+        formData
+      );
 
       dispatch<CreateNotificationAction>({
         type: ActionTypes.createNotification,
         payload: {
-        title: 'Success',
+          title: "Success",
-        message: `Category ${formData.name} updated`
+          message: `Category ${formData.name} updated`,
-      }
+        },
-    })
+      });
 
       dispatch<UpdateBookmarkCategoryAction>({
         type: ActionTypes.updateBookmarkCategory,
-      payload: res.data.data
+        payload: res.data.data,
-    })
+      });
 
       dispatch<any>(sortBookmarkCategories());
     } catch (err) {
       console.log(err);
     }
-}
+  };
 
 /**
  * DELETE BOOKMARK
  */
 export interface DeleteBookmarkAction {
-  type: ActionTypes.deleteBookmark,
+  type: ActionTypes.deleteBookmark;
   payload: {
-    bookmarkId: number,
+    bookmarkId: number;
-    categoryId: number
+    categoryId: number;
-  }
+  };
 }
 
-export const deleteBookmark = (bookmarkId: number, categoryId: number) => async (dispatch: Dispatch) => {
+export const deleteBookmark =
+  (bookmarkId: number, categoryId: number) => async (dispatch: Dispatch) => {
     try {
       await axios.delete<ApiResponse<{}>>(`/api/bookmarks/${bookmarkId}`);
 
       dispatch<CreateNotificationAction>({
         type: ActionTypes.createNotification,
         payload: {
-        title: 'Success',
+          title: "Success",
-        message: 'Bookmark deleted'
+          message: "Bookmark deleted",
-      }
+        },
-    })
+      });
 
       dispatch<DeleteBookmarkAction>({
         type: ActionTypes.deleteBookmark,
         payload: {
           bookmarkId,
-        categoryId
+          categoryId,
-      }
+        },
-    })
+      });
     } catch (err) {
       console.log(err);
     }
-}
+  };
 
 /**
  * UPDATE BOOKMARK
  */
 export interface UpdateBookmarkAction {
-  type: ActionTypes.updateBookmark,
+  type: ActionTypes.updateBookmark;
-  payload: Bookmark
+  payload: Bookmark;
 }
 
-export const updateBookmark = (
+export const updateBookmark =
-  bookmarkId: number,
+  (bookmarkId: number, formData: NewBookmark | FormData, previousCategoryId: number) =>
-  formData: NewBookmark | FormData,
+  async (dispatch: Dispatch) => {
-  category: {
-    prev: number,
-    curr: number
-  }
-) => async (dispatch: Dispatch) => {
     try {
-    const res = await axios.put<ApiResponse<Bookmark>>(`/api/bookmarks/${bookmarkId}`, formData);
+      const res = await axios.put<ApiResponse<Bookmark>>(
+        `/api/bookmarks/${bookmarkId}`,
+        formData
+      );
 
       dispatch<CreateNotificationAction>({
         type: ActionTypes.createNotification,
         payload: {
-        title: 'Success',
+          title: "Success",
-        message: `Bookmark updated`
+          message: `Bookmark ${res.data.data.name} updated`,
-      }
+        },
-    })
+      });
 
       // Check if category was changed
-    const categoryWasChanged = category.curr !== category.prev;
+      const categoryWasChanged = res.data.data.categoryId !== previousCategoryId;
 
       if (categoryWasChanged) {
         // Delete bookmark from old category
@@ -254,27 +338,81 @@ export const updateBookmark = (
           type: ActionTypes.deleteBookmark,
           payload: {
             bookmarkId,
-          categoryId: category.prev
+            categoryId: previousCategoryId,
-        }
+          },
-      })
+        });
 
         // Add bookmark to the new category
         dispatch<AddBookmarkAction>({
-        type: ActionTypes.addBookmark,
+          type: ActionTypes.addBookmarkSuccess,
-        payload: res.data.data
+          payload: res.data.data,
-      })
+        });
       } else {
-      // Else update only name/url/icon
+        // Else update only name/url
         dispatch<UpdateBookmarkAction>({
           type: ActionTypes.updateBookmark,
-        payload: res.data.data
+          payload: res.data.data,
-      })
+        });
       }
     } catch (err) {
       console.log(err);
     }
+  };
+
+export interface ReorderBookmarksAction {
+  type: ActionTypes.reorderBookmarks;
+  payload: Bookmark[];
 }
 
+interface ReorderBookmarksQuery {
+  bookmarks: {
+    id: number;
+    orderId: number;
+  }[];
+}
+
+export const reorderBookmarks =
+  (bookmarks: Bookmark[]) => async (dispatch: Dispatch) => {
+    try {
+      const updateQuery: ReorderBookmarksQuery = { bookmarks: [] };
+
+      bookmarks.forEach((bookmark, index) => {
+        updateQuery.bookmarks.push({
+          id: bookmark.id,
+          orderId: index + 1,
+        });
+        bookmark.orderId = index + 1;
+      });
+
+      await axios.put<ApiResponse<{}>>("/api/bookmarks/0/reorder", updateQuery);
+
+      dispatch<ReorderBookmarksAction>({
+        type: ActionTypes.reorderBookmarks,
+        payload: bookmarks,
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+export interface SortBookmarksAction {
+  type: ActionTypes.sortBookmarks;
+  payload: string;
+}
+
+export const sortBookmarks = () => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.get<ApiResponse<Config>>("/api/config/useOrdering");
+
+    dispatch<SortBookmarksAction>({
+      type: ActionTypes.sortBookmarks,
+      payload: res.data.data.value,
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+
 /**
  * SORT CATEGORIES
  */
@@ -285,16 +423,16 @@ export interface SortBookmarkCategoriesAction {
 
 export const sortBookmarkCategories = () => async (dispatch: Dispatch) => {
   try {
-    const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering');
+    const res = await axios.get<ApiResponse<Config>>("/api/config/useOrdering");
 
     dispatch<SortBookmarkCategoriesAction>({
       type: ActionTypes.sortBookmarkCategories,
-      payload: res.data.data.value
+      payload: res.data.data.value,
-    })
+    });
   } catch (err) {
     console.log(err);
   }
-}
+};
 
 /**
  * REORDER CATEGORIES
@@ -304,29 +442,35 @@ export interface ReorderBookmarkCategoriesAction {
   payload: Category[];
 }
 
-interface ReorderQuery {
+interface ReorderReorderCategoriesQueryuery {
   categories: {
     id: number;
     orderId: number;
-  }[]
+  }[];
 }
 
-export const reorderBookmarkCategories = (categories: Category[]) => async (dispatch: Dispatch) => {
+export const reorderBookmarkCategories =
+  (categories: Category[]) => async (dispatch: Dispatch) => {
     try {
-    const updateQuery: ReorderQuery = { categories: [] }
+      const updateQuery: ReorderReorderCategoriesQueryuery = { categories: [] };
 
-    categories.forEach((category, index) => updateQuery.categories.push({
+      categories.forEach((category, index) =>
+        updateQuery.categories.push({
           id: category.id,
-      orderId: index + 1
+          orderId: index + 1,
-    }))
+        })
+      );
 
-    await axios.put<ApiResponse<{}>>('/api/categories/0/reorder', updateQuery);
+      await axios.put<ApiResponse<{}>>(
+        "/api/categories/0/reorder",
+        updateQuery
+      );
 
       dispatch<ReorderBookmarkCategoriesAction>({
         type: ActionTypes.reorderBookmarkCategories,
-      payload: categories
+        payload: categories,
-    })
+      });
     } catch (err) {
       console.log(err);
     }
-}
+  };

client/src/store/reducers/app.ts

@@ -88,7 +88,9 @@ 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;
@@ -101,8 +103,25 @@ const pinApp = (state: State, action: Action): State => {
 };
 
 const addAppSuccess = (state: State, action: Action): State => {
+  const categoryIndex = state.categories.findIndex(
+    (category: Category) => category.id === action.payload.categoryId
+  );
+
   return {
     ...state,
+    categories: [
+      ...state.categories.slice(0, categoryIndex),
+      {
+        ...state.categories[categoryIndex],
+        apps: [
+          ...state.categories[categoryIndex].apps,
+          {
+            ...action.payload,
+          },
+        ],
+      },
+      ...state.categories.slice(categoryIndex + 1),
+    ],
     apps: [...state.apps, action.payload],
   };
 };
@@ -139,18 +158,33 @@ const updateCategory = (state: State, action: Action): State => {
 
 const deleteApp = (state: State, action: Action): State => {
   const tmpApps = [...state.apps].filter(
-    (app: App) => app.id !== action.payload
+    (app: App) => app.id !== action.payload.appId
   );
 
+  const tmpCategories = [...state.categories];
+  const categoryInUpdate = tmpCategories.find(
+    (category: Category) => category.id === action.payload.categoryId
+  );
+
+  if (categoryInUpdate) {
+    categoryInUpdate.apps = categoryInUpdate.apps.filter(
+      (app: App) => app.id !== action.payload.appId
+    );
+  }
+
   return {
     ...state,
+    categories: tmpCategories,
     apps: tmpApps,
   };
 };
 
 const updateApp = (state: State, action: Action): State => {
+  // Update global apps collection
   const tmpApps = [...state.apps];
-  const appInUpdate = tmpApps.find((app: App) => app.id === action.payload.id);
+  const appInUpdate = tmpApps.find(
+    (app: App) => app.id === action.payload.id
+  );
 
   if (appInUpdate) {
     appInUpdate.name = action.payload.name;
@@ -159,8 +193,30 @@ const updateApp = (state: State, action: Action): State => {
     appInUpdate.categoryId = action.payload.categoryId;
   }
 
+  //update category apps collection
+  let categoryIndex = state.categories.findIndex(
+    (category: Category) => category.id === action.payload.categoryId
+  );
+  let appIndex = state.categories[categoryIndex].apps.findIndex(
+    (app: App) => app.id === action.payload.id
+  );
+
   return {
     ...state,
+    categories: [
+      ...state.categories.slice(0, categoryIndex),
+      {
+        ...state.categories[categoryIndex],
+        apps: [
+          ...state.categories[categoryIndex].apps.slice(0, appIndex),
+          {
+            ...action.payload,
+          },
+          ...state.categories[categoryIndex].apps.slice(appIndex + 1),
+        ],
+      },
+      ...state.categories.slice(categoryIndex + 1),
+    ],
     apps: tmpApps,
   };
 };
@@ -189,16 +245,6 @@ 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 {

client/src/store/reducers/bookmark.ts

@@ -6,29 +6,55 @@ export interface State {
   loading: boolean;
   errors: string | undefined;
   categories: Category[];
+  bookmarks: Bookmark[];
 }
 
 const initialState: State = {
   loading: true,
   errors: undefined,
-  categories: []
+  categories: [],
-}
+  bookmarks: [],
+};
+
+const getBookmarks = (state: State, action: Action): State => {
+  return {
+    ...state,
+    loading: true,
+    errors: undefined,
+  };
+};
+
+const getBookmarksSuccess = (state: State, action: Action): State => {
+  return {
+    ...state,
+    loading: false,
+    bookmarks: action.payload,
+  };
+};
+
+const getBookmarksError = (state: State, action: Action): State => {
+  return {
+    ...state,
+    loading: false,
+    errors: action.payload,
+  };
+};
 
 const getCategories = (state: State, action: Action): State => {
   return {
     ...state,
     loading: true,
-    errors: undefined
+    errors: undefined,
-  }
+  };
-}
+};
 
 const getCategoriesSuccess = (state: State, action: Action): State => {
   return {
     ...state,
     loading: false,
-    categories: action.payload
+    categories: action.payload,
-  }
+  };
-}
+};
 
 const addCategory = (state: State, action: Action): State => {
   return {
@@ -37,15 +63,49 @@ const addCategory = (state: State, action: Action): State => {
       ...state.categories,
       {
         ...action.payload,
-        type: 'bookmarks',
+        type: "bookmarks",
-        bookmarks: []
+        bookmarks: [],
-      }
+      },
-    ]
+    ],
-  }
+  };
+};
+
+const pinCategory = (state: State, action: Action): State => {
+  const tmpCategories = [...state.categories];
+  const changedCategory = tmpCategories.find(
+    (category: Category) => category.id === action.payload.id
+  );
+
+  if (changedCategory) {
+    changedCategory.isPinned = action.payload.isPinned;
   }
 
-const addBookmark = (state: State, action: Action): State => {
+  return {
-  const categoryIndex = state.categories.findIndex((category: Category) => category.id === action.payload.categoryId);
+    ...state,
+    categories: tmpCategories,
+  };
+};
+
+const pinBookmark = (state: State, action: Action): State => {
+  const tmpBookmarks = [...state.bookmarks];
+  const changedBookmark = tmpBookmarks.find(
+    (bookmark: Bookmark) => bookmark.id === action.payload.id
+  );
+
+  if (changedBookmark) {
+    changedBookmark.isPinned = action.payload.isPinned;
+  }
+
+  return {
+    ...state,
+    bookmarks: tmpBookmarks,
+  };
+};
+
+const addBookmarkSuccess = (state: State, action: Action): State => {
+  const categoryIndex = state.categories.findIndex(
+    (category: Category) => category.id === action.payload.categoryId
+  );
 
   return {
     ...state,
@@ -56,44 +116,35 @@ const addBookmark = (state: State, action: Action): State => {
         bookmarks: [
           ...state.categories[categoryIndex].bookmarks,
           {
-            ...action.payload
+            ...action.payload,
-          }
-        ]
           },
-      ...state.categories.slice(categoryIndex + 1)
+        ],
-    ]
+      },
-  }
+      ...state.categories.slice(categoryIndex + 1),
-}
+    ],
-
+    bookmarks: [...state.bookmarks, action.payload],
-const pinCategory = (state: State, action: Action): State => {
+  };
-  const tmpCategories = [...state.categories];
+};
-  const changedCategory = tmpCategories.find((category: Category) => category.id === action.payload.id);
-
-  if (changedCategory) {
-    changedCategory.isPinned = action.payload.isPinned;
-  }
-
-  return {
-    ...state,
-    categories: tmpCategories
-  }
-}
 
 const deleteCategory = (state: State, action: Action): State => {
-  const categoryIndex = state.categories.findIndex((category: Category) => category.id === action.payload);
+  const categoryIndex = state.categories.findIndex(
+    (category: Category) => category.id === action.payload
+  );
 
   return {
     ...state,
     categories: [
       ...state.categories.slice(0, categoryIndex),
-      ...state.categories.slice(categoryIndex + 1)
+      ...state.categories.slice(categoryIndex + 1),
-    ]
+    ],
-  }
+  };
-}
+};
 
 const updateCategory = (state: State, action: Action): State => {
   const tmpCategories = [...state.categories];
-  const categoryInUpdate = tmpCategories.find((category: Category) => category.id === action.payload.id);
+  const categoryInUpdate = tmpCategories.find(
+    (category: Category) => category.id === action.payload.id
+  );
 
   if (categoryInUpdate) {
     categoryInUpdate.name = action.payload.name;
@@ -101,28 +152,54 @@ const updateCategory = (state: State, action: Action): State => {
 
   return {
     ...state,
-    categories: tmpCategories
+    categories: tmpCategories,
-  }
+  };
-}
+};
 
 const deleteBookmark = (state: State, action: Action): State => {
+  const tmpBookmarks = [...state.bookmarks].filter(
+    (bookmark: Bookmark) => bookmark.id !== action.payload.bookmarkId
+  );
+
   const tmpCategories = [...state.categories];
-  const categoryInUpdate = tmpCategories.find((category: Category) => category.id === action.payload.categoryId);
+  const categoryInUpdate = tmpCategories.find(
+    (category: Category) => category.id === action.payload.categoryId
+  );
 
   if (categoryInUpdate) {
-    categoryInUpdate.bookmarks = categoryInUpdate.bookmarks.filter((bookmark: Bookmark) => bookmark.id !== action.payload.bookmarkId);
+    categoryInUpdate.bookmarks = categoryInUpdate.bookmarks.filter(
+      (bookmark: Bookmark) => bookmark.id !== action.payload.bookmarkId
+    );
   }
 
-  
   return {
     ...state,
-    categories: tmpCategories
+    categories: tmpCategories,
-  }
+    bookmarks: tmpBookmarks,
-}
+  };
+};
 
 const updateBookmark = (state: State, action: Action): State => {
-  let categoryIndex = state.categories.findIndex((category: Category) => category.id === action.payload.categoryId);
+  // Update global bookmarks collection
-  let bookmarkIndex = state.categories[categoryIndex].bookmarks.findIndex((bookmark: Bookmark) => bookmark.id === action.payload.id);
+  const tmpBookmarks = [...state.bookmarks];
+  const bookmarkInUpdate = tmpBookmarks.find(
+    (bookmark: Bookmark) => bookmark.id === action.payload.id
+  );
+
+  if (bookmarkInUpdate) {
+    bookmarkInUpdate.name = action.payload.name;
+    bookmarkInUpdate.url = action.payload.url;
+    bookmarkInUpdate.icon = action.payload.icon;
+    bookmarkInUpdate.categoryId = action.payload.categoryId;
+  }
+
+  //update category bookmarks collection
+  let categoryIndex = state.categories.findIndex(
+    (category: Category) => category.id === action.payload.categoryId
+  );
+  let bookmarkIndex = state.categories[categoryIndex].bookmarks.findIndex(
+    (bookmark: Bookmark) => bookmark.id === action.payload.id
+  );
 
   return {
     ...state,
@@ -133,47 +210,88 @@ const updateBookmark = (state: State, action: Action): State => {
         bookmarks: [
           ...state.categories[categoryIndex].bookmarks.slice(0, bookmarkIndex),
           {
-            ...action.payload
+            ...action.payload,
           },
-          ...state.categories[categoryIndex].bookmarks.slice(bookmarkIndex + 1)
+          ...state.categories[categoryIndex].bookmarks.slice(bookmarkIndex + 1),
-        ]
+        ],
       },
-      ...state.categories.slice(categoryIndex + 1)
+      ...state.categories.slice(categoryIndex + 1),
-    ]
+    ],
-  }
+    bookmarks: tmpBookmarks,
-}
+  };
+};
 
 const sortBookmarkCategories = (state: State, action: Action): State => {
   const sortedCategories = sortData<Category>(state.categories, action.payload);
 
   return {
     ...state,
-    categories: sortedCategories
+    categories: sortedCategories,
-  }
+  };
-}
+};
 
 const reorderCategories = (state: State, action: Action): State => {
   return {
     ...state,
-    categories: action.payload
+    categories: action.payload,
-  }
+  };
-}
+};
+
+const reorderBookmarks = (state: State, action: Action): State => {
+  return {
+    ...state,
+    bookmarks: action.payload,
+  };
+};
+
+const sortBookmarks = (state: State, action: Action): State => {
+  const sortedBookmarks = sortData<Bookmark>(state.bookmarks, action.payload);
+
+  return {
+    ...state,
+    bookmarks: sortedBookmarks,
+  };
+};
 
 const bookmarkReducer = (state = initialState, action: Action) => {
   switch (action.type) {
-    case ActionTypes.getBookmarkCategories: return getCategories(state, action);
+    case ActionTypes.getBookmarkCategories:
-    case ActionTypes.getBookmarkCategoriesSuccess: return getCategoriesSuccess(state, action);
+      return getCategories(state, action);
-    case ActionTypes.addBookmarkCategory: return addCategory(state, action);
+    case ActionTypes.getBookmarkCategoriesSuccess:
-    case ActionTypes.addBookmark: return addBookmark(state, action);
+      return getCategoriesSuccess(state, action);
-    case ActionTypes.pinBookmarkCategory: return pinCategory(state, action);
+    case ActionTypes.getBookmarks:
-    case ActionTypes.deleteBookmarkCategory: return deleteCategory(state, action);
+      return getBookmarks(state, action);
-    case ActionTypes.updateBookmarkCategory: return updateCategory(state, action);
+    case ActionTypes.getBookmarksSuccess:
-    case ActionTypes.deleteBookmark: return deleteBookmark(state, action);
+      return getBookmarksSuccess(state, action);
-    case ActionTypes.updateBookmark: return updateBookmark(state, action);
+    case ActionTypes.getBookmarksError:
-    case ActionTypes.sortBookmarkCategories: return sortBookmarkCategories(state, action);
+      return getBookmarksError(state, action);
-    case ActionTypes.reorderBookmarkCategories: return reorderCategories(state, action);
+    case ActionTypes.addBookmarkCategory:
-    default: return state;
+      return addCategory(state, action);
-  }
+    case ActionTypes.addBookmarkSuccess:
+      return addBookmarkSuccess(state, action);
+    case ActionTypes.pinBookmarkCategory:
+      return pinCategory(state, action);
+    case ActionTypes.pinBookmark:
+      return pinBookmark(state, action);
+    case ActionTypes.deleteBookmarkCategory:
+      return deleteCategory(state, action);
+    case ActionTypes.updateBookmarkCategory:
+      return updateCategory(state, action);
+    case ActionTypes.deleteBookmark:
+      return deleteBookmark(state, action);
+    case ActionTypes.updateBookmark:
+      return updateBookmark(state, action);
+    case ActionTypes.sortBookmarkCategories:
+      return sortBookmarkCategories(state, action);
+    case ActionTypes.reorderBookmarkCategories:
+      return reorderCategories(state, action);
+    case ActionTypes.sortBookmarks:
+      return sortBookmarks(state, action);
+    case ActionTypes.reorderBookmarks:
+      return reorderBookmarks(state, action);
+    default:
+      return state;
   }
+};
 
 export default bookmarkReducer;

controllers/bookmark.js

@@ -1,17 +1,23 @@
 const asyncWrapper = require('../middleware/asyncWrapper');
 const ErrorResponse = require('../utils/ErrorResponse');
 const Bookmark = require('../models/Bookmark');
+const Config = require('../models/Config');
 const { Sequelize } = require('sequelize');
 
 // @desc      Create new bookmark
 // @route     POST /api/bookmarks
 // @access    Public
 exports.createBookmark = asyncWrapper(async (req, res, next) => {
+  const pinBookmarks = await Config.findOne({
+    where: { key: 'pinBookmarksByDefault' }
+  });  
+
   let bookmark;
 
   let _body = {
     ...req.body,
     categoryId: parseInt(req.body.categoryId),
+    isPinned = (pinBookmarks && parseInt(pinBookmarks.value)),
   };
 
   if (req.file) {
@@ -30,10 +36,24 @@ exports.createBookmark = asyncWrapper(async (req, res, next) => {
 // @route     GET /api/bookmarks
 // @access    Public
 exports.getBookmarks = asyncWrapper(async (req, res, next) => {
-  const bookmarks = await Bookmark.findAll({
+  // Get config from database
-    order: [[Sequelize.fn('lower', Sequelize.col('name')), 'ASC']],
+  const useOrdering = await Config.findOne({
+    where: { key: 'useOrdering' }
   });
 
+  const orderType = useOrdering ? useOrdering.value : 'createdAt';
+  let bookmarks;
+
+  if (orderType == 'name') {
+    bookmarks = await Bookmark.findAll({
+      order: [[ Sequelize.fn('lower', Sequelize.col('name')), 'ASC' ]]
+    });
+  } else {
+    bookmarks = await Bookmark.findAll({
+      order: [[ orderType, 'ASC' ]]
+    });
+  }
+
   res.status(200).json({
     success: true,
     data: bookmarks,
@@ -102,8 +122,24 @@ exports.updateBookmark = asyncWrapper(async (req, res, next) => {
 // @access    Public
 exports.deleteBookmark = asyncWrapper(async (req, res, next) => {
   await Bookmark.destroy({
-    where: { id: req.params.id },
+    where: { id: req.params.id }
-  });
+  })
+
+  res.status(200).json({
+    success: true,
+    data: {}
+  })
+})
+
+// @desc      Reorder bookmarks
+// @route     PUT /api/bookmarks/0/reorder
+// @access    Public
+exports.reorderBookmarks = asyncWrapper(async (req, res, next) => {
+  req.body.bookmarks.forEach(async ({ id, orderId }) => {
+    await Bookmark.update({ orderId }, {
+      where: { id }
+    })
+  })
 
   res.status(200).json({
     success: true,

models/Bookmark.js

@@ -17,6 +17,15 @@ const Bookmark = sequelize.define('Bookmark', {
   icon: {
     type: DataTypes.STRING,
     defaultValue: ''
+  },
+  isPinned: {
+    type: DataTypes.BOOLEAN,
+    defaultValue: false
+  },
+  orderId: {
+    type: DataTypes.INTEGER,
+    allowNull: true,
+    defaultValue: null
   }
 }, {
   tableName: 'bookmarks'

routes/bookmark.js

@@ -7,7 +7,8 @@ const {
   getBookmarks,
   getBookmark,
   updateBookmark,
-  deleteBookmark
+  deleteBookmark,
+  reorderBookmarks
 } = require('../controllers/bookmark');
 
 router
@@ -21,4 +22,8 @@ router
   .put(upload, updateBookmark)
   .delete(deleteBookmark);
 
+  router
+    .route('/0/reorder')
+    .put(reorderBookmarks);
+
 module.exports = router;

utils/init/initialConfig.json

@@ -24,6 +24,10 @@
       "key": "pinAppsByDefault",
       "value": true
     },
+    {
+      "key": "pinBookmarksByDefault",
+      "value": true
+    },
     {
       "key": "pinCategoriesByDefault",
       "value": true
@@ -53,7 +57,7 @@
       "value": false
     },
     {
-      "key": "hideCategories",
+      "key": "hideBookmarks",
       "value": false
     },
     {