Weather settings form update functionality. API: update multiple values in one Config query

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

@@ -1,4 +1,4 @@
-import { useState, ChangeEvent, Fragment, useEffect } from 'react';
+import { useState, ChangeEvent, Fragment, useEffect, FormEvent } from 'react';
 import axios from 'axios';
 import { ApiResponse, Config } from '../../../interfaces';
 
@@ -55,73 +55,79 @@ const WeatherSettings = (): JSX.Element => {
       .catch(err => console.log(err));
   }, []);
 
+  const formSubmitHandler = (e: FormEvent) => {
+    e.preventDefault();
+
+    axios.put<ApiResponse<{}>>('/api/config', formData)
+      .then(data => console.log(data.data.success))
+      .catch(err => console.log(err));
+  }
+
   return (
-    <div>
-      <Fragment>
-        <InputGroup>
-          <label htmlFor='WEATHER_API_KEY'>API Key</label>
-          <input
-            type='text'
-            id='WEATHER_API_KEY'
-            name='WEATHER_API_KEY'
-            placeholder='secret'
-            value={formData.WEATHER_API_KEY}
-            onChange={(e) => inputChangeHandler(e)}
-          />
-          <span>
-            Using
-            <a
-              href='https://www.weatherapi.com/pricing.aspx'
-              target='blank'>
-              {' '}Weather API
-            </a>
-          </span>
-        </InputGroup>
-        <InputGroup>
-          <label htmlFor='lat'>Location Latitude</label>
-          <input
-            type='number'
-            id='lat'
-            name='lat'
-            placeholder='52.22'
-            value={formData.lat}
-            onChange={(e) => inputChangeHandler(e, true)}
-          />
-          <span>
-            You can use
-            <a
-              href='https://www.latlong.net/convert-address-to-lat-long.html'
-              target='blank'>
-              {' '}latlong.net
-            </a>
-          </span>
-        </InputGroup>
-        <InputGroup>
-          <label htmlFor='long'>Location Longitude</label>
-          <input
-            type='number'
-            id='long'
-            name='long'
-            placeholder='21.01'
-            value={formData.long}
-            onChange={(e) => inputChangeHandler(e, true)}
-          />
-        </InputGroup>
-        <InputGroup>
-          <label htmlFor='isCelsius'>Temperature Unit</label>
-          <select
-            id='isCelsius'
-            name='isCelsius'
-            onChange={(e) => inputChangeHandler(e, true)}
-            value={formData.isCelsius}
-          >
-            <option value={1}>Celsius</option>
-            <option value={0}>Fahrenheit</option>
-          </select>
-        </InputGroup>
-      </Fragment>
-      <Button>Save changes</Button>
-    </div>
+    <form onSubmit={(e) => formSubmitHandler(e)}>
+      <InputGroup>
+        <label htmlFor='WEATHER_API_KEY'>API Key</label>
+        <input
+          type='text'
+          id='WEATHER_API_KEY'
+          name='WEATHER_API_KEY'
+          placeholder='secret'
+          value={formData.WEATHER_API_KEY}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+        <span>
+          Using
+          <a
+            href='https://www.weatherapi.com/pricing.aspx'
+            target='blank'>
+            {' '}Weather API
+          </a>
+        </span>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='lat'>Location Latitude</label>
+        <input
+          type='number'
+          id='lat'
+          name='lat'
+          placeholder='52.22'
+          value={formData.lat}
+          onChange={(e) => inputChangeHandler(e, true)}
+        />
+        <span>
+          You can use
+          <a
+            href='https://www.latlong.net/convert-address-to-lat-long.html'
+            target='blank'>
+            {' '}latlong.net
+          </a>
+        </span>
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='long'>Location Longitude</label>
+        <input
+          type='number'
+          id='long'
+          name='long'
+          placeholder='21.01'
+          value={formData.long}
+          onChange={(e) => inputChangeHandler(e, true)}
+        />
+      </InputGroup>
+      <InputGroup>
+        <label htmlFor='isCelsius'>Temperature Unit</label>
+        <select
+          id='isCelsius'
+          name='isCelsius'
+          onChange={(e) => inputChangeHandler(e, true)}
+          value={formData.isCelsius}
+        >
+          <option value={1}>Celsius</option>
+          <option value={0}>Fahrenheit</option>
+        </select>
+      </InputGroup>
+    <Button>Save changes</Button>
+    </form>
   )
 }
 

controllers/config.js

@@ -86,6 +86,22 @@ exports.updateValue = asyncWrapper(async (req, res, next) => {
   })
 })
 
+// @desc      Update multiple values
+// @route     PUT /api/config/
+// @access    Public
+exports.updateValues = asyncWrapper(async (req, res, next) => {
+  Object.entries(req.body).forEach(async ([key, value]) => {
+    await Config.update({ value }, {
+      where: { key }
+    })
+  })
+  
+  res.status(200).send({
+    success: true,
+    data: {}
+  })
+})
+
 // @desc      Delete key:value pair
 // @route     DELETE /api/config/:key
 // @access    Public

package.json

@@ -7,7 +7,8 @@
     "start": "node server.js",
     "server": "nodemon server.js",
     "client": "npm start --prefix client",
-    "dev": "concurrently \"npm run server\" \"npm run client\""
+    "dev": "concurrently \"npm run server\" \"npm run client\"",
+    "dev-lines": "git ls-files | grep -v '.json' | xargs wc -l"
   },
   "author": "",
   "license": "ISC",

routes/config.js

@@ -6,13 +6,15 @@ const {
   getAllPairs,
   getSinglePair,
   updateValue,
-  deletePair
+  updateValues,
+  deletePair,
 } = require('../controllers/config');
 
 router
   .route('')
   .post(createPair)
-  .get(getAllPairs);
+  .get(getAllPairs)
+  .put(updateValues);
 
 router
   .route('/:key')