Implement toggle for feed selection and update styles

Author: faresh9

.expo/README.md

@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

README.md

@@ -92,3 +92,4 @@ There are plenty of features to add, so here is what I would work on next. Feel
 
 - Ability to share posts through messaging
 - For You feed page vs Following feed page
+- camera Could not generate thumbnail error

frontend/src/navigation/home/index.tsx

@@ -15,7 +15,6 @@ export type HomeStackParamList = {
   Add: undefined;
   Inbox: undefined;
   Me: { initialUserId: string };
-  Following: undefined; // Add new route
 };
 
 const Tab = createMaterialBottomTabNavigator<HomeStackParamList>();
@@ -37,15 +36,6 @@ export default function HomeScreen() {
           ),
         }}
       />
-      <Tab.Screen
-        name="Following"
-        component={FollowingFeedScreen} // Add new screen
-        options={{
-          tabBarIcon: ({ color }) => (
-            <Feather name="users" size={24} color={color} />
-          ),
-        }}
-      />
       <Tab.Screen
         name="Discover"
         component={SearchScreen}

frontend/src/screens/feed/index.tsx

@@ -1,8 +1,8 @@
-import { FlatList, View, Dimensions, ViewToken, RefreshControl } from "react-native";
+import { FlatList, View, Dimensions, ViewToken, RefreshControl, TouchableOpacity, Text } from "react-native";
 import styles from "./styles";
 import PostSingle, { PostSingleHandles } from "../../components/general/post";
 import { useContext, useEffect, useRef, useState, useCallback } from "react";
-import { getFeed, getPostsByUserId } from "../../services/posts";
+import { getFeed, getFollowingFeed, getPostsByUserId } from "../../services/posts";
 import { Post } from "../../../types";
 import { RouteProp } from "@react-navigation/native";
 import { RootStackParamList } from "../../navigation/main";
@@ -41,17 +41,21 @@ export default function FeedScreen({ route }: { route: FeedScreenRouteProp }) {
 
   const [posts, setPosts] = useState<Post[]>([]);
   const [refreshing, setRefreshing] = useState(false);
+  const [selectedFeed, setSelectedFeed] = useState<"ForYou" | "Following">("ForYou");
   const mediaRefs = useRef<Record<string, PostSingleHandles | null>>({});
 
   const fetchPosts = useCallback(async () => {
     if (profile && creator) {
       const posts = await getPostsByUserId(creator);
       setPosts(posts);
-    } else {
+    } else if (selectedFeed === "ForYou") {
       const posts = await getFeed();
       setPosts(posts);
+    } else {
+      const posts = await getFollowingFeed();
+      setPosts(posts);
     }
-  }, [profile, creator]);
+  }, [profile, creator, selectedFeed]);
 
   useEffect(() => {
     fetchPosts();
@@ -114,6 +118,26 @@ export default function FeedScreen({ route }: { route: FeedScreenRouteProp }) {
 
   return (
     <View style={styles.container}>
+      <View style={styles.toggleContainer}>
+        <TouchableOpacity
+          style={[
+            styles.toggleButton,
+            selectedFeed === "ForYou" && styles.selectedButton,
+          ]}
+          onPress={() => setSelectedFeed("ForYou")}
+        >
+          <Text style={styles.toggleButtonText}>For You</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[
+            styles.toggleButton,
+            selectedFeed === "Following" && styles.selectedButton,
+          ]}
+          onPress={() => setSelectedFeed("Following")}
+        >
+          <Text style={styles.toggleButtonText}>Following</Text>
+        </TouchableOpacity>
+      </View>
       <FlatList
         data={posts}
         windowSize={4}

frontend/src/screens/feed/styles.ts

@@ -1,7 +1,31 @@
 import { StyleSheet } from "react-native";
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-});
-
-export default styles;
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "black",
+  },
+  toggleContainer: {
+    position: "absolute",
+    top: 20,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    justifyContent: "center",
+    zIndex: 1,
+  },
+  toggleButton: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    marginHorizontal: 5,
+    borderRadius: 20,
+    backgroundColor: "rgba(82, 82, 82, 0.5)",
+  },
+  selectedButton: {
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+  },
+  toggleButtonText: {
+    color: "white",
+    fontWeight: "bold",
+  },
+});