Docker/flame
Docker/flame
1
0
Fork 0
mirror of https://github.com/pawelmalak/flame.git synced 2025-07-19 03:29:37 +02:00
Code Issues Releases Wiki Activity

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

Browse source
This commit is contained in:
unknown 2021-05-27 13:21:11 +02:00
parent 316bc49f5c
commit 88c8eee982
4 changed files with 95 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

140
client/src/components/Settings/WeatherSettings/WeatherSettings.tsx
View file

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

16
controllers/config.js
View file

@ -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 // @desc Delete key:value pair
// @route DELETE /api/config/:key // @route DELETE /api/config/:key
// @access Public // @access Public

3
package.json
View file

@ -7,7 +7,8 @@
"start": "node server.js", "start": "node server.js",
"server": "nodemon server.js", "server": "nodemon server.js",
"client": "npm start --prefix client", "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": "", "author": "",
"license": "ISC", "license": "ISC",

6
routes/config.js
View file

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