Merge pull request #49 from pawelmalak/feature

v1.5 Release

.dockerignore

@@ -1,2 +1,3 @@
 node_modules
-github
+github
+public

.env

@@ -0,0 +1,2 @@
+PORT=5005
+NODE_ENV=development

.gitignore

@@ -1,3 +1,3 @@
-node_modules/
+node_modules
-data/
+data
-.env
+public

Dockerfile

@@ -1,5 +1,7 @@
 FROM node:14-alpine
 
+RUN apk update && apk add --no-cache nano
+
 WORKDIR /app
 
 COPY package*.json ./
@@ -10,6 +12,7 @@ COPY . .
 
 RUN mkdir -p ./public ./data \
     && cd ./client \
+    && npm install --production \
     && npm run build \
     && cd .. \
     && mv ./client/build/* ./public \
@@ -19,4 +22,4 @@ EXPOSE 5005
 
 ENV NODE_ENV=production
 
-CMD ["node", "server.js"]
+CMD ["node", "server.js"]

Dockerfile.multiarch

@@ -0,0 +1,27 @@
+FROM node:14-alpine
+
+RUN apk update && apk add --no-cache nano
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN apk --no-cache --virtual build-dependencies add python make g++ \
+    && npm install --production
+
+COPY . .
+
+RUN mkdir -p ./public ./data \
+    && cd ./client \
+    && npm install --production \
+    && npm run build \
+    && cd .. \
+    && mv ./client/build/* ./public \
+    && rm -rf ./client \
+    && apk del build-dependencies
+
+EXPOSE 5005
+
+ENV NODE_ENV=production
+
+CMD ["node", "server.js"]

README.md

@@ -2,12 +2,13 @@
 
 [![JS Badge](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://shields.io/)
 [![TS Badge](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://shields.io/)
+[![Node Badge](https://img.shields.io/badge/Node.js-43853D?style=for-the-badge&logo=node.js&logoColor=white)](https://shields.io/)
 [![React Badge](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://shields.io/)
 
 ![Homescreen screenshot](./github/_home.png)
 
 ## Description
-Flame is self-hosted startpage for your server. It's inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui)
+Flame is self-hosted startpage for your server. Its design is inspired (heavily) by [SUI](https://github.com/jeroenpardon/sui). Flame is very easy to setup and use. With built-in editors it allows you to setup your very own appliaction hub in no time - no file editing necessary.
 
 ## Technology
 - Backend
@@ -22,6 +23,7 @@ Flame is self-hosted startpage for your server. It's inspired (heavily) by [SUI]
 
 ## Development
 ```sh
+# clone repository
 git clone https://github.com/pawelmalak/flame
 cd flame
 
@@ -32,36 +34,76 @@ npm run dev-init
 npm run dev
 ```
 
-## Deployment with Docker
+## Installation 
+
+### With Docker (recommended)
+#### Building images
 ```sh
-# build image
+# build image for amd64 only
 docker build -t flame .
 
-# run container
+# build multiarch image for amd64, armv7 and arm64
-docker run -p 5005:5005 -v <host_dir>:/app/data flame
+# building failed multiple times with 2GB memory usage limit so you might want to increase it
+docker buildx build \
+  --platform linux/arm/v7,linux/arm64,linux/amd64 \
+  -f Dockerfile.multiarch \
+  -t flame:multiarch .
 ```
 
+#### Deployment
+```sh
+# run container
+docker run -p 5005:5005 -v /path/to/data:/app/data flame
+```
+
+### Without Docker
+Follow instructions from wiki: [Installation without Docker](https://github.com/pawelmalak/flame/wiki/Installation-without-docker)
+
 ## Functionality
 - Applications
-  - Create, update and delete applications using GUI
+  - Create, update, delete and organize applications using GUI
   - Pin your favourite apps to homescreen
 
 ![Homescreen screenshot](./github/_apps.png)
 
 - Bookmarks
-  - Create, update and delete bookmarks and categories using GUI
+  - Create, update, delete and organize bookmarks and categories using GUI
   - Pin your favourite categories to homescreen
 
 ![Homescreen screenshot](./github/_bookmarks.png)
 
 - Weather
   - Get current temperature, cloud coverage and weather status with animated icons
+
 - Themes
   - Customize your page by choosing from 12 color themes 
 
 ![Homescreen screenshot](./github/_themes.png)
 
 ## Usage
+### Search bar
+> While opening links, module will follow `Open all links in the same tab` setting
+#### Supported search engines
+| Name       | Prefix | Search URL                          |
+|------------|--------|-------------------------------------|
+| Disroot    | /ds    | http://search.disroot.org/search?q= |
+| DuckDuckGo | /d     | https://duckduckgo.com/?q=          |
+| Google     | /g     | https://www.google.com/search?q=    |
+
+#### Supported services
+| Name               | Prefix | Search URL                                    |
+|--------------------|--------|-----------------------------------------------|
+| IMDb               | /im    | https://www.imdb.com/find?q=                  |
+| Reddit             | /r     | -https://www.reddit.com/search?q=             |
+| The Movie Database | /mv    | https://www.themoviedb.org/search?query=      |
+| Youtube            | /yt    | https://www.youtube.com/results?search_query= |
+
+### Setting up weather module
+1. Obtain API Key from [Weather API](https://www.weatherapi.com/pricing.aspx).
+   > Free plan allows for 1M calls per month. Flame is making less then 3K API calls per month.
+2. Get lat/long for your location. You can get them from [latlong.net](https://www.latlong.net/convert-address-to-lat-long.html).
+3. Enter and save data. Weather widget will now update and should be visible on Home page.
+
 ### Supported URL formats for applications and bookmarks
 #### Rules
 - URL starts with `http://`
@@ -72,4 +114,14 @@ docker run -p 5005:5005 -v <host_dir>:/app/data flame
   - Redirect: `https://{dest}`
 - URL without protocol
   - Format: `www.domain.com`, `domain.com`, `sub.domain.com`, `local`, `ip`, `ip:port`
-  - Redirect: `http://{dest}`
+  - Redirect: `http://{dest}`
+
+### Custom CSS
+> This is an experimental feature. Its behaviour might change in the future.
+> 
+Follow instructions from wiki: [Custom CSS](https://github.com/pawelmalak/flame/wiki/Custom-CSS)
+
+## Support
+If you want to support development of Flame and my upcoming self-hosted and open source projects you can use the following link:
+
+[![PayPal Badge](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.com/paypalme/pawelmalak)

Socket.js

@@ -1,11 +1,13 @@
 const WebSocket = require('ws');
+const Logger = require('./utils/Logger');
+const logger = new Logger();
 
 class Socket {
   constructor(server) {
     this.webSocketServer = new WebSocket.Server({ server })
 
     this.webSocketServer.on('listening', () => {
-      console.log('Socket: listen');
+      logger.log('Socket: listen');
     })
 
     this.webSocketServer.on('connection', (webSocketClient) => {

api.js

@@ -1,15 +1,17 @@
-const path = require('path');
+const { join } = require('path');
 const express = require('express');
 const errorHandler = require('./middleware/errorHandler');
 
 const api = express();
 
 // Static files
-api.use(express.static(path.join(__dirname, 'public')));
+api.use(express.static(join(__dirname, 'public')));
+api.use('/uploads', express.static(join(__dirname, 'data/uploads')));
 api.get(/^\/(?!api)/, (req, res) => {
-  res.sendFile(path.join(__dirname, 'public/index.html'));
+  res.sendFile(join(__dirname, 'public/index.html'));
 })
 
+
 // Body parser
 api.use(express.json());
 

client/.env

@@ -0,0 +1 @@
+REACT_APP_VERSION=1.5.0

client/package-lock.json

@@ -2397,6 +2397,14 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-beautiful-dnd": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz",
+      "integrity": "sha512-by80tJ8aTTDXT256Gl+RfLRtFjYbUWOnZuEigJgNsJrSEGxvFe5eY6k3g4VIvf0M/6+xoLgfYWoWonlOo6Wqdg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "17.0.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.3.tgz",
@@ -4614,6 +4622,14 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "requires": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -9932,6 +9948,11 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
+    "memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
+    },
     "memory-fs": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -12300,6 +12321,11 @@
         "performance-now": "^2.1.0"
       }
     },
+    "raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -12362,6 +12388,20 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-beautiful-dnd": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
+      "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.2.0",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -15077,6 +15117,11 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-memo-one": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
+      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ=="
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

client/package.json

@@ -11,12 +11,14 @@
     "@types/jest": "^26.0.23",
     "@types/node": "^12.20.12",
     "@types/react": "^17.0.5",
+    "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^17.0.3",
     "@types/react-redux": "^7.1.16",
     "@types/react-router-dom": "^5.1.7",
     "axios": "^0.21.1",
     "http-proxy-middleware": "^2.0.0",
     "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",

client/public/index.html

@@ -4,15 +4,10 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Flame - self-hosted startpage for your server" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
+    <link rel="stylesheet" href="%PUBLIC_URL%/flame.css">
     <title>Flame</title>
   </head>
   <body>
@@ -21,4 +16,4 @@
     <div id="root"></div>
     
   </body>
-</html>
+</html>

client/public/robots.txt

@@ -1,3 +1,2 @@
-# https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow:
+Disallow: /

client/src/App.tsx

@@ -5,6 +5,10 @@ import { getConfig, setTheme } from './store/actions';
 import { store } from './store/store';
 import { Provider } from 'react-redux';
 
+// Utils
+import { checkVersion } from './utility';
+
+// Routes
 import Home from './components/Home/Home';
 import Apps from './components/Apps/Apps';
 import Settings from './components/Settings/Settings';
@@ -14,10 +18,14 @@ import NotificationCenter from './components/NotificationCenter/NotificationCent
 // Get config pairs from database
 store.dispatch<any>(getConfig());
 
+// Set theme
 if (localStorage.theme) {
   store.dispatch<any>(setTheme(localStorage.theme));
 }
 
+// Check for updates
+checkVersion();
+
 const App = (): JSX.Element => {
   return (
     <Provider store={store}>

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

@@ -39,4 +39,12 @@
   .AppCard:hover {
     background-color: rgba(0,0,0,0.2);
   }
+}
+
+.CustomIcon {
+  width: 90%;
+  height: 90%;
+  margin-top: 2px;
+  margin-left: 2px;
+  object-fit: contain;
 }

client/src/components/Apps/AppCard/AppCard.tsx

@@ -3,6 +3,7 @@ import Icon from '../../UI/Icons/Icon/Icon';
 import { iconParser, urlParser } from '../../../utility';
 
 import { App } from '../../../interfaces';
+import { searchConfig } from '../../../utility';
 
 interface ComponentProps {
   app: App;
@@ -15,12 +16,19 @@ const AppCard = (props: ComponentProps): JSX.Element => {
   return (
     <a
       href={redirectUrl}
-      target='_blank'
+      target={searchConfig('openSameTab', false) ? '' : '_blank'}
       rel='noreferrer'
       className={classes.AppCard}
     >
       <div className={classes.AppCardIcon}>
-        <Icon icon={iconParser(props.app.icon)} />
+        {(/.(jpeg|jpg|png)$/).test(props.app.icon)
+          ? <img
+              src={`/uploads/${props.app.icon}`}
+              alt={`${props.app.name} icon`}
+              className={classes.CustomIcon}
+            />
+          : <Icon icon={iconParser(props.app.icon)} />
+        }
       </div>
       <div className={classes.AppCardDetails}>
         <h5>{props.app.name}</h5>

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

@@ -0,0 +1,7 @@
+.Switch {
+  text-decoration: underline;
+}
+
+.Switch:hover {
+  cursor: pointer;
+}

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

@@ -3,18 +3,23 @@ import { connect } from 'react-redux';
 import { addApp, updateApp } from '../../../store/actions';
 import { App, NewApp } from '../../../interfaces';
 
+import classes from './AppForm.module.css';
+
 import ModalForm from '../../UI/Forms/ModalForm/ModalForm';
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
 import Button from '../../UI/Buttons/Button/Button';
+import axios from 'axios';
 
 interface ComponentProps {
   modalHandler: () => void;
-  addApp: (formData: NewApp) => any;
+  addApp: (formData: NewApp | FormData) => any;
   updateApp: (id: number, formData: NewApp) => any;
   app?: App;
 }
 
 const AppForm = (props: ComponentProps): JSX.Element => {
+  const [useCustomIcon, toggleUseCustomIcon] = useState<boolean>(false);
+  const [customIcon, setCustomIcon] = useState<File | null>(null);
   const [formData, setFormData] = useState<NewApp>({
     name: '',
     url: '',
@@ -52,11 +57,27 @@ const AppForm = (props: ComponentProps): JSX.Element => {
     })
   }
 
+  const fileChangeHandler = (e: ChangeEvent<HTMLInputElement>): void => {
+    if (e.target.files) {
+      setCustomIcon(e.target.files[0]);
+    }
+  }
+
   const formSubmitHandler = (e: SyntheticEvent<HTMLFormElement>): void => {
     e.preventDefault();
 
     if (!props.app) {
-      props.addApp(formData);
+      if (customIcon) {
+        const data = new FormData();
+        data.append('icon', customIcon);
+
+        data.append('name', formData.name);
+        data.append('url', formData.url);
+
+        props.addApp(data);
+      } else {
+        props.addApp(formData);
+      }
     } else {
       props.updateApp(props.app.id, formData);
       props.modalHandler();
@@ -108,26 +129,51 @@ const AppForm = (props: ComponentProps): JSX.Element => {
           </a>
         </span>
       </InputGroup>
-      <InputGroup>
+      {!useCustomIcon
-        <label htmlFor='icon'>App Icon</label>
+        // use mdi icon
-        <input
+        ? (<InputGroup>
-          type='text'
+            <label htmlFor='icon'>App Icon</label>
-          name='icon'
+            <input
-          id='icon'
+              type='text'
-          placeholder='book-open-outline'
+              name='icon'
-          required
+              id='icon'
-          value={formData.icon}
+              placeholder='book-open-outline'
-          onChange={(e) => inputChangeHandler(e)}
+              required
-        />
+              value={formData.icon}
-        <span>
+              onChange={(e) => inputChangeHandler(e)}
-          Use icon name from MDI. 
+            />
-          <a
+            <span>
-            href='https://materialdesignicons.com/'
+              Use icon name from MDI. 
-            target='blank'>
+              <a
-            {' '}Click here for reference
+                href='https://materialdesignicons.com/'
-          </a>
+                target='blank'>
-        </span>
+                {' '}Click here for reference
-      </InputGroup>
+              </a>
+            </span>
+            <span
+              onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+              className={classes.Switch}>
+              Switch to custom icon upload
+            </span>
+          </InputGroup>)
+        // upload custom icon
+        : (<InputGroup>
+            <label htmlFor='icon'>App Icon</label>
+            <input
+              type='file'
+              name='icon'
+              id='icon'
+              required
+              onChange={(e) => fileChangeHandler(e)}
+              accept='.jpg,.jpeg,.png'
+            />
+            <span
+              onClick={() => toggleUseCustomIcon(!useCustomIcon)}
+              className={classes.Switch}>
+              Switch to MDI
+            </span>
+          </InputGroup>)
+      }
       {!props.app
         ? <Button>Add new application</Button>
         : <Button>Update application</Button>

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

@@ -9,4 +9,21 @@
 
 .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/Apps/AppTable/AppTable.tsx

@@ -1,20 +1,52 @@
-import { KeyboardEvent } from 'react';
+import { Fragment, KeyboardEvent, useState, useEffect } from 'react';
-import { connect } from 'react-redux';
+import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
-import { App, GlobalState } from '../../../interfaces';
+import { Link } from 'react-router-dom';
-import { pinApp, deleteApp } from '../../../store/actions';
 
+// Redux
+import { connect } from 'react-redux';
+import { pinApp, deleteApp, reorderApps, updateConfig, createNotification } from '../../../store/actions';
+
+// Typescript
+import { App, GlobalState, NewNotification } from '../../../interfaces';
+
+// CSS
 import classes from './AppTable.module.css';
+
+// UI
 import Icon from '../../UI/Icons/Icon/Icon';
 import Table from '../../UI/Table/Table';
 
+// Utils
+import { searchConfig } from '../../../utility';
+
 interface ComponentProps {
   apps: App[];
   pinApp: (app: App) => void;
   deleteApp: (id: number) => void;
   updateAppHandler: (app: App) => void;
+  reorderApps: (apps: App[]) => void;
+  updateConfig: (formData: any) => void;
+  createNotification: (notification: NewNotification) => void;
 }
 
 const AppTable = (props: ComponentProps): JSX.Element => {
+  const [localApps, setLocalApps] = useState<App[]>([]);
+  const [isCustomOrder, setIsCustomOrder] = useState<boolean>(false);
+
+  // Copy apps array
+  useEffect(() => {
+    setLocalApps([...props.apps]);
+  }, [props.apps])
+
+  // Check ordering
+  useEffect(() => {
+    const order = searchConfig('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} ?`);
 
@@ -23,55 +55,111 @@ const AppTable = (props: ComponentProps): JSX.Element => {
     }
   }
 
+  // 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) {
+      props.createNotification({
+        title: 'Error',
+        message: 'Custom order is disabled'
+      })
+      return;
+    }
+
+    if (!result.destination) {
+      return;
+    }
+
+    const tmpApps = [...localApps];
+    const [movedApp] = tmpApps.splice(result.source.index, 1);
+    tmpApps.splice(result.destination.index, 0, movedApp);
+
+    setLocalApps(tmpApps);
+    props.reorderApps(tmpApps);
+  }
+
   return (
-    <Table headers={[
+    <Fragment>
-      'Name',
+      <div className={classes.Message}>
-      'URL',
+        {isCustomOrder
-      'Icon',
+          ? <p>You can drag and drop single rows to reorder application</p>
-      'Actions'
+          : <p>Custom order is disabled. You can change it in <Link to='/settings/other'>settings</Link></p>
-    ]}>
+        }
-      {props.apps.map((app: App): JSX.Element => {
+      </div>
-        return (
+      <DragDropContext onDragEnd={dragEndHanlder}>
-          <tr key={app.id}>
+        <Droppable droppableId='apps'>
-            <td>{app.name}</td>
+          {(provided) => (
-            <td>{app.url}</td>
+            <Table headers={[
-            <td>{app.icon}</td>
+              'Name',
-            <td className={classes.TableActions}>
+              'URL',
-              <div
+              'Icon',
-                className={classes.TableAction}
+              'Actions'
-                onClick={() => deleteAppHandler(app)}
+            ]}
-                onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
+            innerRef={provided.innerRef}>
-                tabIndex={0}>
+              {localApps.map((app: App, index): JSX.Element => {
-                <Icon icon='mdiDelete' />
+                return (
-              </div>
+                  <Draggable key={app.id} draggableId={app.id.toString()} index={index}>
-              <div
+                    {(provided, snapshot) => {
-                className={classes.TableAction}
+                      const style = {
-                onClick={() => props.updateAppHandler(app)}
+                        border: snapshot.isDragging ? '1px solid var(--color-accent)' : 'none',
-                onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
+                        borderRadius: '4px',
-                tabIndex={0}>
+                        ...provided.draggableProps.style,
-                <Icon icon='mdiPencil' />
+                      };
-              </div>
+
-              <div
+                      return (
-                className={classes.TableAction}
+                        <tr
-                onClick={() => props.pinApp(app)}
+                          {...provided.draggableProps}
-                onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
+                          {...provided.dragHandleProps}
-                tabIndex={0}>
+                          ref={provided.innerRef}
-                {app.isPinned
+                          style={style}
-                  ? <Icon icon='mdiPinOff' color='var(--color-accent)' />
+                        >
-                  : <Icon icon='mdiPin' />
+                          <td style={{ width:'200px' }}>{app.name}</td>
-                }
+                          <td style={{ width:'200px' }}>{app.url}</td>
-              </div>
+                          <td style={{ width:'200px' }}>{app.icon}</td>
-            </td>
+                          {!snapshot.isDragging && (
-          </tr>
+                            <td className={classes.TableActions}>
-        )
+                              <div
-      })}
+                                className={classes.TableAction}
-    </Table>
+                                onClick={() => deleteAppHandler(app)}
+                                onKeyDown={(e) => keyboardActionHandler(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={() => props.pinApp(app)}
+                                onKeyDown={(e) => keyboardActionHandler(e, app, props.pinApp)}
+                                tabIndex={0}>
+                                {app.isPinned
+                                  ? <Icon icon='mdiPinOff' color='var(--color-accent)' />
+                                  : <Icon icon='mdiPin' />
+                                }
+                              </div>
+                            </td>
+                          )}
+                        </tr>
+                      )
+                    }}
+                  </Draggable>
+                )
+              })}
+            </Table>
+          )}
+        </Droppable>
+      </DragDropContext>
+    </Fragment>
   )
 }
 
@@ -81,4 +169,12 @@ const mapStateToProps = (state: GlobalState) => {
   }
 }
 
-export default connect(mapStateToProps, { pinApp, deleteApp })(AppTable);
+const actions = {
+  pinApp,
+  deleteApp,
+  reorderApps,
+  updateConfig,
+  createNotification
+}
+
+export default connect(mapStateToProps, actions)(AppTable);

client/src/components/Apps/Apps.tsx

@@ -44,6 +44,7 @@ const Apps = (props: ComponentProps): JSX.Element => {
     url: 'string',
     icon: 'string',
     isPinned: false,
+    orderId: 0,
     id: 0,
     createdAt: new Date(),
     updatedAt: new Date()
@@ -53,7 +54,7 @@ const Apps = (props: ComponentProps): JSX.Element => {
     if (apps.length === 0) {
       getApps();
     }
-  }, [getApps, apps]);
+  }, [getApps]);
 
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);

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

@@ -2,7 +2,7 @@ import { Bookmark, Category } from '../../../interfaces';
 import classes from './BookmarkCard.module.css';
 
 import Icon from '../../UI/Icons/Icon/Icon';
-import { iconParser, urlParser } from '../../../utility';
+import { iconParser, urlParser, searchConfig } from '../../../utility';
 
 interface ComponentProps {
   category: Category;
@@ -19,7 +19,7 @@ const BookmarkCard = (props: ComponentProps): JSX.Element => {
           return (
             <a
               href={redirectUrl}
-              target='_blank'
+              target={searchConfig('openSameTab', false) ? '' : '_blank'}
               rel='noreferrer'
               key={`bookmark-${bookmark.id}`}>
               {bookmark.icon && (

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

@@ -9,4 +9,21 @@
 
 .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,13 +1,25 @@
-import { ContentType } from '../Bookmarks';
+import { KeyboardEvent, useState, useEffect, Fragment } from 'react';
-import classes from './BookmarkTable.module.css';
+import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
-import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
-import { pinCategory, deleteCategory, deleteBookmark } from '../../../store/actions';
-import { KeyboardEvent } from 'react';
 
+// Redux
+import { connect } from 'react-redux';
+import { pinCategory, deleteCategory, deleteBookmark, createNotification, reorderCategories } from '../../../store/actions';
+
+// Typescript
+import { Bookmark, Category, NewNotification } from '../../../interfaces';
+import { ContentType } from '../Bookmarks';
+
+// CSS
+import classes from './BookmarkTable.module.css';
+
+// UI
 import Table from '../../UI/Table/Table';
-import { Bookmark, Category } from '../../../interfaces';
 import Icon from '../../UI/Icons/Icon/Icon';
 
+// Utils
+import { searchConfig } from '../../../utility';
+
 interface ComponentProps {
   contentType: ContentType;
   categories: Category[];
@@ -15,9 +27,28 @@ interface ComponentProps {
   deleteCategory: (id: number) => void;
   updateHandler: (data: Category | Bookmark) => void;
   deleteBookmark: (bookmarkId: number, categoryId: number) => void;
+  createNotification: (notification: NewNotification) => void;
+  reorderCategories: (categories: Category[]) => void;
 }
 
 const BookmarkTable = (props: ComponentProps): JSX.Element => {
+  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 = searchConfig('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`);
 
@@ -40,46 +71,100 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
     }
   }
 
+  const dragEndHanlder = (result: DropResult): void => {
+    if (!isCustomOrder) {
+      props.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);
+    props.reorderCategories(tmpCategories);
+  }
+
   if (props.contentType === ContentType.category) {
     return (
-      <Table headers={[
+      <Fragment>
-        'Name',
+        <div className={classes.Message}>
-        'Actions'
+          {isCustomOrder
-      ]}>
+            ? <p>You can drag and drop single rows to reorder categories</p>
-        {props.categories.map((category: Category) => {
+            : <p>Custom order is disabled. You can change it in <Link to='/settings/other'>settings</Link></p>
-          return (
+          }
-            <tr key={category.id}>
+        </div>
-              <td>{category.name}</td>
+        <DragDropContext onDragEnd={dragEndHanlder}>
-              <td className={classes.TableActions}>
+          <Droppable droppableId='categories'>
-                <div
+            {(provided) => (
-                  className={classes.TableAction}
+              <Table headers={[
-                  onClick={() => deleteCategoryHandler(category)}
+                'Name',
-                  onKeyDown={(e) => keyboardActionHandler(e, category, deleteCategoryHandler)}
+                'Actions'
-                  tabIndex={0}>
+              ]}
-                  <Icon icon='mdiDelete' />
+              innerRef={provided.innerRef}>
-                </div>
+                {localCategories.map((category: Category, index): JSX.Element => {
-                <div
+                  return (
-                  className={classes.TableAction}
+                    <Draggable key={category.id} draggableId={category.id.toString()} index={index}>
-                  onClick={() => props.updateHandler(category)}
+                      {(provided, snapshot) => {
-                  // onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
+                        const style = {
-                  tabIndex={0}>
+                          border: snapshot.isDragging ? '1px solid var(--color-accent)' : 'none',
-                  <Icon icon='mdiPencil' />
+                          borderRadius: '4px',
-                </div>
+                          ...provided.draggableProps.style,
-                <div
+                        };
-                  className={classes.TableAction}
+
-                  onClick={() => props.pinCategory(category)}
+                        return (
-                  onKeyDown={(e) => keyboardActionHandler(e, category, props.pinCategory)}
+                          <tr
-                  tabIndex={0}>
+                            {...provided.draggableProps}
-                  {category.isPinned
+                            {...provided.dragHandleProps}
-                    ? <Icon icon='mdiPinOff' color='var(--color-accent)' />
+                            ref={provided.innerRef}
-                    : <Icon icon='mdiPin' />
+                            style={style}  
-                  }
+                          >
-                </div>
+                            <td>{category.name}</td>
-              </td>
+                            {!snapshot.isDragging && (
-            </tr>
+                              <td className={classes.TableActions}>
-          )
+                                <div
-        })}
+                                  className={classes.TableAction}
-      </Table>
+                                  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={() => props.pinCategory(category)}
+                                  onKeyDown={(e) => keyboardActionHandler(e, category, props.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}[] = [];
@@ -111,14 +196,12 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
                 <div
                   className={classes.TableAction}
                   onClick={() => deleteBookmarkHandler(bookmark.bookmark)}
-                  // onKeyDown={(e) => keyboardActionHandler(e, app, deleteAppHandler)}
                   tabIndex={0}>
                   <Icon icon='mdiDelete' />
                 </div>
                 <div
                   className={classes.TableAction}
                   onClick={() => props.updateHandler(bookmark.bookmark)}
-                  // onKeyDown={(e) => keyboardActionHandler(e, app, props.updateAppHandler)}
                   tabIndex={0}>
                   <Icon icon='mdiPencil' />
                 </div>
@@ -131,4 +214,12 @@ const BookmarkTable = (props: ComponentProps): JSX.Element => {
   }
 }
 
-export default connect(null, { pinCategory, deleteCategory, deleteBookmark })(BookmarkTable);
+const actions = {
+  pinCategory,
+  deleteCategory,
+  deleteBookmark,
+  createNotification,
+  reorderCategories
+}
+
+export default connect(null, actions)(BookmarkTable);

client/src/components/Bookmarks/Bookmarks.tsx

@@ -43,6 +43,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
     name: '',
     id: -1,
     isPinned: false,
+    orderId: 0,
     bookmarks: [],
     createdAt: new Date(),
     updatedAt: new Date()
@@ -61,7 +62,7 @@ const Bookmarks = (props: ComponentProps): JSX.Element => {
     if (categories.length === 0) {
       getCategories();
     }
-  }, [getCategories, categories])
+  }, [getCategories])
 
   const toggleModal = (): void => {
     setModalIsOpen(!modalIsOpen);

client/src/components/Home/Home.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
 // Redux
@@ -22,6 +22,7 @@ import classes from './Home.module.css';
 import AppGrid from '../Apps/AppGrid/AppGrid';
 import BookmarkGrid from '../Bookmarks/BookmarkGrid/BookmarkGrid';
 import WeatherWidget from '../Widgets/WeatherWidget/WeatherWidget';
+import SearchBox from '../SearchBox/SearchBox';
 
 // Functions
 import { greeter } from './functions/greeter';
@@ -59,14 +60,14 @@ const Home = (props: ComponentProps): JSX.Element => {
     if (apps.length === 0) {
       getApps();
     }
-  }, [getApps, apps]);
+  }, [getApps]);
 
   // Load bookmark categories
   useEffect(() => {
     if (categories.length === 0) {
       getCategories();
     }
-  }, [getCategories, categories]);
+  }, [getCategories]);
 
   // Refresh greeter and time
   useEffect(() => {
@@ -87,6 +88,11 @@ const Home = (props: ComponentProps): JSX.Element => {
   
   return (
     <Container>
+      {searchConfig('hideSearch', 0) !== 1
+        ? <SearchBox />
+        : <div></div>
+      }
+
       {searchConfig('hideHeader', 0) !== 1
         ? (
           <header className={classes.Header}>
@@ -101,24 +107,33 @@ const Home = (props: ComponentProps): JSX.Element => {
         : <div></div>
       }
       
-      <SectionHeadline title='Applications' link='/applications' />
+      {searchConfig('hideApps', 0) !== 1
-      {appsLoading
+        ? (<Fragment>
-        ? <Spinner />
+            <SectionHeadline title='Applications' link='/applications' />
-        : <AppGrid
+            {appsLoading
-          apps={apps.filter((app: App) => app.isPinned)}
+              ? <Spinner />
-          totalApps={apps.length}
+              : <AppGrid
-        />
+                apps={apps.filter((app: App) => app.isPinned)}
+                totalApps={apps.length}
+              />
+            }
+            <div className={classes.HomeSpace}></div>
+          </Fragment>)
+        : <div></div>
       }
 
-      <div className={classes.HomeSpace}></div>
+      {searchConfig('hideCategories', 0) !== 1
-
+        ? (<Fragment>
-      <SectionHeadline title='Bookmarks' link='/bookmarks' />
+            <SectionHeadline title='Bookmarks' link='/bookmarks' />
-      {categoriesLoading
+            {categoriesLoading
-        ? <Spinner />
+              ? <Spinner />
-        : <BookmarkGrid
+              : <BookmarkGrid
-            categories={categories.filter((category: Category) => category.isPinned)}
+                  categories={categories.filter((category: Category) => category.isPinned)}
-            totalCategories={categories.length}
+                  totalCategories={categories.length}
-        />
+              />
+            }
+          </Fragment>)
+        : <div></div>
       }
 
       <Link to='/settings' className={classes.SettingsButton}>

client/src/components/SearchBox/SearchBox.module.css

@@ -0,0 +1,17 @@
+.SearchBox {
+  width: 100%;
+  padding: 10px 0;
+  color: var(--color-primary);
+  /* font-size: 20px; */
+  margin-bottom: 20px;
+  background-color: transparent;
+  border: none;
+  border-bottom: 2px solid var(--color-accent);
+  opacity: 0.5;
+  transition: all 0.2s;
+}
+
+.SearchBox:focus {
+  opacity: 1;
+  outline: none;
+}

client/src/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,29 @@
+import { useRef, useEffect, KeyboardEvent } from 'react';
+
+import classes from './SearchBox.module.css';
+import { searchParser } from '../../utility';
+
+const SearchBox = (): JSX.Element => {
+  const inputRef = useRef<HTMLInputElement>(document.createElement('input'));
+
+  useEffect(() => {
+    inputRef.current.focus();
+  }, [])
+
+  const searchHandler = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.code === 'Enter') {
+      searchParser(inputRef.current.value);
+    }
+  }
+
+  return (
+    <input
+      ref={inputRef}
+      type='text'
+      className={classes.SearchBox}
+      onKeyDown={(e) => searchHandler(e)}
+    />
+  )
+}
+
+export default SearchBox;

client/src/components/Settings/AppDetails/AppDetails.module.css

@@ -0,0 +1,8 @@
+.AppVersion {
+  color: var(--color-primary);
+  margin-bottom: 15px;
+}
+
+.AppVersion a {
+  color: var(--color-accent);
+}

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

@@ -0,0 +1,25 @@
+import { Fragment } from 'react';
+
+import classes from './AppDetails.module.css';
+import Button from '../../UI/Buttons/Button/Button';
+import { checkVersion } from '../../../utility';
+
+const AppDetails = (): JSX.Element => {
+  return (
+    <Fragment>
+      <p className={classes.AppVersion}>
+        <a
+          href='https://github.com/pawelmalak/flame'
+          target='_blank'
+          rel='noreferrer'>
+          Flame
+        </a>
+        {' '}
+        version {process.env.REACT_APP_VERSION}
+      </p>
+      <Button click={() => checkVersion(true)}>Check for updates</Button>
+    </Fragment>
+  )
+}
+
+export default AppDetails;

client/src/components/Settings/OtherSettings/OtherSettings.module.css

@@ -0,0 +1,9 @@
+.SettingsSection {
+  color: var(--color-primary);
+  padding-bottom: 3px;
+  margin-bottom: 10px;
+  font-size: 20px;
+  font-weight: 500;
+  border-bottom: 2px solid var(--color-accent);
+  display: inline-block;
+}

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

@@ -2,7 +2,7 @@ import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
 
 // Redux
 import { connect } from 'react-redux';
-import { createNotification, updateConfig } from '../../../store/actions';
+import { createNotification, updateConfig, sortApps, sortCategories } from '../../../store/actions';
 
 // Typescript
 import { GlobalState, NewNotification, SettingsForm } from '../../../interfaces';
@@ -11,12 +11,17 @@ import { GlobalState, NewNotification, SettingsForm } from '../../../interfaces'
 import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
 import Button from '../../UI/Buttons/Button/Button';
 
+// CSS
+import classes from './OtherSettings.module.css';
+
 // Utils
 import { searchConfig } from '../../../utility';
 
 interface ComponentProps {
   createNotification: (notification: NewNotification) => void;
   updateConfig: (formData: SettingsForm) => void;
+  sortApps: () => void;
+  sortCategories: () => void;
   loading: boolean;
 }
 
@@ -26,7 +31,12 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
     customTitle: document.title,
     pinAppsByDefault: 1,
     pinCategoriesByDefault: 1,
-    hideHeader: 0
+    hideHeader: 0,
+    hideApps: 0,
+    hideCategories: 0,
+    hideSearch: 0,
+    useOrdering: 'createdAt',
+    openSameTab: 0
   })
 
   // Get config
@@ -35,7 +45,12 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
       customTitle: searchConfig('customTitle', 'Flame'),
       pinAppsByDefault: searchConfig('pinAppsByDefault', 1),
       pinCategoriesByDefault: searchConfig('pinCategoriesByDefault', 1),
-      hideHeader: searchConfig('hideHeader', 0)
+      hideHeader: searchConfig('hideHeader', 0),
+      hideApps: searchConfig('hideApps', 0),
+      hideCategories: searchConfig('hideCategories', 0),
+      hideSearch: searchConfig('hideSearch', 0),
+      useOrdering: searchConfig('useOrdering', 'createdAt'),
+      openSameTab: searchConfig('openSameTab', 0)
     })
   }, [props.loading]);
 
@@ -46,8 +61,12 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
     // Save settings
     await props.updateConfig(formData);
 
-    // update local page title
+    // Update local page title
     document.title = formData.customTitle;
+
+    // Sort apps and categories with new settings
+    props.sortApps();
+    props.sortCategories();
   }
 
   // Input handler
@@ -66,6 +85,8 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
 
   return (
     <form onSubmit={(e) => formSubmitHandler(e)}>
+      {/* OTHER OPTIONS */}
+      <h2 className={classes.SettingsSection}>Miscellaneous</h2>
       <InputGroup>
         <label htmlFor='customTitle'>Custom page title</label>
         <input
@@ -77,6 +98,9 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           onChange={(e) => inputChangeHandler(e)}
         />
       </InputGroup>
+
+      {/* BEAHVIOR OPTIONS */}
+      <h2 className={classes.SettingsSection}>App Behavior</h2>
       <InputGroup>
         <label htmlFor='pinAppsByDefault'>Pin new applications by default</label>
         <select
@@ -101,6 +125,46 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+      <InputGroup>
+        <label htmlFor='useOrdering'>Sorting type</label>
+        <select
+          id='useOrdering'
+          name='useOrdering'
+          value={formData.useOrdering}
+          onChange={(e) => inputChangeHandler(e)}
+        >
+          <option value='createdAt'>By creation date</option>
+          <option value='name'>Alphabetical order</option>
+          <option value='orderId'>Custom order</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='openSameTab'>Open all links in the same tab</label>
+        <select
+          id='openSameTab'
+          name='openSameTab'
+          value={formData.openSameTab}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+
+      {/* MODULES OPTIONS */}
+      <h2 className={classes.SettingsSection}>Modules</h2>
+      <InputGroup>
+        <label htmlFor='hideSearch'>Hide search bar</label>
+        <select
+          id='hideSearch'
+          name='hideSearch'
+          value={formData.hideSearch}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
       <InputGroup>
         <label htmlFor='hideHeader'>Hide greeting and date</label>
         <select
@@ -113,6 +177,30 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
+      <InputGroup>
+        <label htmlFor='hideApps'>Hide applications</label>
+        <select
+          id='hideApps'
+          name='hideApps'
+          value={formData.hideApps}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='hideCategories'>Hide categories</label>
+        <select
+          id='hideCategories'
+          name='hideCategories'
+          value={formData.hideCategories}
+          onChange={(e) => inputChangeHandler(e, true)}
+        >
+          <option value={1}>True</option>
+          <option value={0}>False</option>
+        </select>
+      </InputGroup>
     <Button>Save changes</Button>
     </form>
   )
@@ -124,4 +212,11 @@ const mapStateToProps = (state: GlobalState) => {
   }
 }
 
-export default connect(mapStateToProps, { createNotification, updateConfig })(OtherSettings);
+const actions = {
+  createNotification,
+  updateConfig,
+  sortApps,
+  sortCategories
+}
+
+export default connect(mapStateToProps, actions)(OtherSettings);

client/src/components/Settings/Settings.tsx

@@ -1,12 +1,15 @@
-import { NavLink, Link, Switch, Route, withRouter } from 'react-router-dom';
+import { NavLink, Link, Switch, Route } from 'react-router-dom';
 
 import classes from './Settings.module.css';
 
 import { Container } from '../UI/Layout/Layout';
 import Headline from '../UI/Headlines/Headline/Headline';
+
 import Themer from '../Themer/Themer';
 import WeatherSettings from './WeatherSettings/WeatherSettings';
 import OtherSettings from './OtherSettings/OtherSettings';
+import AppDetails from './AppDetails/AppDetails';
+import StyleSettings from './StyleSettings/StyleSettings';
 
 const Settings = (): JSX.Element => {
   return (
@@ -38,12 +41,28 @@ const Settings = (): JSX.Element => {
             to='/settings/other'>
             Other
           </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/css'>
+            CSS
+          </NavLink>
+          <NavLink
+            className={classes.SettingsNavLink}
+            activeClassName={classes.SettingsNavLinkActive}
+            exact
+            to='/settings/app'>
+            App
+          </NavLink>
         </nav>
         <section className={classes.SettingsContent}>
           <Switch>
             <Route exact path='/settings' component={Themer} />
             <Route path='/settings/weather' component={WeatherSettings} />
             <Route path='/settings/other' component={OtherSettings} />
+            <Route path='/settings/css' component={StyleSettings} />
+            <Route path='/settings/app' component={AppDetails} />
           </Switch>
         </section>
       </div>
@@ -51,4 +70,4 @@ const Settings = (): JSX.Element => {
   )
 }
 
-export default withRouter(Settings);
+export default Settings;

client/src/components/Settings/StyleSettings/StyleSettings.tsx

@@ -0,0 +1,63 @@
+import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
+import axios from 'axios';
+
+// Redux
+import { connect } from 'react-redux';
+import { createNotification } from '../../../store/actions';
+
+// Typescript
+import { ApiResponse, NewNotification } from '../../../interfaces';
+
+// UI
+import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import Button from '../../UI/Buttons/Button/Button';
+
+interface ComponentProps {
+  createNotification: (notification: NewNotification) => void;
+}
+
+const StyleSettings = (props: ComponentProps): JSX.Element => {
+  const [customStyles, setCustomStyles] = useState<string>('');
+
+  useEffect(() => {
+    axios.get<ApiResponse<string>>('/api/config/0/css')
+      .then(data => setCustomStyles(data.data.data))
+      .catch(err => console.log(err.response));
+  }, [])
+
+  const inputChangeHandler = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    e.preventDefault();
+    setCustomStyles(e.target.value);
+  }
+
+  const formSubmitHandler = (e: FormEvent) => {
+    e.preventDefault();
+
+    axios.put<ApiResponse<{}>>('/api/config/0/css', { styles: customStyles })
+      .then(() => {
+        props.createNotification({
+          title: 'Success',
+          message: 'CSS saved. Reload page to see changes'
+        })
+      })
+      .catch(err => console.log(err.response));
+  }
+
+  return (
+    <form onSubmit={(e) => formSubmitHandler(e)}>
+      <InputGroup>
+        <label htmlFor='customStyles'>Custom CSS</label>
+        <textarea
+          id='customStyles'
+          name='customStyles'
+          value={customStyles}
+          onChange={(e) => inputChangeHandler(e)}
+          spellCheck={false}
+        ></textarea>
+      </InputGroup>
+      <Button>Save CSS</Button>
+    </form>
+  )
+}
+
+export default connect(null, { createNotification })(StyleSettings);

client/src/components/Settings/WeatherSettings/WeatherSettings.tsx

@@ -116,6 +116,8 @@ const WeatherSettings = (props: ComponentProps): JSX.Element => {
           placeholder='52.22'
           value={formData.lat}
           onChange={(e) => inputChangeHandler(e, true)}
+          step='any'
+          lang='en-150'
         />
         <span>
           You can use
@@ -135,6 +137,8 @@ const WeatherSettings = (props: ComponentProps): JSX.Element => {
           placeholder='21.01'
           value={formData.long}
           onChange={(e) => inputChangeHandler(e, true)}
+          step='any'
+          lang='en-150'
         />
       </InputGroup>
       <InputGroup>

client/src/components/UI/Buttons/Button/Button.module.css

@@ -6,8 +6,7 @@
   border-radius: 4px;
 }
 
-.Button:hover,
+.Button:hover {
-.Button:focus {
   cursor: pointer;
   background-color: var(--color-accent);
   color: var(--color-background);

client/src/components/UI/Buttons/Button/Button.tsx

@@ -2,10 +2,20 @@ import classes from './Button.module.css';
 
 interface ComponentProps {
   children: string;
+  click?: any;
 }
 
 const Button = (props: ComponentProps): JSX.Element => {
-  return <button className={classes.Button}>{props.children}</button>
+  const {
+    children,
+    click
+  } = props;
+
+  return (
+    <button className={classes.Button} onClick={click ? click : () => {}} >
+      {children}
+    </button>
+  )
 }
 
 export default Button;

client/src/components/UI/Forms/InputGroup/InputGroup.module.css

@@ -4,12 +4,14 @@
 
 .InputGroup label,
 .InputGroup span,
-.InputGroup input {
+.InputGroup input,
+.InputGroup textarea {
   display: block;
 }
 
 .InputGroup input,
-.InputGroup select {
+.InputGroup select,
+.InputGroup textarea {
   margin: 8px 0;
   width: 100%;
   border: none;
@@ -30,4 +32,9 @@
 
 .InputGroup label {
   color: var(--color-primary);
+}
+
+.InputGroup textarea {
+  resize: none;
+  height: 50vh;
 }

client/src/components/UI/Table/Table.module.css

@@ -8,15 +8,17 @@
   text-align: left;
   font-size: 16px;
   color: var(--color-primary);
+  table-layout: fixed;
 }
 
 .Table th,
 .Table td {
   padding: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Head */
-
 .Table th {
   --header-radius: 4px;
   background-color: var(--color-primary);
@@ -34,8 +36,6 @@
 }
 
 /* Body */
-
 .Table td {
-  /* opacity: 0.5; */
   transition: all 0.2s;
 }

client/src/components/UI/Table/Table.tsx

@@ -3,11 +3,12 @@ import classes from './Table.module.css';
 interface ComponentProps {
   children: JSX.Element | JSX.Element[];
   headers: string[];
+  innerRef?: any;
 }
 
 const Table = (props: ComponentProps): JSX.Element => {
   return (
-    <div className={classes.TableContainer}>
+    <div className={classes.TableContainer} ref={props.innerRef}>
       <table className={classes.Table}>
         <thead className={classes.TableHead}>
           <tr>

client/src/interfaces/App.ts

@@ -5,6 +5,7 @@ export interface App extends Model {
   url: string;
   icon: string;
   isPinned: boolean;
+  orderId: number;
 }
 
 export interface NewApp {

client/src/interfaces/Category.ts

@@ -3,6 +3,7 @@ import { Model, Bookmark } from '.';
 export interface Category extends Model {
   name: string;
   isPinned: boolean;
+  orderId: number;
   bookmarks: Bookmark[];
 }
 

client/src/interfaces/Forms.ts

@@ -10,4 +10,9 @@ export interface SettingsForm {
   pinAppsByDefault: number;
   pinCategoriesByDefault: number;
   hideHeader: number;
+  hideApps: number;
+  hideCategories: number;
+  hideSearch: number;
+  useOrdering: string;
+  openSameTab: number;
 }

client/src/interfaces/Query.ts

@@ -0,0 +1,5 @@
+export interface Query {
+  name: string;
+  prefix: string;
+  template: string;
+}

client/src/interfaces/index.ts

@@ -7,4 +7,5 @@ export * from './Bookmark';
 export * from './Category';
 export * from './Notification';
 export * from './Config';
-export * from './Forms';
+export * from './Forms';
+export * from './Query';

client/src/setupProxy.js

@@ -5,11 +5,16 @@ module.exports = function (app) {
     target: 'http://localhost:5005'
   })
 
+  const assetsProxy = createProxyMiddleware('/uploads', {
+    target: 'http://localhost:5005'
+  })
+
   const wsProxy = createProxyMiddleware('/socket', {
     target: 'http://localhost:5005',
     ws: true
   })
 
   app.use(apiProxy);
+  app.use(assetsProxy);
   app.use(wsProxy);
 };

client/src/store/actions/actionTypes.ts

@@ -7,12 +7,16 @@ import {
   AddAppAction,
   DeleteAppAction,
   UpdateAppAction,
+  ReorderAppsAction,
+  SortAppsAction,
   // Categories
   GetCategoriesAction,
   AddCategoryAction,
   PinCategoryAction,
   DeleteCategoryAction,
   UpdateCategoryAction,
+  SortCategoriesAction,
+  ReorderCategoriesAction,
   // Bookmarks
   AddBookmarkAction,
   DeleteBookmarkAction,
@@ -37,6 +41,8 @@ export enum ActionTypes {
   addAppSuccess = 'ADD_APP_SUCCESS',
   deleteApp = 'DELETE_APP',
   updateApp = 'UPDATE_APP',
+  reorderApps = 'REORDER_APPS',
+  sortApps = 'SORT_APPS',
   // Categories
   getCategories = 'GET_CATEGORIES',
   getCategoriesSuccess = 'GET_CATEGORIES_SUCCESS',
@@ -45,6 +51,8 @@ export enum ActionTypes {
   pinCategory = 'PIN_CATEGORY',
   deleteCategory = 'DELETE_CATEGORY',
   updateCategory = 'UPDATE_CATEGORY',
+  sortCategories = 'SORT_CATEGORIES',
+  reorderCategories = 'REORDER_CATEGORIES',
   // Bookmarks
   addBookmark = 'ADD_BOOKMARK',
   deleteBookmark = 'DELETE_BOOKMARK',
@@ -66,12 +74,16 @@ export type Action =
   AddAppAction |
   DeleteAppAction |
   UpdateAppAction |
+  ReorderAppsAction |
+  SortAppsAction |
   // Categories
   GetCategoriesAction<any> |
   AddCategoryAction |
   PinCategoryAction |
   DeleteCategoryAction |
   UpdateCategoryAction |
+  SortCategoriesAction |
+  ReorderCategoriesAction |
   // Bookmarks
   AddBookmarkAction |
   DeleteBookmarkAction |

client/src/store/actions/app.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Dispatch } from 'redux';
 import { ActionTypes } from './actionTypes';
-import { App, ApiResponse, NewApp } from '../../interfaces';
+import { App, ApiResponse, NewApp, Config } from '../../interfaces';
 import { CreateNotificationAction } from './notification';
 
 export interface GetAppsAction<T> {
@@ -61,7 +61,7 @@ export interface AddAppAction {
   payload: App;
 }
 
-export const addApp = (formData: NewApp) => async (dispatch: Dispatch) => {
+export const addApp = (formData: NewApp | FormData) => async (dispatch: Dispatch) => {
   try {
     const res = await axios.post<ApiResponse<App>>('/api/apps', formData);
 
@@ -69,14 +69,17 @@ export const addApp = (formData: NewApp) => async (dispatch: Dispatch) => {
       type: ActionTypes.createNotification,
       payload: {
         title: 'Success',
-        message: `App ${formData.name} added`
+        message: `App added`
       }
     })
 
-    dispatch<AddAppAction>({
+    await dispatch<AddAppAction>({
       type: ActionTypes.addAppSuccess,
       payload: res.data.data
     })
+
+    // Sort apps
+    dispatch<any>(sortApps())
   } catch (err) {
     console.log(err);
   }
@@ -113,7 +116,7 @@ export interface UpdateAppAction {
   payload: App;
 }
 
-export const updateApp = (id: number, formData: NewApp) => async (dispatch: Dispatch) => {
+export const updateApp = (id: number, formData: NewApp | FormData) => async (dispatch: Dispatch) => {
   try {
     const res = await axios.put<ApiResponse<App>>(`/api/apps/${id}`, formData);
 
@@ -121,14 +124,67 @@ export const updateApp = (id: number, formData: NewApp) => async (dispatch: Disp
       type: ActionTypes.createNotification,
       payload: {
         title: 'Success',
-        message: `App ${formData.name} updated`
+        message: `App updated`
       }
     })
 
-    dispatch<UpdateAppAction>({
+    await dispatch<UpdateAppAction>({
       type: ActionTypes.updateApp,
       payload: res.data.data
     })
+
+    // Sort apps
+    dispatch<any>(sortApps())
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+export interface ReorderAppsAction {
+  type: ActionTypes.reorderApps;
+  payload: App[]
+}
+
+interface ReorderQuery {
+  apps: {
+    id: number;
+    orderId: number;
+  }[]
+}
+
+export const reorderApps = (apps: App[]) => async (dispatch: Dispatch) => {
+  try {
+    const updateQuery: ReorderQuery = { apps: [] }
+
+    apps.forEach((app, index) => updateQuery.apps.push({
+      id: app.id,
+      orderId: index + 1
+    }))
+
+    await axios.put<ApiResponse<{}>>('/api/apps/0/reorder', updateQuery);
+
+    dispatch<ReorderAppsAction>({
+      type: ActionTypes.reorderApps,
+      payload: apps
+    })
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+export interface SortAppsAction {
+  type: ActionTypes.sortApps;
+  payload: string;
+}
+
+export const sortApps = () => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering');
+
+    dispatch<SortAppsAction>({
+      type: ActionTypes.sortApps,
+      payload: res.data.data.value
+    })
   } catch (err) {
     console.log(err);
   }

client/src/store/actions/bookmark.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { Dispatch } from 'redux';
 import { ActionTypes } from './actionTypes';
-import { Category, ApiResponse, NewCategory, Bookmark, NewBookmark } from '../../interfaces';
+import { Category, ApiResponse, NewCategory, Bookmark, NewBookmark, Config } from '../../interfaces';
 import { CreateNotificationAction } from './notification';
 
 /**
@@ -54,6 +54,8 @@ export const addCategory = (formData: NewCategory) => async (dispatch: Dispatch)
       type: ActionTypes.addCategory,
       payload: res.data.data
     })
+
+    dispatch<any>(sortCategories());
   } catch (err) {
     console.log(err);
   }
@@ -173,6 +175,8 @@ export const updateCategory = (id: number, formData: NewCategory) => async (disp
       type: ActionTypes.updateCategory,
       payload: res.data.data
     })
+
+    dispatch<any>(sortCategories());
   } catch (err) {
     console.log(err);
   }
@@ -261,4 +265,60 @@ export const updateBookmark = (bookmarkId: number, formData: NewBookmark, previo
   } catch (err) {
     console.log(err);
   }
+}
+
+/**
+ * SORT CATEGORIES
+ */
+export interface SortCategoriesAction {
+  type: ActionTypes.sortCategories;
+  payload: string;
+}
+
+export const sortCategories = () => async (dispatch: Dispatch) => {
+  try {
+    const res = await axios.get<ApiResponse<Config>>('/api/config/useOrdering');
+
+    dispatch<SortCategoriesAction>({
+      type: ActionTypes.sortCategories,
+      payload: res.data.data.value
+    })
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+/**
+ * REORDER CATEGORIES
+ */
+export interface ReorderCategoriesAction {
+  type: ActionTypes.reorderCategories;
+  payload: Category[];
+}
+
+interface ReorderQuery {
+  categories: {
+    id: number;
+    orderId: number;
+  }[]
+}
+
+export const reorderCategories = (categories: Category[]) => async (dispatch: Dispatch) => {
+  try {
+    const updateQuery: ReorderQuery = { categories: [] }
+
+    categories.forEach((category, index) => updateQuery.categories.push({
+      id: category.id,
+      orderId: index + 1
+    }))
+
+    await axios.put<ApiResponse<{}>>('/api/categories/0/reorder', updateQuery);
+
+    dispatch<ReorderCategoriesAction>({
+      type: ActionTypes.reorderCategories,
+      payload: categories
+    })
+  } catch (err) {
+    console.log(err);
+  }
 }

client/src/store/reducers/app.ts

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

client/src/store/reducers/bookmark.ts

@@ -1,5 +1,6 @@
 import { ActionTypes, Action } from '../actions';
 import { Category, Bookmark } from '../../interfaces';
+import { sortData } from '../../utility';
 
 export interface State {
   loading: boolean;
@@ -141,6 +142,22 @@ const updateBookmark = (state: State, action: Action): State => {
   }
 }
 
+const sortCategories = (state: State, action: Action): State => {
+  const sortedCategories = sortData<Category>(state.categories, action.payload);
+
+  return {
+    ...state,
+    categories: sortedCategories
+  }
+}
+
+const reorderCategories = (state: State, action: Action): State => {
+  return {
+    ...state,
+    categories: action.payload
+  }
+}
+
 const bookmarkReducer = (state = initialState, action: Action) => {
   switch (action.type) {
     case ActionTypes.getCategories: return getCategories(state, action);
@@ -152,6 +169,8 @@ const bookmarkReducer = (state = initialState, action: Action) => {
     case ActionTypes.updateCategory: return updateCategory(state, action);
     case ActionTypes.deleteBookmark: return deleteBookmark(state, action);
     case ActionTypes.updateBookmark: return updateBookmark(state, action);
+    case ActionTypes.sortCategories: return sortCategories(state, action);
+    case ActionTypes.reorderCategories: return reorderCategories(state, action);
     default: return state;
   }
 }

client/src/utility/checkVersion.ts

@@ -0,0 +1,27 @@
+import axios from 'axios';
+import { store } from '../store/store';
+import { createNotification } from '../store/actions';
+
+export const checkVersion = async (isForced: boolean = false) => {
+  try {
+    const res = await axios.get<string>('https://raw.githubusercontent.com/pawelmalak/flame/master/client/.env');
+
+    const githubVersion = res.data
+      .split('\n')
+      .map(pair => pair.split('='))[0][1];
+
+    if (githubVersion !== process.env.REACT_APP_VERSION) {
+      store.dispatch<any>(createNotification({
+        title: 'Info',
+        message: 'New version is available!'
+      }))
+    } else if (isForced) {
+      store.dispatch<any>(createNotification({
+        title: 'Info',
+        message: 'You are using the latest version!'
+      }))
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}

client/src/utility/index.ts

@@ -1,3 +1,6 @@
 export * from './iconParser';
 export * from './urlParser';
-export * from './searchConfig';
+export * from './searchConfig';
+export * from './checkVersion';
+export * from './sortData';
+export * from './searchParser';

client/src/utility/searchConfig.ts

@@ -18,7 +18,7 @@ export const searchConfig = (key: string, _default: any) => {
     } else {
       return pair.value;
     }
-  } else {
-    return _default;
   }
+  
+  return _default;
 }

client/src/utility/searchParser.ts

@@ -0,0 +1,22 @@
+import { queries } from './searchQueries.json';
+import { Query } from '../interfaces';
+
+import { searchConfig } from '.';
+
+export const searchParser = (searchQuery: string): void => {
+  const space = searchQuery.indexOf(' ');
+  const prefix = searchQuery.slice(1, space);
+  const search = encodeURIComponent(searchQuery.slice(space + 1));
+
+  const query = queries.find((q: Query) => q.prefix === prefix);
+
+  if (query) {
+    const sameTab = searchConfig('openSameTab', false);
+
+    if (sameTab) {
+      document.location.replace(`${query.template}${search}`);
+    } else {
+      window.open(`${query.template}${search}`);
+    }
+  }
+}

client/src/utility/searchQueries.json

@@ -0,0 +1,39 @@
+{
+  "queries": [
+    {
+      "name": "Google",
+      "prefix": "g",
+      "template": "https://www.google.com/search?q="
+    },
+    {
+      "name": "DuckDuckGo",
+      "prefix": "d",
+      "template": "https://duckduckgo.com/?q="
+    },
+    {
+      "name": "Disroot",
+      "prefix": "ds",
+      "template": "http://search.disroot.org/search?q="
+    },
+    {
+      "name": "YouTube",
+      "prefix": "yt",
+      "template": "https://www.youtube.com/results?search_query="
+    },
+    {
+      "name": "Reddit",
+      "prefix": "r",
+      "template": "https://www.reddit.com/search?q="
+    },
+    {
+      "name": "IMDb",
+      "prefix": "im",
+      "template": "https://www.imdb.com/find?q="
+    },
+    {
+      "name": "The Movie Database",
+      "prefix": "mv",
+      "template": "https://www.themoviedb.org/search?query="
+    }
+  ]
+}

client/src/utility/sortData.ts

@@ -0,0 +1,29 @@
+interface Data {
+  name: string;
+  orderId: number;
+  createdAt: Date;
+}
+
+export const sortData = <T extends Data>(array: T[], field: string): T[] => {
+  const sortedData = array.slice();
+
+  if (field === 'name') {
+    sortedData.sort((a: T, b: T) => {
+      return a.name.localeCompare(b.name, 'en', { sensitivity: 'base' })
+    })
+  } else if (field === 'orderId') {
+    sortedData.sort((a: T, b: T) => {
+      if (a.orderId < b.orderId) { return -1 }
+      if (a.orderId > b.orderId) { return 1 }
+      return 0;
+    })
+  } else {
+    sortedData.sort((a: T, b: T) => {
+      if (a.createdAt < b.createdAt) { return -1 }
+      if (a.createdAt > b.createdAt) { return 1 }
+      return 0;
+    })
+  }
+
+  return sortedData;
+}

controllers/apps.js

@@ -2,6 +2,7 @@ const asyncWrapper = require('../middleware/asyncWrapper');
 const ErrorResponse = require('../utils/ErrorResponse');
 const App = require('../models/App');
 const Config = require('../models/Config');
+const { Sequelize } = require('sequelize');
 
 // @desc      Create new app
 // @route     POST /api/apps
@@ -13,11 +14,17 @@ exports.createApp = asyncWrapper(async (req, res, next) => {
   });
 
   let app;
+  let _body = { ...req.body };
+
+  if (req.file) {
+    _body.icon = req.file.filename;
+  }
+
 
   if (pinApps) {
     if (parseInt(pinApps.value)) {
       app = await App.create({
-        ...req.body,
+        ..._body,
         isPinned: true
       })
     } else {
@@ -35,10 +42,24 @@ exports.createApp = asyncWrapper(async (req, res, next) => {
 // @route     GET /api/apps
 // @access    Public
 exports.getApps = asyncWrapper(async (req, res, next) => {
-  const apps = await App.findAll({
+  // Get config from database
-    order: [['name', 'ASC']]
+  const useOrdering = await Config.findOne({
+    where: { key: 'useOrdering' }
   });
 
+  const orderType = useOrdering ? useOrdering.value : 'createdAt';
+  let apps;
+
+  if (orderType == 'name') {
+    apps = await App.findAll({
+      order: [[ Sequelize.fn('lower', Sequelize.col('name')), 'ASC' ]]
+    });
+  } else {
+    apps = await App.findAll({
+      order: [[ orderType, 'ASC' ]]
+    });
+  }
+
   res.status(200).json({
     success: true,
     data: apps
@@ -91,6 +112,22 @@ exports.deleteApp = asyncWrapper(async (req, res, next) => {
     where: { id: req.params.id }
   })
 
+  res.status(200).json({
+    success: true,
+    data: {}
+  })
+})
+
+// @desc      Reorder apps
+// @route     PUT /api/apps/0/reorder
+// @access    Public
+exports.reorderApps = asyncWrapper(async (req, res, next) => {
+  req.body.apps.forEach(async ({ id, orderId }) => {
+    await App.update({ orderId }, {
+      where: { id }
+    })
+  })
+
   res.status(200).json({
     success: true,
     data: {}

controllers/bookmark.js

@@ -1,6 +1,7 @@
 const asyncWrapper = require('../middleware/asyncWrapper');
 const ErrorResponse = require('../utils/ErrorResponse');
 const Bookmark = require('../models/Bookmark');
+const { Sequelize } = require('sequelize');
 
 // @desc      Create new bookmark
 // @route     POST /api/bookmarks
@@ -19,7 +20,7 @@ exports.createBookmark = asyncWrapper(async (req, res, next) => {
 // @access    Public
 exports.getBookmarks = asyncWrapper(async (req, res, next) => {
   const bookmarks = await Bookmark.findAll({
-    order: [['name', 'ASC']]
+    order: [[ Sequelize.fn('lower', Sequelize.col('name')), 'ASC' ]]
   });
 
   res.status(200).json({

controllers/category.js

@@ -3,6 +3,7 @@ const ErrorResponse = require('../utils/ErrorResponse');
 const Category = require('../models/Category');
 const Bookmark = require('../models/Bookmark');
 const Config = require('../models/Config');
+const { Sequelize } = require('sequelize')
 
 // @desc      Create new category
 // @route     POST /api/categories
@@ -36,14 +37,32 @@ exports.createCategory = asyncWrapper(async (req, res, next) => {
 // @route     GET /api/categories
 // @access    Public
 exports.getCategories = asyncWrapper(async (req, res, next) => {
-  const categories = await Category.findAll({
+  // Get config from database
-    include: [{
+  const useOrdering = await Config.findOne({
-      model: Bookmark,
+    where: { key: 'useOrdering' }
-      as: 'bookmarks'
-    }],
-    order: [['name', 'ASC']]
   });
 
+  const orderType = useOrdering ? useOrdering.value : 'createdAt';
+  let categories;
+
+  if (orderType == 'name') {
+    categories = await Category.findAll({
+      include: [{
+        model: Bookmark,
+        as: 'bookmarks'
+      }],
+      order: [[ Sequelize.fn('lower', Sequelize.col('Category.name')), 'ASC' ]]
+    });
+  } else {
+    categories = await Category.findAll({
+      include: [{
+        model: Bookmark,
+        as: 'bookmarks'
+      }],
+      order: [[ orderType, 'ASC' ]]
+    });
+  }
+
   res.status(200).json({
     success: true,
     data: categories
@@ -118,6 +137,22 @@ exports.deleteCategory = asyncWrapper(async (req, res, next) => {
     where: { id: req.params.id }
   })
 
+  res.status(200).json({
+    success: true,
+    data: {}
+  })
+})
+
+// @desc      Reorder categories
+// @route     PUT /api/categories/0/reorder
+// @access    Public
+exports.reorderCategories = asyncWrapper(async (req, res, next) => {
+  req.body.categories.forEach(async ({ id, orderId }) => {
+    await Category.update({ orderId }, {
+      where: { id }
+    })
+  })
+
   res.status(200).json({
     success: true,
     data: {}

controllers/config.js

@@ -2,6 +2,8 @@ const asyncWrapper = require('../middleware/asyncWrapper');
 const ErrorResponse = require('../utils/ErrorResponse');
 const Config = require('../models/Config');
 const { Op } = require('sequelize');
+const File = require('../utils/File');
+const { join } = require('path');
 
 // @desc      Insert new key:value pair
 // @route     POST /api/config
@@ -122,6 +124,33 @@ exports.deletePair = asyncWrapper(async (req, res, next) => {
 
   await pair.destroy();
 
+  res.status(200).json({
+    success: true,
+    data: {}
+  })
+})
+
+// @desc      Get custom CSS file
+// @route     GET /api/config/0/css
+// @access    Public
+exports.getCss = asyncWrapper(async (req, res, next) => {
+  const file = new File(join(__dirname, '../public/flame.css'));
+  const content = file.read();
+
+  res.status(200).json({
+    success: true,
+    data: content
+  })
+})
+
+
+// @desc      Update custom CSS file
+// @route     PUT /api/config/0/css
+// @access    Public
+exports.updateCss = asyncWrapper(async (req, res, next) => {
+  const file = new File(join(__dirname, '../public/flame.css'));
+  file.write(req.body.styles);
+
   res.status(200).json({
     success: true,
     data: {}

db.js

@@ -1,24 +1,32 @@
 const { Sequelize } = require('sequelize');
+const Logger = require('./utils/Logger');
+const logger = new Logger();
 
 const sequelize = new Sequelize({
   dialect: 'sqlite',
   storage: './data/db.sqlite',
   logging: false
-});
+})
 
 const connectDB = async () => {
   try {
     await sequelize.authenticate();
-    console.log('Connected to database');
+    logger.log('Connected to database');
     
-    await sequelize.sync({ alter: true });
+    const syncModels = true;
-    console.log('All models were synced');
+    
+    if (syncModels) {
+      logger.log('Starting model synchronization');
+      await sequelize.sync({ alter: true });
+      logger.log('All models were synchronized');
+    }
   } catch (error) {
-    console.error('Unable to connect to the database:', error);
+    logger.log(`Unable to connect to the database: ${error.message}`, 'ERROR');
+    process.exit(1);
   }
 }
 
 module.exports = {
   connectDB,
   sequelize
-};
+}

docker-compose.yml

@@ -0,0 +1,10 @@
+version: "3"
+services:
+  flame:
+    image: pawelmalak/flame
+    container_name: flame
+    volumes:
+      - /path/to/data:/app/data
+    ports:
+      - 5005:5005
+    restart: unless-stopped

middleware/errorHandler.js

@@ -1,5 +1,7 @@
 const ErrorResponse = require('../utils/ErrorResponse');
 const colors = require('colors');
+const Logger = require('../utils/Logger');
+const logger = new Logger();
 
 const errorHandler = (err, req, res, next) => {
   let error = { ...err };
@@ -10,8 +12,7 @@ const errorHandler = (err, req, res, next) => {
   //   error = new ErrorResponse(`Field ${msg}`, 400);
   // }
 
-  console.log(error);
+  logger.log(error.message.split(',')[0], 'ERROR');
-  console.log(`${err}`);
 
   res.status(err.statusCode || 500).json({
     success: false,

middleware/multer.js

@@ -0,0 +1,29 @@
+const fs = require('fs');
+const multer = require('multer');
+
+if (!fs.existsSync('data/uploads')) {
+  fs.mkdirSync('data/uploads');
+}
+
+const storage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    cb(null, './data/uploads');
+  },
+  filename: (req, file, cb) => {
+    cb(null, Date.now() + '--' + file.originalname);
+  }
+})
+
+const supportedTypes = ['jpg', 'jpeg', 'png'];
+
+const fileFilter = (req, file, cb) => {
+  if (supportedTypes.includes(file.mimetype.split('/')[1])) {
+    cb(null, true);
+  } else {
+    cb(null, false);
+  }
+}
+
+const upload = multer({ storage, fileFilter });
+
+module.exports = upload.single('icon');

models/App.js

@@ -18,6 +18,11 @@ const App = sequelize.define('App', {
   isPinned: {
     type: DataTypes.BOOLEAN,
     defaultValue: false
+  },
+  orderId: {
+    type: DataTypes.INTEGER,
+    allowNull: true,
+    defaultValue: null
   }
 }, {
   tableName: 'apps'

models/Category.js

@@ -9,6 +9,11 @@ const Category = sequelize.define('Category', {
   isPinned: {
     type: DataTypes.BOOLEAN,
     defaultValue: false
+  },
+  orderId: {
+    type: DataTypes.INTEGER,
+    allowNull: true,
+    defaultValue: null
   }
 }, {
   tableName: 'categories'

models/associateModels.js

@@ -2,12 +2,14 @@ const Category = require('./Category');
 const Bookmark = require('./Bookmark');
 
 const associateModels = () => {
-  // Category <> Bookmark
   Category.hasMany(Bookmark, {
-    as: 'bookmarks',
+    foreignKey: 'categoryId',
+    as: 'bookmarks'
+  });
+
+  Bookmark.belongsTo(Category, {
     foreignKey: 'categoryId'
   });
-  Bookmark.belongsTo(Category, { foreignKey: 'categoryId' });
 }
 
 module.exports = associateModels;

package-lock.json

@@ -224,6 +224,11 @@
         "picomatch": "^2.0.4"
       }
     },
+    "append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha1-HjRA6RXwsSA9I3SOeO3XubW0PlY="
+    },
     "aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -364,6 +369,43 @@
         "fill-range": "^7.0.1"
       }
     },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "busboy": {
+      "version": "0.2.14",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-0.2.14.tgz",
+      "integrity": "sha1-bCpiLvz0fFe7vh4qnDetNseSVFM=",
+      "requires": {
+        "dicer": "0.2.5",
+        "readable-stream": "1.1.x"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
     "bytes": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
@@ -553,6 +595,17 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
     "concurrently": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.2.tgz",
@@ -741,6 +794,38 @@
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
       "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups="
     },
+    "dicer": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.2.5.tgz",
+      "integrity": "sha1-WZbAhrszIYyBLAkL3cCc0S+stw8=",
+      "requires": {
+        "readable-stream": "1.1.x",
+        "streamsearch": "0.1.2"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
     "dot-prop": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
@@ -1611,6 +1696,21 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "multer": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-1.4.2.tgz",
+      "integrity": "sha512-xY8pX7V+ybyUpbYMxtjM9KAiD9ixtg5/JkeKUTD6xilfDv0vzzOFcCp4Ljb1UU3tSOM3VTZtKo63OmzOrGi3Cg==",
+      "requires": {
+        "append-field": "^1.0.0",
+        "busboy": "^0.2.11",
+        "concat-stream": "^1.5.2",
+        "mkdirp": "^0.5.1",
+        "object-assign": "^4.1.1",
+        "on-finished": "^2.3.0",
+        "type-is": "^1.6.4",
+        "xtend": "^4.0.0"
+      }
+    },
     "needle": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/needle/-/needle-2.6.0.tgz",
@@ -2411,6 +2511,11 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
     },
+    "streamsearch": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-0.1.2.tgz",
+      "integrity": "sha1-gIudDlb8Jz2Am6VzOOkpkZoanxo="
+    },
     "string-width": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
@@ -2577,6 +2682,11 @@
         "mime-types": "~2.1.24"
       }
     },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -2804,6 +2914,11 @@
       "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
       "dev": true
     },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

package.json

@@ -21,6 +21,7 @@
     "concurrently": "^6.0.2",
     "dotenv": "^9.0.0",
     "express": "^4.17.1",
+    "multer": "^1.4.2",
     "node-schedule": "^2.0.0",
     "sequelize": "^6.6.2",
     "sqlite3": "^5.0.2",

routes/apps.js

@@ -1,17 +1,19 @@
 const express = require('express');
 const router = express.Router();
+const upload = require('../middleware/multer');
 
 const {
   createApp,
   getApps,
   getApp,
   updateApp,
-  deleteApp
+  deleteApp,
+  reorderApps
 } = require('../controllers/apps');
 
 router
   .route('/')
-  .post(createApp)
+  .post(upload, createApp)
   .get(getApps);
 
 router
@@ -20,4 +22,8 @@ router
   .put(updateApp)
   .delete(deleteApp);
 
+router
+  .route('/0/reorder')
+  .put(reorderApps);
+
 module.exports = router;

routes/category.js

@@ -6,7 +6,8 @@ const {
   getCategories,
   getCategory,
   updateCategory,
-  deleteCategory
+  deleteCategory,
+  reorderCategories
 } = require('../controllers/category');
 
 router
@@ -20,4 +21,8 @@ router
   .put(updateCategory)
   .delete(deleteCategory);
 
+router
+  .route('/0/reorder')
+  .put(reorderCategories);
+
 module.exports = router;

routes/config.js

@@ -8,6 +8,8 @@ const {
   updateValue,
   updateValues,
   deletePair,
+  updateCss,
+  getCss,
 } = require('../controllers/config');
 
 router
@@ -22,4 +24,9 @@ router
   .put(updateValue)
   .delete(deletePair);
 
+router
+  .route('/0/css')
+  .get(getCss)
+  .put(updateCss);
+
 module.exports = router;

server.js

@@ -7,23 +7,25 @@ const Socket = require('./Socket');
 const Sockets = require('./Sockets');
 const associateModels = require('./models/associateModels');
 const initConfig = require('./utils/initConfig');
+const Logger = require('./utils/Logger');
+const logger = new Logger();
 
 const PORT = process.env.PORT || 5005;
 
-connectDB()
+(async () => {
-  .then(() => {
+  await connectDB();
-    associateModels();
+  await associateModels();
-    initConfig();
+  await initConfig();
-  });
 
-// Create server for Express API and WebSockets
+  // Create server for Express API and WebSockets
-const server = http.createServer();
+  const server = http.createServer();
-server.on('request', api);
+  server.on('request', api);
 
-// Register weatherSocket
+  // Register weatherSocket
-const weatherSocket = new Socket(server);
+  const weatherSocket = new Socket(server);
-Sockets.registerSocket('weather', weatherSocket);
+  Sockets.registerSocket('weather', weatherSocket);
 
-server.listen(PORT, () => {
+  server.listen(PORT, () => {
-  console.log(`Server is running on port ${PORT} in ${process.env.NODE_ENV} mode`);
+    logger.log(`Server is running on port ${PORT} in ${process.env.NODE_ENV} mode`);
-})
+  })
+})();

utils/File.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+
+class File {
+  constructor(path) {
+    this.path = path;
+    this.content = '';
+  }
+
+  read() {
+    try {
+      const content = fs.readFileSync(this.path, { encoding: 'utf-8' });
+      this.content = content;
+      return this.content;
+    } catch (err) {
+      return err.message;
+    }
+  }
+
+  write(data) {
+    this.content = data;
+    fs.writeFileSync(this.path, this.content);
+  }
+}
+
+module.exports = File;

utils/Logger.js

@@ -1,40 +1,39 @@
-const fs = require('fs');
-
 class Logger {
-  constructor() {
+  log(message, level = 'INFO') {
-    this.logFileHandler();
+    console.log(`[${this.generateTimestamp()}] [${level}] ${message}`)
   }
 
-  logFileHandler() {
+  generateTimestamp() {
-    if (!fs.existsSync('./flame.log')) {
+    const d = new Date();
-      fs.writeFileSync('./flame.log', '');
+
-    } else {
+    // Date
-      console.log('file exists');
+    const year = d.getFullYear();
+    const month = this.parseDate(d.getMonth() + 1);
+    const day = this.parseDate(d.getDate());
+
+    // Time
+    const hour = this.parseDate(d.getHours());
+    const minutes = this.parseDate(d.getMinutes());
+    const seconds = this.parseDate(d.getSeconds());
+    const miliseconds = this.parseDate(d.getMilliseconds(), true);
+
+    // Timezone
+    const tz = -d.getTimezoneOffset() / 60;
+
+    return `${year}-${month}-${day} ${hour}:${minutes}:${seconds}.${miliseconds} UTC${tz >= 0 ? '+' + tz : tz}`;
+  }
+
+  parseDate(date, ms = false) {
+    if (ms) {
+      if (date >= 10 && date < 100) {
+        return `0${date}`;
+      } else if (date < 10) {
+        return `00${date}`;
+      }
     }
-  }
 
-  writeLog(logMsg, logType) {
+    return date < 10 ? `0${date}` : date.toString();
-
-  }
-
-  generateLog(logMsg, logType) {
-    const now = new Date();
-    const date = `${this.parseNumber(now.getDate())}-${this.parseNumber(now.getMonth() + 1)}-${now.getFullYear()}`;
-    const time = `${this.parseNumber(now.getHours())}:${this.parseNumber(now.getMinutes())}:${this.parseNumber(now.getSeconds())}.${now.getMilliseconds()}`;
-    const log = `[${date} ${time}]: ${logType} ${logMsg}`;
-    return log;
-    //  const timestamp = new Date().toISOString();
-  }
-
-  parseNumber(number) {
-    if (number > 9) {
-      return number;
-    } else {
-      return `0${number}`;
-    }
   }
 }
 
-// console.log(logger.generateLog('testMsg', 'INFO'));
+module.exports = Logger;
-
-module.exports = new Logger();

utils/clearWeatherData.js

@@ -1,5 +1,7 @@
 const { Op } = require('sequelize');
 const Weather = require('../models/Weather');
+const Logger = require('./Logger');
+const logger = new Logger();
 
 const clearWeatherData = async () => {
   const weather = await Weather.findOne({
@@ -16,7 +18,7 @@ const clearWeatherData = async () => {
     })
   }
 
-  console.log('Old weather data was deleted');
+  logger.log('Old weather data was deleted');
 }
 
 module.exports = clearWeatherData;

utils/initConfig.js

@@ -1,6 +1,8 @@
 const { Op } = require('sequelize');
 const Config = require('../models/Config');
 const { config } = require('./initialConfig.json');
+const Logger = require('./Logger');
+const logger = new Logger();
 
 const initConfig = async () => {
   // Get config values
@@ -26,7 +28,7 @@ const initConfig = async () => {
     }
   })
 
-  console.log('Initial config created');
+  logger.log('Initial config created');
   return;
 }
 

utils/initialConfig.json

@@ -31,6 +31,26 @@
     {
       "key": "hideHeader",
       "value": false
+    },
+    {
+      "key": "useOrdering",
+      "value": "createdAt"
+    },
+    {
+      "key": "openSameTab",
+      "value": false
+    },
+    {
+      "key": "hideApps",
+      "value": false
+    },
+    {
+      "key": "hideCategories",
+      "value": false
+    },
+    {
+      "key": "hideSearch",
+      "value": false
     }
   ]
 }

utils/jobs.js

@@ -2,15 +2,17 @@ const schedule = require('node-schedule');
 const getExternalWeather = require('./getExternalWeather');
 const clearWeatherData = require('./clearWeatherData');
 const Sockets = require('../Sockets');
+const Logger = require('./Logger');
+const logger = new Logger();
 
 // Update weather data every 15 minutes
 const weatherJob = schedule.scheduleJob('updateWeather', '0 */15 * * * *', async () => {
   try {
     const weatherData = await getExternalWeather();
-    console.log('weather updated');
+    logger.log('Weather updated');
     Sockets.getSocket('weather').socket.send(JSON.stringify(weatherData));
   } catch (err) {
-    console.log(err.message);
+    logger.log(err.message, 'ERROR');
   }
 })