Cleanup around async storage

GetStream · Nov 9, 2020 · 9bd2c4f · 9bd2c4f
1 parent 4e19094
commit 9bd2c4f
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -12,14 +12,14 @@
   "dependencies": {
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/checkbox": "^0.5.5",
+    "@react-navigation/stack": "^5.9.3",
     "@react-native-community/clipboard": "^1.5.0",
     "@react-native-community/masked-view": "^0.1.7",
     "@react-native-community/netinfo": "^5.6.2",
     "@react-native-community/picker": "^1.8.1",
     "@react-navigation/bottom-tabs": "^5.9.2",
     "@react-navigation/drawer": "^5.3.2",
     "@react-navigation/native": "^5.1.1",
-    "@react-navigation/stack": "^5.9.3",
     "@stream-io/react-native-simple-markdown": "^",
     "moment": "^2.24.0",
     "react": "16.13.1",

diff --git a/src/screens/ChannelScreen.js b/src/screens/ChannelScreen.js
@@ -12,12 +12,12 @@ import {ChannelHeader} from '../components/ChannelHeader';
 import {DateSeparator} from '../components/DateSeparator';
 import {InputBox} from '../components/InputBox';
 import {MessageSlack} from '../components/MessageSlack';
-import AsyncStorage from '@react-native-community/async-storage';
 import {
   getChannelDisplayImage,
   getChannelDisplayName,
   useStreamChatTheme,
   ChatClientService,
+  AsyncStore,
 } from '../utils';
 import {CustomKeyboardCompatibleView} from '../components/CustomKeyboardCompatibleView';
 
@@ -40,26 +40,27 @@ export function ChannelScreen() {
       title: getChannelDisplayName(channel, true),
       text,
     };
-    AsyncStorage.setItem(
+    AsyncStore.setItem(
       `@slack-clone-draft-${chatClient.user.id}-${channelId}`,
-      JSON.stringify(storeObject),
+      storeObject,
     );
 
     navigation.goBack();
   };
 
   useEffect(() => {
     const setDraftMessage = async () => {
-      const draftStr = await AsyncStorage.getItem(
+      const draft = await AsyncStore.getItem(
         `@slack-clone-draft-${chatClient.user.id}-
         ${channelId}`,
+        null,
       );
-      if (!draftStr) {
+
+      if (!draft) {
         setIsReady(true);
         return;
       }
 
-      const draft = JSON.parse(draftStr);
       setInitialValue(draft.text);
       setText(draft.text);
       setIsReady(true);
@@ -71,7 +72,7 @@ export function ChannelScreen() {
       setChannel(_channel);
       setDraftMessage();
     }
-  }, [chatClient, channelId]);
+  }, [channelId]);
 
   if (!isReady) {
     return null;
@@ -94,7 +95,7 @@ export function ChannelScreen() {
             <Channel
               channel={channel}
               doSendMessageRequest={async (cid, message) => {
-                AsyncStorage.removeItem(`@slack-clone-draft-${channelId}`);
+                AsyncStore.removeItem(`@slack-clone-draft-${channelId}`);
                 setText('');
                 return channel.sendMessage(message);
               }}

diff --git a/src/screens/DraftsScreen.js b/src/screens/DraftsScreen.js
@@ -2,8 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {View, SafeAreaView, StyleSheet, TouchableOpacity} from 'react-native';
 
 import {FlatList} from 'react-native-gesture-handler';
-import {ChatClientService} from '../utils';
-import AsyncStorage from '@react-native-community/async-storage';
+import {AsyncStore, ChatClientService} from '../utils';
 import {NewMessageBubble} from '../components/NewMessageBubble';
 
 import {useNavigation, useTheme} from '@react-navigation/native';
@@ -17,12 +16,12 @@ export const DraftsScreen = () => {
 
   useEffect(() => {
     const getDraftMessages = async () => {
-      const keys = await AsyncStorage.getAllKeys();
+      const keys = await AsyncStore.getAllKeys();
       const draftKeys = keys.filter(k => {
         return k.indexOf(`@slack-clone-draft-${chatClient.user.id}`) === 0;
       });
 
-      const items = await AsyncStorage.multiGet(draftKeys);
+      const items = await AsyncStore.multiGet(draftKeys);
       const drafts = items.map(i => {
         const draft = JSON.parse(i[1]);
         return draft;

diff --git a/src/screens/NewMessageScreen.js b/src/screens/NewMessageScreen.js
@@ -14,12 +14,12 @@ import {MessageSlack} from '../components/MessageSlack';
 import {ModalScreenHeader} from '../components/ModalScreenHeader';
 
 import {
+  AsyncStore,
   ChatClientService,
   getChannelDisplayImage,
   getChannelDisplayName,
   useStreamChatTheme,
 } from '../utils';
-import AsyncStorage from '@react-native-community/async-storage';
 import {useNavigation} from '@react-navigation/native';
 import {UserSearch} from '../components/UserSearch';
 import {CustomKeyboardCompatibleView} from '../components/CustomKeyboardCompatibleView';
@@ -41,10 +41,7 @@ export const NewMessageScreen = () => {
       title: getChannelDisplayName(channel),
       text,
     };
-    AsyncStorage.setItem(
-      `@slack-clone-draft-${channel.id}`,
-      JSON.stringify(storeObject),
-    );
+    AsyncStore.setItem(`@slack-clone-draft-${channel.id}`, storeObject);
 
     navigation.goBack();
   };

diff --git a/src/utils/AsyncStore.js b/src/utils/AsyncStore.js
@@ -13,4 +13,16 @@ export default {
   setItem: async (key, value) => {
     await AsyncStorage.setItem(key, JSON.stringify(value));
   },
+  removeItem: key => {
+    return AsyncStorage.removeItem(key);
+  },
+  getAllKeys: () => {
+    return AsyncStorage.getAllKeys();
+  },
+  multiGet: keys => {
+    return AsyncStorage.multiGet(keys);
+  },
+  flushGetRequests: () => {
+    return AsyncStorage.flushGetRequests();
+  },
 };