Save layout preference in async storage; closes #632 (#650)

src/components/MyObservations/Header.js

@@ -15,7 +15,7 @@ import useNumUnuploadedObservations from "sharedHooks/useNumUnuploadedObservatio
 import Onboarding from "./Onboarding";
 
 type Props = {
-  setLayout: Function;
+  toggleLayout: Function;
   layout: string,
   currentUser: ?Object,
   numObservations: number,
@@ -25,7 +25,7 @@ type Props = {
 }
 
 const Header = ( {
-  setLayout,
+  toggleLayout,
   layout,
   currentUser,
   numObservations,
@@ -115,7 +115,7 @@ const Header = ( {
       </View>
       {!hideToolbar && (
         <ToolbarContainer
-          setLayout={setLayout}
+          toggleLayout={toggleLayout}
           layout={layout}
           numUnuploadedObs={numUnuploadedObs}
           uploadStatus={uploadStatus}

src/components/MyObservations/MyObservations.js

@@ -23,7 +23,7 @@ type Props = {
   layout: "list" | "grid",
   observations: Array<Object>,
   onEndReached: Function,
-  setLayout: Function,
+  toggleLayout: Function,
   uploadStatus: Object,
   currentUser: ?Object,
   showLoginSheet: boolean,
@@ -69,7 +69,7 @@ const MyObservations = ( {
   layout,
   observations,
   onEndReached,
-  setLayout,
+  toggleLayout,
   uploadStatus,
   currentUser,
   showLoginSheet,
@@ -177,7 +177,7 @@ const MyObservations = ( {
             ]}
           >
             <Header
-              setLayout={setLayout}
+              toggleLayout={toggleLayout}
               layout={layout}
               currentUser={currentUser}
               numObservations={observations.length}

src/components/MyObservations/MyObservationsContainer.js

@@ -1,7 +1,8 @@
 // @flow
 
+import { useAsyncStorage } from "@react-native-async-storage/async-storage";
 import type { Node } from "react";
-import React, { useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import useCurrentUser from "sharedHooks/useCurrentUser";
 import useInfiniteScroll from "sharedHooks/useInfiniteScroll";
 import useLocalObservations from "sharedHooks/useLocalObservations";
@@ -10,20 +11,48 @@ import useUploadObservations from "sharedHooks/useUploadObservations";
 
 import MyObservations from "./MyObservations";
 
-const MyObservationsContainer = (): Node => {
+const MyObservationsContainer = ( ): Node => {
   const { observationList: observations, allObsToUpload } = useLocalObservations( );
   const uploadStatus = useUploadObservations( allObsToUpload );
-  const [layout, setLayout] = useState( "list" );
+  const { getItem, setItem } = useAsyncStorage( "myObservationsLayout" );
+  const [layout, setLayout] = useState( null );
   const { isLoading, fetchNextPage } = useInfiniteScroll();
   const [showLoginSheet, setShowLoginSheet] = useState( false );
   const currentUser = useCurrentUser();
   useObservationsUpdates( !!currentUser );
 
+  const writeItemToStorage = useCallback( async newValue => {
+    await setItem( newValue );
+    setLayout( newValue );
+  }, [setItem] );
+
+  useEffect( ( ) => {
+    const readItemFromStorage = async ( ) => {
+      const item = await getItem( );
+      if ( !item ) {
+        await writeItemToStorage( "list" );
+      }
+      setLayout( item || "list" );
+    };
+
+    readItemFromStorage( );
+  }, [getItem, writeItemToStorage] );
+
+  const toggleLayout = ( ) => {
+    if ( layout === "grid" ) {
+      writeItemToStorage( "list" );
+    } else {
+      writeItemToStorage( "grid" );
+    }
+  };
+
+  if ( !layout ) { return null; }
+
   return (
     <MyObservations
       observations={observations}
       layout={layout}
-      setLayout={setLayout}
+      toggleLayout={toggleLayout}
       isLoading={isLoading}
       uploadStatus={uploadStatus}
       currentUser={currentUser}

src/components/MyObservations/ToolbarContainer.js

@@ -16,7 +16,7 @@ import useTranslation from "sharedHooks/useTranslation";
 import Toolbar from "./Toolbar";
 
 type Props = {
-  setLayout: Function,
+  toggleLayout: Function,
   layout: string,
   numUnuploadedObs: number,
   uploadStatus: Object,
@@ -24,7 +24,7 @@ type Props = {
 }
 
 const ToolbarContainer = ( {
-  setLayout, layout, numUnuploadedObs,
+  toggleLayout, layout, numUnuploadedObs,
   uploadStatus,
   setShowLoginSheet
 }: Props ): Node => {
@@ -100,13 +100,6 @@ const ToolbarContainer = ( {
 
   const navToExplore = ( ) => navigation.navigate( "Explore" );
 
-  const toggleLayout = ( ) => setLayout( currentView => {
-    if ( currentView === "list" ) {
-      return "grid";
-    }
-    return "list";
-  } );
-
   const statusText = getStatusText( );
 
   const getSyncIcon = ( ) => {