ruidy/devbook_ts
1
0
Fork 0
mirror of https://github.com/rjNemo/devbook_ts synced 2026-06-09 03:56:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

switch picture to avatarUrl; addLike and removeLike methods placeholders

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-18 08:50:54 +02:00
parent b567eb7278
commit e02262ce19
4 changed files with 24 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/models/Post.ts
View file

@ -8,7 +8,7 @@ interface Post {
userID: string;
name: string;
text: string;
picture: string;
avatarUrl: string;
likes: string[];
comments: Comment[];
// date: Date;
@ -20,21 +20,21 @@ interface Post {
export const dummyPost: Post = {
id: '12',
userID: '42',
picture:
avatarUrl:
'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
name: 'John Doe',
text:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint possimus corporis sunt necessitatibus! Minus nesciunt soluta suscipit nobis. Amet accusamus distinctio cupiditate blanditiis dolor? Illo perferendis eveniet cum cupiditate aliquam?',
comments: [
{
picture:
avatarUrl:
'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
name: 'John Doe',
text:
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sintpossimus corporis sunt necessitatibus! Minus nesciunt solutasuscipit nobis. Amet accusamus distinctio cupiditate blanditiis dolor? Illo perferendis eveniet cum cupiditate aliquam?',
},
{
picture:
avatarUrl:
'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
name: 'Ruidy Nemo',
text:

4
src/pages/Post.tsx
View file

@ -14,7 +14,7 @@ const PostPage: FC<Post> = () => (
<div className="post bg-white p-1 my-1">
<div>
<a href="profile.html">
<img className="round-img" src={post.picture} alt={post.name} />
<img className="round-img" src={post.avatarUrl} alt={post.name} />
<h4>{post.name}</h4>
</a>
</div>
@ -43,7 +43,7 @@ const PostPage: FC<Post> = () => (
<div className="post bg-white p-1 my-1" key={i}>
<div>
<a href="profile.html">
<img className="round-img" src={c.picture} alt={c.name} />
<img className="round-img" src={c.avatarUrl} alt={c.name} />
<h4>{c.name}</h4>
</a>
</div>

24
src/pages/Posts.tsx
View file

@ -3,6 +3,8 @@ import Post, {dummyPost as post} from '../models/Post';
import Header from '../components/Header';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faThumbsUp, faThumbsDown} from '@fortawesome/free-solid-svg-icons';
import Routes from '../constants/routes';
import {Link} from 'react-router-dom';
/**
* A Dev's Posts list
@ -10,6 +12,11 @@ import {faThumbsUp, faThumbsDown} from '@fortawesome/free-solid-svg-icons';
const Posts: FC = () => {
const posts: Post[] = [post, post];
const removeLike = (e: React.MouseEvent<HTMLButtonElement>) =>
new Error('Not implemented yet.');
const addLike = (e: React.MouseEvent<HTMLButtonElement>) =>
new Error('Not implemented yet.');
return (
<section className="container">
<Header title="Posts" lead="Welcome to the community" />
@ -25,26 +32,29 @@ const Posts: FC = () => {
{posts.map((post: Post) => (
<div className="post bg-white p-1 my-1" key={post.id}>
<div>
<a href="profile.html">
<Link to={`${Routes.PROFILE}/${post.userID}`}>
<img
src={post.picture}
src={post.avatarUrl}
alt={post.name}
className="round-img"
/>
<h4>{post.name}</h4>
</a>
</Link>
</div>
<div>
<p className="my-1">{post.text}</p>
<button className="btn btn-light">
<button className="btn btn-light" onClick={addLike}>
<FontAwesomeIcon icon={faThumbsUp} /> {post.likes.length}
</button>
<button className="btn btn-light">
<button className="btn btn-light" onClick={removeLike}>
<FontAwesomeIcon icon={faThumbsDown} />
</button>
<a href="post.html" className="btn btn-primary">
<Link
to={`${Routes.POST}/${post.id}`}
className="btn btn-primary"
>
Discussion
</a>
</Link>
</div>
</div>
))}

2
src/types/Comment.ts
View file

@ -2,7 +2,7 @@ interface Comment {
// userID: string;
text: string;
name: string;
picture: string;
avatarUrl: string;
// date: Date;
}