Weather settings view. API: select which keys to get from Config

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

@@ -1,11 +1,10 @@
 .Settings {
   width: 100%;
   display: grid;
-  grid-template-columns: 1fr 3fr;
+  grid-template-columns: 1fr;
 }
 
 .SettingsNav {
-  /* background-color: coral; */
   display: flex;
   flex-direction: column;
 }
@@ -19,7 +18,8 @@
   transition: all 0.3s;
 }
 
-.SettingsNavLink:hover {
+.SettingsNavLink:hover,
+.SettingsNavLink:focus {
   border-left: 3px solid var(--color-primary);
 }
 
@@ -27,6 +27,14 @@
   border-left: 3px solid var(--color-primary);
 }
 
-.SettingsContent {
+@media (min-width: 480px) {
-  /* background-color:springgreen; */
+  .Settings {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+@media (min-width: 500px) {
+  .Settings {
+    grid-template-columns: 1fr 3fr;
+  }
 }

client/src/components/Settings/Settings.tsx

@@ -1,16 +1,13 @@
-import { NavLink, Link, Switch, Route, withRouter, match } from 'react-router-dom';
+import { NavLink, Link, Switch, Route, withRouter } 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';
 
-interface ComponentProps {
+const Settings = (): JSX.Element => {
-  match: match;
-}
-
-const Settings = (props: ComponentProps): JSX.Element => {
   return (
     <Container>
       <Headline
@@ -30,13 +27,14 @@ const Settings = (props: ComponentProps): JSX.Element => {
             className={classes.SettingsNavLink}
             activeClassName={classes.SettingsNavLinkActive}
             exact
-            to='/settings/nothig'>
+            to='/settings/weather'>
             Weather
           </NavLink>
         </nav>
         <section className={classes.SettingsContent}>
           <Switch>
             <Route exact path='/settings' component={Themer} />
+            <Route path='/settings/weather' component={WeatherSettings} />
           </Switch>
         </section>
       </div>

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

@@ -0,0 +1,128 @@
+import { useState, ChangeEvent, Fragment, useEffect } from 'react';
+import axios from 'axios';
+import { ApiResponse, Config } from '../../../interfaces';
+
+import InputGroup from '../../UI/Forms/InputGroup/InputGroup';
+import Button from '../../UI/Buttons/Button/Button';
+
+interface FormState {
+  WEATHER_API_KEY: string;
+  lat: number;
+  long: number;
+  isCelsius: number;
+}
+
+const WeatherSettings = (): JSX.Element => {
+  const [formData, setFormData] = useState<FormState>({
+    WEATHER_API_KEY: '',
+    lat: 0,
+    long: 0,
+    isCelsius: 1
+  })
+
+  const inputChangeHandler = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>, isNumber?: boolean) => {
+    let value: string | number = e.target.value;
+
+    if (isNumber) {
+      value = parseFloat(value);
+    }
+
+    setFormData({
+      ...formData,
+      [e.target.name]: value
+    })
+  }
+
+  useEffect(() => {
+    axios.get<ApiResponse<Config[]>>('/api/config?keys=WEATHER_API_KEY,lat,long,isCelsius')
+      .then(data => {
+        let tmpFormData = { ...formData };
+
+        data.data.data.forEach((config: Config) => {
+          let value: string | number = config.value;
+          if (config.valueType === 'number') {
+            value = parseFloat(value);
+          }
+
+          tmpFormData = {
+            ...tmpFormData,
+            [config.key]: value
+          }
+        })
+
+        setFormData(tmpFormData);
+      })
+      .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>
+  )
+}
+
+export default WeatherSettings;

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

@@ -27,3 +27,7 @@
 .InputGroup span a {
   color: var(--color-accent);
 }
+
+.InputGroup label {
+  color: var(--color-primary);
+}

client/src/components/UI/Icons/WeatherIcon/WeatherIcon.tsx

@@ -25,7 +25,7 @@ const WeatherIcon = (props: ComponentProps): JSX.Element => {
     return () => {
       clearTimeout(delay);
     }
-  }, []);
+  }, [props.weatherStatusCode]);
 
   return <canvas id={`weather-icon`} width='50' height='50'></canvas>
 }

client/src/interfaces/Config.ts

@@ -0,0 +1,8 @@
+import { Model } from './';
+
+export interface Config extends Model {
+  key: string;
+  value: string;
+  valueType: string;
+  isLocked: boolean;
+}

client/src/interfaces/index.ts

@@ -6,3 +6,4 @@ export * from './Weather';
 export * from './Bookmark';
 export * from './Category';
 export * from './Notification';
+export * from './Config';

controllers/config.js

@@ -1,6 +1,7 @@
 const asyncWrapper = require('../middleware/asyncWrapper');
 const ErrorResponse = require('../utils/ErrorResponse');
 const Config = require('../models/Config');
+const { Op } = require('sequelize');
 
 // @desc      Insert new key:value pair
 // @route     POST /api/config
@@ -16,9 +17,26 @@ exports.createPair = asyncWrapper(async (req, res, next) => {
 
 // @desc      Get all key:value pairs
 // @route     GET /api/config
+// @route     GET /api/config?keys=foo,bar,baz
 // @access    Public
 exports.getAllPairs = asyncWrapper(async (req, res, next) => {
-  const pairs = await Config.findAll();
+  let pairs;
+
+  if (req.query.keys) {
+    // Check for specific keys to get in a single query
+    const keys = req.query.keys
+      .split(',')
+      .map((key) => { return { key } });
+
+    pairs = await Config.findAll({
+      where: {
+        [Op.or]: keys
+      }
+    });
+  } else {
+    // Else get all
+    pairs = await Config.findAll();
+  }
 
   res.status(200).json({
     success: true,