[v2] fix: Legacy storage

examples/mobile/App.js

@@ -1,104 +1,206 @@
 /**
- *
  * @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 keyValues = keys.map((k, index) => ({[k]: values[index]}));
+      await storage.setMultiple(keyValues);
+    } 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,
   },
 });
 

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;