From c6b490b2a4c87a87dece2ee21def654fccb961fb Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Tue, 21 Aug 2018 14:26:54 +0200
Subject: [PATCH] Add slider and save value in LocalStorage

---
 components/labels.js   |  5 ++++
 components/settings.js | 62 ++++++++++++++++++++++++++++++++++++++++--
 local-storage/index.js | 11 ++++++++
 package-lock.json      | 46 +++++++++++++++++++++++--------
 package.json           |  1 +
 styles/index.js        |  5 ++++
 6 files changed, 116 insertions(+), 14 deletions(-)
 create mode 100644 local-storage/index.js

diff --git a/components/labels.js b/components/labels.js
index 99400a2..bd294b6 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -29,5 +29,10 @@ export const settings = {
     success: {
       message: 'Data successfully imported'
     }
+  },
+  tempScale: {
+    segmentTitle: 'Change temperature scale',
+    min: 'Min',
+    max: 'Max'
   }
 }
\ No newline at end of file
diff --git a/components/settings.js b/components/settings.js
index 97907b1..0f8f76a 100644
--- a/components/settings.js
+++ b/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 {
@@ -117,4 +173,4 @@ function alertError(msg) {
 function importError(msg) {
   const postFixed = `${msg}\n\n${labels.import.errors.postFix}`
   alertError(postFixed)
-}
\ No newline at end of file
+}
diff --git a/local-storage/index.js b/local-storage/index.js
new file mode 100644
index 0000000..5fff233
--- /dev/null
+++ b/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))
+}
diff --git a/package-lock.json b/package-lock.json
index 2e57413..66bd9e7 100644
--- a/package-lock.json
+++ b/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
         }
       }
     },
diff --git a/package.json b/package.json
index 6ff1901..d1c38e5 100644
--- a/package.json
+++ b/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",
diff --git a/styles/index.js b/styles/index.js
index fde1700..7d5af98 100644
--- a/styles/index.js
+++ b/styles/index.js
@@ -88,5 +88,10 @@ export default StyleSheet.create({
     margin: 30,
     textAlign: 'left',
     textAlignVertical: 'center'
+  },
+  settingsSegment: {
+    backgroundColor: 'lightgrey',
+    padding: 10,
+    marginTop: 10
   }
 })
\ No newline at end of file