From 7565a36766a327b260e8d52fedbe613c77c2a23b Mon Sep 17 00:00:00 2001
From: Baptiste Grob <60621355+baptiste-grob@users.noreply.github.com>
Date: Wed, 5 May 2021 11:35:20 +0200
Subject: [PATCH] fix: DrawerLayout warnings (#430)

* fix: use FlatList in NoteSideMenu

* fix: use FlatList in MainSideMenu
---
 src/screens/SideMenu/MainSideMenu.styled.ts | 25 ++++--
 src/screens/SideMenu/MainSideMenu.tsx       | 96 +++++++++++++--------
 src/screens/SideMenu/NoteSideMenu.styled.ts | 17 +++-
 src/screens/SideMenu/NoteSideMenu.tsx       | 64 ++++++++------
 4 files changed, 131 insertions(+), 71 deletions(-)

diff --git a/src/screens/SideMenu/MainSideMenu.styled.ts b/src/screens/SideMenu/MainSideMenu.styled.ts
index f0c7b0fb..a9e5c8c7 100644
--- a/src/screens/SideMenu/MainSideMenu.styled.ts
+++ b/src/screens/SideMenu/MainSideMenu.styled.ts
@@ -1,5 +1,6 @@
-import { Platform, SafeAreaView, ScrollView, StatusBar } from 'react-native';
-import styled, { css } from 'styled-components/native';
+import { useMemo } from 'react';
+import { Platform, SafeAreaView, StatusBar, StyleSheet } from 'react-native';
+import styled, { css, DefaultTheme } from 'styled-components/native';
 
 // We want top color to be different from bottom color of safe area.
 // See https://stackoverflow.com/questions/47725607/react-native-safeareaview-background-color-how-to-assign-two-different-backgro
@@ -16,8 +17,18 @@ export const MainSafeAreaView = styled(SafeAreaView)`
   background-color: ${({ theme }) => theme.stylekitBackgroundColor};
   color: ${({ theme }) => theme.stylekitForegroundColor};
 `;
-export const SideMenuSectionContainer = styled(ScrollView)`
-  padding: 15px;
-  flex: 1;
-  background-color: ${({ theme }) => theme.stylekitBackgroundColor};
-`;
+
+/** Styled doesn't support FlatList types */
+export const useStyles = (theme: DefaultTheme) => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        sections: {
+          padding: 15,
+          flex: 1,
+          backgroundColor: theme.stylekitBackgroundColor,
+        },
+      }),
+    [theme.stylekitBackgroundColor]
+  );
+};
diff --git a/src/screens/SideMenu/MainSideMenu.tsx b/src/screens/SideMenu/MainSideMenu.tsx
index 77a3c9df..023972c9 100644
--- a/src/screens/SideMenu/MainSideMenu.tsx
+++ b/src/screens/SideMenu/MainSideMenu.tsx
@@ -23,13 +23,14 @@ import React, {
 } from 'react';
 import { Platform } from 'react-native';
 import FAB from 'react-native-fab';
+import { FlatList } from 'react-native-gesture-handler';
 import DrawerLayout from 'react-native-gesture-handler/DrawerLayout';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { ThemeContext } from 'styled-components/native';
 import {
   FirstSafeAreaView,
   MainSafeAreaView,
-  SideMenuSectionContainer,
+  useStyles,
 } from './MainSideMenu.styled';
 import { SideMenuHero } from './SideMenuHero';
 import { SideMenuOption, SideMenuSection } from './SideMenuSection';
@@ -51,6 +52,7 @@ export const MainSideMenu = React.memo(({ drawerRef }: Props) => {
     application!.getAppState().getSelectedTag()
   );
   const [themes, setThemes] = useState<SNTheme[]>([]);
+  const styles = useStyles(theme);
 
   useEffect(() => {
     const removeTagChangeObserver = application!
@@ -239,15 +241,18 @@ export const MainSideMenu = React.memo(({ drawerRef }: Props) => {
     onThemeSelect,
   ]);
 
-  const onTagSelect = async (tag: SNTag) => {
-    if (tag.conflictOf) {
-      application!.changeAndSaveItem(tag.uuid, mutator => {
-        mutator.conflictOf = undefined;
-      });
-    }
-    application?.getAppState().setSelectedTag(tag, true);
-    drawerRef?.closeDrawer();
-  };
+  const onTagSelect = useCallback(
+    async (tag: SNTag) => {
+      if (tag.conflictOf) {
+        application!.changeAndSaveItem(tag.uuid, mutator => {
+          mutator.conflictOf = undefined;
+        });
+      }
+      application?.getAppState().setSelectedTag(tag, true);
+      drawerRef?.closeDrawer();
+    },
+    [application, drawerRef]
+  );
 
   const openSettings = () => {
     drawerRef?.closeDrawer();
@@ -266,6 +271,10 @@ export const MainSideMenu = React.memo(({ drawerRef }: Props) => {
     }
   };
 
+  const selectedTags = useMemo(() => (selectedTag ? [selectedTag] : []), [
+    selectedTag,
+  ]);
+
   return (
     <Fragment>
       <FirstSafeAreaView />
@@ -275,33 +284,46 @@ export const MainSideMenu = React.memo(({ drawerRef }: Props) => {
           onPress={openSettings}
           onOutOfSyncPress={outOfSyncPressed}
         />
-        <SideMenuSectionContainer>
-          <SideMenuSection
-            title="Themes"
-            key="themes-section"
-            options={themeOptions}
-            collapsed={true}
-          />
-          <SideMenuSection title="Views" key="views-section">
-            <TagSelectionList
-              key="views-section-list"
-              contentType={ContentType.SmartTag}
-              onTagSelect={onTagSelect}
-              selectedTags={selectedTag ? [selectedTag] : []}
-            />
-          </SideMenuSection>
-
-          <SideMenuSection title="Tags" key="tags-section">
-            <TagSelectionList
-              key="tags-section-list"
-              hasBottomPadding={Platform.OS === 'android'}
-              emptyPlaceholder={'No tags. Create one from the note composer.'}
-              contentType={ContentType.Tag}
-              onTagSelect={onTagSelect}
-              selectedTags={selectedTag ? [selectedTag] : []}
-            />
-          </SideMenuSection>
-        </SideMenuSectionContainer>
+        <FlatList
+          style={styles.sections}
+          data={['themes-section', 'views-section', 'tags-section'].map(
+            key => ({
+              key,
+              themeOptions,
+              onTagSelect,
+              selectedTags,
+            })
+          )}
+          renderItem={({ item, index }) => {
+            return index === 0 ? (
+              <SideMenuSection
+                title="Themes"
+                options={item.themeOptions}
+                collapsed={true}
+              />
+            ) : index === 1 ? (
+              <SideMenuSection title="Views">
+                <TagSelectionList
+                  contentType={ContentType.SmartTag}
+                  onTagSelect={item.onTagSelect}
+                  selectedTags={item.selectedTags}
+                />
+              </SideMenuSection>
+            ) : index === 2 ? (
+              <SideMenuSection title="Tags">
+                <TagSelectionList
+                  hasBottomPadding={Platform.OS === 'android'}
+                  emptyPlaceholder={
+                    'No tags. Create one from the note composer.'
+                  }
+                  contentType={ContentType.Tag}
+                  onTagSelect={item.onTagSelect}
+                  selectedTags={item.selectedTags}
+                />
+              </SideMenuSection>
+            ) : null;
+          }}
+        />
         <FAB
           buttonColor={theme.stylekitInfoColor}
           iconTextColor={theme.stylekitInfoContrastColor}
diff --git a/src/screens/SideMenu/NoteSideMenu.styled.ts b/src/screens/SideMenu/NoteSideMenu.styled.ts
index 93e238bc..75e07fe9 100644
--- a/src/screens/SideMenu/NoteSideMenu.styled.ts
+++ b/src/screens/SideMenu/NoteSideMenu.styled.ts
@@ -1,6 +1,8 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import styled from 'styled-components/native';
+import styled, { DefaultTheme } from 'styled-components/native';
 
 export const SafeAreaContainer = styled(SafeAreaView)`
   flex: 1;
@@ -12,3 +14,16 @@ export const StyledList = styled(ScrollView)`
   padding: 15px;
   background-color: ${({ theme }) => theme.stylekitBackgroundColor};
 `;
+
+export const useStyles = (theme: DefaultTheme) => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        sections: {
+          padding: 15,
+          backgroundColor: theme.stylekitBackgroundColor,
+        },
+      }),
+    [theme.stylekitBackgroundColor]
+  );
+};
diff --git a/src/screens/SideMenu/NoteSideMenu.tsx b/src/screens/SideMenu/NoteSideMenu.tsx
index 724c4e57..f2b33805 100644
--- a/src/screens/SideMenu/NoteSideMenu.tsx
+++ b/src/screens/SideMenu/NoteSideMenu.tsx
@@ -47,10 +47,11 @@ import React, {
 } from 'react';
 import { Platform, Share } from 'react-native';
 import FAB from 'react-native-fab';
+import { FlatList } from 'react-native-gesture-handler';
 import DrawerLayout from 'react-native-gesture-handler/DrawerLayout';
 import Icon from 'react-native-vector-icons/Ionicons';
 import { ThemeContext } from 'styled-components/native';
-import { SafeAreaContainer, StyledList } from './NoteSideMenu.styled';
+import { SafeAreaContainer, useStyles } from './NoteSideMenu.styled';
 import { SideMenuOption, SideMenuSection } from './SideMenuSection';
 import { TagSelectionList } from './TagSelectionList';
 
@@ -73,6 +74,7 @@ export const NoteSideMenu = React.memo((props: Props) => {
     AppStackNavigationProp<typeof SCREEN_COMPOSE>['navigation']
   >();
   const { showActionSheet } = useCustomActionSheet();
+  const styles = useStyles(theme);
 
   // State
   const [editor, setEditor] = useState<Editor | undefined>(undefined);
@@ -594,31 +596,41 @@ export const NoteSideMenu = React.memo((props: Props) => {
 
   return (
     <SafeAreaContainer edges={['top', 'bottom', 'right']}>
-      <StyledList>
-        <SideMenuSection
-          title="Options"
-          key="options-section"
-          options={noteOptions}
-        />
-        <SideMenuSection
-          title="Editors"
-          key="editors-section"
-          options={editorComponents}
-          collapsed={true}
-        />
-        <SideMenuSection title="Tags" key="tags-section">
-          <TagSelectionList
-            key="tags-section-list"
-            hasBottomPadding={Platform.OS === 'android'}
-            contentType={ContentType.Tag}
-            onTagSelect={onTagSelect}
-            selectedTags={selectedTags}
-            emptyPlaceholder={
-              'Create a new tag using the tag button in the bottom right corner.'
-            }
-          />
-        </SideMenuSection>
-      </StyledList>
+      <FlatList
+        style={styles.sections}
+        data={['options-section', 'editors-section', 'tags-section'].map(
+          key => ({
+            key,
+            noteOptions,
+            editorComponents,
+            onTagSelect,
+            selectedTags,
+          })
+        )}
+        renderItem={({ item, index }) =>
+          index === 0 ? (
+            <SideMenuSection title="Options" options={item.noteOptions} />
+          ) : index === 1 ? (
+            <SideMenuSection
+              title="Editors"
+              options={item.editorComponents}
+              collapsed={true}
+            />
+          ) : index === 2 ? (
+            <SideMenuSection title="Tags">
+              <TagSelectionList
+                hasBottomPadding={Platform.OS === 'android'}
+                contentType={ContentType.Tag}
+                onTagSelect={item.onTagSelect}
+                selectedTags={item.selectedTags}
+                emptyPlaceholder={
+                  'Create a new tag using the tag button in the bottom right corner.'
+                }
+              />
+            </SideMenuSection>
+          ) : null
+        }
+      />
 
       <FAB
         buttonColor={theme.stylekitInfoColor}