From e02262ce1935dad52e47ae62d08872350f063892 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Mon, 18 May 2020 08:50:54 +0200
Subject: [PATCH] switch picture to avatarUrl; addLike and removeLike methods
 placeholders

---
 src/models/Post.ts   |  8 ++++----
 src/pages/Post.tsx   |  4 ++--
 src/pages/Posts.tsx  | 24 +++++++++++++++++-------
 src/types/Comment.ts |  2 +-
 4 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/models/Post.ts b/src/models/Post.ts
index ffa7d71..0c7dea9 100644
--- a/src/models/Post.ts
+++ b/src/models/Post.ts
@@ -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:
diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx
index 8ddf23b..4b593a1 100644
--- a/src/pages/Post.tsx
+++ b/src/pages/Post.tsx
@@ -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>
diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx
index e26d47f..0817897 100644
--- a/src/pages/Posts.tsx
+++ b/src/pages/Posts.tsx
@@ -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>
             ))}
diff --git a/src/types/Comment.ts b/src/types/Comment.ts
index e627d7b..ce48979 100644
--- a/src/types/Comment.ts
+++ b/src/types/Comment.ts
@@ -2,7 +2,7 @@ interface Comment {
   // userID: string;
   text: string;
   name: string;
-  picture: string;
+  avatarUrl: string;
   // date: Date;
 }