From 58f5a3b6c7fd05d4d203ca6cdcd8ce8aab3d658a Mon Sep 17 00:00:00 2001
From: Ahiya Elster <elster.ahiya@gmail.com>
Date: Sun, 13 Oct 2019 12:50:52 +0300
Subject: [PATCH 1/2] NavigationDrawer - slight refactor to use props consts,
 and two small functions

---
 app/components/NavDrawer.js | 96 +++++++++++++++++++++----------------
 1 file changed, 55 insertions(+), 41 deletions(-)

diff --git a/app/components/NavDrawer.js b/app/components/NavDrawer.js
index 4bb6f8b1..919e013c 100644
--- a/app/components/NavDrawer.js
+++ b/app/components/NavDrawer.js
@@ -52,13 +52,15 @@ class NavDrawer extends Component {
     }
 
     onResetHomeProfilePressed() {
+        const {tracker, actions} = this.props;
+
         Alert.alert('Logout',
                     'Are you sure that you want to logout?',
                     [
                         {text: 'Cancel', style: 'cancel'},
                         {text: 'OK', onPress: () => {
-                            this.props.tracker.trackEvent('Logout', 'Success');
-                            this.props.actions.resetHomeProfile();
+                            tracker.trackEvent('Logout', 'Success');
+                            actions.resetHomeProfile();
                             setTimeout(() => {
                                 AsyncStorage.setItem("homeProfile", "");
                             }, 1000);
@@ -67,21 +69,23 @@ class NavDrawer extends Component {
     }
 
     goto(route) {
+        const {actions, contextIdStackFavourite, contextIdStackHome, contextIdStackSearch} = this.props;
+
         Actions.drawerClose();
-        this.props.actions.changeParent(route);
+        actions.changeParent(route);
         if(route == 'Home') {
-            if(this.props.contextIdStackHome.length > 0) {
-                this.props.actions.changeContextId(this.props.contextIdStackHome[this.props.contextIdStackHome.length-1]);
+            if(contextIdStackHome.length > 0) {
+                actions.changeContextId(contextIdStackHome[contextIdStackHome.length-1]);
             }
             Actions.homeTab();
         } else if(route == 'Favourites') {
-            if(this.props.contextIdStackFavourite.length > 0) {
-                this.props.actions.changeContextId(this.props.contextIdStackFavourite[this.props.contextIdStackFavourite.length-1]);
+            if(contextIdStackFavourite.length > 0) {
+                actions.changeContextId(contextIdStackFavourite[contextIdStackFavourite.length-1]);
             }
             Actions.favouriteTab();
         } else if(route == 'Search') {
-            if(this.props.contextIdStackSearch.length > 0) {
-                this.props.actions.changeContextId(this.props.contextIdStackSearch[this.props.contextIdStackSearch.length-1]);
+            if(contextIdStackSearch.length > 0) {
+                actions.changeContextId(contextIdStackSearch[contextIdStackSearch.length-1]);
             }
             Actions.searchTab();
         } else if(route == 'Settings') {
@@ -89,87 +93,97 @@ class NavDrawer extends Component {
         }
     }
 
-    render() {
-        var paddingView;
+    getPaddingView = () => {
         if(Platform.OS === 'ios') {
             if(DeviceInfo.getModel() == "iPhone X")
-                paddingView = <View style = {{marginTop: 44}} />
+                return <View style = {{marginTop: 44}} />;
             else
-                paddingView = <View style = {{marginTop: 15}} />
+                return <View style = {{marginTop: 15}} />;
         } else {
-            paddingView = <View />
+            return <View />;
         }
-        var logout = (<View />);
-        if(this.props.profile != "") {
-            logout = (
+    }
+
+    getLogoutView = () => {
+        const { profile, mod, legend, secondLegend } = this.props;
+
+        return (profile != "") ?
                 <View>
                     <TouchableOpacity onPress = {() => {this.onResetHomeProfilePressed()}}>
-                        <View style = {[styles.navItem, {backgroundColor: this.props.mod}]}>
+                        <View style = {[styles.navItem, {backgroundColor: mod}]}>
                             <View style = {styles.navIconContainer}>
-                                <FontAwesome name = "power-off" size = {26} allowFontScaling = {false} color = {this.props.legend}/>
+                                <FontAwesome name = "power-off" size = {26} allowFontScaling = {false} color = {legend}/>
                             </View>
                             <View style = {styles.navTextContainer}>
-                                <Text style = {[styles.navText, {color: this.props.secondLegend}]}>Logout</Text>
+                                <Text style = {[styles.navText, {color: secondLegend}]}>Logout</Text>
                             </View>
                         </View>
                     </TouchableOpacity>
-                    <View style = {[styles.separator, {backgroundColor: this.props.legend}]} />
+                    <View style = {[styles.separator, {backgroundColor: legend}]} />
                 </View>
-            );
-        }
+            : 
+            <View />;
+    }
+
+    render() {
+        const { mod, legend, secondLegend } = this.props;
+        
+        const paddingView = this.getPaddingView();
+        const logoutView = this.getLogoutView();
+       
         return (
-            <View style = {[styles.drawerContainer, {backgroundColor: this.props.mod}]}>
+            <View style = {[styles.drawerContainer, {backgroundColor: mod}]}>
                 {paddingView}
                 <ScrollView style = {styles.navScroll}>
                     <TouchableOpacity onPress = {() => {this.goto('Home')}}>
-                        <View style = {[styles.navItem, {backgroundColor: this.props.mod}]}>
+                        <View style = {[styles.navItem, {backgroundColor: mod}]}>
                             <View style = {styles.navIconContainer}>
-                                <FontAwesome name = "home" size = {26} allowFontScaling = {false} color = {this.props.legend}/>
+                                <FontAwesome name = "home" size = {26} allowFontScaling = {false} color = {legend}/>
                             </View>
                             <View style = {styles.navTextContainer}>
-                                <Text style = {[styles.navText, {color: this.props.secondLegend}]}>Home</Text>
+                                <Text style = {[styles.navText, {color: secondLegend}]}>Home</Text>
                             </View>
                         </View>
                     </TouchableOpacity>
-                    <View style = {[styles.separator, {backgroundColor: this.props.legend}]} />
+                    <View style = {[styles.separator, {backgroundColor: legend}]} />
 
                     <TouchableOpacity onPress = {() => {this.goto('Favourites')}}>
-                        <View style = {[styles.navItem, {backgroundColor: this.props.mod}]}>
+                        <View style = {[styles.navItem, {backgroundColor: mod}]}>
                             <View style = {styles.navIconContainer}>
-                                <FontAwesome name = "star" size = {26} allowFontScaling = {false} color = {this.props.legend}/>
+                                <FontAwesome name = "star" size = {26} allowFontScaling = {false} color = {legend}/>
                             </View>
                             <View style = {styles.navTextContainer}>
-                                <Text style = {[styles.navText, {color: this.props.secondLegend}]}>Favourites</Text>
+                                <Text style = {[styles.navText, {color: secondLegend}]}>Favourites</Text>
                             </View>
                         </View>
                     </TouchableOpacity>
-                    <View style = {[styles.separator, {backgroundColor: this.props.legend}]} />
+                    <View style = {[styles.separator, {backgroundColor: legend}]} />
 
                     <TouchableOpacity onPress = {() => {this.goto('Search')}}>
-                        <View style = {[styles.navItem, {backgroundColor: this.props.mod}]}>
+                        <View style = {[styles.navItem, {backgroundColor: mod}]}>
                             <View style = {styles.navIconContainer}>
-                                <FontAwesome name = "search" size = {26} allowFontScaling = {false} color = {this.props.legend}/>
+                                <FontAwesome name = "search" size = {26} allowFontScaling = {false} color = {legend}/>
                             </View>
                             <View style = {styles.navTextContainer}>
-                                <Text style = {[styles.navText, {color: this.props.secondLegend}]}>Search</Text>
+                                <Text style = {[styles.navText, {color: secondLegend}]}>Search</Text>
                             </View>
                         </View>
                     </TouchableOpacity>
-                    <View style = {[styles.separator, {backgroundColor: this.props.legend}]} />
+                    <View style = {[styles.separator, {backgroundColor: legend}]} />
 
                     <TouchableOpacity onPress = {() => {this.goto('Settings')}}>
-                        <View style = {[styles.navItem, {backgroundColor: this.props.mod}]}>
+                        <View style = {[styles.navItem, {backgroundColor: mod}]}>
                             <View style = {styles.navIconContainer}>
-                                <FontAwesome name = "cog" size = {26} allowFontScaling = {false} color = {this.props.legend}/>
+                                <FontAwesome name = "cog" size = {26} allowFontScaling = {false} color = {legend}/>
                             </View>
                             <View style = {styles.navTextContainer}>
-                                <Text style = {[styles.navText, {color: this.props.secondLegend}]}>Settings</Text>
+                                <Text style = {[styles.navText, {color: secondLegend}]}>Settings</Text>
                             </View>
                         </View>
                     </TouchableOpacity>
-                    <View style = {[styles.separator, {backgroundColor: this.props.legend}]} />
+                    <View style = {[styles.separator, {backgroundColor: legend}]} />
 
-                    {logout}
+                    {logoutView}
 
                 </ScrollView>
             </View>

From 8358745aa5761c1c3dfce74af557d2a531b97fd2 Mon Sep 17 00:00:00 2001
From: Ahiya Elster <elster.ahiya@gmail.com>
Date: Sun, 13 Oct 2019 16:12:18 +0300
Subject: [PATCH 2/2] refactored render method

---
 app/components/NavDrawer.js | 72 ++++++++++++-------------------------
 1 file changed, 23 insertions(+), 49 deletions(-)

diff --git a/app/components/NavDrawer.js b/app/components/NavDrawer.js
index 919e013c..ab3e4a9d 100644
--- a/app/components/NavDrawer.js
+++ b/app/components/NavDrawer.js
@@ -106,9 +106,9 @@ class NavDrawer extends Component {
 
     getLogoutView = () => {
         const { profile, mod, legend, secondLegend } = this.props;
-
+        
         return (profile != "") ?
-                <View>
+        <View>
                     <TouchableOpacity onPress = {() => {this.onResetHomeProfilePressed()}}>
                         <View style = {[styles.navItem, {backgroundColor: mod}]}>
                             <View style = {styles.navIconContainer}>
@@ -123,68 +123,42 @@ class NavDrawer extends Component {
                 </View>
             : 
             <View />;
+        }
+        
+    getMenuItem = (itemName, fontName) => {
+        const { mod, legend, secondLegend } = this.props;
+
+        return <TouchableOpacity onPress = {() => {this.goto(itemName)}}>
+            <View style = {[styles.navItem, {backgroundColor: mod}]}>
+                <View style = {styles.navIconContainer}>
+                    <FontAwesome name = {fontName} size = {26} allowFontScaling = {false} color = {legend}/>
+                </View>
+                <View style = {styles.navTextContainer}>
+                    <Text style = {[styles.navText, {color: secondLegend}]}>{itemName}</Text>
+                </View>
+            </View>
+        </TouchableOpacity>;
     }
 
     render() {
-        const { mod, legend, secondLegend } = this.props;
+        const { mod, legend } = this.props;
         
         const paddingView = this.getPaddingView();
         const logoutView = this.getLogoutView();
-       
+
         return (
             <View style = {[styles.drawerContainer, {backgroundColor: mod}]}>
                 {paddingView}
                 <ScrollView style = {styles.navScroll}>
-                    <TouchableOpacity onPress = {() => {this.goto('Home')}}>
-                        <View style = {[styles.navItem, {backgroundColor: mod}]}>
-                            <View style = {styles.navIconContainer}>
-                                <FontAwesome name = "home" size = {26} allowFontScaling = {false} color = {legend}/>
-                            </View>
-                            <View style = {styles.navTextContainer}>
-                                <Text style = {[styles.navText, {color: secondLegend}]}>Home</Text>
-                            </View>
-                        </View>
-                    </TouchableOpacity>
+                    {this.getMenuItem("Home", "home")}
                     <View style = {[styles.separator, {backgroundColor: legend}]} />
-
-                    <TouchableOpacity onPress = {() => {this.goto('Favourites')}}>
-                        <View style = {[styles.navItem, {backgroundColor: mod}]}>
-                            <View style = {styles.navIconContainer}>
-                                <FontAwesome name = "star" size = {26} allowFontScaling = {false} color = {legend}/>
-                            </View>
-                            <View style = {styles.navTextContainer}>
-                                <Text style = {[styles.navText, {color: secondLegend}]}>Favourites</Text>
-                            </View>
-                        </View>
-                    </TouchableOpacity>
+                    {this.getMenuItem("Favourites", "star")}
                     <View style = {[styles.separator, {backgroundColor: legend}]} />
-
-                    <TouchableOpacity onPress = {() => {this.goto('Search')}}>
-                        <View style = {[styles.navItem, {backgroundColor: mod}]}>
-                            <View style = {styles.navIconContainer}>
-                                <FontAwesome name = "search" size = {26} allowFontScaling = {false} color = {legend}/>
-                            </View>
-                            <View style = {styles.navTextContainer}>
-                                <Text style = {[styles.navText, {color: secondLegend}]}>Search</Text>
-                            </View>
-                        </View>
-                    </TouchableOpacity>
+                    {this.getMenuItem("Search", "search")}
                     <View style = {[styles.separator, {backgroundColor: legend}]} />
-
-                    <TouchableOpacity onPress = {() => {this.goto('Settings')}}>
-                        <View style = {[styles.navItem, {backgroundColor: mod}]}>
-                            <View style = {styles.navIconContainer}>
-                                <FontAwesome name = "cog" size = {26} allowFontScaling = {false} color = {legend}/>
-                            </View>
-                            <View style = {styles.navTextContainer}>
-                                <Text style = {[styles.navText, {color: secondLegend}]}>Settings</Text>
-                            </View>
-                        </View>
-                    </TouchableOpacity>
+                    {this.getMenuItem("Settings", "cog")}
                     <View style = {[styles.separator, {backgroundColor: legend}]} />
-
                     {logoutView}
-
                 </ScrollView>
             </View>
         )