switch picture to avatarUrl; addLike and removeLike methods placeholders

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:

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>

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>
             ))}

src/types/Comment.ts

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