Merge pull request #33 from One-Bit-Myanmar/develop

Develop

app/(tabs)/chat.jsx

@@ -93,15 +93,6 @@ export default function Chat() {
                     <Text style={styles.noTownshipText}>No township groups available</Text>
                 )}
 
-                {/* Individual Chats */}
-                <View style={styles.sectionHeader}>
-                    <FontAwesome name="comments" size={15} color={Colors.Swan} style={styles.notificationIcon} />
-                    <Text style={styles.sectionText}>Others</Text>
-                </View>
-                <ChartCard organizationName="Org 1" type="individual" profileImage={require('../../assets/images/profile.png')} message="Hello Org 1" />
-                <ChartCard organizationName="Org 2" type="individual" profileImage={require('../../assets/images/profile.png')} message="Hello Org 2" />
-                <ChartCard organizationName="Org 3" type="individual" profileImage={require('../../assets/images/profile.png')} message="Hello Org 3" />
-
             </ScrollView>
         </View>
     );

app/(tabs)/home.jsx

@@ -1,58 +1,78 @@
-import { useRouter } from 'expo-router'
-import React from 'react'
-import { ScrollView, StyleSheet, Text, View } from 'react-native'
-import { Colors } from '../../constants/Colors'
-import HomScreenHeader from '../screens/HomeScreen/HomeScreenHeader'
-import HomeScreenOrganizationList from '../screens/HomeScreen/HomeScreenOrganizationList'
-import HomeScreenRecord from '../screens/HomeScreen/HomeScreenRecord'
+import { useRouter } from 'expo-router';
+import { collection, getDocs } from 'firebase/firestore';
+import React, { useEffect, useState } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Colors } from '../../constants/Colors';
+import { db } from '../../firebaseConfig';
+import HomScreenHeader from '../screens/HomeScreen/HomeScreenHeader';
+import HomeScreenOrganizationList from '../screens/HomeScreen/HomeScreenOrganizationList';
+import HomeScreenRecord from '../screens/HomeScreen/HomeScreenRecord';
+export default function Home() {
+    const router = useRouter();
+    const [organizationNames, setOrganizationNames] = useState([]);
 
-export default function home() {
+    // fetch all usernames in firestore
+    useEffect(() => {
+        const fetchOrganizationNames = async () => {
+            try {
+                const querySnapshot = await getDocs(collection(db, "Users"));
+                const names = querySnapshot.docs.map(doc => doc.data().name || "Unknown");
+                setOrganizationNames(names);
+            } catch (error) {
+                console.error("Error fetching organization names:", error);
+            }
+        };
+        fetchOrganizationNames();
+    }, []);
 
-    const router = useRouter();
+    // Limit the number of organizations to display to 3
+    const limitedOrganizations = organizationNames.slice(0, 3);
 
     return (
-        // header section of the home page
-
         <View style={styles.container}>
-            {/* Home Screen Header  */}
+
             <HomScreenHeader />
 
             <ScrollView>
-                {/* Home Screen record section  */}
                 <HomeScreenRecord />
 
-                {/* Home Screen Organization List  */}
-                <View style={{
-                    padding: 10, paddingHorizontal: 20, display: 'flex',
-                    flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
-                    marginBottom: 10
-                }}>
-                    <Text style={{ color: Colors.Swan, fontWeight: '500', fontSize: 18, }}>Connect with others</Text>
-                    <Text style={{ color: Colors.Blue, fontWeight: '500', textDecorationLine: 'underline' }}
-                        onPress={() => router.push('/screens/OrgScreen/OrgListScreen')}>View all</Text>
+                <View style={styles.sectionHeader}>
+                    <Text style={styles.headerText}>Connect with others</Text>
+                    <Text style={styles.viewAllText} onPress={() => router.push('/screens/OrgScreen/OrgListScreen')}>View all</Text>
                 </View>
 
-                <View style={{ paddingHorizontal: 15, }}>
-                    <HomeScreenOrganizationList />
-                    <HomeScreenOrganizationList />
-                    <HomeScreenOrganizationList />
-                    <HomeScreenOrganizationList />
+                <View style={{ paddingHorizontal: 15 }}>
+                    {limitedOrganizations.map((name, index) => (
+                        <HomeScreenOrganizationList key={index} name={name} />
+                    ))}
                 </View>
             </ScrollView>
-
         </View>
-    )
+    );
 }
 
-
 const styles = StyleSheet.create({
     container: {
         flex: 1,
         backgroundColor: Colors.white,
         marginTop: 30,
     },
-
-    textColor: {
-        color: 'red'
-    }
-})
+    sectionHeader: {
+        padding: 10,
+        paddingHorizontal: 20,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    headerText: {
+        color: Colors.Swan,
+        fontWeight: '500',
+        fontSize: 18,
+    },
+    viewAllText: {
+        color: Colors.Blue,
+        fontWeight: '500',
+        textDecorationLine: 'underline',
+    },
+});

app/(tabs)/profile.jsx

@@ -1,5 +1,5 @@
-import { View, Text } from 'react-native'
 import React from 'react'
+import { View } from 'react-native'
 import ProfileScreen from '../screens/UserScreen/ProfileScreen'
 
 export default function profile() {

app/screens/HomeScreen/HomeScreenHeader.jsx

@@ -1,11 +1,14 @@
+
 import React, { useEffect, useState } from 'react';
+import { useRouter } from 'expo-router';
 import { Image, StyleSheet, Text, View } from 'react-native';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { Colors } from '../../../constants/Colors';
 import { doc, getDoc } from "firebase/firestore";
 import { auth, db } from "../../../firebaseConfig";
 
 export default function HomeScreenHeader() {
+
     const [organizationName, setOrganizationName] = useState('Organization Name');
     const [userName, setUserName] = useState('Loading');
 
@@ -36,6 +39,8 @@ export default function HomeScreenHeader() {
         fetchUserData();
     }, []);
 
+    const router = useRouter();
+
     return (
         <View style={{ padding: 10 }}>
             <View style={styles.container} className="bg-updatedBg">
@@ -49,7 +54,9 @@ export default function HomeScreenHeader() {
                         <Text style={{ color: Colors.primaryGreen, fontSize: 15, fontWeight: '400' }}>{organizationName}</Text>
                     </View>
                 </View>
-                <FontAwesome name="bell" size={24} color={Colors.white} style={styles.notificationIcon} />
+                {/* nofification icon  */}
+                <FontAwesome onPress={() => router.push('/screens/NotificationScreen/NotificationCenterScreen')} name="bell" size={24} color={Colors.white} style={styles.notificationIcon} />
+
             </View>
         </View>
     );

app/screens/HomeScreen/HomeScreenOrganizationList.jsx

@@ -4,73 +4,49 @@ import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { Colors } from '../../../constants/Colors';
 
-export default function HomeScreenOrganizationList() {
-
+export default function HomeScreenOrganizationList({ name, teamNumber }) { // Accept props for name and teamNumber
     const router = useRouter();
 
     return (
-        // outer container 
         <View style={{ paddingHorizontal: 4, marginBottom: 10 }}>
             <View style={styles.container}>
-                {/* User profile and info  */}
+
                 <View style={styles.innerContainer}>
                     <Image
                         source={require('../../../assets/images/profile.png')}
                         style={styles.image}
                     />
-                    {/* user information  */}
                     <View>
 
-                        {/* Organization name  */}
-                        <Text style={{
-                            color: Colors.Swan, fontSize: 15,
-                            fontWeight: '400', fontWeight: 'bold',
-                            marginBottom: 8
-                        }}>
-                            Doh Eain <FontAwesome name="check-circle" size={15} color={Colors.strongGreen} style={{ marginRight: 5 }} />
+                        <Text style={styles.orgName}>
+                            {name} <FontAwesome name="check-circle" size={15} color={Colors.strongGreen} />
                         </Text>
-
-                        {/* <View style={{
-                            display: 'flex', flexDirection: 'row', alignItems: 'center',
-                            justifyContent: 'start', gap: 5,
-                        }}> */}
-                        {/* team number  */}
-                        {/* <View style={{
-                                display: 'flex', flexDirection: 'row', alignItems: 'center',
-                                justifyContent: 'start', gap: 1, color: Colors.Gray, backgroundColor: Colors.Gray,
-                                padding: 3, width: 40, borderRadius: 10, paddingLeft: 8,
-                            }}>
+                        {/* <View style={styles.teamContainer}>
+                            
+                            <View style={styles.teamNumberContainer}>
                                 <FontAwesome name="user-o" size={13} color={Colors.Swan} style={{ marginRight: 5 }} />
-                                <Text style={{ fontSize: 13, }}>5</Text>
-                            </View> */}
-                        {/* </View> */}
-
+                                <Text style={{ fontSize: 13 }}>{16}</Text>
+                            </View>
+                        </View> */}
                     </View>
                 </View>
-                {/* view and message buttons  */}
+
+                {/* View button */}
                 <View style={{ flexDirection: 'row', gap: 10 }}>
-                    {/* <TouchableOpacity style={{
-                        backgroundColor: Colors.Blue, padding: 10, borderRadius: 10,
-                    }}>
-                        <FontAwesome name="comment-o" size={15} color={Colors.white} style={styles.notificationIcon} />
-                    </TouchableOpacity> */}
                     <TouchableOpacity
-                        style={{
-                            backgroundColor: Colors.Gray, padding: 10, borderRadius: 10,
-                        }}
+                        style={styles.viewButton}
                         onPress={() => router.push('/screens/OrgScreen/OrgDetailScreen')}
                     >
                         <FontAwesome name="eye" size={15} color={Colors.Swan} style={styles.notificationIcon} />
                     </TouchableOpacity>
-
                 </View>
             </View>
         </View>
-    )
+    );
 }
+
 const styles = StyleSheet.create({
     container: {
-        display: 'flex',
         flexDirection: 'row',
         backgroundColor: Colors.LightGray,
         alignItems: 'center',
@@ -84,15 +60,38 @@ const styles = StyleSheet.create({
         borderWidth: 1,
     },
     innerContainer: {
-        display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',
-        justifyContent: 'start',
         gap: 15,
     },
     image: {
         width: 50,
         height: 50,
-        borderRadius: 99, // This makes the image circular
-    }
-})
+        borderRadius: 99,
+    },
+    orgName: {
+        color: Colors.Swan,
+        fontSize: 15,
+        fontWeight: 'bold',
+        marginBottom: 8,
+    },
+    teamContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+    },
+    teamNumberContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: Colors.Gray,
+        padding: 3,
+        width: 40,
+        borderRadius: 10,
+        paddingLeft: 8,
+    },
+    viewButton: {
+        backgroundColor: Colors.Gray,
+        padding: 10,
+        borderRadius: 10,
+    },
+});

app/screens/HomeScreen/HomeScreenRecord.jsx

@@ -1,6 +1,6 @@
 import { useRouter } from 'expo-router';
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import { Colors } from '../../../constants/Colors';
 
@@ -31,8 +31,8 @@ export default function HomeScreenRecord() {
                         <Text style={{ fontSize: 11, textTransform: 'capitalize', }}>total contributions</Text>
                     </View>
                 </View>
-                {/* Contribution Block  */}
-                <View style={styles.card}>
+                {/* Location pined Block  */}
+                <TouchableOpacity onPress={() => router.push('/screens/PinnedLocationScreen/PinnedLocationListScreen')} style={styles.card}>
                     <FontAwesome name="map-o" size={24} color={Colors.Swan} style={{ marginBottom: 14, }} />
                     <View style={{
                         display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 5
@@ -43,9 +43,9 @@ export default function HomeScreenRecord() {
                         </Text>
                     </View>
                     <View>
-                        <Text style={{ fontSize: 11, textTransform: 'capitalize', }}>current pinned location</Text>
+                        <Text style={{ fontSize: 11, textTransform: 'capitalize', }}>pinned location lists</Text>
                     </View>
-                </View>
+                </TouchableOpacity>
             </View>
             {/* Record end  */}
 

app/screens/NotificationScreen/NotificationCard.jsx

@@ -47,7 +47,7 @@ NotificationCard.propTypes = {
 const styles = StyleSheet.create({
   card: {
     padding: 10,
-    backgroundColor: Colors.LightGray,
+    backgroundColor: Colors.white,
     borderRadius: 5,
     margin: 5,
     position: 'relative',