From 077a55f4a7a1e684e6e04b1ce5a172d9dcdcfefa Mon Sep 17 00:00:00 2001
From: natjms <natjms@njms.ca>
Date: Sun, 18 Apr 2021 17:47:33 -0300
Subject: [PATCH] Fix various warnings that show up on Andriod

---
 src/App.js                                  |  2 +-
 src/components/pages/direct.js              | 80 +++++++++++----------
 src/components/pages/direct/conversation.js | 18 ++---
 src/components/pages/discover/search.js     | 14 ++--
 src/components/pages/profile.js             |  7 +-
 src/components/pages/profile/settings.js    | 44 +++++++-----
 src/components/pages/user-list.js           | 74 +++++++++----------
 src/components/pages/view-comments.js       |  4 +-
 8 files changed, 123 insertions(+), 120 deletions(-)

diff --git a/src/App.js b/src/App.js
index ba57d55..59f4da7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -56,7 +56,7 @@ const App = (props) => {
         }
     };
 
-    return <MenuProvider style = { providerStyles }>
+    return <MenuProvider customStyles = { providerStyles }>
         <AppContainer />
     </MenuProvider>;
 };
diff --git a/src/components/pages/direct.js b/src/components/pages/direct.js
index e50e1ed..ebb5b36 100644
--- a/src/components/pages/direct.js
+++ b/src/components/pages/direct.js
@@ -16,8 +16,8 @@ import ModerateMenuJsx from "src/components/moderate-menu.js";
 
 const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
 const TEST_IMAGE_2 = "https://natureproducts.net/Forest_Products/Cutflowers/Musella_cut.jpg";
-const TEST_ACCOUNT_1 = { acct: "njms", display_name: "Nat🔆", avatar: TEST_IMAGE_1 };
-const TEST_ACCOUNT_2 = { acct: "someone", display_name: "Some person", avatar: TEST_IMAGE_2 };
+const TEST_ACCOUNT_1 = { id: 1, acct: "njms", display_name: "Nat🔆", avatar: TEST_IMAGE_1 };
+const TEST_ACCOUNT_2 = { id: 2, acct: "someone", display_name: "Some person", avatar: TEST_IMAGE_2 };
 
 const TEST_STATUS = {
     id: 1,
@@ -68,42 +68,46 @@ const DirectJsx = ({ navigation }) => {
         }
     };
 
-    const renderConversation = ({ item }) => {
+    const renderConversation = (item) => {
         const boldIfUnread = item.unread ? styles.bold : {};
 
-        return <View style = { [styles.row, styles.conv.container] }>
-            <TouchableOpacity
-                  style = { [styles.row, styles.conv.containerButton] }
-                  onPress = {
-                    onPressConversationFactory(item)
-                  }>
-                <View style = { styles.conv.avatar.container }>
-                    <Image
-                        source = { { uri: item.accounts[0].avatar } }
-                        style = { styles.conv.avatar.image }/>
+        return (
+            <View
+                  style = { [styles.row, styles.conv.container] }
+                  key = { item.id }>
+                <TouchableOpacity
+                      style = { [styles.row, styles.conv.containerButton] }
+                      onPress = {
+                        onPressConversationFactory(item)
+                      }>
+                    <View style = { styles.conv.avatar.container }>
+                        <Image
+                            source = { { uri: item.accounts[0].avatar } }
+                            style = { styles.conv.avatar.image }/>
+                    </View>
+                    <View style = { styles.conv.body }>
+                        <Text style = { boldIfUnread }>
+                            { item.accounts.map(account => account.acct).join(", ") }
+                        </Text>
+                        <Text style = { boldIfUnread }>
+                            {
+                                // Prefix message with acct
+                                [
+                                    item.accounts.length > 1 ?
+                                        item.last_status.account.acct + ": "
+                                        : "",
+                                    item.last_status.content,
+                                ].join("")
+                            }
+                        </Text>
+                    </View>
+                </TouchableOpacity>
+                <View style = { styles.conv.context }>
+                    <ModerateMenuJsx
+                        triggerStyle = { styles.menu.trigger } />
                 </View>
-                <View style = { styles.conv.body }>
-                    <Text style = { boldIfUnread }>
-                        { item.accounts.map(account => account.acct).join(", ") }
-                    </Text>
-                    <Text style = { boldIfUnread }>
-                        {
-                            // Prefix message with acct
-                            [
-                                item.accounts.length > 1 ?
-                                    item.last_status.account.acct + ": "
-                                    : "",
-                                item.last_status.content,
-                            ].join("")
-                        }
-                    </Text>
-                </View>
-            </TouchableOpacity>
-            <View style = { styles.conv.context }>
-                <ModerateMenuJsx
-                    triggerStyle = { styles.menu.trigger } />
             </View>
-        </View>
+        );
     };
 
     return (
@@ -129,10 +133,10 @@ const DirectJsx = ({ navigation }) => {
                 </TouchableOpacity>
             </View>
             { state.loaded ?
-                <FlatList
-                    data = { filterConversations(state.conversations, state.query) }
-                    renderItem = { renderConversation }
-                    keyExtractor = { conv => conv.id }/>
+                filterConversations(
+                    state.conversations,
+                    state.query
+                ).map(renderConversation)
                 : <></>
             }
         </ScreenWithTrayJsx>
diff --git a/src/components/pages/direct/conversation.js b/src/components/pages/direct/conversation.js
index 5ea0999..0dac471 100644
--- a/src/components/pages/direct/conversation.js
+++ b/src/components/pages/direct/conversation.js
@@ -4,7 +4,6 @@ import {
     Text,
     Image,
     TextInput,
-    FlatList,
     ScrollView,
     Dimensions,
     TouchableOpacity,
@@ -30,8 +29,8 @@ import { timeToAge } from "src/interface/rendering";
 
 const TEST_IMAGE_1 = "https://cache.desktopnexus.com/thumbseg/2255/2255124-bigthumbnail.jpg";
 const TEST_IMAGE_2 = "https://natureproducts.net/Forest_Products/Cutflowers/Musella_cut.jpg";
-const TEST_ACCOUNT_1 = { acct: "someone", display_name: "Someone", avatar: TEST_IMAGE_1 };
-const TEST_ACCOUNT_2 = { acct: "someone_else", display_name: "Another person", avatar: TEST_IMAGE_2 };
+const TEST_ACCOUNT_1 = { id: 1, acct: "someone", display_name: "Someone", avatar: TEST_IMAGE_1 };
+const TEST_ACCOUNT_2 = { id: 2, acct: "someone_else", display_name: "Another person", avatar: TEST_IMAGE_2 };
 
 const TEST_STATUS = {
     account: TEST_ACCOUNT_1,
@@ -168,7 +167,7 @@ const ConversationJsx = ({ navigation }) => {
                 <MenuOptions customStyles = { accountListOptionsStyles }>
                     {
                         conversation.accounts.map(account =>
-                            <MenuOption>
+                            <MenuOption key = { account.id }>
                                 <Image
                                     source = { { uri: account.avatar } }
                                     style = { styles.backBar.accountList.avatar }/>
@@ -188,9 +187,9 @@ const ConversationJsx = ({ navigation }) => {
         </View>
     );
 
-    const renderMessage = ({ item }) => {
+    const renderMessage = (item) => {
         const yours = state.profile.acct == item.account.acct;
-        return <>
+        return <View key = { item.id }>
             { !yours
                 ? <Text style = { styles.message.acct }>
                     { item.account.acct }
@@ -223,7 +222,7 @@ const ConversationJsx = ({ navigation }) => {
                     </Text>
                 </View>
             </View>
-        </>;
+        </View>;
     };
 
     return (
@@ -233,10 +232,7 @@ const ConversationJsx = ({ navigation }) => {
               state = { state }
               setState = { setState }>
             { state.loaded
-                ? <FlatList
-                    data = { state.messages }
-                    renderItem = { renderMessage }
-                    keyExtractor = { item => item.id }/>
+                ? state.messages.map(renderMessage)
                 : <></>
             }
         </ConversationContainerJsx>
diff --git a/src/components/pages/discover/search.js b/src/components/pages/discover/search.js
index 2eb599d..c3b5d39 100644
--- a/src/components/pages/discover/search.js
+++ b/src/components/pages/discover/search.js
@@ -10,23 +10,25 @@ const TEST_ACCOUNTS = [
         avatar: TEST_IMAGE,
         username: "njms",
         acct: "njms",
-        display_name: "Nat🔆"
+        display_name: "Nat🔆",
     },
     {
-        id: 1,
+        id: 2,
         avatar: TEST_IMAGE,
         username: "njms",
         acct: "njms",
-        display_name: "Nat🔆"
+        display_name: "Nat🔆",
     }
 ];
 
 const TEST_HASHTAGS = [
     {
-        name: "hashtag1"
+        id: 1,
+        name: "hashtag1",
     },
     {
-        name: "hashtag2"
+        id: 2,
+        name: "hashtag2",
     },
 ];
 
@@ -72,7 +74,7 @@ const SearchJsx = ({navigation}) => {
                             data = { TEST_ACCOUNTS }
                             callback = { accountCallback } />
                         <Text style = { styles.label }>Hashtags</Text>
-                        <HashtagListJsx 
+                        <HashtagListJsx
                             data = { TEST_HASHTAGS }
                             callback = { hashtagCallback } />
                 </View>
diff --git a/src/components/pages/profile.js b/src/components/pages/profile.js
index ebb9b3e..6af023d 100644
--- a/src/components/pages/profile.js
+++ b/src/components/pages/profile.js
@@ -265,7 +265,11 @@ const ProfileDisplayJsx = ({navigation}) => {
                                           style = { styles.fields.row }
                                           key = { index }>
                                         <View style = { styles.fields.cell.name }>
-                                            <Text>{ field.name }</Text>
+                                            <Text style = {
+                                                { textAlign: "center", }
+                                            }>
+                                                { field.name }
+                                            </Text>
                                         </View>
                                         <View style = { styles.fields.cell.value }>
                                             <HTMLLink link = { field.value }/>
@@ -341,7 +345,6 @@ const styles = {
         cell: {
             name: {
                 width: screen_width / 3,
-                textAlgin: "center",
             },
             value: {
                 width: (screen_width / 3) * 2,
diff --git a/src/components/pages/profile/settings.js b/src/components/pages/profile/settings.js
index 698cf3a..e44fcd8 100644
--- a/src/components/pages/profile/settings.js
+++ b/src/components/pages/profile/settings.js
@@ -202,11 +202,11 @@ const SettingsJsx = (props) => {
                         style = { styles.fields.plus }
                         source = { require("assets/eva-icons/plus.png") } />
                 </TouchableOpacity>
-                <TouchableOpacity style = { styles.largeButton }>
-                    <Text> Save Profile </Text>
+                <TouchableOpacity style = { styles.button.container }>
+                    <Text style = { styles.button.text }> Save Profile </Text>
                 </TouchableOpacity>
                 <TouchableOpacity
-                      style = { styles.largeButton }
+                      style = { styles.button.container }
                       onPress = {
                         () => {
                             AsyncStorage.multiRemove(
@@ -216,7 +216,11 @@ const SettingsJsx = (props) => {
                             });
                         }
                       }>
-                    <Text style = { styles.textWarning }> Log out </Text>
+                    <Text style = {
+                            [ styles.button.text, styles.button.warning ]
+                          }>
+                        Log out
+                    </Text>
                 </TouchableOpacity>
             </View>
         </ScreenWithBackBarJsx>
@@ -284,21 +288,23 @@ const styles = {
             width: SCREEN_WIDTH / 2.5,
         },
     },
-    largeButton: {
-        width: SCREEN_WIDTH / 1.2,
-        padding: 15,
-        marginTop: 10,
-        marginBottom: 5,
-        marginLeft: "auto",
-        marginRight: "auto",
-        borderWidth: 1,
-        borderColor: "#888",
-        borderRadius: 5,
-        textAlign: "center",
-    },
-    textWarning: {
-        fontWeight: "bold",
-        textDecorationLine: "underline",
+    button: {
+        container: {
+            width: SCREEN_WIDTH / 1.2,
+            padding: 15,
+            marginTop: 10,
+            marginBottom: 5,
+            marginLeft: "auto",
+            marginRight: "auto",
+            borderWidth: 1,
+            borderColor: "#888",
+            borderRadius: 5,
+        },
+        text: { textAlign: "center" },
+        warning: {
+            fontWeight: "bold",
+            textDecorationLine: "underline",
+        },
     },
 };
 
diff --git a/src/components/pages/user-list.js b/src/components/pages/user-list.js
index 74616b1..ace6640 100644
--- a/src/components/pages/user-list.js
+++ b/src/components/pages/user-list.js
@@ -4,7 +4,6 @@ import {
     View,
     Image,
     Text,
-    FlatList,
     Dimensions,
     TouchableOpacity,
 } from "react-native";
@@ -42,49 +41,14 @@ const TEST_DATA = [
     {...TEST_PROFILE, id: 3},
     {...TEST_PROFILE, id: 4},
     {...TEST_PROFILE, id: 5},
-    {...TEST_PROFILE, id: 6}
+    {...TEST_PROFILE, id: 6},
 ]
 
-function renderItemFactory(navigation) {
-    // Returns a renderItem function with the context of props.navigation so
-    // that it can enable the person to navigate to the selected account.
-    return ({item}) => (
-        <View style = { [ styles.flexContainer, styles.itemContainer ] }>
-            <TouchableOpacity
-              style = { styles.accountButton }
-              onPress = {
-                () => {
-                    navigation.navigate("Profile", { acct: item.acct });
-                }
-              }>
-                <View style = { styles.flexContainer }>
-                    <Image
-                        source = { { uri: item.avatar} }
-                        style = { styles.avatar } />
-                    <View>
-                        <Text style = { styles.acct }>
-                            @{ item.acct }
-                        </Text>
-                        <Text style = { styles.displayName }>
-                            { item.display_name }
-                        </Text>
-                    </View>
-                </View>
-            </TouchableOpacity>
-            <ModerateMenuJsx
-                containerStyle = { styles.moderateMenu }
-                triggerStyle = { styles.ellipsis } />
-        </View>
-    );
-}
-
 const UserListJsx = ({navigation}) => {
     // const data = navigation.getParam("data", [])
     const data = TEST_DATA;
     const context = navigation.getParam("context", "");
 
-    const renderItem = renderItemFactory(navigation);
-
     return (
         <ScreenWithBackBarJsx navigation = { navigation }>
             {
@@ -94,10 +58,38 @@ const UserListJsx = ({navigation}) => {
                     </Text>
                     : <></>
             }
-            <FlatList
-                data = { data }
-                renderItem = { renderItem }
-                keyExtractor = { item => item.id }/>
+            {
+                data.map(item =>
+                    <View
+                          key = { item.id }
+                          style = { [ styles.flexContainer, styles.itemContainer ] }>
+                        <TouchableOpacity
+                          style = { styles.accountButton }
+                          onPress = {
+                            () => {
+                                navigation.navigate("Profile", { acct: item.acct });
+                            }
+                          }>
+                            <View style = { styles.flexContainer }>
+                                <Image
+                                    source = { { uri: item.avatar} }
+                                    style = { styles.avatar } />
+                                <View>
+                                    <Text style = { styles.acct }>
+                                        @{ item.acct }
+                                    </Text>
+                                    <Text style = { styles.displayName }>
+                                        { item.display_name }
+                                    </Text>
+                                </View>
+                            </View>
+                        </TouchableOpacity>
+                        <ModerateMenuJsx
+                            containerStyle = { styles.moderateMenu }
+                            triggerStyle = { styles.ellipsis } />
+                    </View>
+                )
+            }
         </ScreenWithBackBarJsx>
     );
 };
diff --git a/src/components/pages/view-comments.js b/src/components/pages/view-comments.js
index ed17a8e..9987216 100644
--- a/src/components/pages/view-comments.js
+++ b/src/components/pages/view-comments.js
@@ -223,7 +223,7 @@ const ViewCommentsJsx = (props) => {
     }, []);
 
     return (
-        <View>
+        <>
             { state.loaded ?
                 <View style = { { flex: 1 } }>
                     <BackBarJsx navigation = { props.navigation }/>
@@ -283,7 +283,7 @@ const ViewCommentsJsx = (props) => {
                 </View>
                 : <></>
             }
-        </View>
+        </>
     );
 }