Skip to content

Commit c021c7b

Browse files
author
Krzysztof
authored
feat: [v2] Legacy storage updates, example update (#314)
* chore: update mobile example * fix: legacy multi get/set
1 parent b285e3b commit c021c7b

File tree

5 files changed

+229
-214
lines changed

5 files changed

+229
-214
lines changed

‎examples/mobile/App.js

Lines changed: 172 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,206 @@
11
/**
2-
*
32
* @format
43
* @flow
54
*/
65

7-
import React from 'react';
6+
import React, {useState} from 'react';
87
import {
98
StyleSheet,
109
View,
1110
SafeAreaView,
12-
Button,
1311
Text,
14-
TouchableOpacity,
12+
Switch,
13+
TextInput,
1514
} from 'react-native';
1615

17-
import {Colors} from 'react-native/Libraries/NewAppScreen';
16+
import LegacyStorage from './src/legacy';
17+
import Button from './src/components/Button';
18+
import LegacyAsyncStorage from '@react-native-community/async-storage-backend-legacy';
1819

19-
import LegacyExample from './src/legacy';
20-
21-
const Examples = {
22-
legacy: {
23-
title: 'Legacy',
24-
screen: LegacyExample,
25-
},
20+
const storagesAvailable = {
21+
Legacy: LegacyStorage,
2622
};
2723

28-
class AsyncStorageExampleApp extends React.Component {
29-
state = {
30-
page: Examples.legacy,
31-
};
24+
function AsyncStorageExampleApp() {
25+
const [selectedStorageName, updateStorage] = useState('Legacy');
26+
const [multiValueMode, updateMultiValueMode] = useState(false);
27+
const [key, updateKey] = useState('');
28+
const [value, updateValue] = useState('');
29+
const [savedKeys, updatedSavedKeys] = useState([]);
30+
31+
const storage = storagesAvailable[selectedStorageName];
32+
33+
async function setValue() {
34+
if (multiValueMode) {
35+
const keys = key.split(',').map(k => k.trim());
36+
const values = value.split(',').map(v => v.trim());
37+
38+
const keyValues = keys.map((k, index) => ({[k]: values[index]}));
39+
await storage.setMultiple(keyValues);
40+
} else {
41+
await storage.set(key, value);
42+
}
43+
}
44+
async function readValue() {
45+
if (multiValueMode) {
46+
const keys = key.split(',').map(k => k.trim());
47+
48+
const values = await storage.getMultiple(keys);
3249

33-
render() {
34-
const Example = this.state.page;
50+
const val = Object.keys(values).map(k => values[k]);
51+
updateValue(val.join(', '));
52+
} else {
53+
const val = await storage.get(key);
54+
updateValue(val);
55+
}
56+
}
57+
async function deleteValue() {
58+
if (multiValueMode) {
59+
const keys = key.split(',').map(k => k.trim());
60+
await storage.removeMultiple(keys);
61+
} else {
62+
await storage.remove(key);
63+
}
64+
}
65+
async function getKeys() {
66+
const keys = await storage.getKeys();
67+
updatedSavedKeys(keys || []);
68+
}
69+
async function drop() {
70+
await storage.clearStorage();
71+
}
3572

36-
return (
37-
<SafeAreaView style={styles.sectionContainer}>
38-
<TouchableOpacity
39-
style={styles.resetButton}
40-
onPress={() => {
41-
this.setState({page: null});
42-
}}>
43-
<Text style={{color: '#fff'}}>Reset</Text>
44-
</TouchableOpacity>
73+
const buttons = [
74+
{
75+
name: multiValueMode ? 'get many' : 'get single',
76+
func: readValue,
77+
},
78+
{
79+
name: multiValueMode ? 'save many' : 'save single',
80+
func: setValue,
81+
},
82+
{
83+
name: multiValueMode ? 'delete many' : 'delete single',
84+
func: deleteValue,
85+
},
86+
{
87+
name: 'get keys',
88+
func: getKeys,
89+
},
90+
{
91+
name: 'clear',
92+
func: drop,
93+
},
94+
];
4595

46-
<View style={styles.buttonContainer}>
47-
{Object.keys(Examples).map(pageKey => {
48-
const example = Examples[pageKey];
49-
return (
50-
<View style={styles.sectionButton} key={example.title}>
96+
return (
97+
<SafeAreaView style={styles.flexOne}>
98+
<View style={styles.container}>
99+
<Text style={styles.header}>Async Storage - Mobile example</Text>
100+
<View style={[styles.flexOne, styles.optionsContainer]}>
101+
<View style={styles.alignCenter}>
102+
<Text>Multi-value mode:</Text>
103+
<Switch
104+
style={styles.switch}
105+
onValueChange={updateMultiValueMode}
106+
value={multiValueMode}
107+
/>
108+
</View>
109+
<View style={styles.optionsButtonContainer}>
110+
{Object.keys(storagesAvailable).map(storageName => {
111+
return (
51112
<Button
52-
title={example.title}
53-
onPress={() => {
54-
this.setState({page: example});
55-
}}
113+
key={storageName}
114+
title={storageName}
115+
onPress={() => updateStorage(storageName)}
116+
active={storageName === selectedStorageName}
56117
/>
57-
</View>
58-
);
59-
})}
118+
);
119+
})}
120+
</View>
60121
</View>
61-
{Example ? (
62-
<>
63-
<Text style={styles.sectionTitle}>{Example.title} Example</Text>
64-
<Example.screen />
65-
</>
66-
) : (
67-
<Text>Please select an example</Text>
68-
)}
69-
</SafeAreaView>
70-
);
71-
}
122+
</View>
123+
<View style={styles.inputsContainer}>
124+
{multiValueMode ? (
125+
<Text>Note: keys and values should be separated by a coma</Text>
126+
) : null}
127+
<TextInput
128+
autoCapitalize="none"
129+
placeholder={multiValueMode ? 'keys' : 'key'}
130+
style={styles.input}
131+
onChangeText={text => updateKey(text)}
132+
value={key}
133+
/>
134+
<TextInput
135+
autoCapitalize="none"
136+
placeholder={multiValueMode ? 'values' : 'value'}
137+
style={styles.input}
138+
onChangeText={text => updateValue(text)}
139+
value={value}
140+
/>
141+
</View>
142+
<View style={styles.savedKeysContainer}>
143+
<Text>Saved keys: {savedKeys.join(', ')}</Text>
144+
</View>
145+
<View style={styles.buttonsContainer}>
146+
{buttons.map(({name, func}) => (
147+
<Button key={name} title={name} onPress={func} active />
148+
))}
149+
</View>
150+
</SafeAreaView>
151+
);
72152
}
73153

74154
const styles = StyleSheet.create({
75-
sectionContainer: {
76-
marginTop: 16,
77-
alignItems: 'center',
155+
flexOne: {
78156
flex: 1,
79-
paddingHorizontal: 16,
80157
},
81-
buttonContainer: {
82-
width: '100%',
158+
alignCenter: {
159+
alignItems: 'center',
83160
flexDirection: 'row',
161+
width: '100%',
162+
},
163+
container: {
164+
marginTop: 16,
165+
paddingHorizontal: 12,
166+
flex: 1 / 4,
167+
},
168+
header: {
169+
fontSize: 18,
170+
color: '#020202',
84171
marginVertical: 12,
85-
justifyContent: 'flex-start',
86172
},
87-
sectionTitle: {
88-
fontSize: 24,
89-
marginBottom: 8,
90-
fontWeight: '600',
91-
color: Colors.black,
173+
optionsContainer: {
174+
flexDirection: 'row',
175+
flexWrap: 'wrap',
176+
},
177+
optionsButtonContainer: {
178+
marginTop: 8,
179+
flexDirection: 'row',
180+
justifyContent: 'space-around',
181+
alignItems: 'center',
182+
},
183+
switch: {
184+
marginLeft: 10,
185+
},
186+
savedKeysContainer: {
187+
paddingHorizontal: 12,
188+
marginVertical: 10,
189+
},
190+
inputsContainer: {
191+
flex: 1 / 4,
192+
paddingHorizontal: 12,
92193
},
93-
sectionButton: {
94-
marginRight: 15,
194+
input: {
195+
backgroundColor: '#e8e8e8',
196+
marginVertical: 8,
197+
padding: 8,
198+
borderRadius: 4,
95199
},
96-
resetButton: {
97-
backgroundColor: '#ffb340',
98-
paddingHorizontal: 8,
99-
paddingVertical: 4,
100-
elevation: 3,
101-
alignSelf: 'flex-end',
200+
buttonsContainer: {
201+
flex: 2 / 4,
202+
justifyContent: 'center',
203+
paddingHorizontal: 12,
102204
},
103205
});
104206

‎examples/mobile/src/components/Button.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* @format
3+
*/
4+
5+
import React from 'react';
6+
import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
7+
8+
function Button({title, onPress, active}) {
9+
return (
10+
<TouchableOpacity activeOpacity={0.4} onPress={() => onPress()}>
11+
<View style={[styles.button, active && styles.active]}>
12+
<Text style={[styles.buttonText, active && styles.activeText]}>
13+
{title}
14+
</Text>
15+
</View>
16+
</TouchableOpacity>
17+
);
18+
}
19+
20+
const styles = StyleSheet.create({
21+
button: {
22+
borderRadius: 4,
23+
backgroundColor: '#e9dde6',
24+
paddingHorizontal: 4,
25+
paddingVertical: 8,
26+
justifyContent: 'center',
27+
alignItems: 'center',
28+
margin: 4,
29+
},
30+
buttonText: {
31+
color: '#262626',
32+
fontSize: 18,
33+
},
34+
active: {
35+
backgroundColor: '#0c7cd8',
36+
},
37+
activeText: {
38+
color: '#ffffff',
39+
},
40+
});
41+
42+
export default Button;

0 commit comments

Comments
 (0)