Skip to content

Commit

Permalink
Adding new post types (#53)
Browse files Browse the repository at this point in the history 
* Adding new post types

* fixing lint

* all navigation to person added

* linter pass

* once more
  • Loading branch information
@leoRysing
leoRysing authored Apr 18, 2024
1 parent 9f62fc3 commit 5f7c851
Show file tree
Hide file tree
Showing 8 changed files with 553 additions and 84 deletions.
128 changes: 72 additions & 56 deletions frontend/components/Feed/FeedTopBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<React.SetStateAction<string>>,
}
type FeedBarProps = {
tab: string;
setTab: React.Dispatch<React.SetStateAction<string>>;
};

const FeedTopBar: React.FC<FeedBarProps> = ({tab, setTab}) => {
return (
<View style={styles.top_bar}>
<Text
style={tab == 'Explore' ? styles.explore : styles.follow}
onPress={() => setTab('Explore')}>
Explore
</Text>
<Text
style={tab == 'Following' ? styles.explore : styles.follow}
onPress={() => setTab('Following')}>
Following
</Text>
</View>
)
}
const FeedTopBar: React.FC<FeedBarProps> = ({ tab, setTab }) => {
const navigation = useNavigation<AuthNavigationProp>();

const handleButtonPress = () => {
setTab('Explore')
navigation.navigate('Feed');
};

const handleButtonPress2 = () => {
setTab('Explore')
navigation.navigate('Follow');
};

return (
<View style={styles.top_bar}>
<Text
style={tab == 'Explore' ? styles.explore : styles.follow}
onPress={handleButtonPress}>
Explore
</Text>
<Text
style={tab == 'Following' ? styles.explore : styles.follow}
onPress={handleButtonPress2}>
Following
</Text>
</View>
);
};

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',
},
})
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',
},
});
122 changes: 122 additions & 0 deletions frontend/components/Feed/Info.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<PostProps> = ({ type, company, price, percent }) => {
if (type == 1) {
return (
<View
style={{
flexDirection: 'row',
paddingLeft: 15,
paddingRight: 15,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: 'rgba(2, 173, 152, 0.10)',
borderRadius: 5,
width: 220,
}}>
<View
style={{
flexDirection: 'row',
}}>
<Text
style={{
color: '#02AD98',
fontSize: 16,
fontFamily: 'SF Pro Text',
fontWeight: '400',
width: 40,
}}>
BUY
</Text>
<Text
style={{
color: '#121212',
fontSize: 16,
fontFamily: 'SF Pro Text',
fontWeight: '400',
width: 120,
}}>
{company} @ {price}
</Text>
</View>
<View>
<Text
style={{
color: '#02AD98',
fontSize: 17,
fontFamily: 'SF Pro',
lineHeight: 20,
}}>
{percent}%
</Text>
</View>
</View>
);
}
if (type == 2) {
return (
<View
style={{
flexDirection: 'row',
paddingLeft: 15,
paddingRight: 15,
paddingTop: 10,
paddingBottom: 10,
backgroundColor: 'rgba(255, 43, 81, 0.1)',
borderRadius: 5,
width: 220,
}}>
<View
style={{
flexDirection: 'row',
}}>
<Text
style={{
color: '#FF2B51',
fontSize: 16,
fontFamily: 'SF Pro Text',
fontWeight: '400',
width: 40,
}}>
BUY
</Text>
<Text
style={{
color: '#121212',
fontSize: 16,
fontFamily: 'SF Pro Text',
fontWeight: '400',
width: 120,
}}>
{company} @ {price}
</Text>
</View>
<View>
<Text
style={{
color: '#FF2B51',
fontSize: 17,
fontFamily: 'SF Pro',
lineHeight: 20,
}}>
17%
</Text>
</View>
</View>
);
}
};

// Define the styles for the component

export default Info;
102 changes: 79 additions & 23 deletions frontend/components/Feed/PostNew.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<PostProps> = ({ 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<OutsideProfileNavProp>();

const handlePress = () => {
navigation.navigate('Profile',
{screen: "FollowerProfile", params: { user: post.User}
});
};
return (
<View style={styles.border}>
<View style={styles.container}>
<View style={styles.profile}>
<Image style={styles.image} source={{uri: post.User.image_url}}>
</Image>
</View>
<View style={styles.body}>
<Text style={styles.name}>
{post.User.first_name} {post.User.last_name}
</Text>
<Text style={styles.title}>
{post.title}
</Text>
<Text style={styles.comment}>
{post.comment}
</Text>
<View style={styles.vote}>
<Vote />
</View>
<View style={styles.container}>
<TouchableOpacity style={styles.profile} onPress={handlePress}>
<Image
style={styles.image}
source={{ uri: post.User.image_url }}></Image>
</TouchableOpacity>
<View style={styles.body}>
<Text style={styles.name} onPress={handlePress}>
{post.User.first_name} {post.User.last_name}
</Text>
<Text style={styles.title}>{post.title}</Text>
{post.post_type == 'Recent trade' ? (
<View style={styles.info}>
{post.num_data < 250 ? (
<Info
type={1}
company={post.ticker_symbol} //post.ticker_symbol
price={post.num_data} //post.num_data
percent={17}
/>
) : (
<Info
type={2}
company={post.ticker_symbol} //post.ticker_symbol
price={post.num_data} //post.num_data
percent={17}
/>
)}
</View>
) : (
<Text style={styles.comment}>{post.comment}</Text>
)}
<View style={styles.vote}>
<Vote />
</View>
</View>
</View>
</View>
</View>
);
};

Expand Down Expand Up @@ -78,7 +131,10 @@ const styles = StyleSheet.create({
marginTop: 10,
width: 100,
height: 20,
}
},
info: {
marginTop: 10,
},
});

export default PostNew;
export default PostNew;
Loading

0 comments on commit 5f7c851

Please sign in to comment.