Skip to content

Commit ac7550c

Browse files
aseerktaseerkt
committed
extracted user posts into its own component
1 parent f26be71 commit ac7550c

File tree

4 files changed

+72
-42
lines changed

4 files changed

+72
-42
lines changed

‎client/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const App: React.FC = () => {
2828
return (
2929
<BrowserRouter>
3030
<MessageProvider>
31-
<div className='mb-10'>
31+
<div className='pb-10'>
3232
<Switch>
3333
<PrivateRoute exact path='/' component={Posts} />
3434
<Route exact path='/login' component={Login} />

‎client/src/components/UserPosts.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import { AiFillHeart } from 'react-icons/ai';
3+
import { RiChat3Fill } from 'react-icons/ri';
4+
import { Link } from 'react-router-dom';
5+
import Alert from '../components-ui/Alert';
6+
import Spinner from '../components-ui/Spinner';
7+
import { useGetUserQuery } from '../generated/graphql';
8+
9+
const UserPosts: React.FC<{ username: string }> = ({ username }) => {
10+
const { data, loading, error } = useGetUserQuery({
11+
variables: { username },
12+
});
13+
if (loading) {
14+
return <Spinner />;
15+
} else if (error) {
16+
console.log(error);
17+
<Alert severity='danger'>{JSON.stringify(error)}</Alert>;
18+
}
19+
const { posts } = data!.getUser!;
20+
return (
21+
<section className='grid grid-cols-2 gap-1 mt-2 md:grid-cols-3 md:gap-4'>
22+
{posts.length === 0 && (
23+
<strong className='col-start-2 text-gray-500'>No Posts Uploaded</strong>
24+
)}
25+
{posts.map(({ imgURL, comments, likeCount, id }) => (
26+
<Link key={id} className='relative w-full h-32 md:h-64' to={`/p/${id}`}>
27+
<img
28+
className='z-10 object-cover w-full h-full'
29+
src={imgURL}
30+
alt=''
31+
/>
32+
<div className='absolute top-0 left-0 z-20 flex items-center justify-center w-full h-full text-lg text-white text-opacity-100 bg-black opacity-0 bg-opacity-30 hover:opacity-100'>
33+
<div className='flex items-center'>
34+
<div className='z-30 flex items-center mr-2'>
35+
<AiFillHeart />
36+
<strong className='ml-1'>{likeCount}</strong>
37+
</div>
38+
<div className='z-30 flex items-center ml-2'>
39+
<RiChat3Fill />
40+
<strong className='ml-1'>{comments.length}</strong>
41+
</div>
42+
</div>
43+
</div>
44+
</Link>
45+
))}
46+
</section>
47+
);
48+
};
49+
50+
export default UserPosts;

‎client/src/routes/Profile.tsx‎

Lines changed: 6 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,20 @@ import { Link, useParams } from 'react-router-dom';
22
import Avatar from '../components-ui/Avatar';
33
import Container from '../components-ui/Container';
44
import Spinner from '../components-ui/Spinner';
5-
import { useGetUserQuery, MeDocument } from '../generated/graphql';
6-
import { AiOutlineTable, AiFillHeart } from 'react-icons/ai';
7-
import { RiChat3Fill } from 'react-icons/ri';
5+
import { useGetUserQuery, useMeQuery } from '../generated/graphql';
6+
import { AiOutlineTable } from 'react-icons/ai';
87
import Button from '../components-ui/Button';
98
import Alert from '../components-ui/Alert';
10-
import { useApolloClient } from '@apollo/client';
9+
import UserPosts from '../components/UserPosts';
1110

1211
const Profile: React.FC = () => {
13-
const apolloClient = useApolloClient();
14-
const { me } = apolloClient.readQuery({ query: MeDocument });
12+
const { data: meData } = useMeQuery({ fetchPolicy: 'cache-only' });
13+
const me = meData!.me!;
1514

1615
const params: any = useParams();
1716

1817
const { data, loading, error } = useGetUserQuery({
1918
variables: { username: params.username as string },
20-
fetchPolicy: 'network-only',
2119
});
2220
if (loading) {
2321
return <Spinner />;
@@ -85,38 +83,7 @@ const Profile: React.FC = () => {
8583
</header>
8684
</section>
8785
{/* Posts Grid */}
88-
<section className='grid grid-cols-2 gap-1 mt-2 md:grid-cols-3 md:gap-4'>
89-
{posts.length === 0 && (
90-
<strong className='col-start-2 text-gray-500'>
91-
No Posts Uploaded
92-
</strong>
93-
)}
94-
{posts.map(({ imgURL, comments, likeCount, id }) => (
95-
<Link
96-
key={id}
97-
className='relative w-full h-32 md:h-64'
98-
to={`/p/${id}`}
99-
>
100-
<img
101-
className='z-10 object-cover w-full h-full'
102-
src={imgURL}
103-
alt=''
104-
/>
105-
<div className='absolute top-0 left-0 z-20 flex items-center justify-center w-full h-full text-lg text-white text-opacity-100 bg-black opacity-0 bg-opacity-30 hover:opacity-100'>
106-
<div className='flex items-center'>
107-
<div className='z-30 flex items-center mr-2'>
108-
<AiFillHeart />
109-
<strong className='ml-1'>{likeCount}</strong>
110-
</div>
111-
<div className='z-30 flex items-center ml-2'>
112-
<RiChat3Fill />
113-
<strong className='ml-1'>{comments.length}</strong>
114-
</div>
115-
</div>
116-
</div>
117-
</Link>
118-
))}
119-
</section>
86+
<UserPosts username={params.username} />
12087
</Container>
12188
);
12289
}

‎client/src/routes/SinglePost.tsx‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Spinner from '../components-ui/Spinner';
88
import AddComment from '../components/AddComment';
99
import PostActions from '../components/PostActions';
1010
import PostOptions from '../components/PostOptions';
11+
import UserPosts from '../components/UserPosts';
1112
import { Post, useGetSinglePostQuery } from '../generated/graphql';
1213

1314
const SinglePost = () => {
@@ -61,9 +62,9 @@ const SinglePost = () => {
6162
</div>
6263
<div className='static bottom-0 right-0 flex flex-col justify-between md:border-l md:border-gray-300 md:absolute top-20 md:w-80'>
6364
<div className='flex flex-col justify-between h-full pt-2'>
64-
{/* Post Caption */}
6565
<div className='px-3 overflow-y-auto min-h-48'>
66-
<div className='flex mb-3'>
66+
{/* Post Caption */}
67+
<div className='flex pb-2 mb-3 border-b'>
6768
<Link
6869
to={`/u/${user.username}`}
6970
className='mr-2 font-semibold '
@@ -144,6 +145,18 @@ const SinglePost = () => {
144145
</div>
145146
</div>
146147
</Card>
148+
<section className='pt-10 mt-10 border-t'>
149+
<h3 className='mb-3 font-bold text-gray-500'>
150+
More posts from
151+
<Link
152+
to={`/u/${user.username}`}
153+
className='ml-1 font-semibold text-black hover:underline'
154+
>
155+
{user.username}
156+
</Link>
157+
</h3>
158+
<UserPosts username={user.username} />
159+
</section>
147160
</Container>
148161
);
149162
}

0 commit comments

Comments
 (0)