From 5f7c85160b34b2e3c9a43f801e7c290ce93539e7 Mon Sep 17 00:00:00 2001 From: leoRysing Date: Wed, 17 Apr 2024 22:54:47 -0400 Subject: [PATCH] Adding new post types (#53) * Adding new post types * fixing lint * all navigation to person added * linter pass * once more --- frontend/components/Feed/FeedTopBar.tsx | 128 +++++++----- frontend/components/Feed/Info.tsx | 122 +++++++++++ frontend/components/Feed/PostNew.tsx | 102 +++++++--- frontend/components/TrendingUser.tsx | 14 +- frontend/pages/Feed.tsx | 6 + frontend/pages/Follow.tsx | 259 ++++++++++++++++++++++++ frontend/router/BottomNavBar.tsx | 4 +- frontend/types/navigationTypes.ts | 2 + 8 files changed, 553 insertions(+), 84 deletions(-) create mode 100644 frontend/components/Feed/Info.tsx create mode 100644 frontend/pages/Follow.tsx diff --git a/frontend/components/Feed/FeedTopBar.tsx b/frontend/components/Feed/FeedTopBar.tsx index 468b6f0e..1c95f33a 100644 --- a/frontend/components/Feed/FeedTopBar.tsx +++ b/frontend/components/Feed/FeedTopBar.tsx @@ -1,62 +1,78 @@ -import React from "react"; -import { StyleSheet, Text, View } from "react-native"; +import { useNavigation } from '@react-navigation/native'; +import React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +// import FeedPage from '../../pages/FeedPage'; +// import Follow from '../../pages/Follow'; +import { AuthNavigationProp } from '../../types/navigationTypes'; -type FeedBarProps = { - tab: string, - setTab: React.Dispatch>, -} +type FeedBarProps = { + tab: string; + setTab: React.Dispatch>; +}; -const FeedTopBar: React.FC = ({tab, setTab}) => { - return ( - - setTab('Explore')}> - Explore - - setTab('Following')}> - Following - - - ) -} +const FeedTopBar: React.FC = ({ tab, setTab }) => { + const navigation = useNavigation(); + + const handleButtonPress = () => { + setTab('Explore') + navigation.navigate('Feed'); + }; + + const handleButtonPress2 = () => { + setTab('Explore') + navigation.navigate('Follow'); + }; + + return ( + + + Explore + + + Following + + + ); +}; export default FeedTopBar; const styles = StyleSheet.create({ - top_bar: { - width: "100%", - flex: 1, - marginTop: "15%", - backgroundColor: '#FFFFFF', - flexDirection: "row", - // backgroundRepeat: 'no-repeat', - // backgroundPosition: 'center center', - // backgroundSize: 'cover', - padding: 20, - overflow: 'hidden', - zIndex: 2, - }, - explore: { - width: "50%", - color: 'rgba(0,0,0,1)', - fontFamily: 'Circular Std', - fontWeight: '500', - fontSize: 17, - opacity: 1, - textAlign: 'center', - borderBottomColor: 'rgba(0,0,0,1)', - borderBottomWidth: 1, - }, - follow: { - width: "50%", - color: 'rgba(102,102,102,1)', - fontFamily: 'Circular Std', - fontWeight: '500', - fontSize: 17, - opacity: 1, - textAlign: 'center', - }, -}) \ No newline at end of file + top_bar: { + width: '100%', + flex: 1, + marginTop: '15%', + backgroundColor: '#FFFFFF', + flexDirection: 'row', + // backgroundRepeat: 'no-repeat', + // backgroundPosition: 'center center', + // backgroundSize: 'cover', + padding: 20, + overflow: 'hidden', + zIndex: 2, + }, + explore: { + width: '50%', + color: 'rgba(0,0,0,1)', + fontFamily: 'Circular Std', + fontWeight: '500', + fontSize: 17, + opacity: 1, + textAlign: 'center', + borderBottomColor: 'rgba(0,0,0,1)', + borderBottomWidth: 1, + }, + follow: { + width: '50%', + color: 'rgba(102,102,102,1)', + fontFamily: 'Circular Std', + fontWeight: '500', + fontSize: 17, + opacity: 1, + textAlign: 'center', + }, +}); diff --git a/frontend/components/Feed/Info.tsx b/frontend/components/Feed/Info.tsx new file mode 100644 index 00000000..aad5286a --- /dev/null +++ b/frontend/components/Feed/Info.tsx @@ -0,0 +1,122 @@ +import { Text, View } from 'react-native'; +// import { Post } from '../../types/types'; +// import Vote from './Vote'; +// import { SvgXml } from 'react-native-svg'; + +type PostProps = { + type: number; + company: string; + price: number; + percent: number; +}; + +const Info: React.FC = ({ type, company, price, percent }) => { + if (type == 1) { + return ( + + + + BUY + + + {company} @ {price} + + + + + {percent}% + + + + ); + } + if (type == 2) { + return ( + + + + BUY + + + {company} @ {price} + + + + + 17% + + + + ); + } +}; + +// Define the styles for the component + +export default Info; diff --git a/frontend/components/Feed/PostNew.tsx b/frontend/components/Feed/PostNew.tsx index 5dcb2314..e1db8737 100644 --- a/frontend/components/Feed/PostNew.tsx +++ b/frontend/components/Feed/PostNew.tsx @@ -1,36 +1,89 @@ -import { Text, StyleSheet, View, Image } from 'react-native'; -import { Post } from '../../types/types'; +import { Text, StyleSheet, View, Image, TouchableOpacity } from 'react-native'; +//import { Post, PostType} from '../../types/types'; import Vote from './Vote'; +import Info from './Info'; +import { useNavigation } from '@react-navigation/native'; +import { OutsideProfileNavProp } from '../../types/navigationTypes'; type PostProps = { post: Post; }; +// running into a really weird comp error, see if these can be removed latter +export interface User { + id: string, + first_name: string; + last_name: string; + username: string; + image_url: string; +} + +type Post = { + User: User, + post_type: PostType, + num_data: number, + ticker_symbol: string, + comment: string, + title: string +} + +export enum PostType { + ONE_MONTH_SUMMARY = '1 month summary', + RECENT_TRADE = 'Recent Trade', + SHARE_COMMENT = 'Share comment' +} + const PostNew: React.FC = ({ post }) => { + console.log(post.post_type); + console.log(post); + console.log("Is this a recent trade?", post.post_type == PostType.RECENT_TRADE); + const navigation = useNavigation(); + const handlePress = () => { + navigation.navigate('Profile', + {screen: "FollowerProfile", params: { user: post.User} + }); +}; return ( - - - - - - - - {post.User.first_name} {post.User.last_name} - - - {post.title} - - - {post.comment} - - - - + + + + + + + {post.User.first_name} {post.User.last_name} + + {post.title} + {post.post_type == 'Recent trade' ? ( + + {post.num_data < 250 ? ( + + ) : ( + + )} + + ) : ( + {post.comment} + )} + + + + - ); }; @@ -78,7 +131,10 @@ const styles = StyleSheet.create({ marginTop: 10, width: 100, height: 20, - } + }, + info: { + marginTop: 10, + }, }); -export default PostNew; \ No newline at end of file +export default PostNew; diff --git a/frontend/components/TrendingUser.tsx b/frontend/components/TrendingUser.tsx index 611f2b55..90272f1b 100644 --- a/frontend/components/TrendingUser.tsx +++ b/frontend/components/TrendingUser.tsx @@ -1,8 +1,10 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment import React from 'react'; -import {Image, StyleSheet, Text, View} from 'react-native'; +import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import { Trending } from '../types/types'; import { AntDesign } from '@expo/vector-icons'; +import { OutsideProfileNavProp } from '../types/navigationTypes'; +import { useNavigation } from '@react-navigation/native'; type TrendingUserProps = { trending: Trending; @@ -11,9 +13,15 @@ index: number, const TrendingUser: React.FC = ({ trending, index }: TrendingUserProps) => { console.log(trending); + const navigation = useNavigation(); + const handlePress = () => { + navigation.navigate('Profile', + {screen: "FollowerProfile", params: { user: trending.trending_user_reference} + }); + }; return ( - + {/* Column for image */} {index + 1} @@ -56,7 +64,7 @@ const TrendingUser: React.FC = ({ trending, index }: Trending {Math.abs(trending.day_gain_pct)}% - + ); }; diff --git a/frontend/pages/Feed.tsx b/frontend/pages/Feed.tsx index 15439531..f236023b 100644 --- a/frontend/pages/Feed.tsx +++ b/frontend/pages/Feed.tsx @@ -1,6 +1,7 @@ import { createStackNavigator } from "@react-navigation/stack"; import React from "react"; import FeedPage from "./FeedPage"; +import Follow from "./Follow"; const Stack = createStackNavigator(); @@ -12,6 +13,11 @@ const Feed = () => { component={FeedPage} options={{ headerShown: false }} /> + ) } diff --git a/frontend/pages/Follow.tsx b/frontend/pages/Follow.tsx new file mode 100644 index 00000000..fe398e90 --- /dev/null +++ b/frontend/pages/Follow.tsx @@ -0,0 +1,259 @@ +import { TextInput, StyleSheet, View } from 'react-native'; +import React, { useEffect, useState } from 'react'; +import { SvgXml } from 'react-native-svg'; +import { SectionList } from 'react-native'; +import FeedTopBar from '../components/Feed/FeedTopBar'; +//import DiscoverPeople from '../components/Feed/DiscoverPeople'; +import PostNew from '../components/Feed/PostNew'; +import { getPosts } from '../services/users'; +import { Post } from '../types/types'; + +const AddSvg = ` + + + + + `; + +const Follow = () => { + const [search, setSearch] = useState(''); + const [tab, setTab] = useState('Following'); + const [firstPost, setFirstPost] = useState(null); + const [posts, setPosts] = useState([]); + + const handleSearchChange = (text: string) => { + setSearch(text); + }; + + useEffect(() => { + getPosts().then(data => { + setFirstPost(data[0]); + setPosts(data.slice(1)); + }); + }, []); + + return ( + + + + + + + {firstPost && ( + + + + )} + , + ], + }, + { + data: [ + + {posts.map(p => ( + + ))} + , + ], + }, + { + data: [], + }, + ]} + keyExtractor={(_, index) => index.toString()} + renderItem={({ item }) => <>{item}} + renderSectionHeader={() => } + stickySectionHeadersEnabled={false} + /> + + + + + + + + + + ); +}; + +export default Follow; + +const styles = StyleSheet.create({ + container: { + // boxSizing: 'border-box', + flexDirection: 'column', + height: '100%', + flex: 1, + backgroundColor: '#FFFFFF', + }, + top_bar: { + flex: 1, + }, + end: { + height: 100, + }, + list: { + flex: 5, + }, + title: { + color: 'rgba(102,102,102,1)', + fontFamily: 'Circular Std', + fontWeight: '500', + fontSize: 17, + opacity: 1, + textAlign: 'left', + paddingTop: 15, + }, + scroll_view: { + flexDirection: 'column', + paddingHorizontal: 25, + //flex: 10, + //height: "100%", + paddingTop: '15%', + paddingBottom: '50%', + }, + body: { + fontSize: 14, + }, + + name: { + color: '#fff', + }, + post_pos: { + marginTop: '15%', + width: '100%', + // background: 'url("../images/v124_1268.png")', + // backgroundRepeat: 'no-repeat', + // backgroundPosition: 'center center', + // backgroundSize: 'cover', + opacity: 1, + flexDirection: 'column', + // position: 'absolute', + }, + post_txt: { + marginTop: '20%', + width: '100%', + color: 'rgba(102,102,102,1)', + fontFamily: 'Circular Std', + marginBottom: 12, + fontWeight: '500', + fontSize: 17, + opacity: 1, + textAlign: 'center', + }, + posts: { + width: '100%', + // background: 'url("../images/v124_1270.png")', + // backgroundRepeat: 'no-repeat', + // backgroundPosition: 'center center', + // backgroundSize: 'cover', + opacity: 1, + overflow: 'hidden', + }, + ppl_sec: { + width: '100%', + // background: 'url("../images/v124_1286.png")', + // backgroundRepeat: 'no-repeat', + // backgroundPosition: 'center center', + // backgroundSize: 'cover', + opacity: 1, + overflow: 'hidden', + }, + search_bar: { + width: 350, + height: 48, + // background: 'url("../images/v124_1301.png")', + // backgroundRepeat: 'no-repeat', + // backgroundPosition: 'center center', + // backgroundSize: 'cover', + opacity: 1, + position: 'absolute', + top: 138, + left: 22, + overflow: 'hidden', + }, + search_box: { + width: '90%', + height: 48, + backgroundColor: 'rgba(247,247,247,1)', + opacity: 1, + position: 'absolute', + top: 138, + marginHorizontal: 22, + borderRadius: 52, + overflow: 'hidden', + }, + search_txt: { + width: '100%', + color: 'rgba(0,0,0,1)', + position: 'absolute', + paddingRight: 12, + top: 12, + left: 24, + // fontFamily: 'SF Pro Text', + fontWeight: '600', + fontSize: 17, + opacity: 0.6000000238418579, + textAlign: 'left', + }, + search_add: { + margin: 0, + // // opacity: 1, + position: 'absolute', + bottom: 18, + right: 22, + zIndex: 5, + overflow: 'hidden', + shadowColor: '#666666', + // paddingHorizontal: 20, + }, + horizontalLine: { + borderBottomColor: 'lightgrey', + borderBottomWidth: 2, + // marginVertical: 0, + }, + horizontalLine2: { + borderBottomColor: 'lightgrey', + borderBottomWidth: 2, + marginVertical: 0, + }, + horizontalLine3: { + borderBottomWidth: 2, + borderBottomColor: 'lightgrey', + }, + horizontalLine4: { + borderBottomWidth: 2, + borderBottomColor: 'black', + }, + button1: { + width: 493, + height: 160, + position: 'absolute', + top: 15, + left: 0, + justifyContent: 'center', + alignItems: 'center', + }, + button2: { + width: 493, + height: 160, + position: 'absolute', + bottom: 40, + left: 0, + justifyContent: 'center', + alignItems: 'center', + }, +}); diff --git a/frontend/router/BottomNavBar.tsx b/frontend/router/BottomNavBar.tsx index 0b160e30..71baddae 100644 --- a/frontend/router/BottomNavBar.tsx +++ b/frontend/router/BottomNavBar.tsx @@ -2,9 +2,9 @@ import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { Icon } from '@rneui/themed'; import { RouteProp } from '@react-navigation/native'; -import FeedPage from '../pages/FeedPage'; import ProfileNavigator from './ProfileNavigation'; import Leaderboard from '../pages/Leaderboard'; +import Feed from '../pages/Feed'; const Tab = createBottomTabNavigator(); type TabRouteName = @@ -44,7 +44,7 @@ const BottomNavBar = () => { })}>