Add slider and save value in LocalStorage

components/labels.js

@@ -29,5 +29,10 @@ export const settings = {
     success: {
       message: 'Data successfully imported'
     }
+  },
+  tempScale: {
+    segmentTitle: 'Change temperature scale',
+    min: 'Min',
+    max: 'Max'
   }
 }

components/settings.js

@@ -3,21 +3,28 @@ import {
   View,
   Button,
   ScrollView,
-  Alert
+  Alert,
+  Text
 } from 'react-native'
-
+import Slider from '@ptomasroos/react-native-multi-slider'
 import Share from 'react-native-share'
 import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker'
 import rnfs from 'react-native-fs'
 import styles from '../styles/index'
+import config from '../config'
 import { settings as labels } from './labels'
 import getDataAsCsvDataUri from '../lib/import-export/export-to-csv'
 import importCsv from '../lib/import-export/import-from-csv'
+import { getTempScale, saveTempScale } from '../local-storage'
 
 export default class Settings extends Component {
   render() {
     return (
       <ScrollView>
+        <View style={styles.settingsSegment}>
+          <Text>{labels.tempScale.segmentTitle}</Text>
+          <TempSlider/>
+        </View>
         <View style={styles.homeButtons}>
           <View style={styles.homeButton}>
             <Button
@@ -37,6 +44,55 @@ export default class Settings extends Component {
   }
 }
 
+class TempSlider extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      min: config.temperatureScale.low,
+      max: config.temperatureScale.high
+    }
+    this.getStoredScale()
+  }
+
+  async getStoredScale() {
+    const storedScale = await getTempScale()
+    if (!storedScale) return
+    this.setState(storedScale)
+  }
+
+  onValuesChange = (values) => {
+    this.setState({
+      min: values[0],
+      max: values[1]
+    })
+  }
+
+  onValuesChangeFinish = (values) => {
+    this.setState({
+      min: values[0],
+      max: values[1]
+    })
+    saveTempScale(this.state)
+  }
+
+  render() {
+    return (
+      <View>
+        <Text>{`${labels.tempScale.min} ${this.state.min}`}</Text>
+        <Text>{`${labels.tempScale.max} ${this.state.max}`}</Text>
+        <Slider
+          values={[this.state.min, this.state.max]}
+          min={config.temperatureScale.min}
+          max={config.temperatureScale.max}
+          step={0.5}
+          onValuesChange={this.onValuesChange}
+          onValuesChangeFinish={this.onValuesChangeFinish}
+        />
+      </View>
+    )
+  }
+}
+
 async function openShareDialogAndExport() {
   let data
   try {

local-storage/index.js

@@ -0,0 +1,11 @@
+import { AsyncStorage } from 'react-native'
+
+export async function getTempScale() {
+  const result = await AsyncStorage.getItem('tempScale')
+  if (!result) return result
+  return JSON.parse(result)
+}
+
+export async function saveTempScale(scale) {
+  return AsyncStorage.setItem('tempScale', JSON.stringify(scale))
+}

package-lock.json

@@ -723,6 +723,11 @@
         }
       }
     },
+    "@ptomasroos/react-native-multi-slider": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@ptomasroos/react-native-multi-slider/-/react-native-multi-slider-1.0.0.tgz",
+      "integrity": "sha512-NpX22rQLArg9widwMzGf7XsInTDf6mfY/D1XaDVjglNkVphj3NSN37+nF6MofArCxC++1P+jHv0SGWbmJQwy4g=="
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -3727,7 +3732,8 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3745,11 +3751,13 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3762,15 +3770,18 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3873,7 +3884,8 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3883,6 +3895,7 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3895,17 +3908,20 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -3922,6 +3938,7 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3994,7 +4011,8 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4004,6 +4022,7 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4079,7 +4098,8 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4109,6 +4129,7 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4126,6 +4147,7 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4164,11 +4186,13 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true
+          "bundled": true,
+          "optional": true
         }
       }
     },

package.json

@@ -15,6 +15,7 @@
     "lint": "eslint components lib test"
   },
   "dependencies": {
+    "@ptomasroos/react-native-multi-slider": "^1.0.0",
     "assert": "^1.4.1",
     "csvtojson": "^2.0.8",
     "date-range": "0.0.2",

styles/index.js

@@ -88,5 +88,10 @@ export default StyleSheet.create({
     margin: 30,
     textAlign: 'left',
     textAlignVertical: 'center'
+  },
+  settingsSegment: {
+    backgroundColor: 'lightgrey',
+    padding: 10,
+    marginTop: 10
   }
 })