Skip to content

Commit

Permalink
Feature: Add PostDetails view to see comments (keep-starknet-strange#104
Browse files Browse the repository at this point in the history
)

-Add new view to see Post with comments
-Update UI of Post cards
  • Loading branch information
BlackStarkGoku authored May 24, 2024
1 parent 22e4951 commit 30a8017
Show file tree
Hide file tree
Showing 8 changed files with 388 additions and 39 deletions.
4 changes: 2 additions & 2 deletions JoyboyCommunity/src/app/Router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {useMemo} from 'react';
import {useTheme} from 'styled-components/native';

import Error from '../modules/error';
import Feed from '../modules/feed';
import FeedStackScreen from '../modules/feed/FeedStackScreen';
import Login from '../modules/login';
import Notifications from '../modules/notifications';
import CreatePost from '../modules/post';
Expand Down Expand Up @@ -39,7 +39,7 @@ const HomeBottomTabNavigator: React.FC = () => {
>
<HomeBottomTabsStack.Screen
name="Feed"
component={Feed}
component={FeedStackScreen}
options={{
tabBarActiveTintColor: 'white',
tabBarInactiveTintColor: 'grey',
Expand Down
24 changes: 24 additions & 0 deletions JoyboyCommunity/src/modules/feed/FeedStackScreen.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import {createStackNavigator} from '@react-navigation/stack';

import PostDetails from '../../shared/components/PostDetails';
import Feed from '.';

const FeedStack = createStackNavigator();

function FeedStackScreen() {
return (
<FeedStack.Navigator>
<FeedStack.Screen name="Feed" component={Feed} />
<FeedStack.Screen
name="PostDetails"
component={PostDetails}
options={{
title: 'Feed',
headerLeft: () => null,
}}
/>
</FeedStack.Navigator>
);
}

export default FeedStackScreen;
8 changes: 1 addition & 7 deletions JoyboyCommunity/src/modules/feed/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {ActivityIndicator, SafeAreaView, View} from 'react-native';
import {FlatList, RefreshControl} from 'react-native-gesture-handler';
import styled from 'styled-components/native';

import {Divider} from '../../components';
import {useNostr} from '../../hooks/useNostr';
import {Post} from '../../shared/components/Post';
import FloatingPostButton from './FloatingPostButton';
Expand Down Expand Up @@ -52,7 +51,7 @@ export default function Feed() {
}, []);

return (
<SafeAreaView style={{flex: 1}}>
<SafeAreaView style={{flex: 1, backgroundColor: '#f4f7fe'}}>
<View style={{paddingTop: 12, paddingBottom: 18}}>
<FlatList
horizontal={true}
Expand Down Expand Up @@ -92,11 +91,6 @@ export default function Feed() {
/>
);
}}
ItemSeparatorComponent={() => (
<View style={{marginVertical: 18}}>
<Divider />
</View>
)}
refreshControl={<RefreshControl refreshing={loading} onRefresh={handeGetData} />}
/>

Expand Down
92 changes: 92 additions & 0 deletions JoyboyCommunity/src/shared/components/Comments.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import React from 'react';
import {FlatList, View} from 'react-native';

import PostComment from './PostComment';

const mockEvents = [
{
post: {
content: 'mock content',
author: 'Roronoa zoro',

id: '1',
created_at: '2021-09-01T00:00:00Z',
pubkey: '1234567890',
},
event: {
content: 'Lets say that One Piece is awesome',
created_at: 1680638952,
id: '12e701f23d365c558e7aa1a6f75f0477fb8593d4ad8421c4b326f8193ed42fc7',
kind: 1,
pubkey: '49e2566f8b1ef0da8aeb89865a862ead30dd5e1fc1e540edebf980a04fe9e853',
sig: 'c931395c5db7538d159d6012115b0db9b1d9a5ada52132437cddc1790982727555d0d618f109fce372f0ca0ae33d29a8d3ffae1af879e278fc2ce3c6d123c658',
tags: [
['e', 'a8de2eb8a069fecd33246cd921124541d6242ea76ee85c38bf45ee9b5fb3feb5'],
['p', '1989034e56b8f606c724f45a12ce84a11841621aaf7182a1f6564380b9c4276b'],
],
},
sourceUser: null,
},
{
post: {
content: 'mock content',
author: 'Roronoa zoro',

id: '1',
created_at: '2021-09-01T00:00:00Z',
pubkey: '1234567890',
},
event: {
content: 'What about Naruto?',
created_at: 1680638952,
id: '12e701f23d365c558e7aa1a6f75f0477fb8593d4ad8421c4b326f8193ed42fc7',
kind: 1,
pubkey: '49e2566f8b1ef0da8aeb89865a862ead30dd5e1fc1e540edebf980a04fe9e853',
sig: 'c931395c5db7538d159d6012115b0db9b1d9a5ada52132437cddc1790982727555d0d618f109fce372f0ca0ae33d29a8d3ffae1af879e278fc2ce3c6d123c658',
tags: [
['e', 'a8de2eb8a069fecd33246cd921124541d6242ea76ee85c38bf45ee9b5fb3feb5'],
['p', '1989034e56b8f606c724f45a12ce84a11841621aaf7182a1f6564380b9c4276b'],
],
},
sourceUser: null,
},
{
post: {
content: 'mock content',
author: 'Roronoa zoro',

id: '1',
created_at: '2021-09-01T00:00:00Z',
pubkey: '1234567890',
},
event: {
content: 'Yeaaaah Naruto is sick',
created_at: 1680638952,
id: '12e701f23d365c558e7aa1a6f75f0477fb8593d4ad8421c4b326f8193ed42fc7',
kind: 1,
pubkey: '49e2566f8b1ef0da8aeb89865a862ead30dd5e1fc1e540edebf980a04fe9e853',
sig: 'c931395c5db7538d159d6012115b0db9b1d9a5ada52132437cddc1790982727555d0d618f109fce372f0ca0ae33d29a8d3ffae1af879e278fc2ce3c6d123c658',
tags: [
['e', 'a8de2eb8a069fecd33246cd921124541d6242ea76ee85c38bf45ee9b5fb3feb5'],
['p', '1989034e56b8f606c724f45a12ce84a11841621aaf7182a1f6564380b9c4276b'],
],
},
sourceUser: null,
},
];
function Comments() {
return (
<FlatList
horizontal={false}
scrollEnabled={false}
showsHorizontalScrollIndicator={false}
data={mockEvents}
ItemSeparatorComponent={() => <View style={{height: 18}} />}
renderItem={({item}) => {
return <PostComment event={item.event} post={item.post} sourceUser={item.sourceUser} />;
}}
/>
);
}

export default Comments;
91 changes: 61 additions & 30 deletions JoyboyCommunity/src/shared/components/Post.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,25 @@ import styled from 'styled-components/native';
import {Typography} from '../../components';
import {Post as PostType, RootStackNavigationProps} from '../../types';

const PostCard = styled(View)`
background-color: #ffffff;
border-radius: 16px;
padding: 8px;
margin: 0 20px 18px 20px;
`;
const PostLayout = styled(View)`
flex-direction: row;
gap: 18px;
padding: 0px 12px;
`;

export const InteractionContainer = styled(View)`
margin-vertical: 10px;
margin-horizontal: 20px;
margin-top: 30px;
width: 100%;
display: flex;
gap: 8px;
flex-direction: row;
align-content: center;
align-self: center;
justify-content: space-between;
`;

export const Icon = styled(View)`
Expand All @@ -47,24 +52,30 @@ export const Post: React.FC<PostProps> = (props) => {
/** @TODO comment in Nostr */
const handleComment = () => {};

/** @TODO comment in Nostr */
const handleLike = () => {};

/** @TODO repost in Nostr */
const handleRepostNote = () => {
alert('Handle repost');
};

const handleNavigateToPostDetails = () => {
navigation.navigate('PostDetails', {post, event, repostedEvent, sourceUser: props.sourceUser});
};
/** @TODO react in Nostr */
const handleReact = () => {};

return (
<View>
<PostCard>
{repostedEvent && (
<View>
<Typography>Reposted</Typography>
</View>
)}
{/* TODO different rendering base on kind =1,6,7 and tags for kind = 1 */}
<PostLayout>
<View style={{flex: 0.1}}>
<View style={{marginRight: 10}}>
<Pressable onPress={() => handleProfilePress(event?.pubkey)}>
<Image
source={props?.sourceUser ?? require('../../../assets/joyboy-logo.png')}
Expand All @@ -73,43 +84,63 @@ export const Post: React.FC<PostProps> = (props) => {
</Pressable>
</View>

<View style={{gap: 4, flex: 0.9}}>
<Text style={{color: 'black', fontWeight: '700'}}>{event?.pubkey}</Text>
<Text style={{color: 'black'}}>
{repostedEvent?.content ? repostedEvent?.content : event?.content}
</Text>
<View style={{gap: 4, flex: 1}}>
<Pressable onPress={handleNavigateToPostDetails}>
<Text style={{color: 'black', fontWeight: '700'}}>{event?.pubkey}</Text>

{post?.source && (
<Image
source={{uri: post.source}}
style={{
width: '100%',
{post?.source && (
<Image
source={{uri: post.source}}
style={{
width: '100%',

height: 200,
borderRadius: 8,
marginTop: 8,
}}
/>
)}
height: 200,
borderRadius: 8,
marginTop: 8,
}}
/>
)}
</Pressable>
</View>

{/* TODO check tags if it's:
quote
repost
reply */}
<Icon
as={Octicons}
name="heart"
size={24}
color="black"
onPress={handleLike}
style={{alignSelf: 'center'}}
/>
</PostLayout>

<Pressable onPress={handleNavigateToPostDetails}>
<Text style={{color: 'black', marginTop: 10}}>
{repostedEvent?.content ? repostedEvent?.content : event?.content}
</Text>
</Pressable>
<InteractionContainer>
<Icon as={Octicons} name="comment" size={24} color="black" onPress={handleComment} />
<Icon as={Octicons} name="share" size={24} color="black" onPress={handleRepostNote} />

<Pressable onPress={handleNavigateToPostDetails} style={{flex: 1}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}
>
<Icon as={Octicons} name="comment" size={18} color="#406686" onPress={handleComment} />
<Text style={{color: '#406686', fontWeight: '500', fontSize: 11}}>16 comments</Text>
</View>
</Pressable>
<Icon
as={MaterialIcons}
name="add-reaction"
size={24}
color="black"
name="more-horiz"
size={18}
color="#406686"
onPress={handleReact}
/>
</InteractionContainer>
</View>
</PostCard>
);
};
62 changes: 62 additions & 0 deletions JoyboyCommunity/src/shared/components/PostComment.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import {Octicons} from '@expo/vector-icons';
import {Event as EventNostr} from 'nostr-tools';
import React from 'react';
import {Image, Text, View} from 'react-native';
import styled from 'styled-components/native';

import {Post as PostType} from '../../types';
import {Icon} from './Post';

const PostCommentCard = styled(View)`
padding: 18px 10px;
border-bottom-width: 1;
border-bottom-color: #eff0f1;
`;

const PostLayout = styled(View)`
flex-direction: row;
`;

interface PostCommentProps {
post?: PostType;
event?: EventNostr;
sourceUser?: string;
}
export const PostComment: React.FC<PostCommentProps> = (props) => {
const {post, event, sourceUser} = props;

return (
<PostCommentCard>
<PostLayout>
<View style={{marginRight: 10}}>
<Image
source={sourceUser ?? require('../../../assets/joyboy-logo.png')}
style={{width: 44, height: 44}}
/>
</View>

<View style={{gap: 4, flex: 1}}>
<Text style={{color: 'black', fontWeight: '700'}}>{event?.pubkey}</Text>

{post?.source && (
<Image
source={{uri: post.source}}
style={{
width: '100%',

height: 200,
borderRadius: 8,
marginTop: 8,
}}
/>
)}
</View>

<Icon as={Octicons} name="heart" size={24} color="black" style={{alignSelf: 'center'}} />
</PostLayout>
<Text style={{color: 'black', marginTop: 10}}>{event?.content}</Text>
</PostCommentCard>
);
};

export default PostComment;
Loading

0 comments on commit 30a8017

Please sign in to comment.