Merge branch 'feature' into feature-docker-secret-integration

.docker/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14 as builder
+FROM node:16 as builder
 
 WORKDIR /app
 
@@ -16,7 +16,7 @@ RUN mkdir -p ./public ./data \
     && mv ./client/build/* ./public \
     && rm -rf ./client
 
-FROM node:14-alpine
+FROM node:16-alpine
 
 COPY --from=builder /app /app
 

.docker/Dockerfile.multiarch

@@ -1,4 +1,4 @@
-FROM node:14-alpine3.11 as builder
+FROM node:16-alpine3.11 as builder
 
 WORKDIR /app
 
@@ -17,7 +17,7 @@ RUN mkdir -p ./public ./data \
     && mv ./client/build/* ./public \
     && rm -rf ./client
 
-FROM node:14-alpine3.11
+FROM node:16-alpine3.11
 
 COPY --from=builder /app /app
 

.env

@@ -1,5 +1,5 @@
 PORT=5005
 NODE_ENV=development
-VERSION=2.0.1
+VERSION=2.1.0
 PASSWORD=flame_password
 SECRET=e02eb43d69953658c6d07311d6313f2d4467672cb881f96b29368ba1f3f4da4b

CHANGELOG.md

@@ -1,3 +1,15 @@
+### v2.1.1 (TBA)
+- Changed some messages and buttons to make it easier to open bookmarks editor ([#239](https://github.com/pawelmalak/flame/issues/239))
+
+### v2.1.0 (2021-11-26)
+- Added option to set custom order for bookmarks ([#43](https://github.com/pawelmalak/flame/issues/43)) and ([#187](https://github.com/pawelmalak/flame/issues/187))
+- Added support for .ico files for custom icons ([#209](https://github.com/pawelmalak/flame/issues/209))
+- Empty apps and categories sections will now be hidden from guests ([#210](https://github.com/pawelmalak/flame/issues/210))
+- Fixed bug with fahrenheit degrees being displayed as float ([#221](https://github.com/pawelmalak/flame/issues/221))
+- Fixed bug with alphabetical order not working for bookmarks until the page was refreshed ([#224](https://github.com/pawelmalak/flame/issues/224))
+- Added option to change visibilty of apps, categories and bookmarks directly from table view
+- Password input will now autofocus when visiting /settings/app
+
 ### v2.0.1 (2021-11-19)
 - Added option to display humidity in the weather widget ([#136](https://github.com/pawelmalak/flame/issues/136))
 - Added option to set default theme for all new users ([#165](https://github.com/pawelmalak/flame/issues/165))

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=2.0.1
+REACT_APP_VERSION=2.1.0

client/src/components/Actions/TableActions.module.css

@@ -0,0 +1,12 @@
+.TableActions {
+  display: flex;
+  align-items: center;
+}
+
+.TableAction {
+  width: 22px;
+}
+
+.TableAction:hover {
+  cursor: pointer;
+}

client/src/components/Actions/TableActions.tsx

@@ -0,0 +1,81 @@
+import { Icon } from '../UI';
+import classes from './TableActions.module.css';
+
+interface Entity {
+  id: number;
+  name: string;
+  isPinned?: boolean;
+  isPublic: boolean;
+}
+
+interface Props {
+  entity: Entity;
+  deleteHandler: (id: number, name: string) => void;
+  updateHandler: (id: number) => void;
+  pinHanlder?: (id: number) => void;
+  changeVisibilty: (id: number) => void;
+  showPin?: boolean;
+}
+
+export const TableActions = (props: Props): JSX.Element => {
+  const {
+    entity,
+    deleteHandler,
+    updateHandler,
+    pinHanlder,
+    changeVisibilty,
+    showPin = true,
+  } = props;
+
+  const _pinHandler = pinHanlder || function () {};
+
+  return (
+    <td className={classes.TableActions}>
+      {/* DELETE */}
+      <div
+        className={classes.TableAction}
+        onClick={() => deleteHandler(entity.id, entity.name)}
+        tabIndex={0}
+      >
+        <Icon icon="mdiDelete" />
+      </div>
+
+      {/* UPDATE */}
+      <div
+        className={classes.TableAction}
+        onClick={() => updateHandler(entity.id)}
+        tabIndex={0}
+      >
+        <Icon icon="mdiPencil" />
+      </div>
+
+      {/* PIN */}
+      {showPin && (
+        <div
+          className={classes.TableAction}
+          onClick={() => _pinHandler(entity.id)}
+          tabIndex={0}
+        >
+          {entity.isPinned ? (
+            <Icon icon="mdiPinOff" color="var(--color-accent)" />
+          ) : (
+            <Icon icon="mdiPin" />
+          )}
+        </div>
+      )}
+
+      {/* VISIBILITY */}
+      <div
+        className={classes.TableAction}
+        onClick={() => changeVisibilty(entity.id)}
+        tabIndex={0}
+      >
+        {entity.isPublic ? (
+          <Icon icon="mdiEyeOff" color="var(--color-accent)" />
+        ) : (
+          <Icon icon="mdiEye" />
+        )}
+      </div>
+    </td>
+  );
+};

client/src/components/Apps/AppForm/AppForm.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, ChangeEvent, SyntheticEvent } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
-import { App, NewApp } from '../../../interfaces';
+import { NewApp } from '../../../interfaces';
 
 import classes from './AppForm.module.css';
 
@@ -8,29 +8,34 @@ import { ModalForm, InputGroup, Button } from '../../UI';
 import { inputHandler, newAppTemplate } from '../../../utility';
 import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../../store';
+import { State } from '../../../store/reducers';
 
 interface Props {
   modalHandler: () => void;
-  app?: App;
 }
 
-export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
+export const AppForm = ({ modalHandler }: Props): JSX.Element => {
+  const { appInUpdate } = useSelector((state: State) => state.apps);
+
   const dispatch = useDispatch();
-  const { addApp, updateApp } = bindActionCreators(actionCreators, dispatch);
+  const { addApp, updateApp, setEditApp } = bindActionCreators(
+    actionCreators,
+    dispatch
+  );
 
   const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
   const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [formData, setFormData] = useState<NewApp>(newAppTemplate);
 
   useEffect(() => {
-    if (app) {
+    if (appInUpdate) {
       setFormData({
-        ...app,
+        ...appInUpdate,
       });
     } else {
       setFormData(newAppTemplate);
     }
-  }, [app]);
+  }, [appInUpdate]);
 
   const inputChangeHandler = (
     e: ChangeEvent<HTMLInputElement | HTMLSelectElement>,
@@ -66,7 +71,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
       return data;
     };
 
-    if (!app) {
+    if (!appInUpdate) {
       if (customIcon) {
         const data = createFormData();
         addApp(data);
@@ -76,14 +81,15 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
     } else {
       if (customIcon) {
         const data = createFormData();
-        updateApp(app.id, data);
+        updateApp(appInUpdate.id, data);
       } else {
-        updateApp(app.id, formData);
+        updateApp(appInUpdate.id, formData);
         modalHandler();
       }
     }
 
     setFormData(newAppTemplate);
+    setEditApp(null);
   };
 
   return (
@@ -154,7 +160,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
             id="icon"
             required
             onChange={(e) => fileChangeHandler(e)}
-            accept=".jpg,.jpeg,.png,.svg"
+            accept=".jpg,.jpeg,.png,.svg,.ico"
           />
           <span
             onClick={() => {
@@ -182,7 +188,7 @@ export const AppForm = ({ app, modalHandler }: Props): JSX.Element => {
         </select>
       </InputGroup>
 
-      {!app ? (
+      {!appInUpdate ? (
         <Button>Add new application</Button>
       ) : (
         <Button>Update application</Button>

client/src/components/Apps/AppGrid/AppGrid.module.css

@@ -20,21 +20,3 @@
     grid-template-columns: repeat(4, 1fr);
   }
 }
-
-.GridMessage {
-  color: var(--color-primary);
-}
-
-.GridMessage a {
-  color: var(--color-accent);
-  font-weight: 600;
-}
-
-.AppsMessage {
-  color: var(--color-primary);
-}
-
-.AppsMessage a {
-  color: var(--color-accent);
-  font-weight: 600;
-}

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

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { App } from '../../../interfaces/App';
 
 import { AppCard } from '../AppCard/AppCard';
+import { Message } from '../../UI';
 
 interface Props {
   apps: App[];
@@ -13,7 +14,10 @@ interface Props {
 export const AppGrid = (props: Props): JSX.Element => {
   let apps: JSX.Element;
 
-  if (props.apps.length > 0) {
+  if (props.searching || props.apps.length) {
+    if (!props.apps.length) {
+      apps = <Message>No apps match your search criteria</Message>;
+    } else {
       apps = (
         <div className={classes.AppGrid}>
           {props.apps.map((app: App): JSX.Element => {
@@ -21,28 +25,21 @@ export const AppGrid = (props: Props): JSX.Element => {
           })}
         </div>
       );
-  } else {
-    if (props.totalApps) {
-      if (props.searching) {
-        apps = (
-          <p className={classes.AppsMessage}>
-            No apps match your search criteria
-          </p>
-        );
-      } else {
-        apps = (
-          <p className={classes.AppsMessage}>
-            There are no pinned applications. You can pin them from the{' '}
-            <Link to="/applications">/applications</Link> menu
-          </p>
-        );
     }
   } else {
+    if (props.totalApps) {
       apps = (
-        <p className={classes.AppsMessage}>
+        <Message>
+          There are no pinned applications. You can pin them from the{' '}
+          <Link to="/applications">/applications</Link> menu
+        </Message>
+      );
+    } else {
+      apps = (
+        <Message>
           You don't have any applications. You can add a new one from{' '}
           <Link to="/applications">/applications</Link> menu
-        </p>
+        </Message>
       );
     }
   }

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

@@ -1,4 +1,4 @@
-import { Fragment, KeyboardEvent, useState, useEffect } from 'react';
+import { Fragment, useState, useEffect } from 'react';
 import {
   DragDropContext,
   Droppable,
@@ -9,21 +9,19 @@ import { Link } from 'react-router-dom';
 
 // Redux
 import { useDispatch, useSelector } from 'react-redux';
-
-// Typescript
-import { App } from '../../../interfaces';
-
-// CSS
-import classes from './AppTable.module.css';
-
-// UI
-import { Icon, Table } from '../../UI';
 import { State } from '../../../store/reducers';
 import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../../store';
 
+// Typescript
+import { App } from '../../../interfaces';
+
+// Other
+import { Message, Table } from '../../UI';
+import { TableActions } from '../../Actions/TableActions';
+
 interface Props {
-  updateAppHandler: (app: App) => void;
+  openFormForUpdating: (app: App) => void;
 }
 
 export const AppTable = (props: Props): JSX.Element => {
@@ -33,49 +31,18 @@ export const AppTable = (props: Props): JSX.Element => {
   } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
-  const { pinApp, deleteApp, reorderApps, updateConfig, createNotification } =
+  const { pinApp, deleteApp, reorderApps, createNotification, updateApp } =
     bindActionCreators(actionCreators, dispatch);
 
   const [localApps, setLocalApps] = useState<App[]>([]);
-  const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
 
   // Copy apps array
   useEffect(() => {
     setLocalApps([...apps]);
   }, [apps]);
 
-  // Check ordering
-  useEffect(() => {
-    const order = config.useOrdering;
-
-    if (order === 'orderId') {
-      setIsCustomOrder(true);
-    }
-  }, []);
-
-  const deleteAppHandler = (app: App): void => {
-    const proceed = window.confirm(
-      `Are you sure you want to delete ${app.name} at ${app.url} ?`
-    );
-
-    if (proceed) {
-      deleteApp(app.id);
-    }
-  };
-
-  // Support keyboard navigation for actions
-  const keyboardActionHandler = (
-    e: KeyboardEvent,
-    app: App,
-    handler: Function
-  ) => {
-    if (e.key === 'Enter') {
-      handler(app);
-    }
-  };
-
   const dragEndHanlder = (result: DropResult): void => {
-    if (!isCustomOrder) {
+    if (config.useOrdering !== 'orderId') {
       createNotification({
         title: 'Error',
         message: 'Custom order is disabled',
@@ -95,18 +62,43 @@ export const AppTable = (props: Props): JSX.Element => {
     reorderApps(tmpApps);
   };
 
+  // Action handlers
+  const deleteAppHandler = (id: number, name: string) => {
+    const proceed = window.confirm(`Are you sure you want to delete ${name}?`);
+
+    if (proceed) {
+      deleteApp(id);
+    }
+  };
+
+  const updateAppHandler = (id: number) => {
+    const app = apps.find((a) => a.id === id) as App;
+    props.openFormForUpdating(app);
+  };
+
+  const pinAppHandler = (id: number) => {
+    const app = apps.find((a) => a.id === id) as App;
+    pinApp(app);
+  };
+
+  const changeAppVisibiltyHandler = (id: number) => {
+    const app = apps.find((a) => a.id === id) as App;
+    updateApp(id, { ...app, isPublic: !app.isPublic });
+  };
+
   return (
     <Fragment>
-      <div className={classes.Message}>
+      <Message isPrimary={false}>
-        {isCustomOrder ? (
+        {config.useOrdering === 'orderId' ? (
           <p>You can drag and drop single rows to reorder application</p>
         ) : (
           <p>
-            Custom order is disabled. You can change it in{' '}
+            Custom order is disabled. You can change it in the{' '}
-            <Link to="/settings/other">settings</Link>
+            <Link to="/settings/interface">settings</Link>
           </p>
         )}
-      </div>
+      </Message>
+
       <DragDropContext onDragEnd={dragEndHanlder}>
         <Droppable droppableId="apps">
           {(provided) => (
@@ -143,54 +135,15 @@ export const AppTable = (props: Props): JSX.Element => {
                           <td style={{ width: '200px' }}>
                             {app.isPublic ? 'Visible' : 'Hidden'}
                           </td>
+
                           {!snapshot.isDragging && (
-                            <td className={classes.TableActions}>
+                            <TableActions
-                              <div
+                              entity={app}
-                                className={classes.TableAction}
+                              deleteHandler={deleteAppHandler}
-                                onClick={() => deleteAppHandler(app)}
+                              updateHandler={updateAppHandler}
-                                onKeyDown={(e) =>
+                              pinHanlder={pinAppHandler}
-                                  keyboardActionHandler(
+                              changeVisibilty={changeAppVisibiltyHandler}
-                                    e,
-                                    app,
-                                    deleteAppHandler
-                                  )
-                                }
-                                tabIndex={0}
-                              >
-                                <Icon icon="mdiDelete" />
-                              </div>
-                              <div
-                                className={classes.TableAction}
-                                onClick={() => props.updateAppHandler(app)}
-                                onKeyDown={(e) =>
-                                  keyboardActionHandler(
-                                    e,
-                                    app,
-                                    props.updateAppHandler
-                                  )
-                                }
-                                tabIndex={0}
-                              >
-                                <Icon icon="mdiPencil" />
-                              </div>
-                              <div
-                                className={classes.TableAction}
-                                onClick={() => pinApp(app)}
-                                onKeyDown={(e) =>
-                                  keyboardActionHandler(e, app, pinApp)
-                                }
-                                tabIndex={0}
-                              >
-                                {app.isPinned ? (
-                                  <Icon
-                                    icon="mdiPinOff"
-                                    color="var(--color-accent)"
                             />
-                                ) : (
-                                  <Icon icon="mdiPin" />
-                                )}
-                              </div>
-                            </td>
                           )}
                         </tr>
                       );

client/src/components/Apps/Apps.tsx

@@ -19,7 +19,6 @@ import { AppForm } from './AppForm/AppForm';
 import { AppTable } from './AppTable/AppTable';
 
 // Utils
-import { appTemplate } from '../../utility';
 import { State } from '../../store/reducers';
 import { bindActionCreators } from 'redux';
 import { actionCreators } from '../../store';
@@ -29,57 +28,53 @@ interface Props {
 }
 
 export const Apps = (props: Props): JSX.Element => {
+  // Get Redux state
   const {
     apps: { apps, loading },
     auth: { isAuthenticated },
   } = useSelector((state: State) => state);
 
+  // Get Redux action creators
   const dispatch = useDispatch();
-  const { getApps } = bindActionCreators(actionCreators, dispatch);
+  const { getApps, setEditApp } = bindActionCreators(actionCreators, dispatch);
-
-  const [modalIsOpen, setModalIsOpen] = useState(false);
-  const [isInEdit, setIsInEdit] = useState(false);
-  const [isInUpdate, setIsInUpdate] = useState(false);
-  const [appInUpdate, setAppInUpdate] = useState<App>(appTemplate);
 
+  // Load apps if array is empty
   useEffect(() => {
     if (!apps.length) {
       getApps();
     }
   }, []);
 
-  // observe if user is authenticated -> set default view if not
+  // Form
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const [showTable, setShowTable] = useState(false);
+
+  // Observe if user is authenticated -> set default view if not
   useEffect(() => {
     if (!isAuthenticated) {
-      setIsInEdit(false);
+      setShowTable(false);
       setModalIsOpen(false);
     }
   }, [isAuthenticated]);
 
+  // Form actions
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);
-    setIsInUpdate(false);
   };
 
   const toggleEdit = (): void => {
-    setIsInEdit(!isInEdit);
+    setShowTable(!showTable);
-    setIsInUpdate(false);
   };
 
-  const toggleUpdate = (app: App): void => {
+  const openFormForUpdating = (app: App): void => {
-    setAppInUpdate(app);
+    setEditApp(app);
-    setIsInUpdate(true);
     setModalIsOpen(true);
   };
 
   return (
     <Container>
       <Modal isOpen={modalIsOpen} setIsOpen={setModalIsOpen}>
-        {!isInUpdate ? (
         <AppForm modalHandler={toggleModal} />
-        ) : (
-          <AppForm modalHandler={toggleModal} app={appInUpdate} />
-        )}
       </Modal>
 
       <Headline
@@ -89,7 +84,14 @@ export const Apps = (props: Props): JSX.Element => {
 
       {isAuthenticated && (
         <div className={classes.ActionsContainer}>
-          <ActionButton name="Add" icon="mdiPlusBox" handler={toggleModal} />
+          <ActionButton
+            name="Add"
+            icon="mdiPlusBox"
+            handler={() => {
+              setEditApp(null);
+              toggleModal();
+            }}
+          />
           <ActionButton name="Edit" icon="mdiPencil" handler={toggleEdit} />
         </div>
       )}
@@ -97,10 +99,10 @@ export const Apps = (props: Props): JSX.Element => {
       <div className={classes.Apps}>
         {loading ? (
           <Spinner />
-        ) : !isInEdit ? (
+        ) : !showTable ? (
           <AppGrid apps={apps} searching={props.searching} />
         ) : (
-          <AppTable updateAppHandler={toggleUpdate} />
+          <AppTable openFormForUpdating={openFormForUpdating} />
         )}
       </div>
     </Container>

client/src/components/Bookmarks/BookmarkCard/BookmarkCard.module.css

@@ -10,6 +10,10 @@
   text-transform: uppercase;
 }
 
+.BookmarkHeader:hover {
+  cursor: pointer;
+}
+
 .Bookmarks {
   display: flex;
   flex-direction: column;

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

@@ -1,28 +1,52 @@
 import { Fragment } from 'react';
 
-import { useSelector } from 'react-redux';
+// Redux
+import { useDispatch, useSelector } from 'react-redux';
 import { State } from '../../../store/reducers';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../store';
 
+// Typescript
 import { Bookmark, Category } from '../../../interfaces';
 
+// Other
 import classes from './BookmarkCard.module.css';
-
 import { Icon } from '../../UI';
-
 import { iconParser, isImage, isSvg, isUrl, urlParser } from '../../../utility';
 
 interface Props {
   category: Category;
+  fromHomepage?: boolean;
 }
 
 export const BookmarkCard = (props: Props): JSX.Element => {
-  const { config } = useSelector((state: State) => state.config);
+  const { category, fromHomepage = false } = props;
+
+  const {
+    config: { config },
+    auth: { isAuthenticated },
+  } = useSelector((state: State) => state);
+
+  const dispatch = useDispatch();
+  const { setEditCategory } = bindActionCreators(actionCreators, dispatch);
 
   return (
     <div className={classes.BookmarkCard}>
-      <h3>{props.category.name}</h3>
+      <h3
+        className={
+          fromHomepage || !isAuthenticated ? '' : classes.BookmarkHeader
+        }
+        onClick={() => {
+          if (!fromHomepage && isAuthenticated) {
+            setEditCategory(category);
+          }
+        }}
+      >
+        {category.name}
+      </h3>
+
       <div className={classes.Bookmarks}>
-        {props.category.bookmarks.map((bookmark: Bookmark) => {
+        {category.bookmarks.map((bookmark: Bookmark) => {
           const redirectUrl = urlParser(bookmark.url)[1];
 
           let iconEl: JSX.Element = <Fragment></Fragment>;

client/src/components/Bookmarks/BookmarkGrid/BookmarkGrid.module.css

@@ -20,12 +20,3 @@
     grid-template-columns: repeat(4, 1fr);
   }
 }
-
-.BookmarksMessage {
-  color: var(--color-primary);
-}
-
-.BookmarksMessage a {
-  color: var(--color-accent);
-  font-weight: 600;
-}

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

@@ -5,48 +5,57 @@ import classes from './BookmarkGrid.module.css';
 import { Category } from '../../../interfaces';
 
 import { BookmarkCard } from '../BookmarkCard/BookmarkCard';
+import { Message } from '../../UI';
 
 interface Props {
   categories: Category[];
   totalCategories?: number;
   searching: boolean;
+  fromHomepage?: boolean;
 }
 
 export const BookmarkGrid = (props: Props): JSX.Element => {
+  const {
+    categories,
+    totalCategories,
+    searching,
+    fromHomepage = false,
+  } = props;
+
   let bookmarks: JSX.Element;
 
-  if (props.categories.length) {
+  if (categories.length) {
-    if (props.searching && !props.categories[0].bookmarks.length) {
+    if (searching && !categories[0].bookmarks.length) {
-      bookmarks = (
+      bookmarks = <Message>No bookmarks match your search criteria</Message>;
-        <p className={classes.BookmarksMessage}>
-          No bookmarks match your search criteria
-        </p>
-      );
     } else {
       bookmarks = (
         <div className={classes.BookmarkGrid}>
-          {props.categories.map(
+          {categories.map(
             (category: Category): JSX.Element => (
-              <BookmarkCard category={category} key={category.id} />
+              <BookmarkCard
+                category={category}
+                fromHomepage={fromHomepage}
+                key={category.id}
+              />
             )
           )}
         </div>
       );
     }
   } else {
-    if (props.totalCategories) {
+    if (totalCategories) {
       bookmarks = (
-        <p className={classes.BookmarksMessage}>
+        <Message>
           There are no pinned categories. You can pin them from the{' '}
           <Link to="/bookmarks">/bookmarks</Link> menu
-        </p>
+        </Message>
       );
     } else {
       bookmarks = (
-        <p className={classes.BookmarksMessage}>
+        <Message>
           You don't have any bookmarks. You can add a new one from{' '}
           <Link to="/bookmarks">/bookmarks</Link> menu
-        </p>
+        </Message>
       );
     }
   }

client/src/components/Bookmarks/BookmarkTable/BookmarkTable.module.css

@@ -1,29 +0,0 @@
-.TableActions {
-  display: flex;
-  align-items: center;
-}
-
-.TableAction {
-  width: 22px;
-}
-
-.TableAction:hover {
-  cursor: pointer;
-}
-
-.Message {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: baseline;
-  color: var(--color-primary);
-  margin-bottom: 20px;
-}
-
-.Message a {
-  color: var(--color-accent);
-}
-
-.Message a:hover {
-  cursor: pointer;
-}

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

@@ -1,272 +0,0 @@
-import { KeyboardEvent, useState, useEffect, Fragment } from 'react';
-import {
-  DragDropContext,
-  Droppable,
-  Draggable,
-  DropResult,
-} from 'react-beautiful-dnd';
-import { Link } from 'react-router-dom';
-
-// Redux
-import { useDispatch, useSelector } from 'react-redux';
-import { State } from '../../../store/reducers';
-import { bindActionCreators } from 'redux';
-import { actionCreators } from '../../../store';
-
-// Typescript
-import { Bookmark, Category } from '../../../interfaces';
-import { ContentType } from '../Bookmarks';
-
-// CSS
-import classes from './BookmarkTable.module.css';
-
-// UI
-import { Table, Icon } from '../../UI';
-
-interface Props {
-  contentType: ContentType;
-  categories: Category[];
-  updateHandler: (data: Category | Bookmark) => void;
-}
-
-export const BookmarkTable = (props: Props): JSX.Element => {
-  const { config } = useSelector((state: State) => state.config);
-
-  const dispatch = useDispatch();
-  const {
-    pinCategory,
-    deleteCategory,
-    deleteBookmark,
-    createNotification,
-    reorderCategories,
-  } = bindActionCreators(actionCreators, dispatch);
-
-  const [localCategories, setLocalCategories] = useState<Category[]>([]);
-  const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
-
-  // Copy categories array
-  useEffect(() => {
-    setLocalCategories([...props.categories]);
-  }, [props.categories]);
-
-  // Check ordering
-  useEffect(() => {
-    const order = config.useOrdering;
-
-    if (order === 'orderId') {
-      setIsCustomOrder(true);
-    }
-  });
-
-  const deleteCategoryHandler = (category: Category): void => {
-    const proceed = window.confirm(
-      `Are you sure you want to delete ${category.name}? It will delete ALL assigned bookmarks`
-    );
-
-    if (proceed) {
-      deleteCategory(category.id);
-    }
-  };
-
-  const deleteBookmarkHandler = (bookmark: Bookmark): void => {
-    const proceed = window.confirm(
-      `Are you sure you want to delete ${bookmark.name}?`
-    );
-
-    if (proceed) {
-      deleteBookmark(bookmark.id, bookmark.categoryId);
-    }
-  };
-
-  const keyboardActionHandler = (
-    e: KeyboardEvent,
-    category: Category,
-    handler: Function
-  ) => {
-    if (e.key === 'Enter') {
-      handler(category);
-    }
-  };
-
-  const dragEndHanlder = (result: DropResult): void => {
-    if (!isCustomOrder) {
-      createNotification({
-        title: 'Error',
-        message: 'Custom order is disabled',
-      });
-      return;
-    }
-
-    if (!result.destination) {
-      return;
-    }
-
-    const tmpCategories = [...localCategories];
-    const [movedApp] = tmpCategories.splice(result.source.index, 1);
-    tmpCategories.splice(result.destination.index, 0, movedApp);
-
-    setLocalCategories(tmpCategories);
-    reorderCategories(tmpCategories);
-  };
-
-  if (props.contentType === ContentType.category) {
-    return (
-      <Fragment>
-        <div className={classes.Message}>
-          {isCustomOrder ? (
-            <p>You can drag and drop single rows to reorder categories</p>
-          ) : (
-            <p>
-              Custom order is disabled. You can change it in{' '}
-              <Link to="/settings/other">settings</Link>
-            </p>
-          )}
-        </div>
-        <DragDropContext onDragEnd={dragEndHanlder}>
-          <Droppable droppableId="categories">
-            {(provided) => (
-              <Table
-                headers={['Name', 'Visibility', 'Actions']}
-                innerRef={provided.innerRef}
-              >
-                {localCategories.map(
-                  (category: Category, index): JSX.Element => {
-                    return (
-                      <Draggable
-                        key={category.id}
-                        draggableId={category.id.toString()}
-                        index={index}
-                      >
-                        {(provided, snapshot) => {
-                          const style = {
-                            border: snapshot.isDragging
-                              ? '1px solid var(--color-accent)'
-                              : 'none',
-                            borderRadius: '4px',
-                            ...provided.draggableProps.style,
-                          };
-
-                          return (
-                            <tr
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                              ref={provided.innerRef}
-                              style={style}
-                            >
-                              <td style={{ width: '300px' }}>
-                                {category.name}
-                              </td>
-                              <td style={{ width: '300px' }}>
-                                {category.isPublic ? 'Visible' : 'Hidden'}
-                              </td>
-                              {!snapshot.isDragging && (
-                                <td className={classes.TableActions}>
-                                  <div
-                                    className={classes.TableAction}
-                                    onClick={() =>
-                                      deleteCategoryHandler(category)
-                                    }
-                                    onKeyDown={(e) =>
-                                      keyboardActionHandler(
-                                        e,
-                                        category,
-                                        deleteCategoryHandler
-                                      )
-                                    }
-                                    tabIndex={0}
-                                  >
-                                    <Icon icon="mdiDelete" />
-                                  </div>
-                                  <div
-                                    className={classes.TableAction}
-                                    onClick={() =>
-                                      props.updateHandler(category)
-                                    }
-                                    tabIndex={0}
-                                  >
-                                    <Icon icon="mdiPencil" />
-                                  </div>
-                                  <div
-                                    className={classes.TableAction}
-                                    onClick={() => pinCategory(category)}
-                                    onKeyDown={(e) =>
-                                      keyboardActionHandler(
-                                        e,
-                                        category,
-                                        pinCategory
-                                      )
-                                    }
-                                    tabIndex={0}
-                                  >
-                                    {category.isPinned ? (
-                                      <Icon
-                                        icon="mdiPinOff"
-                                        color="var(--color-accent)"
-                                      />
-                                    ) : (
-                                      <Icon icon="mdiPin" />
-                                    )}
-                                  </div>
-                                </td>
-                              )}
-                            </tr>
-                          );
-                        }}
-                      </Draggable>
-                    );
-                  }
-                )}
-              </Table>
-            )}
-          </Droppable>
-        </DragDropContext>
-      </Fragment>
-    );
-  } else {
-    const bookmarks: { bookmark: Bookmark; categoryName: string }[] = [];
-    props.categories.forEach((category: Category) => {
-      category.bookmarks.forEach((bookmark: Bookmark) => {
-        bookmarks.push({
-          bookmark,
-          categoryName: category.name,
-        });
-      });
-    });
-
-    return (
-      <Table
-        headers={['Name', 'URL', 'Icon', 'Visibility', 'Category', 'Actions']}
-      >
-        {bookmarks.map(
-          (bookmark: { bookmark: Bookmark; categoryName: string }) => {
-            return (
-              <tr key={bookmark.bookmark.id}>
-                <td>{bookmark.bookmark.name}</td>
-                <td>{bookmark.bookmark.url}</td>
-                <td>{bookmark.bookmark.icon}</td>
-                <td>{bookmark.bookmark.isPublic ? 'Visible' : 'Hidden'}</td>
-                <td>{bookmark.categoryName}</td>
-                <td className={classes.TableActions}>
-                  <div
-                    className={classes.TableAction}
-                    onClick={() => deleteBookmarkHandler(bookmark.bookmark)}
-                    tabIndex={0}
-                  >
-                    <Icon icon="mdiDelete" />
-                  </div>
-                  <div
-                    className={classes.TableAction}
-                    onClick={() => props.updateHandler(bookmark.bookmark)}
-                    tabIndex={0}
-                  >
-                    <Icon icon="mdiPencil" />
-                  </div>
-                </td>
-              </tr>
-            );
-          }
-        )}
-      </Table>
-    );
-  }
-};

client/src/components/Bookmarks/Bookmarks.tsx

@@ -14,15 +14,19 @@ import { Category, Bookmark } from '../../interfaces';
 import classes from './Bookmarks.module.css';
 
 // UI
-import { Container, Headline, ActionButton, Spinner, Modal } from '../UI';
+import {
+  Container,
+  Headline,
+  ActionButton,
+  Spinner,
+  Modal,
+  Message,
+} from '../UI';
 
 // Components
 import { BookmarkGrid } from './BookmarkGrid/BookmarkGrid';
-import { BookmarkTable } from './BookmarkTable/BookmarkTable';
 import { Form } from './Form/Form';
-
+import { Table } from './Table/Table';
-// Utils
-import { bookmarkTemplate, categoryTemplate } from '../../utility';
 
 interface Props {
   searching: boolean;
@@ -34,76 +38,101 @@ export enum ContentType {
 }
 
 export const Bookmarks = (props: Props): JSX.Element => {
+  // Get Redux state
   const {
-    bookmarks: { loading, categories },
+    bookmarks: { loading, categories, categoryInEdit },
     auth: { isAuthenticated },
   } = useSelector((state: State) => state);
 
+  // Get Redux action creators
   const dispatch = useDispatch();
-  const { getCategories } = bindActionCreators(actionCreators, dispatch);
+  const { getCategories, setEditCategory, setEditBookmark } =
-
+    bindActionCreators(actionCreators, dispatch);
-  const [modalIsOpen, setModalIsOpen] = useState(false);
-  const [formContentType, setFormContentType] = useState(ContentType.category);
-  const [isInEdit, setIsInEdit] = useState(false);
-  const [tableContentType, setTableContentType] = useState(
-    ContentType.category
-  );
-  const [isInUpdate, setIsInUpdate] = useState(false);
-  const [categoryInUpdate, setCategoryInUpdate] =
-    useState<Category>(categoryTemplate);
-  const [bookmarkInUpdate, setBookmarkInUpdate] =
-    useState<Bookmark>(bookmarkTemplate);
 
+  // Load categories if array is empty
   useEffect(() => {
     if (!categories.length) {
       getCategories();
     }
   }, []);
 
-  // observe if user is authenticated -> set default view if not
+  // Form
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+  const [formContentType, setFormContentType] = useState(ContentType.category);
+  const [isInUpdate, setIsInUpdate] = useState(false);
+
+  // Table
+  const [showTable, setShowTable] = useState(false);
+  const [tableContentType, setTableContentType] = useState(
+    ContentType.category
+  );
+
+  // Observe if user is authenticated -> set default view (grid) if not
   useEffect(() => {
     if (!isAuthenticated) {
-      setIsInEdit(false);
+      setShowTable(false);
       setModalIsOpen(false);
     }
   }, [isAuthenticated]);
 
+  useEffect(() => {
+    if (categoryInEdit && !modalIsOpen) {
+      setTableContentType(ContentType.bookmark);
+      setShowTable(true);
+    }
+  }, [categoryInEdit]);
+
+  useEffect(() => {
+    setShowTable(false);
+    setEditCategory(null);
+  }, []);
+
+  // Form actions
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);
   };
 
-  const addActionHandler = (contentType: ContentType) => {
+  const openFormForAdding = (contentType: ContentType) => {
     setFormContentType(contentType);
     setIsInUpdate(false);
     toggleModal();
   };
 
-  const editActionHandler = (contentType: ContentType) => {
+  const openFormForUpdating = (data: Category | Bookmark): void => {
-    // We're in the edit mode and the same button was clicked - go back to list
+    setIsInUpdate(true);
-    if (isInEdit && contentType === tableContentType) {
-      setIsInEdit(false);
-    } else {
-      setIsInEdit(true);
-      setTableContentType(contentType);
-    }
-  };
 
     const instanceOfCategory = (object: any): object is Category => {
       return 'bookmarks' in object;
     };
 
-  const goToUpdateMode = (data: Category | Bookmark): void => {
-    setIsInUpdate(true);
     if (instanceOfCategory(data)) {
       setFormContentType(ContentType.category);
-      setCategoryInUpdate(data);
+      setEditCategory(data);
     } else {
       setFormContentType(ContentType.bookmark);
-      setBookmarkInUpdate(data);
+      setEditBookmark(data);
     }
+
     toggleModal();
   };
 
+  // Table actions
+  const showTableForEditing = (contentType: ContentType) => {
+    // We're in the edit mode and the same button was clicked - go back to list
+    if (showTable && contentType === tableContentType) {
+      setEditCategory(null);
+      setShowTable(false);
+    } else {
+      setShowTable(true);
+      setTableContentType(contentType);
+    }
+  };
+
+  const finishEditing = () => {
+    setShowTable(false);
+    setEditCategory(null);
+  };
+
   return (
     <Container>
       <Modal isOpen={modalIsOpen} setIsOpen={toggleModal}>
@@ -111,8 +140,6 @@ export const Bookmarks = (props: Props): JSX.Element => {
           modalHandler={toggleModal}
           contentType={formContentType}
           inUpdate={isInUpdate}
-          category={categoryInUpdate}
-          bookmark={bookmarkInUpdate}
         />
       </Modal>
 
@@ -123,35 +150,44 @@ export const Bookmarks = (props: Props): JSX.Element => {
           <ActionButton
             name="Add Category"
             icon="mdiPlusBox"
-            handler={() => addActionHandler(ContentType.category)}
+            handler={() => openFormForAdding(ContentType.category)}
           />
           <ActionButton
             name="Add Bookmark"
             icon="mdiPlusBox"
-            handler={() => addActionHandler(ContentType.bookmark)}
+            handler={() => openFormForAdding(ContentType.bookmark)}
           />
           <ActionButton
             name="Edit Categories"
             icon="mdiPencil"
-            handler={() => editActionHandler(ContentType.category)}
+            handler={() => showTableForEditing(ContentType.category)}
           />
+          {showTable && tableContentType === ContentType.bookmark && (
             <ActionButton
-            name="Edit Bookmarks"
+              name="Finish Editing"
               icon="mdiPencil"
-            handler={() => editActionHandler(ContentType.bookmark)}
+              handler={finishEditing}
             />
+          )}
         </div>
       )}
 
+      {categories.length && isAuthenticated && !showTable ? (
+        <Message isPrimary={false}>
+          Click on category name to edit its bookmarks
+        </Message>
+      ) : (
+        <></>
+      )}
+
       {loading ? (
         <Spinner />
-      ) : !isInEdit ? (
+      ) : !showTable ? (
         <BookmarkGrid categories={categories} searching={props.searching} />
       ) : (
-        <BookmarkTable
+        <Table
           contentType={tableContentType}
-          categories={categories}
+          openFormForUpdating={openFormForUpdating}
-          updateHandler={goToUpdateMode}
         />
       )}
     </Container>

client/src/components/Bookmarks/Form/BookmarksForm.tsx

@@ -137,15 +137,15 @@ export const BookmarksForm = ({
       }
 
       modalHandler();
-
-      setFormData(newBookmarkTemplate);
-
-      setCustomIcon(null);
     }
+
+    setFormData({ ...newBookmarkTemplate, categoryId: formData.categoryId });
+    setCustomIcon(null);
   };
 
   return (
     <ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
+      {/* NAME */}
       <InputGroup>
         <label htmlFor="name">Bookmark Name</label>
         <input
@@ -159,6 +159,7 @@ export const BookmarksForm = ({
         />
       </InputGroup>
 
+      {/* URL */}
       <InputGroup>
         <label htmlFor="url">Bookmark URL</label>
         <input
@@ -172,6 +173,7 @@ export const BookmarksForm = ({
         />
       </InputGroup>
 
+      {/* CATEGORY */}
       <InputGroup>
         <label htmlFor="categoryId">Bookmark Category</label>
         <select
@@ -192,6 +194,7 @@ export const BookmarksForm = ({
         </select>
       </InputGroup>
 
+      {/* ICON */}
       {!useCustomIcon ? (
         // mdi
         <InputGroup>
@@ -227,7 +230,7 @@ export const BookmarksForm = ({
             name="icon"
             id="icon"
             onChange={(e) => fileChangeHandler(e)}
-            accept=".jpg,.jpeg,.png,.svg"
+            accept=".jpg,.jpeg,.png,.svg,.ico"
           />
           <span
             onClick={() => {
@@ -241,6 +244,7 @@ export const BookmarksForm = ({
         </InputGroup>
       )}
 
+      {/* VISIBILTY */}
       <InputGroup>
         <label htmlFor="isPublic">Bookmark visibility</label>
         <select

client/src/components/Bookmarks/Form/CategoryForm.tsx

@@ -60,10 +60,10 @@ export const CategoryForm = ({
       addCategory(formData);
     } else {
       updateCategory(category.id, formData);
+      modalHandler();
     }
 
     setFormData(newCategoryTemplate);
-    modalHandler();
   };
 
   return (

client/src/components/Bookmarks/Form/Form.tsx

@@ -1,22 +1,26 @@
 // Typescript
-import { Bookmark, Category } from '../../../interfaces';
 import { ContentType } from '../Bookmarks';
 
 // Utils
 import { CategoryForm } from './CategoryForm';
 import { BookmarksForm } from './BookmarksForm';
 import { Fragment } from 'react';
+import { useSelector } from 'react-redux';
+import { State } from '../../../store/reducers';
+import { bookmarkTemplate, categoryTemplate } from '../../../utility';
 
 interface Props {
   modalHandler: () => void;
   contentType: ContentType;
   inUpdate?: boolean;
-  category?: Category;
-  bookmark?: Bookmark;
 }
 
 export const Form = (props: Props): JSX.Element => {
-  const { modalHandler, contentType, inUpdate, category, bookmark } = props;
+  const { categoryInEdit, bookmarkInEdit } = useSelector(
+    (state: State) => state.bookmarks
+  );
+
+  const { modalHandler, contentType, inUpdate } = props;
 
   return (
     <Fragment>
@@ -33,9 +37,15 @@ export const Form = (props: Props): JSX.Element => {
         // form: update
         <Fragment>
           {contentType === ContentType.category ? (
-            <CategoryForm modalHandler={modalHandler} category={category} />
+            <CategoryForm
+              modalHandler={modalHandler}
+              category={categoryInEdit || categoryTemplate}
+            />
           ) : (
-            <BookmarksForm modalHandler={modalHandler} bookmark={bookmark} />
+            <BookmarksForm
+              modalHandler={modalHandler}
+              bookmark={bookmarkInEdit || bookmarkTemplate}
+            />
           )}
         </Fragment>
       )}

client/src/components/Bookmarks/Table/BookmarksTable.tsx

@@ -0,0 +1,188 @@
+import { useState, useEffect, Fragment } from 'react';
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+} from 'react-beautiful-dnd';
+
+// Redux
+import { useDispatch, useSelector } from 'react-redux';
+import { State } from '../../../store/reducers';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../store';
+
+// Typescript
+import { Bookmark, Category } from '../../../interfaces';
+
+// UI
+import { Message, Table } from '../../UI';
+import { TableActions } from '../../Actions/TableActions';
+import { bookmarkTemplate } from '../../../utility';
+
+interface Props {
+  openFormForUpdating: (data: Category | Bookmark) => void;
+}
+
+export const BookmarksTable = ({ openFormForUpdating }: Props): JSX.Element => {
+  const {
+    bookmarks: { categoryInEdit },
+    config: { config },
+  } = useSelector((state: State) => state);
+
+  const dispatch = useDispatch();
+  const {
+    deleteBookmark,
+    updateBookmark,
+    createNotification,
+    reorderBookmarks,
+  } = bindActionCreators(actionCreators, dispatch);
+
+  const [localBookmarks, setLocalBookmarks] = useState<Bookmark[]>([]);
+
+  // Copy bookmarks array
+  useEffect(() => {
+    if (categoryInEdit) {
+      setLocalBookmarks([...categoryInEdit.bookmarks]);
+    }
+  }, [categoryInEdit]);
+
+  // Drag and drop handler
+  const dragEndHanlder = (result: DropResult): void => {
+    if (config.useOrdering !== 'orderId') {
+      createNotification({
+        title: 'Error',
+        message: 'Custom order is disabled',
+      });
+      return;
+    }
+
+    if (!result.destination) {
+      return;
+    }
+
+    const tmpBookmarks = [...localBookmarks];
+    const [movedBookmark] = tmpBookmarks.splice(result.source.index, 1);
+    tmpBookmarks.splice(result.destination.index, 0, movedBookmark);
+
+    setLocalBookmarks(tmpBookmarks);
+
+    const categoryId = categoryInEdit?.id || -1;
+    reorderBookmarks(tmpBookmarks, categoryId);
+  };
+
+  // Action hanlders
+  const deleteBookmarkHandler = (id: number, name: string) => {
+    const categoryId = categoryInEdit?.id || -1;
+
+    const proceed = window.confirm(`Are you sure you want to delete ${name}?`);
+    if (proceed) {
+      deleteBookmark(id, categoryId);
+    }
+  };
+
+  const updateBookmarkHandler = (id: number) => {
+    const bookmark =
+      categoryInEdit?.bookmarks.find((b) => b.id === id) || bookmarkTemplate;
+
+    openFormForUpdating(bookmark);
+  };
+
+  const changeBookmarkVisibiltyHandler = (id: number) => {
+    const bookmark =
+      categoryInEdit?.bookmarks.find((b) => b.id === id) || bookmarkTemplate;
+
+    const categoryId = categoryInEdit?.id || -1;
+    const [prev, curr] = [categoryId, categoryId];
+
+    updateBookmark(
+      id,
+      { ...bookmark, isPublic: !bookmark.isPublic },
+      { prev, curr }
+    );
+  };
+
+  return (
+    <Fragment>
+      {!categoryInEdit ? (
+        <Message isPrimary={false}>
+          Switch to grid view and click on the name of category you want to edit
+        </Message>
+      ) : (
+        <Message isPrimary={false}>
+          Editing bookmarks from&nbsp;<span>{categoryInEdit.name}</span>
+          &nbsp;category
+        </Message>
+      )}
+
+      {categoryInEdit && (
+        <DragDropContext onDragEnd={dragEndHanlder}>
+          <Droppable droppableId="bookmarks">
+            {(provided) => (
+              <Table
+                headers={[
+                  'Name',
+                  'URL',
+                  'Icon',
+                  'Visibility',
+                  'Category',
+                  'Actions',
+                ]}
+                innerRef={provided.innerRef}
+              >
+                {localBookmarks.map((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,
+                        };
+
+                        return (
+                          <tr
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            ref={provided.innerRef}
+                            style={style}
+                          >
+                            <td style={{ width: '200px' }}>{bookmark.name}</td>
+                            <td style={{ width: '200px' }}>{bookmark.url}</td>
+                            <td style={{ width: '200px' }}>{bookmark.icon}</td>
+                            <td style={{ width: '200px' }}>
+                              {bookmark.isPublic ? 'Visible' : 'Hidden'}
+                            </td>
+                            <td style={{ width: '200px' }}>
+                              {categoryInEdit.name}
+                            </td>
+
+                            {!snapshot.isDragging && (
+                              <TableActions
+                                entity={bookmark}
+                                deleteHandler={deleteBookmarkHandler}
+                                updateHandler={updateBookmarkHandler}
+                                changeVisibilty={changeBookmarkVisibiltyHandler}
+                                showPin={false}
+                              />
+                            )}
+                          </tr>
+                        );
+                      }}
+                    </Draggable>
+                  );
+                })}
+              </Table>
+            )}
+          </Droppable>
+        </DragDropContext>
+      )}
+    </Fragment>
+  );
+};

client/src/components/Bookmarks/Table/CategoryTable.tsx

@@ -0,0 +1,166 @@
+import { useState, useEffect, Fragment } from 'react';
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  DropResult,
+} from 'react-beautiful-dnd';
+import { Link } from 'react-router-dom';
+
+// Redux
+import { useDispatch, useSelector } from 'react-redux';
+import { State } from '../../../store/reducers';
+import { bindActionCreators } from 'redux';
+import { actionCreators } from '../../../store';
+
+// Typescript
+import { Bookmark, Category } from '../../../interfaces';
+
+// UI
+import { Message, Table } from '../../UI';
+import { TableActions } from '../../Actions/TableActions';
+
+interface Props {
+  openFormForUpdating: (data: Category | Bookmark) => void;
+}
+
+export const CategoryTable = ({ openFormForUpdating }: Props): JSX.Element => {
+  const {
+    config: { config },
+    bookmarks: { categories },
+  } = useSelector((state: State) => state);
+
+  const dispatch = useDispatch();
+  const {
+    pinCategory,
+    deleteCategory,
+    createNotification,
+    reorderCategories,
+    updateCategory,
+  } = bindActionCreators(actionCreators, dispatch);
+
+  const [localCategories, setLocalCategories] = useState<Category[]>([]);
+
+  // Copy categories array
+  useEffect(() => {
+    setLocalCategories([...categories]);
+  }, [categories]);
+
+  // Drag and drop handler
+  const dragEndHanlder = (result: DropResult): void => {
+    if (config.useOrdering !== 'orderId') {
+      createNotification({
+        title: 'Error',
+        message: 'Custom order is disabled',
+      });
+      return;
+    }
+
+    if (!result.destination) {
+      return;
+    }
+
+    const tmpCategories = [...localCategories];
+    const [movedCategory] = tmpCategories.splice(result.source.index, 1);
+    tmpCategories.splice(result.destination.index, 0, movedCategory);
+
+    setLocalCategories(tmpCategories);
+    reorderCategories(tmpCategories);
+  };
+
+  // Action handlers
+  const deleteCategoryHandler = (id: number, name: string) => {
+    const proceed = window.confirm(
+      `Are you sure you want to delete ${name}? It will delete ALL assigned bookmarks`
+    );
+
+    if (proceed) {
+      deleteCategory(id);
+    }
+  };
+
+  const updateCategoryHandler = (id: number) => {
+    const category = categories.find((c) => c.id === id) as Category;
+    openFormForUpdating(category);
+  };
+
+  const pinCategoryHandler = (id: number) => {
+    const category = categories.find((c) => c.id === id) as Category;
+    pinCategory(category);
+  };
+
+  const changeCategoryVisibiltyHandler = (id: number) => {
+    const category = categories.find((c) => c.id === id) as Category;
+    updateCategory(id, { ...category, isPublic: !category.isPublic });
+  };
+
+  return (
+    <Fragment>
+      <Message isPrimary={false}>
+        {config.useOrdering === 'orderId' ? (
+          <p>You can drag and drop single rows to reorder categories</p>
+        ) : (
+          <p>
+            Custom order is disabled. You can change it in the{' '}
+            <Link to="/settings/interface">settings</Link>
+          </p>
+        )}
+      </Message>
+
+      <DragDropContext onDragEnd={dragEndHanlder}>
+        <Droppable droppableId="categories">
+          {(provided) => (
+            <Table
+              headers={['Name', 'Visibility', 'Actions']}
+              innerRef={provided.innerRef}
+            >
+              {localCategories.map((category, index): JSX.Element => {
+                return (
+                  <Draggable
+                    key={category.id}
+                    draggableId={category.id.toString()}
+                    index={index}
+                  >
+                    {(provided, snapshot) => {
+                      const style = {
+                        border: snapshot.isDragging
+                          ? '1px solid var(--color-accent)'
+                          : 'none',
+                        borderRadius: '4px',
+                        ...provided.draggableProps.style,
+                      };
+
+                      return (
+                        <tr
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          ref={provided.innerRef}
+                          style={style}
+                        >
+                          <td style={{ width: '300px' }}>{category.name}</td>
+                          <td style={{ width: '300px' }}>
+                            {category.isPublic ? 'Visible' : 'Hidden'}
+                          </td>
+
+                          {!snapshot.isDragging && (
+                            <TableActions
+                              entity={category}
+                              deleteHandler={deleteCategoryHandler}
+                              updateHandler={updateCategoryHandler}
+                              pinHanlder={pinCategoryHandler}
+                              changeVisibilty={changeCategoryVisibiltyHandler}
+                            />
+                          )}
+                        </tr>
+                      );
+                    }}
+                  </Draggable>
+                );
+              })}
+            </Table>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </Fragment>
+  );
+};

client/src/components/Bookmarks/Table/Table.tsx

@@ -0,0 +1,20 @@
+import { Category, Bookmark } from '../../../interfaces';
+import { ContentType } from '../Bookmarks';
+import { BookmarksTable } from './BookmarksTable';
+import { CategoryTable } from './CategoryTable';
+
+interface Props {
+  contentType: ContentType;
+  openFormForUpdating: (data: Category | Bookmark) => void;
+}
+
+export const Table = (props: Props): JSX.Element => {
+  const tableEl =
+    props.contentType === ContentType.category ? (
+      <CategoryTable openFormForUpdating={props.openFormForUpdating} />
+    ) : (
+      <BookmarksTable openFormForUpdating={props.openFormForUpdating} />
+    );
+
+  return tableEl;
+};

client/src/components/Home/Home.tsx

@@ -11,7 +11,7 @@ import { actionCreators } from '../../store';
 import { App, Category } from '../../interfaces';
 
 // UI
-import { Icon, Container, SectionHeadline, Spinner } from '../UI';
+import { Icon, Container, SectionHeadline, Spinner, Message } from '../UI';
 
 // CSS
 import classes from './Home.module.css';
@@ -30,6 +30,7 @@ export const Home = (): JSX.Element => {
     apps: { apps, loading: appsLoading },
     bookmarks: { categories, loading: bookmarksLoading },
     config: { config },
+    auth: { isAuthenticated },
   } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
@@ -100,7 +101,18 @@ export const Home = (): JSX.Element => {
 
       <Header />
 
-      {!config.hideApps ? (
+      {!isAuthenticated &&
+      !apps.some((a) => a.isPinned) &&
+      !categories.some((c) => c.isPinned) ? (
+        <Message>
+          Welcome to Flame! Go to <Link to="/settings/app">/settings</Link>,
+          login and start customizing your new homepage
+        </Message>
+      ) : (
+        <></>
+      )}
+
+      {!config.hideApps && (isAuthenticated || apps.some((a) => a.isPinned)) ? (
         <Fragment>
           <SectionHeadline title="Applications" link="/applications" />
           {appsLoading ? (
@@ -119,10 +131,11 @@ export const Home = (): JSX.Element => {
           <div className={classes.HomeSpace}></div>
         </Fragment>
       ) : (
-        <div></div>
+        <></>
       )}
 
-      {!config.hideCategories ? (
+      {!config.hideCategories &&
+      (isAuthenticated || categories.some((c) => c.isPinned)) ? (
         <Fragment>
           <SectionHeadline title="Bookmarks" link="/bookmarks" />
           {bookmarksLoading ? (
@@ -138,11 +151,12 @@ export const Home = (): JSX.Element => {
               }
               totalCategories={categories.length}
               searching={!!localSearch}
+              fromHomepage={true}
             />
           )}
         </Fragment>
       ) : (
-        <div></div>
+        <></>
       )}
 
       <Link to="/settings" className={classes.SettingsButton}>

client/src/components/Settings/AppDetails/AuthForm/AuthForm.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, Fragment, useEffect, useState } from 'react';
+import { FormEvent, Fragment, useEffect, useState, useRef } from 'react';
 
 // Redux
 import { useSelector, useDispatch } from 'react-redux';
@@ -23,6 +23,12 @@ export const AuthForm = (): JSX.Element => {
     duration: '14d',
   });
 
+  const passwordInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    passwordInputRef.current?.focus();
+  }, []);
+
   useEffect(() => {
     if (token) {
       const decoded = decodeToken(token);
@@ -52,6 +58,7 @@ export const AuthForm = (): JSX.Element => {
               name="password"
               placeholder="••••••"
               autoComplete="current-password"
+              ref={passwordInputRef}
               value={formData.password}
               onChange={(e) =>
                 setFormData({ ...formData, password: e.target.value })

client/src/components/Settings/UISettings/UISettings.tsx

@@ -16,13 +16,14 @@ import { InputGroup, Button, SettingsHeadline } from '../../UI';
 import { otherSettingsTemplate, inputHandler } from '../../../utility';
 
 export const UISettings = (): JSX.Element => {
-  const { loading, config } = useSelector((state: State) => state.config);
+  const {
+    config: { loading, config },
+    bookmarks: { categories },
+  } = useSelector((state: State) => state);
 
   const dispatch = useDispatch();
-  const { updateConfig, sortApps, sortCategories } = bindActionCreators(
+  const { updateConfig, sortApps, sortCategories, sortBookmarks } =
-    actionCreators,
+    bindActionCreators(actionCreators, dispatch);
-    dispatch
-  );
 
   // Initial state
   const [formData, setFormData] = useState<OtherSettingsForm>(
@@ -46,9 +47,15 @@ export const UISettings = (): JSX.Element => {
     // Update local page title
     document.title = formData.customTitle;
 
-    // Sort apps and categories with new settings
+    // Sort entities with new settings
+    if (formData.useOrdering !== config.useOrdering) {
       sortApps();
       sortCategories();
+
+      for (let { id } of categories) {
+        sortBookmarks(id);
+      }
+    }
   };
 
   // Input handler
@@ -85,7 +92,9 @@ export const UISettings = (): JSX.Element => {
       <SettingsHeadline text="Header" />
       {/* HIDE HEADER */}
       <InputGroup>
-        <label htmlFor="hideHeader">Hide greetings</label>
+        <label htmlFor="hideHeader">
+          Hide headline (greetings and weather)
+        </label>
         <select
           id="hideHeader"
           name="hideHeader"

client/src/components/UI/Text/Message/Message.module.css

@@ -1,17 +1,13 @@
-.TableActions {
+.message {
-  display: flex;
+  color: var(--color-primary);
-  align-items: center;
 }
 
-.TableAction {
+.message a {
-  width: 22px;
+  color: var(--color-accent);
+  font-weight: 600;
 }
 
-.TableAction:hover {
+.messageCenter {
-  cursor: pointer;
-}
-
-.Message {
   width: 100%;
   display: flex;
   justify-content: center;
@@ -20,10 +16,11 @@
   margin-bottom: 20px;
 }
 
-.Message a {
+.messageCenter a,
+.messageCenter span {
   color: var(--color-accent);
 }
 
-.Message a:hover {
+.messageCenter a:hover {
   cursor: pointer;
 }

client/src/components/UI/Text/Message/Message.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+import classes from './Message.module.css';
+
+interface Props {
+  children: ReactNode;
+  isPrimary?: boolean;
+}
+
+export const Message = ({ children, isPrimary = true }: Props): JSX.Element => {
+  const style = isPrimary ? classes.message : classes.messageCenter;
+
+  return <p className={style}>{children}</p>;
+};

client/src/components/UI/index.ts

@@ -12,3 +12,4 @@ export * from './Forms/InputGroup/InputGroup';
 export * from './Forms/ModalForm/ModalForm';
 export * from './Buttons/ActionButton/ActionButton';
 export * from './Buttons/Button/Button';
+export * from './Text/Message/Message';

client/src/components/Widgets/WeatherWidget/WeatherWidget.tsx

@@ -71,7 +71,7 @@ export const WeatherWidget = (): JSX.Element => {
               {config.isCelsius ? (
                 <span>{weather.tempC}°C</span>
               ) : (
-                <span>{weather.tempF}°F</span>
+                <span>{Math.round(weather.tempF)}°F</span>
               )}
 
               {/* ADDITIONAL DATA */}

client/src/interfaces/Bookmark.ts

@@ -8,4 +8,6 @@ export interface NewBookmark {
   isPublic: boolean;
 }
 
-export interface Bookmark extends Model, NewBookmark {}
+export interface Bookmark extends Model, NewBookmark {
+  orderId: number;
+}

client/src/store/action-creators/app.ts

@@ -7,6 +7,7 @@ import {
   GetAppsAction,
   PinAppAction,
   ReorderAppsAction,
+  SetEditAppAction,
   SortAppsAction,
   UpdateAppAction,
 } from '../actions/app';
@@ -196,3 +197,11 @@ export const sortApps = () => async (dispatch: Dispatch<SortAppsAction>) => {
     console.log(err);
   }
 };
+
+export const setEditApp =
+  (app: App | null) => (dispatch: Dispatch<SetEditAppAction>) => {
+    dispatch({
+      type: ActionType.setEditApp,
+      payload: app,
+    });
+  };

client/src/store/action-creators/bookmark.ts

@@ -1,5 +1,8 @@
 import axios from 'axios';
 import { Dispatch } from 'redux';
+import { applyAuth } from '../../utility';
+import { ActionType } from '../action-types';
+
 import {
   ApiResponse,
   Bookmark,
@@ -8,8 +11,7 @@ import {
   NewBookmark,
   NewCategory,
 } from '../../interfaces';
-import { applyAuth } from '../../utility';
+
-import { ActionType } from '../action-types';
 import {
   AddBookmarkAction,
   AddCategoryAction,
@@ -17,7 +19,11 @@ import {
   DeleteCategoryAction,
   GetCategoriesAction,
   PinCategoryAction,
+  ReorderBookmarksAction,
   ReorderCategoriesAction,
+  SetEditBookmarkAction,
+  SetEditCategoryAction,
+  SortBookmarksAction,
   SortCategoriesAction,
   UpdateBookmarkAction,
   UpdateCategoryAction,
@@ -95,6 +101,8 @@ export const addBookmark =
         type: ActionType.addBookmark,
         payload: res.data.data,
       });
+
+      dispatch<any>(sortBookmarks(res.data.data.categoryId));
     } catch (err) {
       console.log(err);
     }
@@ -266,6 +274,8 @@ export const updateBookmark =
           payload: res.data.data,
         });
       }
+
+      dispatch<any>(sortBookmarks(res.data.data.categoryId));
     } catch (err) {
       console.log(err);
     }
@@ -319,3 +329,73 @@ export const reorderCategories =
       console.log(err);
     }
   };
+
+export const setEditCategory =
+  (category: Category | null) =>
+  (dispatch: Dispatch<SetEditCategoryAction>) => {
+    dispatch({
+      type: ActionType.setEditCategory,
+      payload: category,
+    });
+  };
+
+export const setEditBookmark =
+  (bookmark: Bookmark | null) =>
+  (dispatch: Dispatch<SetEditBookmarkAction>) => {
+    dispatch({
+      type: ActionType.setEditBookmark,
+      payload: bookmark,
+    });
+  };
+
+export const reorderBookmarks =
+  (bookmarks: Bookmark[], categoryId: number) =>
+  async (dispatch: Dispatch<ReorderBookmarksAction>) => {
+    interface ReorderQuery {
+      bookmarks: {
+        id: number;
+        orderId: number;
+      }[];
+    }
+
+    try {
+      const updateQuery: ReorderQuery = { bookmarks: [] };
+
+      bookmarks.forEach((bookmark, index) =>
+        updateQuery.bookmarks.push({
+          id: bookmark.id,
+          orderId: index + 1,
+        })
+      );
+
+      await axios.put<ApiResponse<{}>>(
+        '/api/bookmarks/0/reorder',
+        updateQuery,
+        { headers: applyAuth() }
+      );
+
+      dispatch({
+        type: ActionType.reorderBookmarks,
+        payload: { bookmarks, categoryId },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+export const sortBookmarks =
+  (categoryId: number) => async (dispatch: Dispatch<SortBookmarksAction>) => {
+    try {
+      const res = await axios.get<ApiResponse<Config>>('/api/config');
+
+      dispatch({
+        type: ActionType.sortBookmarks,
+        payload: {
+          orderType: res.data.data.useOrdering,
+          categoryId,
+        },
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };

client/src/store/action-types/index.ts

@@ -23,6 +23,7 @@ export enum ActionType {
   updateApp = 'UPDATE_APP',
   reorderApps = 'REORDER_APPS',
   sortApps = 'SORT_APPS',
+  setEditApp = 'SET_EDIT_APP',
   // CATEGORES
   getCategories = 'GET_CATEGORIES',
   getCategoriesSuccess = 'GET_CATEGORIES_SUCCESS',
@@ -33,10 +34,14 @@ export enum ActionType {
   updateCategory = 'UPDATE_CATEGORY',
   sortCategories = 'SORT_CATEGORIES',
   reorderCategories = 'REORDER_CATEGORIES',
+  setEditCategory = 'SET_EDIT_CATEGORY',
   // BOOKMARKS
   addBookmark = 'ADD_BOOKMARK',
   deleteBookmark = 'DELETE_BOOKMARK',
   updateBookmark = 'UPDATE_BOOKMARK',
+  setEditBookmark = 'SET_EDIT_BOOKMARK',
+  reorderBookmarks = 'REORDER_BOOKMARKS',
+  sortBookmarks = 'SORT_BOOKMARKS',
   // AUTH
   login = 'LOGIN',
   logout = 'LOGOUT',

client/src/store/actions/app.ts

@@ -36,3 +36,8 @@ export interface SortAppsAction {
   type: ActionType.sortApps;
   payload: string;
 }
+
+export interface SetEditAppAction {
+  type: ActionType.setEditApp;
+  payload: App | null;
+}

client/src/store/actions/bookmark.ts

@@ -56,3 +56,29 @@ export interface ReorderCategoriesAction {
   type: ActionType.reorderCategories;
   payload: Category[];
 }
+
+export interface SetEditCategoryAction {
+  type: ActionType.setEditCategory;
+  payload: Category | null;
+}
+
+export interface SetEditBookmarkAction {
+  type: ActionType.setEditBookmark;
+  payload: Bookmark | null;
+}
+
+export interface ReorderBookmarksAction {
+  type: ActionType.reorderBookmarks;
+  payload: {
+    bookmarks: Bookmark[];
+    categoryId: number;
+  };
+}
+
+export interface SortBookmarksAction {
+  type: ActionType.sortBookmarks;
+  payload: {
+    orderType: string;
+    categoryId: number;
+  };
+}

client/src/store/actions/index.ts

@@ -24,6 +24,7 @@ import {
   UpdateAppAction,
   ReorderAppsAction,
   SortAppsAction,
+  SetEditAppAction,
 } from './app';
 
 import {
@@ -37,6 +38,10 @@ import {
   AddBookmarkAction,
   DeleteBookmarkAction,
   UpdateBookmarkAction,
+  SetEditCategoryAction,
+  SetEditBookmarkAction,
+  ReorderBookmarksAction,
+  SortBookmarksAction,
 } from './bookmark';
 
 import {
@@ -67,6 +72,7 @@ export type Action =
   | UpdateAppAction
   | ReorderAppsAction
   | SortAppsAction
+  | SetEditAppAction
   // Categories
   | GetCategoriesAction<any>
   | AddCategoryAction
@@ -75,10 +81,14 @@ export type Action =
   | UpdateCategoryAction
   | SortCategoriesAction
   | ReorderCategoriesAction
+  | SetEditCategoryAction
   // Bookmarks
   | AddBookmarkAction
   | DeleteBookmarkAction
   | UpdateBookmarkAction
+  | SetEditBookmarkAction
+  | ReorderBookmarksAction
+  | SortBookmarksAction
   // Auth
   | LoginAction
   | LogoutAction

client/src/store/reducers/app.ts

@@ -7,12 +7,14 @@ interface AppsState {
   loading: boolean;
   apps: App[];
   errors: string | undefined;
+  appInUpdate: App | null;
 }
 
 const initialState: AppsState = {
   loading: true,
   apps: [],
   errors: undefined,
+  appInUpdate: null,
 };
 
 export const appsReducer = (
@@ -20,71 +22,86 @@ export const appsReducer = (
   action: Action
 ): AppsState => {
   switch (action.type) {
-    case ActionType.getApps:
+    case ActionType.getApps: {
       return {
         ...state,
         loading: true,
         errors: undefined,
       };
+    }
 
-    case ActionType.getAppsSuccess:
+    case ActionType.getAppsSuccess: {
       return {
         ...state,
         loading: false,
         apps: action.payload || [],
       };
+    }
 
-    case ActionType.pinApp:
+    case ActionType.pinApp: {
-      const pinnedAppIdx = state.apps.findIndex(
+      const appIdx = state.apps.findIndex(
         (app) => app.id === action.payload.id
       );
 
       return {
         ...state,
         apps: [
-          ...state.apps.slice(0, pinnedAppIdx),
+          ...state.apps.slice(0, appIdx),
           action.payload,
-          ...state.apps.slice(pinnedAppIdx + 1),
+          ...state.apps.slice(appIdx + 1),
         ],
       };
+    }
 
-    case ActionType.addAppSuccess:
+    case ActionType.addAppSuccess: {
       return {
         ...state,
         apps: [...state.apps, action.payload],
       };
+    }
 
-    case ActionType.deleteApp:
+    case ActionType.deleteApp: {
       return {
         ...state,
         apps: [...state.apps].filter((app) => app.id !== action.payload),
       };
+    }
 
-    case ActionType.updateApp:
+    case ActionType.updateApp: {
-      const updatedAppIdx = state.apps.findIndex(
+      const appIdx = state.apps.findIndex(
         (app) => app.id === action.payload.id
       );
 
       return {
         ...state,
         apps: [
-          ...state.apps.slice(0, updatedAppIdx),
+          ...state.apps.slice(0, appIdx),
           action.payload,
-          ...state.apps.slice(updatedAppIdx + 1),
+          ...state.apps.slice(appIdx + 1),
         ],
       };
+    }
 
-    case ActionType.reorderApps:
+    case ActionType.reorderApps: {
       return {
         ...state,
         apps: action.payload,
       };
+    }
 
-    case ActionType.sortApps:
+    case ActionType.sortApps: {
       return {
         ...state,
         apps: sortData<App>(state.apps, action.payload),
       };
+    }
+
+    case ActionType.setEditApp: {
+      return {
+        ...state,
+        appInUpdate: action.payload,
+      };
+    }
 
     default:
       return state;

client/src/store/reducers/auth.ts

@@ -22,24 +22,28 @@ export const authReducer = (
         token: action.payload,
         isAuthenticated: true,
       };
+
     case ActionType.logout:
       return {
         ...state,
         token: null,
         isAuthenticated: false,
       };
+
     case ActionType.autoLogin:
       return {
         ...state,
         token: action.payload,
         isAuthenticated: true,
       };
+
     case ActionType.authError:
       return {
         ...state,
         token: null,
         isAuthenticated: false,
       };
+
     default:
       return state;
   }

client/src/store/reducers/bookmark.ts

@@ -1,4 +1,4 @@
-import { Category } from '../../interfaces';
+import { Bookmark, Category } from '../../interfaces';
 import { sortData } from '../../utility';
 import { ActionType } from '../action-types';
 import { Action } from '../actions';
@@ -7,12 +7,16 @@ interface BookmarksState {
   loading: boolean;
   errors: string | undefined;
   categories: Category[];
+  categoryInEdit: Category | null;
+  bookmarkInEdit: Bookmark | null;
 }
 
 const initialState: BookmarksState = {
   loading: true,
   errors: undefined,
   categories: [],
+  categoryInEdit: null,
+  bookmarkInEdit: null,
 };
 
 export const bookmarksReducer = (
@@ -20,27 +24,181 @@ export const bookmarksReducer = (
   action: Action
 ): BookmarksState => {
   switch (action.type) {
-    case ActionType.getCategories:
+    case ActionType.getCategories: {
       return {
         ...state,
         loading: true,
         errors: undefined,
       };
+    }
 
-    case ActionType.getCategoriesSuccess:
+    case ActionType.getCategoriesSuccess: {
       return {
         ...state,
         loading: false,
         categories: action.payload,
       };
+    }
 
-    case ActionType.addCategory:
+    case ActionType.addCategory: {
       return {
         ...state,
         categories: [...state.categories, { ...action.payload, bookmarks: [] }],
       };
+    }
 
-    case ActionType.addBookmark:
+    case ActionType.addBookmark: {
+      const categoryIdx = state.categories.findIndex(
+        (category) => category.id === action.payload.categoryId
+      );
+
+      const targetCategory = {
+        ...state.categories[categoryIdx],
+        bookmarks: [...state.categories[categoryIdx].bookmarks, action.payload],
+      };
+
+      return {
+        ...state,
+        categories: [
+          ...state.categories.slice(0, categoryIdx),
+          targetCategory,
+          ...state.categories.slice(categoryIdx + 1),
+        ],
+        categoryInEdit: targetCategory,
+      };
+    }
+
+    case ActionType.pinCategory: {
+      const categoryIdx = state.categories.findIndex(
+        (category) => category.id === action.payload.id
+      );
+
+      return {
+        ...state,
+        categories: [
+          ...state.categories.slice(0, categoryIdx),
+          {
+            ...action.payload,
+            bookmarks: [...state.categories[categoryIdx].bookmarks],
+          },
+          ...state.categories.slice(categoryIdx + 1),
+        ],
+      };
+    }
+
+    case ActionType.deleteCategory: {
+      const categoryIdx = state.categories.findIndex(
+        (category) => category.id === action.payload
+      );
+
+      return {
+        ...state,
+        categories: [
+          ...state.categories.slice(0, categoryIdx),
+          ...state.categories.slice(categoryIdx + 1),
+        ],
+      };
+    }
+
+    case ActionType.updateCategory: {
+      const categoryIdx = state.categories.findIndex(
+        (category) => category.id === action.payload.id
+      );
+
+      return {
+        ...state,
+        categories: [
+          ...state.categories.slice(0, categoryIdx),
+          {
+            ...action.payload,
+            bookmarks: [...state.categories[categoryIdx].bookmarks],
+          },
+          ...state.categories.slice(categoryIdx + 1),
+        ],
+      };
+    }
+
+    case ActionType.deleteBookmark: {
+      const categoryIdx = state.categories.findIndex(
+        (category) => category.id === action.payload.categoryId
+      );
+
+      const targetCategory = {
+        ...state.categories[categoryIdx],
+        bookmarks: state.categories[categoryIdx].bookmarks.filter(
+          (bookmark) => bookmark.id !== action.payload.bookmarkId
+        ),
+      };
+
+      return {
+        ...state,
+        categories: [
+          ...state.categories.slice(0, categoryIdx),
+          targetCategory,
+          ...state.categories.slice(categoryIdx + 1),
+        ],
+        categoryInEdit: targetCategory,
+      };
+    }
+
+    case ActionType.updateBookmark: {
+      const categoryIdx = state.categories.findIndex(
+        (category) => category.id === action.payload.categoryId
+      );
+
+      const bookmarkIdx = state.categories[categoryIdx].bookmarks.findIndex(
+        (bookmark) => bookmark.id === action.payload.id
+      );
+
+      const targetCategory = {
+        ...state.categories[categoryIdx],
+        bookmarks: [
+          ...state.categories[categoryIdx].bookmarks.slice(0, bookmarkIdx),
+          action.payload,
+          ...state.categories[categoryIdx].bookmarks.slice(bookmarkIdx + 1),
+        ],
+      };
+
+      return {
+        ...state,
+        categories: [
+          ...state.categories.slice(0, categoryIdx),
+          targetCategory,
+          ...state.categories.slice(categoryIdx + 1),
+        ],
+        categoryInEdit: targetCategory,
+      };
+    }
+
+    case ActionType.sortCategories: {
+      return {
+        ...state,
+        categories: sortData<Category>(state.categories, action.payload),
+      };
+    }
+
+    case ActionType.reorderCategories: {
+      return {
+        ...state,
+        categories: action.payload,
+      };
+    }
+
+    case ActionType.setEditCategory: {
+      return {
+        ...state,
+        categoryInEdit: action.payload,
+      };
+    }
+
+    case ActionType.setEditBookmark: {
+      return {
+        ...state,
+        bookmarkInEdit: action.payload,
+      };
+    }
+
+    case ActionType.reorderBookmarks: {
       const categoryIdx = state.categories.findIndex(
         (category) => category.id === action.payload.categoryId
       );
@@ -51,121 +209,36 @@ export const bookmarksReducer = (
           ...state.categories.slice(0, categoryIdx),
           {
             ...state.categories[categoryIdx],
-            bookmarks: [
+            bookmarks: action.payload.bookmarks,
-              ...state.categories[categoryIdx].bookmarks,
-              action.payload,
-            ],
           },
           ...state.categories.slice(categoryIdx + 1),
         ],
       };
+    }
 
-    case ActionType.pinCategory:
+    case ActionType.sortBookmarks: {
-      const pinnedCategoryIdx = state.categories.findIndex(
+      const categoryIdx = state.categories.findIndex(
-        (category) => category.id === action.payload.id
-      );
-
-      return {
-        ...state,
-        categories: [
-          ...state.categories.slice(0, pinnedCategoryIdx),
-          {
-            ...action.payload,
-            bookmarks: [...state.categories[pinnedCategoryIdx].bookmarks],
-          },
-          ...state.categories.slice(pinnedCategoryIdx + 1),
-        ],
-      };
-
-    case ActionType.deleteCategory:
-      const deletedCategoryIdx = state.categories.findIndex(
-        (category) => category.id === action.payload
-      );
-
-      return {
-        ...state,
-        categories: [
-          ...state.categories.slice(0, deletedCategoryIdx),
-          ...state.categories.slice(deletedCategoryIdx + 1),
-        ],
-      };
-
-    case ActionType.updateCategory:
-      const updatedCategoryIdx = state.categories.findIndex(
-        (category) => category.id === action.payload.id
-      );
-
-      return {
-        ...state,
-        categories: [
-          ...state.categories.slice(0, updatedCategoryIdx),
-          {
-            ...action.payload,
-            bookmarks: [...state.categories[updatedCategoryIdx].bookmarks],
-          },
-          ...state.categories.slice(updatedCategoryIdx + 1),
-        ],
-      };
-
-    case ActionType.deleteBookmark:
-      const categoryInUpdateIdx = state.categories.findIndex(
         (category) => category.id === action.payload.categoryId
       );
 
-      return {
+      const sortedBookmarks = sortData<Bookmark>(
-        ...state,
+        state.categories[categoryIdx].bookmarks,
-        categories: [
+        action.payload.orderType
-          ...state.categories.slice(0, categoryInUpdateIdx),
-          {
-            ...state.categories[categoryInUpdateIdx],
-            bookmarks: state.categories[categoryInUpdateIdx].bookmarks.filter(
-              (bookmark) => bookmark.id !== action.payload.bookmarkId
-            ),
-          },
-          ...state.categories.slice(categoryInUpdateIdx + 1),
-        ],
-      };
-
-    case ActionType.updateBookmark:
-      const parentCategoryIdx = state.categories.findIndex(
-        (category) => category.id === action.payload.categoryId
       );
-      const updatedBookmarkIdx = state.categories[
-        parentCategoryIdx
-      ].bookmarks.findIndex((bookmark) => bookmark.id === action.payload.id);
 
       return {
         ...state,
         categories: [
-          ...state.categories.slice(0, parentCategoryIdx),
+          ...state.categories.slice(0, categoryIdx),
           {
-            ...state.categories[parentCategoryIdx],
+            ...state.categories[categoryIdx],
-            bookmarks: [
+            bookmarks: sortedBookmarks,
-              ...state.categories[parentCategoryIdx].bookmarks.slice(
-                0,
-                updatedBookmarkIdx
-              ),
-              action.payload,
-              ...state.categories[parentCategoryIdx].bookmarks.slice(
-                updatedBookmarkIdx + 1
-              ),
-            ],
           },
-          ...state.categories.slice(parentCategoryIdx + 1),
+          ...state.categories.slice(categoryIdx + 1),
         ],
       };
+    }
 
-    case ActionType.sortCategories:
-      return {
-        ...state,
-        categories: sortData<Category>(state.categories, action.payload),
-      };
-
-    case ActionType.reorderCategories:
-      return {
-        ...state,
-        categories: action.payload,
-      };
     default:
       return state;
   }

client/src/store/reducers/config.ts

@@ -26,26 +26,31 @@ export const configReducer = (
         loading: false,
         config: action.payload,
       };
+
     case ActionType.updateConfig:
       return {
         ...state,
         config: action.payload,
       };
+
     case ActionType.fetchQueries:
       return {
         ...state,
         customQueries: action.payload,
       };
+
     case ActionType.addQuery:
       return {
         ...state,
         customQueries: [...state.customQueries, action.payload],
       };
+
     case ActionType.deleteQuery:
       return {
         ...state,
         customQueries: action.payload,
       };
+
     case ActionType.updateQuery:
       return {
         ...state,

client/src/store/reducers/notification.ts

@@ -29,6 +29,7 @@ export const notificationReducer = (
         ],
         idCounter: state.idCounter + 1,
       };
+
     case ActionType.clearNotification:
       return {
         ...state,

client/src/store/reducers/theme.ts

@@ -24,6 +24,7 @@ export const themeReducer = (
   switch (action.type) {
     case ActionType.setTheme:
       return { theme: action.payload };
+
     default:
       return state;
   }

client/src/utility/templateObjects/bookmarkTemplate.ts

@@ -13,4 +13,5 @@ export const bookmarkTemplate: Bookmark = {
   id: -1,
   createdAt: new Date(),
   updatedAt: new Date(),
+  orderId: 0,
 };

client/src/utility/validators.ts

@@ -13,7 +13,7 @@ export const isUrl = (data: string): boolean => {
 };
 
 export const isImage = (data: string): boolean => {
-  const regex = /.(jpeg|jpg|png)$/i;
+  const regex = /.(jpeg|jpg|png|ico)$/i;
 
   return regex.test(data);
 };

controllers/apps/getAllApps.js

@@ -28,17 +28,15 @@ const getAllApps = asyncWrapper(async (req, res, next) => {
   // apps visibility
   const where = req.isAuthenticated ? {} : { isPublic: true };
 
-  if (orderType == 'name') {
+  const order =
+    orderType == 'name'
+      ? [[Sequelize.fn('lower', Sequelize.col('name')), 'ASC']]
+      : [[orderType, 'ASC']];
+
   apps = await App.findAll({
-      order: [[Sequelize.fn('lower', Sequelize.col('name')), 'ASC']],
+    order,
     where,
   });
-  } else {
-    apps = await App.findAll({
-      order: [[orderType, 'ASC']],
-      where,
-    });
-  }
 
   if (process.env.NODE_ENV === 'production') {
     // Set header to fetch containers info every time

controllers/bookmarks/getAllBookmarks.js

@@ -1,16 +1,24 @@
 const asyncWrapper = require('../../middleware/asyncWrapper');
 const Bookmark = require('../../models/Bookmark');
 const { Sequelize } = require('sequelize');
+const loadConfig = require('../../utils/loadConfig');
 
 // @desc      Get all bookmarks
 // @route     GET /api/bookmarks
 // @access    Public
 const getAllBookmarks = asyncWrapper(async (req, res, next) => {
+  const { useOrdering: orderType } = await loadConfig();
+
   // bookmarks visibility
   const where = req.isAuthenticated ? {} : { isPublic: true };
 
+  const order =
+    orderType == 'name'
+      ? [[Sequelize.fn('lower', Sequelize.col('name')), 'ASC']]
+      : [[orderType, 'ASC']];
+
   const bookmarks = await Bookmark.findAll({
-    order: [[Sequelize.fn('lower', Sequelize.col('name')), 'ASC']],
+    order,
     where,
   });
 

controllers/bookmarks/index.js

@@ -4,4 +4,5 @@ module.exports = {
   getSingleBookmark: require('./getSingleBookmark'),
   updateBookmark: require('./updateBookmark'),
   deleteBookmark: require('./deleteBookmark'),
+  reorderBookmarks: require('./reorderBookmarks'),
 };

controllers/bookmarks/reorderBookmarks.js

@@ -0,0 +1,23 @@
+const asyncWrapper = require('../../middleware/asyncWrapper');
+const Bookmark = require('../../models/Bookmark');
+
+// @desc      Reorder bookmarks
+// @route     PUT /api/bookmarks/0/reorder
+// @access    Public
+const 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,
+    data: {},
+  });
+});
+
+module.exports = reorderBookmarks;

controllers/categories/getAllCategories.js

@@ -16,29 +16,27 @@ const getAllCategories = asyncWrapper(async (req, res, next) => {
   // categories visibility
   const where = req.isAuthenticated ? {} : { isPublic: true };
 
-  if (orderType == 'name') {
+  const order =
-    categories = await Category.findAll({
+    orderType == 'name'
+      ? [
+          [Sequelize.fn('lower', Sequelize.col('Category.name')), 'ASC'],
+          [Sequelize.fn('lower', Sequelize.col('bookmarks.name')), 'ASC'],
+        ]
+      : [
+          [orderType, 'ASC'],
+          [{ model: Bookmark, as: 'bookmarks' }, orderType, 'ASC'],
+        ];
+
+  categories = categories = await Category.findAll({
     include: [
       {
         model: Bookmark,
         as: 'bookmarks',
       },
     ],
-      order: [[Sequelize.fn('lower', Sequelize.col('Category.name')), 'ASC']],
+    order,
     where,
   });
-  } else {
-    categories = await Category.findAll({
-      include: [
-        {
-          model: Bookmark,
-          as: 'bookmarks',
-        },
-      ],
-      order: [[orderType, 'ASC']],
-      where,
-    });
-  }
 
   if (req.isAuthenticated) {
     output = categories;

controllers/categories/getSingleCategory.js

@@ -2,13 +2,22 @@ const asyncWrapper = require('../../middleware/asyncWrapper');
 const ErrorResponse = require('../../utils/ErrorResponse');
 const Category = require('../../models/Category');
 const Bookmark = require('../../models/Bookmark');
+const { Sequelize } = require('sequelize');
+const loadConfig = require('../../utils/loadConfig');
 
 // @desc      Get single category
 // @route     GET /api/categories/:id
 // @access    Public
 const getSingleCategory = asyncWrapper(async (req, res, next) => {
+  const { useOrdering: orderType } = await loadConfig();
+
   const visibility = req.isAuthenticated ? {} : { isPublic: true };
 
+  const order =
+    orderType == 'name'
+      ? [[Sequelize.fn('lower', Sequelize.col('bookmarks.name')), 'ASC']]
+      : [[{ model: Bookmark, as: 'bookmarks' }, orderType, 'ASC']];
+
   const category = await Category.findOne({
     where: { id: req.params.id, ...visibility },
     include: [
@@ -18,6 +27,7 @@ const getSingleCategory = asyncWrapper(async (req, res, next) => {
         where: visibility,
       },
     ],
+    order,
   });
 
   if (!category) {

controllers/categories/reorderCategories.js

@@ -1,5 +1,6 @@
 const asyncWrapper = require('../../middleware/asyncWrapper');
 const Category = require('../../models/Category');
+
 // @desc      Reorder categories
 // @route     PUT /api/categories/0/reorder
 // @access    Public

db/migrations/03_weather.js

@@ -1,7 +1,5 @@
 const { DataTypes } = require('sequelize');
 const { INTEGER, FLOAT } = DataTypes;
-const loadConfig = require('../../utils/loadConfig');
-const getExternalWeather = require('../../utils/getExternalWeather');
 
 const up = async (query) => {
   await query.addColumn('weather', 'humidity', {
@@ -15,12 +13,6 @@ const up = async (query) => {
   await query.addColumn('weather', 'windM', {
     type: FLOAT,
   });
-
-  const { WEATHER_API_KEY: secret } = await loadConfig();
-
-  if (secret) {
-    await getExternalWeather();
-  }
 };
 
 const down = async (query) => {

db/migrations/04_bookmarks-order.js

@@ -0,0 +1,19 @@
+const { DataTypes } = require('sequelize');
+const { INTEGER } = DataTypes;
+
+const up = async (query) => {
+  await query.addColumn('bookmarks', 'orderId', {
+    type: INTEGER,
+    allowNull: true,
+    defaultValue: null,
+  });
+};
+
+const down = async (query) => {
+  await query.removeColumn('bookmarks', 'orderId');
+};
+
+module.exports = {
+  up,
+  down,
+};

middleware/multer.js

@@ -14,7 +14,7 @@ const storage = multer.diskStorage({
   },
 });
 
-const supportedTypes = ['jpg', 'jpeg', 'png', 'svg', 'svg+xml'];
+const supportedTypes = ['jpg', 'jpeg', 'png', 'svg', 'svg+xml', 'x-icon'];
 
 const fileFilter = (req, file, cb) => {
   if (supportedTypes.includes(file.mimetype.split('/')[1])) {

models/Bookmark.js

@@ -25,6 +25,11 @@ const Bookmark = sequelize.define(
       allowNull: true,
       defaultValue: 1,
     },
+    orderId: {
+      type: DataTypes.INTEGER,
+      allowNull: true,
+      defaultValue: null,
+    },
   },
   {
     tableName: 'bookmarks',

package-lock.json

@@ -5,13 +5,13 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "flame",
       "version": "0.1.0",
       "license": "ISC",
       "dependencies": {
         "@kubernetes/client-node": "^0.15.1",
         "@types/express": "^4.17.13",
         "axios": "^0.24.0",
-        "colors": "^1.4.0",
         "concurrently": "^6.3.0",
         "docker-secret": "^1.2.3",
         "dotenv": "^10.0.0",
@@ -132,6 +132,18 @@
       "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
       "engines": {
         "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
       }
     },
     "node_modules/@panva/asn1.js": {
@@ -377,6 +389,10 @@
         "fast-json-stable-stringify": "^2.0.0",
         "json-schema-traverse": "^0.4.1",
         "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
     "node_modules/ansi-align": {
@@ -388,6 +404,14 @@
         "string-width": "^4.1.0"
       }
     },
+    "node_modules/ansi-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -397,6 +421,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/any-promise": {
@@ -564,6 +591,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/brace-expansion": {
@@ -682,6 +712,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/cacheable-request/node_modules/lowercase-keys": {
@@ -700,6 +733,9 @@
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/camelcase": {
@@ -709,6 +745,9 @@
       "dev": true,
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/caseless": {
@@ -720,20 +759,21 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/chalk/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -788,6 +828,9 @@
       "dev": true,
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/cliui": {
@@ -851,14 +894,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "node_modules/colors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
     "node_modules/combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -910,29 +945,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/concurrently/node_modules/chalk": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/concurrently/node_modules/chalk/node_modules/supports-color": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/configstore": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
@@ -1057,6 +1069,10 @@
       "integrity": "sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w==",
       "engines": {
         "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
       }
     },
     "node_modules/debug": {
@@ -1298,6 +1314,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
     "node_modules/execa/node_modules/get-stream": {
@@ -1306,6 +1325,9 @@
       "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/express": {
@@ -1404,8 +1426,19 @@
       "version": "1.14.5",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
       "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
       "engines": {
         "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
       }
     },
     "node_modules/forever-agent": {
@@ -1463,6 +1496,7 @@
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
       "dev": true,
+      "hasInstallScript": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1565,6 +1599,9 @@
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
         "has-symbols": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/get-stream": {
@@ -1601,6 +1638,9 @@
       },
       "engines": {
         "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/glob-parent": {
@@ -1625,6 +1665,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/global-dirs/node_modules/ini": {
@@ -1676,6 +1719,7 @@
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "deprecated": "this library is no longer supported",
       "dependencies": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
@@ -1709,6 +1753,9 @@
       "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/has-unicode": {
@@ -1903,6 +1950,9 @@
       "integrity": "sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==",
       "dependencies": {
         "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-extglob": {
@@ -1945,6 +1995,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/is-nan": {
@@ -1957,6 +2010,9 @@
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-npm": {
@@ -1966,6 +2022,9 @@
       "dev": true,
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/is-number": {
@@ -2001,6 +2060,9 @@
       "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/is-typedarray": {
@@ -2027,7 +2089,10 @@
     "node_modules/isomorphic-ws": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz",
-      "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w=="
+      "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==",
+      "peerDependencies": {
+        "ws": "*"
+      }
     },
     "node_modules/isstream": {
       "version": "0.1.2",
@@ -2043,6 +2108,9 @@
       },
       "engines": {
         "node": ">=10.13.0 < 13 || >=13.7.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
       }
     },
     "node_modules/js-yaml": {
@@ -2068,9 +2136,9 @@
       "dev": true
     },
     "node_modules/json-schema": {
-      "version": "0.2.3",
+      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -2117,17 +2185,17 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/jsprim": {
-      "version": "1.4.1",
+      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
-      "engines": [
-        "node >=0.6.0"
-      ],
       "dependencies": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
+        "json-schema": "0.4.0",
         "verror": "1.10.0"
+      },
+      "engines": {
+        "node": ">=0.6.0"
       }
     },
     "node_modules/jwa": {
@@ -2253,6 +2321,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/make-dir/node_modules/semver": {
@@ -2525,6 +2596,7 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.11.0.tgz",
       "integrity": "sha512-TwWAOZb0j7e9eGaf9esRx3ZcLaE5tQ2lvYy1pb5IAaG1a2e2Kv5Lms1Y4hpj+ciXJRofIxxlt5haeQ/2ANeE0Q==",
+      "deprecated": "Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future",
       "dependencies": {
         "detect-libc": "^1.0.2",
         "mkdirp": "^0.5.1",
@@ -2553,18 +2625,37 @@
         "nopt": "bin/nopt.js"
       }
     },
+    "node_modules/node-pre-gyp/node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/node-pre-gyp/node_modules/tar": {
-      "version": "4.4.13",
+      "version": "4.4.19",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",
-      "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",
+      "integrity": "sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA==",
       "dependencies": {
-        "chownr": "^1.1.1",
+        "chownr": "^1.1.4",
-        "fs-minipass": "^1.2.5",
+        "fs-minipass": "^1.2.7",
-        "minipass": "^2.8.6",
+        "minipass": "^2.9.0",
-        "minizlib": "^1.2.1",
+        "minizlib": "^1.3.3",
-        "mkdirp": "^0.5.0",
+        "mkdirp": "^0.5.5",
-        "safe-buffer": "^5.1.2",
+        "safe-buffer": "^5.2.1",
-        "yallist": "^3.0.3"
+        "yallist": "^3.1.1"
       },
       "engines": {
         "node": ">=4.5"
@@ -2593,6 +2684,7 @@
       "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.14.tgz",
       "integrity": "sha512-frcpDx+PviKEQRSYzwhckuO2zoHcBYLHI754RE9z5h1RGtrngerc04mLpQQCPWBkH/2ObrX7We9YiwVSYZpFJQ==",
       "dev": true,
+      "hasInstallScript": true,
       "dependencies": {
         "chokidar": "^3.2.2",
         "debug": "^3.2.6",
@@ -2610,6 +2702,10 @@
       },
       "engines": {
         "node": ">=8.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/nodemon"
       }
     },
     "node_modules/nodemon/node_modules/debug": {
@@ -2658,6 +2754,9 @@
       },
       "bin": {
         "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "*"
       }
     },
     "node_modules/normalize-path": {
@@ -2799,6 +2898,9 @@
       },
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/openid-client": {
@@ -2816,6 +2918,9 @@
       },
       "engines": {
         "node": "^10.19.0 || >=12.0.0 < 13 || >=13.7.0 < 14 || >= 14.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
       }
     },
     "node_modules/openid-client/node_modules/@sindresorhus/is": {
@@ -2824,6 +2929,9 @@
       "integrity": "sha512-VkE3KLBmJwcCaVARtQpfuKcKv8gcBmUubrfHGF84dXuuW6jgsRYxPtzcIhPyK9WAPpRt2/xY6zkD9MnRaJzSyw==",
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/is?sponsor=1"
       }
     },
     "node_modules/openid-client/node_modules/@szmarczak/http-timer": {
@@ -2863,6 +2971,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/openid-client/node_modules/defer-to-connect": {
@@ -2882,6 +2993,9 @@
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/openid-client/node_modules/got": {
@@ -2903,6 +3017,9 @@
       },
       "engines": {
         "node": ">=10.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/got?sponsor=1"
       }
     },
     "node_modules/openid-client/node_modules/json-buffer": {
@@ -2932,6 +3049,9 @@
       "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/openid-client/node_modules/normalize-url": {
@@ -2940,6 +3060,9 @@
       "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/openid-client/node_modules/p-cancelable": {
@@ -3062,6 +3185,9 @@
       "dev": true,
       "engines": {
         "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
     "node_modules/prepend-http": {
@@ -3144,6 +3270,9 @@
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/range-parser": {
@@ -3247,6 +3376,7 @@
       "version": "2.88.2",
       "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
       "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
+      "deprecated": "request has been deprecated, see https://github.com/request/request/issues/3142",
       "dependencies": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -3285,6 +3415,7 @@
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+      "deprecated": "Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.",
       "bin": {
         "uuid": "bin/uuid"
       }
@@ -3304,6 +3435,9 @@
       "dependencies": {
         "is-core-module": "^2.2.0",
         "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/resolve-alpn": {
@@ -3448,6 +3582,26 @@
       },
       "engines": {
         "node": ">=10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "mariadb": {
+          "optional": true
+        },
+        "mysql2": {
+          "optional": true
+        },
+        "pg": {
+          "optional": true
+        },
+        "pg-hstore": {
+          "optional": true
+        },
+        "sqlite3": {
+          "optional": true
+        },
+        "tedious": {
+          "optional": true
+        }
       }
     },
     "node_modules/sequelize-pool": {
@@ -3467,6 +3621,11 @@
       },
       "engines": {
         "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
     "node_modules/sequelize/node_modules/ms": {
@@ -3566,12 +3725,21 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/sqlite3/-/sqlite3-5.0.2.tgz",
       "integrity": "sha512-1SdTNo+BVU211Xj1csWa8lV6KM0CtucDwRyA0VHl91wEH1Mgh7RxUpI4rVvG7OhHrzCSGaVyW5g8vKvlrk9DJA==",
+      "hasInstallScript": true,
       "dependencies": {
         "node-addon-api": "^3.0.0",
         "node-pre-gyp": "^0.11.0"
       },
       "optionalDependencies": {
         "node-gyp": "3.x"
+      },
+      "peerDependencies": {
+        "node-gyp": "3.x"
+      },
+      "peerDependenciesMeta": {
+        "node-gyp": {
+          "optional": true
+        }
       }
     },
     "node_modules/sshpk": {
@@ -3589,6 +3757,11 @@
         "safer-buffer": "^2.0.2",
         "tweetnacl": "~0.14.0"
       },
+      "bin": {
+        "sshpk-conv": "bin/sshpk-conv",
+        "sshpk-sign": "bin/sshpk-sign",
+        "sshpk-verify": "bin/sshpk-verify"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3670,6 +3843,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+      "dependencies": {
+        "ansi-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/strip-final-newline": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
@@ -3695,12 +3879,16 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
     "node_modules/tar": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
       "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "deprecated": "This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.",
       "optional": true,
       "dependencies": {
         "block-stream": "*",
@@ -3736,6 +3924,9 @@
       },
       "bin": {
         "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/to-readable-stream": {
@@ -3832,6 +4023,9 @@
       "dev": true,
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/type-is": {
@@ -3925,6 +4119,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/yeoman/update-notifier?sponsor=1"
       }
     },
     "node_modules/update-notifier/node_modules/semver": {
@@ -4032,14 +4229,6 @@
         "string-width": "^1.0.2 || 2"
       }
     },
-    "node_modules/wide-align/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/wide-align/node_modules/string-width": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -4052,17 +4241,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/wide-align/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-      "dependencies": {
-        "ansi-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/widest-line": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
@@ -4094,6 +4272,9 @@
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
     "node_modules/wrap-ansi/node_modules/ansi-regex": {
@@ -4138,6 +4319,18 @@
       "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
       "engines": {
         "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
       }
     },
     "node_modules/xdg-basedir": {
@@ -4277,7 +4470,8 @@
         "ws": {
           "version": "7.5.5",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz",
-          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w=="
+          "integrity": "sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==",
+          "requires": {}
         }
       }
     },
@@ -4519,6 +4713,11 @@
         "string-width": "^4.1.0"
       }
     },
+    "ansi-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+    },
     "ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -4804,7 +5003,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -4814,7 +5012,6 @@
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -4910,11 +5107,6 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
-    "colors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA=="
-    },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
@@ -4952,27 +5144,6 @@
         "supports-color": "^8.1.0",
         "tree-kill": "^1.2.2",
         "yargs": "^16.2.0"
-      },
-      "dependencies": {
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          },
-          "dependencies": {
-            "supports-color": {
-              "version": "7.2.0",
-              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-              "requires": {
-                "has-flag": "^4.0.0"
-              }
-            }
-          }
-        }
       }
     },
     "configstore": {
@@ -5838,7 +6009,8 @@
     "isomorphic-ws": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz",
-      "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w=="
+      "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==",
+      "requires": {}
     },
     "isstream": {
       "version": "0.1.2",
@@ -5873,9 +6045,9 @@
       "dev": true
     },
     "json-schema": {
-      "version": "0.2.3",
+      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "json-schema-traverse": {
       "version": "0.4.1",
@@ -5917,13 +6089,13 @@
       }
     },
     "jsprim": {
-      "version": "1.4.1",
+      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "integrity": "sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==",
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
+        "json-schema": "0.4.0",
         "verror": "1.10.0"
       }
     },
@@ -6274,18 +6446,23 @@
             "osenv": "^0.1.4"
           }
         },
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+        },
         "tar": {
-          "version": "4.4.13",
+          "version": "4.4.19",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",
-          "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",
+          "integrity": "sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA==",
           "requires": {
-            "chownr": "^1.1.1",
+            "chownr": "^1.1.4",
-            "fs-minipass": "^1.2.5",
+            "fs-minipass": "^1.2.7",
-            "minipass": "^2.8.6",
+            "minipass": "^2.9.0",
-            "minizlib": "^1.2.1",
+            "minizlib": "^1.3.3",
-            "mkdirp": "^0.5.0",
+            "mkdirp": "^0.5.5",
-            "safe-buffer": "^5.1.2",
+            "safe-buffer": "^5.2.1",
-            "yallist": "^3.0.3"
+            "yallist": "^3.1.1"
           }
         },
         "yallist": {
@@ -7167,6 +7344,14 @@
         }
       }
     },
+    "strip-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+      "requires": {
+        "ansi-regex": "^3.0.0"
+      }
+    },
     "strip-final-newline": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
@@ -7452,11 +7637,6 @@
         "string-width": "^1.0.2 || 2"
       },
       "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
-        },
         "string-width": {
           "version": "2.1.1",
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -7465,14 +7645,6 @@
             "is-fullwidth-code-point": "^2.0.0",
             "strip-ansi": "^4.0.0"
           }
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
         }
       }
     },
@@ -7538,7 +7710,8 @@
     "ws": {
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA=="
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "requires": {}
     },
     "xdg-basedir": {
       "version": "4.0.0",

package.json

@@ -20,7 +20,6 @@
     "@kubernetes/client-node": "^0.15.1",
     "@types/express": "^4.17.13",
     "axios": "^0.24.0",
-    "colors": "^1.4.0",
     "concurrently": "^6.3.0",
     "docker-secret": "^1.2.3",
     "dotenv": "^10.0.0",

routes/bookmark.js

@@ -10,6 +10,7 @@ const {
   getSingleBookmark,
   updateBookmark,
   deleteBookmark,
+  reorderBookmarks,
 } = require('../controllers/bookmarks');
 
 router
@@ -23,4 +24,6 @@ router
   .put(auth, requireAuth, upload, updateBookmark)
   .delete(auth, requireAuth, deleteBookmark);
 
+router.route('/0/reorder').put(auth, requireAuth, reorderBookmarks);
+
 module.exports = router;