Added friend requests, and friends, made comments update in realtime

Author: srxcode

app/(tabs)/friends.tsx

@@ -0,0 +1,10 @@
+// navigation
+import { Stack } from "expo-router";
+
+export default function HomeLayout() {
+    return (
+        <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: "#17171d" } }}>
+            <Stack.Screen name="index" options={{ contentStyle: { backgroundColor: "#17171d" } }} />
+        </Stack >
+    );
+}

app/(tabs)/friends/_layout.tsx

@@ -0,0 +1,93 @@
+import { auth, db } from "@auth/firebase";
+import FriendRequest from "@components/containers/friendRequest";
+import CustomText from "@components/display/customText";
+import NothingHere from "@components/display/nothing";
+import OnlyIconButton from "@components/inputs/onlyIconButton";
+import { FlashList, ListRenderItemInfo } from "@shopify/flash-list";
+import { friendRequest } from "@utils/types";
+import { useRouter } from "expo-router";
+import { collection, onSnapshot } from "firebase/firestore";
+import { useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function FriendRequests() {
+    const router = useRouter();
+    const insets = useSafeAreaInsets();
+    const currUser = auth.currentUser;
+    const [requests, setRequests] = useState<friendRequest[]>([]);
+
+    useEffect(() => {
+        const friendRequestSub = onSnapshot(collection(db, "users", currUser ? currUser.uid : "", "friendRequests"), (snap) => {
+            const data: friendRequest[] = snap.docs.map(doc => (
+                {
+                    id: doc.id,
+                    ...(doc.data() as Omit<friendRequest, 'id'>)
+                }
+            ));
+            setRequests(data);
+
+        });
+    }, [])
+
+    return (
+        <View style={{ backgroundColor: "#17171d", flex: 1, paddingTop: insets.top, paddingBottom: 100, alignItems: "center" }}>
+            <View style={{ flexDirection: "row", alignItems: "center", width: "100%", marginBottom: 20 }}>
+                <OnlyIconButton icon="arrow-left" func={() => { router.back() }} style={{ top: 0, left: 20, zIndex: 5 }} />
+                <CustomText style={{ color: "white", left: 50, fontSize: 18, top: 0, fontWeight: 700 }}>Friend Requests</CustomText>
+            </View>
+            <View style={styles.listContainer}>
+                <FlashList
+                    data={requests}
+                    keyExtractor={item => item.id}
+                    ListEmptyComponent={<NothingHere />}
+                    renderItem={({ item }: ListRenderItemInfo<friendRequest>) => (
+                        <FriendRequest
+                            id={item.id}
+                            createdAt={item.createdAt}
+                        />
+                    )
+                    }
+                    estimatedItemSize={100}
+                />
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    listContainer: {
+        width: '95%',
+        marginVertical: 5,
+        borderRadius: 12,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: "#444456ff",
+        flex: 1,
+    },
+    text: {
+        color: "white",
+        fontSize: 15,
+    },
+    textValue: {
+        color: "#8492a6",
+        fontSize: 15,
+    },
+    heading: {
+        color: "#8492a6",
+        fontSize: 20,
+        fontWeight: 700,
+        marginVertical: 10,
+    },
+    field: {
+        flexDirection: "row",
+        justifyContent: "space-around",
+        marginVertical: 10
+    },
+    section: {
+        padding: 20,
+        backgroundColor: "#25252f",
+        borderWidth: 1,
+        borderColor: "#17171d",
+        width: "100%"
+    }
+});

app/(tabs)/friends/friendRequests.tsx

@@ -0,0 +1,84 @@
+//components
+import FriendBox from "@components/containers/friend";
+import CustomText from "@components/display/customText";
+import InputBox from "@components/inputs/inptField";
+import OnlyIconButton from "@components/inputs/onlyIconButton";
+import { FlashList, ListRenderItemInfo } from "@shopify/flash-list";
+import { StyleSheet, View } from "react-native";
+
+//react
+import { useEffect, useState } from "react";
+
+//typecasting
+import { auth, db } from "@auth/firebase";
+import NothingHere from "@components/display/nothing";
+import { friend } from "@utils/types";
+import { useRouter } from "expo-router";
+import { collection, onSnapshot } from "firebase/firestore";
+
+
+
+export default function FriendsScreen() {
+    const [search, setSearch] = useState("");
+
+    const router = useRouter()
+    const currUser = auth.currentUser;
+    const [friends, setFriends] = useState<friend[]>();
+
+    useEffect(() => {
+        const friendSub = onSnapshot(collection(db, "users", currUser ? currUser.uid : "", "friends"), (snap) => {
+            const data: friend[] = snap.docs.map(doc => (
+                {
+                    id: doc.id,
+                    ...(doc.data() as Omit<friend, 'id'>)
+                }
+            ));
+            console.log(data, "contains all friends")
+            setFriends(data);
+
+        });
+    }, [])
+    return (
+        <View style={{ backgroundColor: "#17171d", flex: 1, paddingTop: 50, paddingBottom: 100, alignItems: "center" }}>
+            <View style={{ flexDirection: "row", alignItems: "center", width: "100%" }}>
+                <CustomText style={{ color: "white", fontSize: 20, textAlign: "center", fontWeight: "bold", marginVertical: 10, marginLeft: "10%" }}>Your Friends</CustomText>
+                <OnlyIconButton
+                    icon="account-plus-outline"
+                    func={() => { router.push("/(tabs)/friends/friendRequests") }}
+                    style={{ marginLeft: "auto", marginRight: 30 }}
+                />
+            </View>
+
+            <InputBox secure={false} value={search} valueFn={setSearch} color="white" icon="magnify" type="none" placeholder="Search your friends here" />
+            <View style={styles.listContainer}>
+                <FlashList
+                    data={friends}
+                    keyExtractor={item => item.id}
+                    ListEmptyComponent={<NothingHere />}
+                    renderItem={({ item }: ListRenderItemInfo<friend>) => (
+                        // <CustomText>{item.id}</CustomText>
+                        <FriendBox
+                            id={item.id}
+                            createdAt={item.createdAt}
+                        />
+                    )
+                    }
+                    estimatedItemSize={100}
+                />
+
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    listContainer: {
+        width: '95%',
+        marginVertical: 25,
+        borderRadius: 12,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: "#444456ff",
+        flex: 1
+    }
+
+});

app/(tabs)/friends/index.tsx

@@ -1,7 +1,7 @@
 //components
 import HomeHeader from "@components/containers/HomeHeader";
 import PostList from "@components/display/postList";
-import { KeyboardAvoidingView, View } from "react-native";
+import { ActivityIndicator, KeyboardAvoidingView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 //react
@@ -19,6 +19,13 @@ export default function HomeScreen() {
                 Header={
                     <View style={{ height: 20 + insets.top }}></View>
                 }
+                EmptyElement={
+                    <ActivityIndicator
+                        color={"#338eda"}
+                        style={{ marginTop: 70 }}
+                    />
+
+                }
             />
         </KeyboardAvoidingView>
     );