❤️ these confounded tests drive me nuts 😍

components/LifeinaBoxStats.js

@@ -1,10 +1,12 @@
 import React from 'react'
 import { useStoreState } from 'easy-peasy'
+import { celciusToFahrenheit } from '../lib/'
 
 const LifeinaBoxStats = () => {
   const temperatureValue = useStoreState(state => state.temperature.value)
   const batteryValue = useStoreState(state => state.battery.value)
   const batteryStatus = useStoreState(state => state.battery.status)
+  const { unit } = useStoreState(state => state.settings)
 
   return (
     <div className='max-w-sm rounded overflow-hidden m-auto bg-orange-100'>
@@ -15,10 +17,14 @@ const LifeinaBoxStats = () => {
         </div>
       </div>
       <div className='px-6 py-4 '>
-        {temperatureValue ? (
+        {temperatureValue && unit === 'C' ? (
           <span className='inline-block bg-gray-200 rounded-full px-3 py-1 text-lg font-semibold text-gray-700 mr-2'>
             {`${temperatureValue} °C`}
           </span>
+        ) : temperatureValue && unit === 'F' ? (
+          <span className='inline-block bg-gray-200 rounded-full px-3 py-1 text-lg font-semibold text-gray-700 mr-2'>
+            {`${celciusToFahrenheit(temperatureValue)} °F`}
+          </span>
         ) : null}
         {batteryValue ? (
           <span className='inline-block bg-gray-200 rounded-full px-3 py-1 text-lg font-semibold text-gray-700 mr-2'>

components/SelectLanguage.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useStoreState, useStoreActions } from 'easy-peasy'
+
+const SelectLanguage = () => {
+  const { languages } = useStoreState(state => state.settings)
+  const { updateLanguage } = useStoreActions(actions => actions.settings)
+
+  const handleChange = event => {
+    if (!languages.includes(event.target.value)) {
+      return 0
+    }
+
+    updateLanguage(event.target.value)
+  }
+
+  return (
+    <div className='inline-block relative w-64'>
+      <select
+        onChange={handleChange}
+        className='block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline'
+      >
+        <option value='en_GB'>English</option>
+        <option value='fr_FR'>Français</option>
+      </select>
+      <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
+        <svg
+          className='fill-current h-4 w-4'
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 20 20'
+        >
+          <path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+export { SelectLanguage }

components/SelectUnit.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { useStoreState, useStoreActions } from 'easy-peasy'
+
+const SelectUnit = () => {
+  const { units } = useStoreState(state => state.settings)
+  const { updateUnit } = useStoreActions(actions => actions.settings)
+
+  const handleChange = event => {
+    if (!units.includes(event.target.value)) {
+      return 0
+    }
+
+    updateUnit(event.target.value)
+  }
+
+  return (
+    <div className='inline-block relative w-64'>
+      <select
+        onChange={handleChange}
+        className='block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline'
+      >
+        <option value='C'>Celsius °C</option>
+        <option value='F'>Fahrenheit °F</option>
+      </select>
+      <div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700'>
+        <svg
+          className='fill-current h-4 w-4'
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 20 20'
+        >
+          <path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+export { SelectUnit }

components/index.js

@@ -2,3 +2,5 @@ export * from './BatteryChart'
 export * from './LifeinaBoxStats'
 export * from './TemperatureChart'
 export * from './Nav'
+export * from './SelectUnit'
+export * from './SelectLanguage'

model/settings-model.js

@@ -1,9 +1,17 @@
 import { action } from 'easy-peasy'
 
 const settingsModel = {
-  language: 'en_GB',
   pollInterval: 1000, // ms
-  unit: 'C' // accepted values: 'C' or 'F'
+  language: 'en_GB',
+  languages: ['en_GB', 'fr_FR'],
+  updateLanguage: action((state, payload) => {
+    state.language = payload
+  }),
+  unit: 'C',
+  units: ['C', 'F'],
+  updateUnit: action((state, payload) => {
+    state.unit = payload
+  })
 }
 
 export default settingsModel

package.json

@@ -32,11 +32,11 @@
     "lodash": "^4.17.15",
     "micro": "^9.3.5-canary.3",
     "micro-cors": "^0.1.1",
-    "next": "latest",
+    "next": "^9.3.0",
     "next-redux-wrapper": "^4.0.1",
     "prop-types": "^15.7.2",
-    "react": "latest",
-    "react-dom": "latest",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
     "styled-components": "^5.0.1",
     "victory": "^34.1.1",
     "yup": "^0.28.1"

pages/settings.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import '../styles/index.css'
-import { Nav } from '../components/'
+import { Nav, SelectUnit, SelectLanguage } from '../components/'
 
 export default () => (
   <>
@@ -9,7 +9,8 @@ export default () => (
       className='flex flex-wrap -mx-2 shadow rounded'
       style={{ backgroundColor: '#fefaf0' }}
     >
-      <div>This feature is scheduled to tomorow :-)</div>
+      <SelectUnit />
+      <SelectLanguage />
     </div>
   </>
 )