diff --git a/mobile/NBAForum/pages/Feed.js b/mobile/NBAForum/pages/Feed.js index 10a7d102..e369852f 100644 --- a/mobile/NBAForum/pages/Feed.js +++ b/mobile/NBAForum/pages/Feed.js @@ -1,32 +1,152 @@ -import React, { useContext } from 'react'; -import { View, Text, StyleSheet } from 'react-native'; +import React, { useContext, useState, useEffect } from 'react'; +import { View, Text, StyleSheet, TouchableOpacity, FlatList } from 'react-native'; import { Context } from "../globalContext/globalContext.js" +import axios from 'axios'; const Feed = () => { - const globalContext = useContext(Context) - const userObj = globalContext.userObj - console.log("user object:", userObj) + const { baseURL } = useContext(Context); + const userObj = globalContext.userObj; + const [ postIds, setPostIds ] = useState([1,2,3,4,5,6]); + const [ isLoading, setIsLoading ] = useState(true); + const [ posts, setPosts] = useState([]); +// console.log("user object:", userObj) + + useEffect(() => { + const fetchFollowedProfilesPosts = async () => { + try { + const response = await axios.get(`${baseURL}/user_followings/`); + // console.log(response.data) + //TODO: get the post id's of all the following users + + if (response.status === 200) { + console.log('OK:', response.data); + } else { + console.log('FAIL', response.status); + } + } catch (error) { + console.error('Error getting the following users', error); + } + const fetchedPosts = []; + + // Loop through the list of post_ids and fetch individual posts + for (const postId of postIds) { + try { + const response = await axios.get(`${baseURL}/post/${postId}`); + fetchedPosts.push(response.data); + } catch (error) { + console.error('Error fetching post:', error); + } + } + // Set the fetched posts in state + setPosts(fetchedPosts); + setIsLoading(false); + }; + fetchFollowedProfilesPosts(); + }, []); + + const renderPostItem = ({ item }) => ( + + {item.content} + + {item.comments.map((comment) => ( + {comment.content} + ))} + + + handleLike(item?.id)} style={styles.actionButton}> + Like + + handleComment(item?.id)} style={styles.actionButton}> + Comment + + + + ); + + const handleCreatePost = () => { + // Navigate to the screen where users can create a new post + }; + + // Handler for liking a post + const handleLike = (postId) => { + + }; + + // Handler for commenting on a post + const handleComment = (postId) => { + // Implement logic to navigate to the screen where users can comment on the post + }; return ( + (!isLoading)? ( - This is your feed! - + post.id} + /> + + Create a Post + + ) + :( + + + ) ); }; const styles = StyleSheet.create({ container: { flex: 1, - justifyContent: 'center', - alignItems: 'center', - padding: 20, + position: 'relative', + }, + createPostButton: { + backgroundColor: "#1B64EB", + fontSize: 18, + padding: 16, + borderRadius: 16, + marginTop: 16, + position: 'absolute', + bottom: 20, + right: 20, + }, + createPostButtonText: { + color: "white", + fontWeight: "bold", + fontSize: 16, + }, + postContainer: { + backgroundColor: '#ffffff', + padding: 10, + marginBottom: 10, + borderRadius: 8, + borderWidth: 1, + borderColor: '#dddddd', + }, + postText: { + fontSize: 16, + marginBottom: 10, + }, + commentContainer: { + flexDirection: 'row', + marginBottom: 10, + }, + actionsContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + actionButton: { + backgroundColor: '#007bff', + paddingVertical: 8, + paddingHorizontal: 20, + borderRadius: 5, }, - title: { - fontSize: 24, + actionButtonText: { + color: '#ffffff', + fontSize: 16, fontWeight: 'bold', - marginBottom: 20, - alignItems: 'center' }, });