From 4bb56484e88a0bd93b74ea0a883907369b6e1702 Mon Sep 17 00:00:00 2001 From: JLetsGitIt Date: Thu, 18 Apr 2024 23:56:12 -0400 Subject: [PATCH] feed page nav --- frontend/components/Feed/FeedTopBar.tsx | 126 +++++++----- frontend/components/Feed/Info.tsx | 173 ++++++++++++++++ frontend/components/Feed/PostNew.tsx | 65 ++++-- frontend/pages/FeedPage.tsx | 244 ++++++++++++++++------ frontend/pages/Follow.tsx | 259 ++++++++++++++++++++++++ frontend/types/navigationTypes.ts | 2 + frontend/types/types.d.ts | 2 +- 7 files changed, 734 insertions(+), 137 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..8b98797f 100644 --- a/frontend/components/Feed/FeedTopBar.tsx +++ b/frontend/components/Feed/FeedTopBar.tsx @@ -1,62 +1,76 @@ -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 = () => { + navigation.navigate('FeedPage'); + }; + + const handleButtonPress2 = () => { + 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..b0650c8d --- /dev/null +++ b/frontend/components/Feed/Info.tsx @@ -0,0 +1,173 @@ +import { Text, StyleSheet, View, Image } 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 +const styles = StyleSheet.create({ + border: { + width: '100%', + borderColor: '#C2C2C2', + borderBottomWidth: 1, + }, + container: { + flex: 1, + flexDirection: 'row', + width: '100%', + marginTop: 15, + marginBottom: 15, + marginRight: 20, + }, + profile: { + width: '15%', + }, + image: { + width: 40, + height: 40, + marginRight: 15, + borderRadius: 50, + }, + body: { + width: '85%', + }, + title: { + fontWeight: '500', + }, + name: { + fontWeight: '500', + color: '#666666', + marginBottom: 7, + fontSize: 16, + }, + comment: { + color: '#666666', + }, + vote: { + left: 0, + top: 60, + width: 20, + height: 20, + zIndex: 1, + }, + add: { + bottom: 0, + right: 0, + zIndex: 1, + }, +}); + +export default Info; diff --git a/frontend/components/Feed/PostNew.tsx b/frontend/components/Feed/PostNew.tsx index 5dcb2314..7a3c4a12 100644 --- a/frontend/components/Feed/PostNew.tsx +++ b/frontend/components/Feed/PostNew.tsx @@ -1,36 +1,54 @@ import { Text, StyleSheet, View, Image } from 'react-native'; import { Post } from '../../types/types'; import Vote from './Vote'; +import Info from './Info'; type PostProps = { post: Post; }; const PostNew: React.FC = ({ post }) => { - + console.log(post.post_type); 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 +96,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/pages/FeedPage.tsx b/frontend/pages/FeedPage.tsx index badf0b1c..74fc7ec5 100644 --- a/frontend/pages/FeedPage.tsx +++ b/frontend/pages/FeedPage.tsx @@ -3,6 +3,7 @@ import { StyleSheet, View, Text, + TouchableOpacity, } from 'react-native'; import React, { useEffect, useState } from 'react'; import { SvgXml } from 'react-native-svg'; @@ -22,8 +23,8 @@ const AddSvg = ` const FeedPage = () => { const [search, setSearch] = useState(''); - const [tab, setTab] = useState('Explore') - const [firstPost, setFirstPost] = useState(null) + const [tab, setTab] = useState('Explore'); + const [firstPost, setFirstPost] = useState(null); const [posts, setPosts] = useState([]); const handleSearchChange = (text: string) => { @@ -32,82 +33,140 @@ const FeedPage = () => { useEffect(() => { getPosts().then(data => { - setFirstPost(data[0]) + setFirstPost(data[0]); setPosts(data.slice(1)); }); }, []); + const [yes, setYes] = useState(1); + const handleClick1 = () => { + setYes(2); + }; + + const handleClick2 = () => { + setYes(1); + }; + return ( - - + + {/* */} + Explore + + + + Following + + - - + + {/* + + + + + */} + + {yes == 1 ? ( - { - firstPost && + {firstPost && ( - Featured Post - + Featured Post + - } - - - ] + )} + , + ], }, { data: [ - - ] + , + ], }, { data: [ - { - posts.map((p) => ( - - )) - } - - ] + {posts.map(p => ( + + ))} + , + ], }, { - data: [ - - ] - } - + data: [], + }, ]} keyExtractor={(_, index) => index.toString()} renderItem={({ item }) => <>{item}} renderSectionHeader={() => } stickySectionHeadersEnabled={false} /> - - - - + {firstPost && ( + + Featured Post + + + )} + , + ], + }, + { + data: [ + + {posts.map(p => ( + + ))} + , + ], + }, + { + data: [], + }, + ]} + keyExtractor={(_, index) => index.toString()} + renderItem={({ item }) => <>{item}} + renderSectionHeader={() => } + stickySectionHeadersEnabled={false} /> - - + )} + + + + + - + ); @@ -118,13 +177,54 @@ export default FeedPage; const styles = StyleSheet.create({ container: { // boxSizing: 'border-box', - flexDirection: "column", - height: "100%", + flexDirection: 'column', + height: '100%', flex: 1, - backgroundColor: "#FFFFFF" + backgroundColor: '#FFFFFF', }, top_bar: { flex: 1, + // width: 393, + // height: 65, + // backgroundColor: '#F7F7F7', + // // backgroundRepeat: 'no-repeat', + // // backgroundPosition: 'center center', + // // backgroundSize: 'cover', + // padding: 20, + // margin: 100, + // position: 'absolute', + // top: -49, + // left: -100, + // overflow: 'hidden', + // zIndex: 2, + }, + explore: { + width: 67, + color: 'rgba(0,0,0,1)', + position: 'absolute', + top: 75, + left: 55, + // top: 30, + // left: 55, + // fontFamily: 'Circular Std', + fontWeight: '500', + fontSize: 17, + opacity: 1, + textAlign: 'center', + }, + follow: { + width: 83, + color: 'rgba(102,102,102,1)', + position: 'absolute', + top: 75, + right: 75, + // top: 30, + // right: 65, + // fontFamily: 'Circular Std', + fontWeight: '500', + fontSize: 17, + opacity: 1, + textAlign: 'center', }, end: { height: 100, @@ -140,14 +240,14 @@ const styles = StyleSheet.create({ opacity: 1, textAlign: 'left', paddingTop: 15, -}, + }, scroll_view: { flexDirection: 'column', paddingHorizontal: 25, //flex: 10, //height: "100%", - paddingTop: "15%", - paddingBottom: "50%" + paddingTop: '15%', + paddingBottom: '50%', }, body: { fontSize: 14, @@ -157,19 +257,19 @@ const styles = StyleSheet.create({ color: '#fff', }, post_pos: { - marginTop: "15%", + marginTop: '15%', width: '100%', // background: 'url("../images/v124_1268.png")', // backgroundRepeat: 'no-repeat', // backgroundPosition: 'center center', // backgroundSize: 'cover', opacity: 1, - flexDirection: "column" + flexDirection: 'column', // position: 'absolute', }, post_txt: { - marginTop: "20%", - width: "100%", + marginTop: '20%', + width: '100%', color: 'rgba(102,102,102,1)', fontFamily: 'Circular Std', marginBottom: 12, @@ -179,7 +279,7 @@ const styles = StyleSheet.create({ textAlign: 'center', }, posts: { - width: "100%", + width: '100%', // background: 'url("../images/v124_1270.png")', // backgroundRepeat: 'no-repeat', // backgroundPosition: 'center center', @@ -188,7 +288,7 @@ const styles = StyleSheet.create({ overflow: 'hidden', }, ppl_sec: { - width: "100%", + width: '100%', // background: 'url("../images/v124_1286.png")', // backgroundRepeat: 'no-repeat', // backgroundPosition: 'center center', @@ -210,7 +310,7 @@ const styles = StyleSheet.create({ overflow: 'hidden', }, search_box: { - width: "90%", + width: '90%', height: 48, backgroundColor: 'rgba(247,247,247,1)', opacity: 1, @@ -221,7 +321,7 @@ const styles = StyleSheet.create({ overflow: 'hidden', }, search_txt: { - width: "100%", + width: '100%', color: 'rgba(0,0,0,1)', position: 'absolute', paddingRight: 12, @@ -241,7 +341,7 @@ const styles = StyleSheet.create({ right: 22, zIndex: 5, overflow: 'hidden', - shadowColor: "#666666", + shadowColor: '#666666', // paddingHorizontal: 20, }, horizontalLine: { @@ -280,4 +380,32 @@ const styles = StyleSheet.create({ justifyContent: 'center', alignItems: 'center', }, + follow_but: { + width: 200, + height: 65, + // backgroundRepeat: 'no-repeat', + // backgroundPosition: 'center center', + // backgroundSize: 'cover', + padding: 20, + margin: 100, + position: 'absolute', + top: -50, + right: -100, + overflow: 'hidden', + zIndex: 1, + }, + explore_but: { + width: 200, + height: 65, + // backgroundRepeat: 'no-repeat', + // backgroundPosition: 'center center', + // backgroundSize: 'cover', + padding: 20, + margin: 100, + position: 'absolute', + top: -50, + left: -100, + overflow: 'hidden', + zIndex: 1, + }, }); diff --git a/frontend/pages/Follow.tsx b/frontend/pages/Follow.tsx new file mode 100644 index 00000000..0c172f20 --- /dev/null +++ b/frontend/pages/Follow.tsx @@ -0,0 +1,259 @@ +import { TextInput, StyleSheet, View, Text } 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/types/navigationTypes.ts b/frontend/types/navigationTypes.ts index 07afc7e1..14d18c3f 100644 --- a/frontend/types/navigationTypes.ts +++ b/frontend/types/navigationTypes.ts @@ -20,6 +20,8 @@ export type RootStackParamList = { ProfilePage: undefined; FollowerProfile: { user: User } Followers: { label: string, users: User[] }; + Follow: undefined; + FeedPage: undefined; // AuthPage: undefined; // TutorialPage: undefined; diff --git a/frontend/types/types.d.ts b/frontend/types/types.d.ts index a707f1e1..8705b633 100644 --- a/frontend/types/types.d.ts +++ b/frontend/types/types.d.ts @@ -159,6 +159,6 @@ enum TradeType { } export enum PostType { ONE_MONTH_SUMMARY = '1 month summary', - RECENT_TRADE = 'Recent Trade', + RECENT_TRADE = 'Recent trade', SHARE_COMMENT = 'Share comment' }