From 14e13c5e355245b679619a309485313211d78df1 Mon Sep 17 00:00:00 2001
From: Krzysztof Borowy <krizzu.dev@gmail.com>
Date: Mon, 23 Mar 2020 17:30:53 +0100
Subject: [PATCH 1/2] chore: update mobile example

---
 examples/mobile/App.js                   | 243 ++++++++++++++++-------
 examples/mobile/src/components/Button.js |  42 ++++
 examples/mobile/src/legacy/index.js      | 135 +------------
 examples/mobile/src/legacy/storage.js    |   8 -
 4 files changed, 220 insertions(+), 208 deletions(-)
 create mode 100644 examples/mobile/src/components/Button.js
 delete mode 100644 examples/mobile/src/legacy/storage.js

diff --git a/examples/mobile/App.js b/examples/mobile/App.js
index 742ea921..36d9846a 100644
--- a/examples/mobile/App.js
+++ b/examples/mobile/App.js
@@ -1,104 +1,207 @@
 /**
- *
  * @format
  * @flow
  */
 
-import React from 'react';
+import React, {useState} from 'react';
 import {
   StyleSheet,
   View,
   SafeAreaView,
-  Button,
   Text,
-  TouchableOpacity,
+  Switch,
+  TextInput,
 } from 'react-native';
 
-import {Colors} from 'react-native/Libraries/NewAppScreen';
+import LegacyStorage from './src/legacy';
+import Button from './src/components/Button';
+import LegacyAsyncStorage from '@react-native-community/async-storage-backend-legacy';
 
-import LegacyExample from './src/legacy';
-
-const Examples = {
-  legacy: {
-    title: 'Legacy',
-    screen: LegacyExample,
-  },
+const storagesAvailable = {
+  Legacy: LegacyStorage,
 };
 
-class AsyncStorageExampleApp extends React.Component {
-  state = {
-    page: Examples.legacy,
-  };
+function AsyncStorageExampleApp() {
+  const [selectedStorageName, updateStorage] = useState('Legacy');
+  const [multiValueMode, updateMultiValueMode] = useState(false);
+  const [key, updateKey] = useState('');
+  const [value, updateValue] = useState('');
+  const [savedKeys, updatedSavedKeys] = useState([]);
+
+  const storage = storagesAvailable[selectedStorageName];
+
+  async function setValue() {
+    if (multiValueMode) {
+      const keys = key.split(',').map(k => k.trim());
+      const values = value.split(',').map(v => v.trim());
+
+      const valkeh = keys.map((k, index) => ({[k]: values[index]}));
+      console.log({valkeh});
+      await storage.setMultiple(valkeh);
+    } else {
+      await storage.set(key, value);
+    }
+  }
+  async function readValue() {
+    if (multiValueMode) {
+      const keys = key.split(',').map(k => k.trim());
+
+      const values = await storage.getMultiple(keys);
 
-  render() {
-    const Example = this.state.page;
+      const val = Object.keys(values).map(k => values[k]);
+      updateValue(val.join(', '));
+    } else {
+      const val = await storage.get(key);
+      updateValue(val);
+    }
+  }
+  async function deleteValue() {
+    if (multiValueMode) {
+      const keys = key.split(',').map(k => k.trim());
+      await storage.removeMultiple(keys);
+    } else {
+      await storage.remove(key);
+    }
+  }
+  async function getKeys() {
+    const keys = await storage.getKeys();
+    updatedSavedKeys(keys || []);
+  }
+  async function drop() {
+    await storage.clearStorage();
+  }
 
-    return (
-      <SafeAreaView style={styles.sectionContainer}>
-        <TouchableOpacity
-          style={styles.resetButton}
-          onPress={() => {
-            this.setState({page: null});
-          }}>
-          <Text style={{color: '#fff'}}>Reset</Text>
-        </TouchableOpacity>
+  const buttons = [
+    {
+      name: multiValueMode ? 'get many' : 'get single',
+      func: readValue,
+    },
+    {
+      name: multiValueMode ? 'save many' : 'save single',
+      func: setValue,
+    },
+    {
+      name: multiValueMode ? 'delete many' : 'delete single',
+      func: deleteValue,
+    },
+    {
+      name: 'get keys',
+      func: getKeys,
+    },
+    {
+      name: 'clear',
+      func: drop,
+    },
+  ];
 
-        <View style={styles.buttonContainer}>
-          {Object.keys(Examples).map(pageKey => {
-            const example = Examples[pageKey];
-            return (
-              <View style={styles.sectionButton} key={example.title}>
+  return (
+    <SafeAreaView style={styles.flexOne}>
+      <View style={styles.container}>
+        <Text style={styles.header}>Async Storage - Mobile example</Text>
+        <View style={[styles.flexOne, styles.optionsContainer]}>
+          <View style={styles.alignCenter}>
+            <Text>Multi-value mode:</Text>
+            <Switch
+              style={styles.switch}
+              onValueChange={updateMultiValueMode}
+              value={multiValueMode}
+            />
+          </View>
+          <View style={styles.optionsButtonContainer}>
+            {Object.keys(storagesAvailable).map(storageName => {
+              return (
                 <Button
-                  title={example.title}
-                  onPress={() => {
-                    this.setState({page: example});
-                  }}
+                  key={storageName}
+                  title={storageName}
+                  onPress={() => updateStorage(storageName)}
+                  active={storageName === selectedStorageName}
                 />
-              </View>
-            );
-          })}
+              );
+            })}
+          </View>
         </View>
-        {Example ? (
-          <>
-            <Text style={styles.sectionTitle}>{Example.title} Example</Text>
-            <Example.screen />
-          </>
-        ) : (
-          <Text>Please select an example</Text>
-        )}
-      </SafeAreaView>
-    );
-  }
+      </View>
+      <View style={styles.inputsContainer}>
+        {multiValueMode ? (
+          <Text>Note: keys and values should be separated by a coma</Text>
+        ) : null}
+        <TextInput
+          autoCapitalize="none"
+          placeholder={multiValueMode ? 'keys' : 'key'}
+          style={styles.input}
+          onChangeText={text => updateKey(text)}
+          value={key}
+        />
+        <TextInput
+          autoCapitalize="none"
+          placeholder={multiValueMode ? 'values' : 'value'}
+          style={styles.input}
+          onChangeText={text => updateValue(text)}
+          value={value}
+        />
+      </View>
+      <View style={styles.savedKeysContainer}>
+        <Text>Saved keys: {savedKeys.join(', ')}</Text>
+      </View>
+      <View style={styles.buttonsContainer}>
+        {buttons.map(({name, func}) => (
+          <Button key={name} title={name} onPress={func} active />
+        ))}
+      </View>
+    </SafeAreaView>
+  );
 }
 
 const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 16,
-    alignItems: 'center',
+  flexOne: {
     flex: 1,
-    paddingHorizontal: 16,
   },
-  buttonContainer: {
-    width: '100%',
+  alignCenter: {
+    alignItems: 'center',
     flexDirection: 'row',
+    width: '100%',
+  },
+  container: {
+    marginTop: 16,
+    paddingHorizontal: 12,
+    flex: 1 / 4,
+  },
+  header: {
+    fontSize: 18,
+    color: '#020202',
     marginVertical: 12,
-    justifyContent: 'flex-start',
   },
-  sectionTitle: {
-    fontSize: 24,
-    marginBottom: 8,
-    fontWeight: '600',
-    color: Colors.black,
+  optionsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  optionsButtonContainer: {
+    marginTop: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  switch: {
+    marginLeft: 10,
+  },
+  savedKeysContainer: {
+    paddingHorizontal: 12,
+    marginVertical: 10,
+  },
+  inputsContainer: {
+    flex: 1 / 4,
+    paddingHorizontal: 12,
   },
-  sectionButton: {
-    marginRight: 15,
+  input: {
+    backgroundColor: '#e8e8e8',
+    marginVertical: 8,
+    padding: 8,
+    borderRadius: 4,
   },
-  resetButton: {
-    backgroundColor: '#ffb340',
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    elevation: 3,
-    alignSelf: 'flex-end',
+  buttonsContainer: {
+    flex: 2 / 4,
+    justifyContent: 'center',
+    paddingHorizontal: 12,
   },
 });
 
diff --git a/examples/mobile/src/components/Button.js b/examples/mobile/src/components/Button.js
new file mode 100644
index 00000000..79f99d4b
--- /dev/null
+++ b/examples/mobile/src/components/Button.js
@@ -0,0 +1,42 @@
+/**
+ * @format
+ */
+
+import React from 'react';
+import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
+
+function Button({title, onPress, active}) {
+  return (
+    <TouchableOpacity activeOpacity={0.4} onPress={() => onPress()}>
+      <View style={[styles.button, active && styles.active]}>
+        <Text style={[styles.buttonText, active && styles.activeText]}>
+          {title}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 4,
+    backgroundColor: '#e9dde6',
+    paddingHorizontal: 4,
+    paddingVertical: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    margin: 4,
+  },
+  buttonText: {
+    color: '#262626',
+    fontSize: 18,
+  },
+  active: {
+    backgroundColor: '#0c7cd8',
+  },
+  activeText: {
+    color: '#ffffff',
+  },
+});
+
+export default Button;
diff --git a/examples/mobile/src/legacy/index.js b/examples/mobile/src/legacy/index.js
index 68413b7e..d9d14c33 100644
--- a/examples/mobile/src/legacy/index.js
+++ b/examples/mobile/src/legacy/index.js
@@ -1,137 +1,12 @@
 /**
- *
  * @format
- * @flow
  */
 
-import React from 'react';
-import {Text, View, StyleSheet, TextInput, Button} from 'react-native';
+import LegacyStorage from '@react-native-community/async-storage-backend-legacy';
+import AsyncStorageFactory from '@react-native-community/async-storage';
 
-import storage from './storage';
-import Colors from 'react-native/Libraries/NewAppScreen/components/Colors';
+const legacy = new LegacyStorage();
 
-class LegacyExample extends React.Component {
-  state = {
-    key: '',
-    value: '',
-    savedText: '',
-    storageKeys: [],
-  };
+const storage = AsyncStorageFactory.create(legacy);
 
-  componentDidMount() {
-    this.readFromStorage();
-  }
-
-  saveToStorage = async () => {
-    if (this.state.key) {
-      await storage.set(this.state.key, this.state.value);
-    }
-  };
-
-  readFromStorage = async () => {
-    let readText = '';
-    if (this.state.key) {
-      readText = (await storage.get(this.state.key)) || '';
-    }
-
-    this.setState({
-      savedText: readText,
-    });
-  };
-
-  clearFromStorage = async () => {
-    if (this.state.key) {
-      await storage.remove(this.state.key);
-    }
-
-    await this.readFromStorage();
-  };
-
-  showKeys = async () => {
-    const keys = await storage.getKeys();
-
-    console.log({keys});
-
-    this.setState(() => ({
-      storageKeys: keys,
-    }));
-  };
-
-  render() {
-    return (
-      <View style={styles.container}>
-        <View style={styles.section}>
-          <Text style={styles.subtitle}>storage key: </Text>
-          <TextInput
-            style={styles.input}
-            value={this.state.key}
-            onChange={({nativeEvent: {text}}) => this.setState({key: text})}
-          />
-        </View>
-        <View style={styles.section}>
-          <Text style={styles.subtitle}>value: </Text>
-          <TextInput
-            style={styles.input}
-            value={this.state.value}
-            onChange={({nativeEvent: {text}}) => this.setState({value: text})}
-          />
-        </View>
-
-        <Text style={styles.title}>Stored text: {this.state.savedText} </Text>
-        <Text style={styles.title}>
-          Stored keys: {this.state.storageKeys.join(', ')}
-        </Text>
-
-        <View style={styles.buttonsContainer}>
-          <Button title={'Save'} onPress={this.saveToStorage} />
-          <Button title={'Read'} onPress={this.readFromStorage} />
-          <Button title={'Clear'} onPress={this.clearFromStorage} />
-          <Button title={'Show keys'} onPress={this.showKeys} />
-        </View>
-      </View>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    paddingHorizontal: 16,
-  },
-  input: {
-    borderColor: '#333',
-    borderWidth: 1,
-    borderStyle: 'solid',
-    marginHorizontal: 12,
-    flex: 3 / 5,
-    alignSelf: 'center',
-  },
-
-  section: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    margin: 8,
-  },
-  subtitle: {
-    flex: 2 / 5,
-    fontSize: 14,
-    width: 40,
-    alignContent: 'flex-end',
-    textAlign: 'right',
-  },
-  title: {
-    fontSize: 18,
-    color: Colors.dark,
-    marginVertical: 12,
-  },
-  buttonsContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-around',
-  },
-});
-
-export default LegacyExample;
+export default storage;
diff --git a/examples/mobile/src/legacy/storage.js b/examples/mobile/src/legacy/storage.js
deleted file mode 100644
index 8227be15..00000000
--- a/examples/mobile/src/legacy/storage.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import LegacyStorage from '@react-native-community/async-storage-backend-legacy';
-import AsyncStorageFactory from '@react-native-community/async-storage';
-
-const legacy = new LegacyStorage();
-
-const storage = AsyncStorageFactory.create(legacy);
-
-export default storage;

From 69bc1d56e9f8f9050aa5be852eadab93bb29b771 Mon Sep 17 00:00:00 2001
From: Krzysztof Borowy <krizzu.dev@gmail.com>
Date: Mon, 23 Mar 2020 22:52:32 +0100
Subject: [PATCH 2/2] fix: legacy multi get/set

---
 examples/mobile/App.js               |  5 ++---
 packages/storage-legacy/src/index.ts | 16 ++++++++++------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/examples/mobile/App.js b/examples/mobile/App.js
index 36d9846a..0e3c6369 100644
--- a/examples/mobile/App.js
+++ b/examples/mobile/App.js
@@ -35,9 +35,8 @@ function AsyncStorageExampleApp() {
       const keys = key.split(',').map(k => k.trim());
       const values = value.split(',').map(v => v.trim());
 
-      const valkeh = keys.map((k, index) => ({[k]: values[index]}));
-      console.log({valkeh});
-      await storage.setMultiple(valkeh);
+      const keyValues = keys.map((k, index) => ({[k]: values[index]}));
+      await storage.setMultiple(keyValues);
     } else {
       await storage.set(key, value);
     }
diff --git a/packages/storage-legacy/src/index.ts b/packages/storage-legacy/src/index.ts
index 9881bf0e..8d6cf72e 100644
--- a/packages/storage-legacy/src/index.ts
+++ b/packages/storage-legacy/src/index.ts
@@ -116,7 +116,7 @@ export default class LegacyAsyncStorage<
         const value: {[k in K]: T[k]} = result.reduce<any>(
           (acc, current: [K, T[K]]) => {
             const key = current[0];
-            const val = current[1] || null;
+            const val = current[1];
             return {
               ...acc,
               [key]: val,
@@ -146,9 +146,12 @@ export default class LegacyAsyncStorage<
 
     return new Promise((resolve, reject) => {
       const valuesArray = values.map(entry => {
-        return [Object.keys(entry)[0] as K, entry];
+        const key = Object.keys(entry)[0] as K;
+        const value = entry[key];
+
+        return [key, value];
       });
-      this._asyncStorageNativeModule.multiSet([valuesArray], function(
+      this._asyncStorageNativeModule.multiSet(valuesArray, function(
         errors: Array<Error>,
       ) {
         const errs = convertErrors(errors);
@@ -214,9 +217,10 @@ export default class LegacyAsyncStorage<
 
   async dropStorage(_?: StorageOptions): Promise<void> {
     return new Promise<void>((resolve, reject) => {
-      this._asyncStorageNativeModule.clear(function(error: Array<Error>) {
-        const err = convertErrors(Array.isArray(error) ? error : [error]);
-
+      this._asyncStorageNativeModule.clear(function(
+        error: Array<Error> | Error,
+      ) {
+        const err = convertErrors(error);
         if (err) {
           reject(err);
         } else {