Merge pull request #341 from bounswe/fix/MB-fix-header-and-navigation

Bug fixes about header and navigation

mobile/src/pages/App.js

@@ -15,44 +15,24 @@ import Profile from './Profile';
 const Stack = createStackNavigator();
 const Sidebar = createDrawerNavigator();
 
+
+const navigateProfile = (navigation, username) => {
+  navigation.navigate("Profile", {username: username});
+};
 const CustomHeader = ({ navigation }) => (
   <View style={styles.customHeader}>
     <TouchableOpacity onPress={() => navigation.toggleDrawer()} style={styles.headerButton}>
       <MaterialIcons name="menu" size={30} color="white" />
     </TouchableOpacity>
     <Text style={styles.logoText}>Bull&Bear</Text>
-    <TouchableOpacity onPress={() => navigation.toggleDrawer()} style={styles.headerButton}>
+    <TouchableOpacity onPress={() => navigateProfile(navigation)} style={styles.headerButton}>
       <MaterialIcons name="account-circle" size={30} color="white" />
     </TouchableOpacity>
   </View>
 );
 
 
 const App = () => {
-
-    const navigateProfile = (navigation, username) => {
-      navigation.navigate("Profile", {username: username});
-    };
-    const CustomHeader = ({ navigation, username }) => (
-
-      <View style={styles.header}>
-        <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
-          <MaterialIcons name="menu" size={30} color="white" />
-        </TouchableOpacity>
-        <View style={styles.logo}>
-          {/* <Image
-            source={require('../../assets/IconKitchen-Output/ios/AppIcon~ipad.png')}
-            
-            
-          /> */}
-          <Text style={styles.logoText}> Bull&Bear </Text>
-        </View>  
-        <TouchableOpacity onPress={() => navigateProfile(navigation, username)}>
-          <MaterialIcons name="account-circle" size={30} color="white" />
-        </TouchableOpacity>
-      </View>
-    );
-
     const LoginRelated = () => {
       return (
         <Stack.Navigator screenOptions={{ headerShown: false }}>
@@ -63,11 +43,17 @@ const App = () => {
       )
     }
 
-    const TabBar = (params) =>{
+    /* const TabBar = (params) =>{ // This structure can be used after some point
       const username = params.route;
       
       return(
-      <Sidebar.Navigator
+      
+      )
+    } */
+
+    return (
+        <NavigationContainer>
+          <Sidebar.Navigator
         screenOptions={{
           headerShown: true, // Enable the custom header globally
           header: ({ navigation }) => <CustomHeader navigation={navigation} />, // Use CustomHeader for all screens
@@ -86,12 +72,6 @@ const App = () => {
               component={LoginRelated} 
             />
           </Sidebar.Navigator>
-      )
-    }
-
-    return (
-        <NavigationContainer>
-          <TabBar></TabBar>
         </NavigationContainer>
       );
 };

mobile/src/pages/Home.js

@@ -68,7 +68,9 @@ const Home = () => {
               <Text style={styles.actionText}>Comment</Text>
             </TouchableOpacity>
           </View>
+
         </View>
+
 
       );
     } else {
@@ -92,15 +94,29 @@ const Home = () => {
     }
   };
 
-
+  const renderSectionFooter = ({ section: { title } }) => {
+    return (
+      <View style={styles.footerContainer}>
+        <TouchableOpacity>
+          <Text style={styles.seeMore}>See More {title}</Text>
+        </TouchableOpacity>
+      </View>
+
+    );
+  };
   return (
-    <SectionList
-      sections={sections}
-      keyExtractor={(item) => item.id.toString()}
-      renderItem={renderItem}
-      renderSectionHeader={({ section: { title } }) => <Text style={styles.header}>{title}</Text>}
-      contentContainerStyle={styles.container}
-    />
+    <View>
+      <SectionList
+        sections={sections}
+        keyExtractor={(item) => item.id.toString()}
+        renderItem={renderItem}
+        renderSectionHeader={({ section: { title } }) => <Text style={styles.header}>{title}</Text>}
+        contentContainerStyle={styles.container}
+        renderSectionFooter={renderSectionFooter}
+      />
+    </View>
+
+
   );
 };
 
@@ -188,6 +204,16 @@ const styles = StyleSheet.create({
     marginLeft: 5,
     color: 'black',
   },
+  footerContainer:{
+    alignItems:"flex-end",
+
+  },
+  seeMore:{
+    alignSelf:"flex-end",
+    fontSize:15,
+    fontWeight:"bold",
+    color:"black"
+  },
 });
 
 export default Home;

mobile/src/pages/Login.js

@@ -43,7 +43,7 @@ const Login = ({ navigation }) => {
       if (response.ok) {
         // Handle successful login
         Alert.alert('Login Successful', 'Welcome!');
-        navigation.navigate('TabBar', {username: username})
+        navigation.navigate('Home', {username: username})
       } else {
         // Handle login failure
         Alert.alert('Login Failed', data.message || 'Invalid credentials');

mobile/src/pages/Profile.js

@@ -38,7 +38,7 @@ const ProfilePage = () => {
           source={require("../../assets/stock-logos/Profile.png")} // Replace with your profile image URL
           style={styles.profilePhoto}
         />
-        <Text style={styles.username}>@YourUsername</Text>
+        <Text style={styles.username}>@economistali</Text>
         <Text style={styles.followerCount}>Followers: 150</Text>
         <TouchableOpacity >
             <Text style={styles.seePost} > See posts</Text>
@@ -47,7 +47,7 @@ const ProfilePage = () => {
 
       {/* Badges Section */}
       <View style={styles.badgesContainer}>
-        <Text style={styles.sectionTitle}>Badges</Text>
+        <Text style={styles.sectionTitle}> Badges</Text>
         <FlatList
           data={badges}
           renderItem={({ item }) => (
@@ -65,7 +65,7 @@ const ProfilePage = () => {
       {/* Portfolio Section */}
       <ScrollView>
         <View style={styles.portfolioContainer}>
-            <Text style={styles.sectionTitle}>My Portfolios</Text>
+            <Text style={styles.sectionTitle}> Portfolios</Text>
             <FlatList
             data={portfolios}
             renderItem={({ item }) => (