Fixed bug with custom css not persisting

client/.env

@@ -1 +1 @@
-REACT_APP_VERSION=1.5.2
+REACT_APP_VERSION=1.6.0

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

@@ -145,6 +145,17 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value='orderId'>Custom order</option>
         </select>
       </InputGroup>
+      <InputGroup>
+        <label htmlFor='defaultSearchProvider'>Default Search Provider</label>
+        <select
+          id='defaultSearchProvider'
+          name='defaultSearchProvider'
+          value={formData.defaultSearchProvider}
+          onChange={(e) => inputChangeHandler(e)}
+        >
+          {queries.map((query: Query) => (<option value={query.prefix}>{query.name}</option>))}
+        </select>
+      </InputGroup>
       <InputGroup>
         <label htmlFor='searchSameTab'>Open search results in the same tab</label>
         <select
@@ -196,17 +207,6 @@ const OtherSettings = (props: ComponentProps): JSX.Element => {
           <option value={0}>False</option>
         </select>
       </InputGroup>
-      <InputGroup>
-        <label htmlFor='defaultSearchProvider'>Default Search Provider</label>
-        <select
-          id='defaultSearchProvider'
-          name='defaultSearchProvider'
-          value={formData.defaultSearchProvider}
-          onChange={(e) => inputChangeHandler(e)}
-        >
-          {queries.map((query: Query) => (<option value={query.prefix}>{query.name}</option>))}
-        </select>
-      </InputGroup>
       <InputGroup>
         <label htmlFor='hideHeader'>Hide greeting and date</label>
         <select

controllers/config.js

@@ -4,6 +4,7 @@ const Config = require('../models/Config');
 const { Op } = require('sequelize');
 const File = require('../utils/File');
 const { join } = require('path');
+const fs = require('fs');
 
 // @desc      Insert new key:value pair
 // @route     POST /api/config
@@ -151,6 +152,9 @@ exports.updateCss = asyncWrapper(async (req, res, next) => {
   const file = new File(join(__dirname, '../public/flame.css'));
   file.write(req.body.styles);
 
+  // Copy file to docker volume
+  fs.copyFileSync(join(__dirname, '../public/flame.css'), join(__dirname, '../data/flame.css'));
+
   res.status(200).json({
     success: true,
     data: {}

server.js

@@ -7,6 +7,7 @@ const Socket = require('./Socket');
 const Sockets = require('./Sockets');
 const associateModels = require('./models/associateModels');
 const initConfig = require('./utils/initConfig');
+const findCss = require('./utils/findCss');
 const Logger = require('./utils/Logger');
 const logger = new Logger();
 
@@ -16,6 +17,7 @@ const PORT = process.env.PORT || 5005;
   await connectDB();
   await associateModels();
   await initConfig();
+  findCss();
 
   // Create server for Express API and WebSockets
   const server = http.createServer();

utils/findCss.js

@@ -0,0 +1,22 @@
+const fs = require('fs');
+const { join } = require('path');
+const Logger = require('./Logger');
+const logger = new Logger();
+
+// Check if flame.css exists in mounted docker volume. Create new file if not
+const findCss = () => {
+  const srcPath = join(__dirname, '../data/flame.css');
+  const destPath = join(__dirname, '../public/flame.css');
+
+  if (fs.existsSync(srcPath)) {
+    fs.copyFileSync(srcPath, destPath);
+    logger.log('Custom CSS file found');
+    return;
+  }
+
+  logger.log('Creating empty CSS file');
+  fs.writeFileSync(destPath, '');
+
+}
+
+module.exports = findCss;