feat: save last selected account

package.json

@@ -104,6 +104,7 @@
     "@apollo/client": "3.3.12",
     "@callstack/react-theme-provider": "^2.1.0",
     "@expo/vector-icons": "^12.0.4",
+    "@react-native-async-storage/async-storage": "^1.14.1",
     "@react-native-community/async-storage": "~1.12.0",
     "@react-native-community/cameraroll": "^4.0.0",
     "@react-native-community/masked-view": "0.1.10",

src/common/announcement.tsx

@@ -1,14 +1,9 @@
 import * as React from "react";
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  AsyncStorage,
-} from "react-native";
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import { useTheme } from "@/common/theme";
 import { ColorTheme } from "@/types/theme-props";
 import { contentPadding, ScreenWidth } from "@/common/screen-util";
+import { useAsyncStorage } from "@/common/hooks/use-async-storage";
 
 type Props = {
   navigation: any;
@@ -68,22 +63,18 @@ const getStyles = (theme: ColorTheme) =>
 
 export function Announcement(props: Props): JSX.Element {
   const [hide, setHide] = React.useState(true);
+  const [hideAnnouncement, setHideAnnouncement, synced] = useAsyncStorage(
+    "@HideAnnouncement:key",
+    ""
+  );
+
+  const [, setSubFlash] = useAsyncStorage("@SubscriptionFlash:key", "");
 
   React.useEffect(() => {
-    async function init() {
-      try {
-        const value = await AsyncStorage.getItem("@HideAnnouncement:key");
-        if (value !== null) {
-          setHide(value === "true");
-        } else {
-          setHide(false);
-        }
-      } catch (error) {
-        console.error(`failed to get hide announcement value: ${error}`);
-      }
+    if (synced) {
+      setHide(hideAnnouncement === "true");
     }
-    init();
-  }, []);
+  }, [synced]);
 
   const { title, subtitle, icon, navigation } = props;
 
@@ -99,11 +90,7 @@ export function Announcement(props: Props): JSX.Element {
     <TouchableOpacity
       style={styles.container}
       onPress={async () => {
-        try {
-          await AsyncStorage.setItem("@SubscriptionFlash:key", "true");
-        } catch (error) {
-          console.error(`failed to set subscription flash value: ${error}`);
-        }
+        await setSubFlash("true");
         navigation.navigate("Mine");
       }}
     >
@@ -120,11 +107,7 @@ export function Announcement(props: Props): JSX.Element {
         activeOpacity={0.9}
         onPress={async () => {
           setHide(true);
-          try {
-            await AsyncStorage.setItem("@HideAnnouncement:key", "true");
-          } catch (error) {
-            console.error(`failed to set hide announcement value: ${error}`);
-          }
+          await setHideAnnouncement("true");
         }}
       >
         <Text style={styles.closeText}>✕</Text>

src/common/expo-mixpanel-analytics.ts

@@ -1,7 +1,8 @@
 /* eslint-disable camelcase */
-import { Platform, Dimensions, AsyncStorage } from "react-native";
+import { Platform, Dimensions } from "react-native";
 import Constants from "expo-constants";
 import { Buffer } from "buffer";
+import AsyncStorage from "@react-native-async-storage/async-storage";
 
 const { width, height } = Dimensions.get("window");
 

src/common/hooks/use-async-storage.ts

@@ -0,0 +1,33 @@
+import AsyncStorage from "@react-native-community/async-storage";
+import { useEffect, useState } from "react";
+
+export function useAsyncStorage(
+  key: string,
+  defaultValue: string
+): [string, (newValue: string) => Promise<void>, boolean] {
+  const [state, setState] = useState({
+    synced: false,
+    storageValue: defaultValue,
+  });
+  const { synced, storageValue } = state;
+
+  async function pullFromStorage() {
+    const fromStorage = await AsyncStorage.getItem(key);
+    let value = defaultValue;
+    if (fromStorage) {
+      value = fromStorage;
+    }
+    setState({ synced: true, storageValue: value });
+  }
+
+  async function updateStorage(newValue: string) {
+    await AsyncStorage.setItem(key, newValue);
+    await pullFromStorage();
+  }
+
+  useEffect(() => {
+    pullFromStorage();
+  }, []);
+
+  return [storageValue, updateStorage, synced];
+}

src/screens/add-transaction-screen/add-transaction-next-screen.tsx

@@ -13,6 +13,7 @@ import { TextStyled } from "@/common/text-styled";
 import { getCurrencySymbol } from "@/common/currency-util";
 import { analytics } from "@/common/analytics";
 import { ColorTheme } from "@/types/theme-props";
+import { useAsyncStorage } from "@/common/hooks/use-async-storage";
 
 const { Item } = List;
 const { Brief } = Item;
@@ -87,6 +88,14 @@ export const AddTransactionNextScreen = connect(
   const [date, setDate] = useState<string>(getFormatDate(new Date()));
   const [narration, setNarration] = useState<string>("");
   const { mutate, error } = useAddEntriesToRemote();
+  const [lastAssets, setLastAssets] = useAsyncStorage(
+    "@LastSelectedAssets:key",
+    ""
+  );
+  const [lastExpenses, setLastExpenses] = useAsyncStorage(
+    "@LastSelectedExpenses:key",
+    ""
+  );
 
   const currencySymbol = getCurrencySymbol(currentCurrency);
 
@@ -121,6 +130,18 @@ export const AddTransactionNextScreen = connect(
 
       if (!error) {
         Toast.success(i18n.t("saveSuccess"), 2, () => {
+          try {
+            if (lastAssets !== assets) {
+              setLastAssets(assets);
+            }
+            if (lastExpenses !== expenses) {
+              setLastExpenses(expenses);
+            }
+          } catch (aserror) {
+            console.error(
+              `failed to set last selected assets or expenses value: ${aserror}`
+            );
+          }
           props.navigation.pop();
           if (onRefresh) {
             onRefresh();

src/screens/add-transaction-screen/quick-add-accounts-selector.tsx

@@ -18,6 +18,7 @@ import { ListItemStyled } from "@/screens/add-transaction-screen/components/list
 import { analytics } from "@/common/analytics";
 import { i18n } from "@/translations";
 import { ColorTheme } from "@/types/theme-props";
+import { useAsyncStorage } from "@/common/hooks/use-async-storage";
 
 const { Item } = List;
 const { Brief } = Item;
@@ -80,13 +81,31 @@ export const QuickAddAccountsSelector = connect(
     loading,
     refetch,
   } = useLedgerMeta(userId);
+
   const [selectedAssets, setSelectedAssets] = useState(
     assetsOptionTabs.length > 0 ? assetsOptionTabs[0].options[0] : ""
   );
   const [selectedExpenses, setSelectedExpenses] = useState(
     expensesOptionTabs.length > 0 ? expensesOptionTabs[0].options[0] : ""
   );
 
+  const [lastAssets] = useAsyncStorage("@LastSelectedAssets:key", "");
+  const [lastExpenses] = useAsyncStorage("@LastSelectedExpenses:key", "");
+
+  React.useEffect(() => {
+    function init() {
+      if (lastAssets !== "") {
+        setSelectedAssets(lastAssets);
+      }
+      if (lastExpenses !== "") {
+        setSelectedExpenses(lastExpenses);
+      }
+    }
+    if (!loading) {
+      init();
+    }
+  }, [loading, lastExpenses, lastAssets]);
+
   useEffect(() => {
     const currency = currencies.length > 0 ? currencies[0] : "";
     if (onChange) {

src/screens/mine-screen/about.tsx

@@ -3,14 +3,7 @@ import { List, Picker, Toast, Portal } from "@ant-design/react-native";
 import Constants from "expo-constants";
 import * as WebBrowser from "expo-web-browser";
 import React, { useEffect, useState } from "react";
-import {
-  Alert,
-  Platform,
-  ScrollView,
-  Switch,
-  View,
-  AsyncStorage,
-} from "react-native";
+import { Alert, Platform, ScrollView, Switch, View } from "react-native";
 import { connect } from "react-redux";
 import { analytics } from "@/common/analytics";
 import { ListHeader } from "@/common/list-header";
@@ -27,6 +20,7 @@ import { AccountHeader } from "@/screens/mine-screen/account-header";
 import { InviteSection } from "@/screens/referral-screen/components/invite-section";
 import { useIsFocused } from "@react-navigation/native";
 import { ReportStatus } from "../../../__generated__/globalTypes";
+import { useAsyncStorage } from "@react-native-async-storage/async-storage";
 
 const { Item } = List;
 const { Brief } = Item;
@@ -85,18 +79,20 @@ export const About = connect(
 
     const [reportAnimateCount, setReportAnimateCount] = useState(0);
     const [subscriptionFlash, setSubscriptionFlash] = useState(false);
+
+    const { getItem, setItem } = useAsyncStorage("@SubscriptionFlash:key");
     const isFocused = useIsFocused();
 
     React.useEffect(() => {
       async function init() {
         try {
-          const value = await AsyncStorage.getItem("@SubscriptionFlash:key");
+          const value = await getItem();
           if (value !== null) {
             setSubscriptionFlash(value === "true");
           } else {
             setSubscriptionFlash(false);
           }
-          await AsyncStorage.setItem("@SubscriptionFlash:key", "false");
+          await setItem("false");
         } catch (error) {
           console.error(`failed to get subscription flash value: ${error}`);
         }