posts page

cypress/integration/router.spec.js

@@ -50,4 +50,9 @@ describe('App Router', () => {
     cy.visit(ROUTES.POST);
     cy.get('section');
   });
+
+  it('contains Posts page', () => {
+    cy.visit(ROUTES.POSTS);
+    cy.get('section');
+  });
 });

src/constants/routes.ts

@@ -12,3 +12,4 @@ export const DASHBOARD: string = '/dashboard';
 export const ADD_EXPERIENCE: string = '/add-experience';
 export const ADD_EDUCATION: string = '/add-education';
 export const POST: string = '/post';
+export const POSTS: string = '/posts';

src/models/Post.ts

@@ -1,16 +1,17 @@
 import Comment from '../types/Comment';
 
 interface Post {
-  //   userID: string;
+  userID: string;
   name: string;
   text: string;
   picture: string;
-  //   likes: string[];
+  likes: string[];
   comments: Comment[];
   //   date: Date;
 }
 
 export const dummyPost: Post = {
+  userID: '42',
   picture:
     'https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200',
   name: 'John Doe',
@@ -32,6 +33,7 @@ export const dummyPost: Post = {
         '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?',
     },
   ],
+  likes: ['0', '42'],
 };
 
 export default Post;

src/pages/Posts.tsx

@@ -0,0 +1,55 @@
+import React, {FC} from 'react';
+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';
+
+const Posts: FC = () => {
+  const posts: Post[] = [post, post];
+
+  return (
+    <section className="container">
+      <Header title="Posts" lead="Welcome to the community" />
+      <div className="post-form">
+        <div className="post-form-header bg-primary">
+          <h3>Say Something</h3>
+        </div>
+
+        <form className="form my-1">
+          <textarea cols={30} rows={5} placeholder="Create a post"></textarea>
+          <input type="submit" value="Submit" className="btn btn-dark my-1" />
+          <div className="posts">
+            {posts.map((post: Post, i: number) => (
+              <div className="post bg-white p-1 my-1" key={i}>
+                <div>
+                  <a href="profile.html">
+                    <img
+                      src={post.picture}
+                      alt={post.name}
+                      className="round-img"
+                    />
+                    <h4>{post.name}</h4>
+                  </a>
+                </div>
+                <div>
+                  <p className="my-1">{post.text}</p>
+                  <button className="btn btn-light">
+                    <FontAwesomeIcon icon={faThumbsUp} /> {post.likes.length}
+                  </button>
+                  <button className="btn btn-light">
+                    <FontAwesomeIcon icon={faThumbsDown} />
+                  </button>
+                  <a href="post.html" className="btn btn-primary">
+                    Discussion
+                  </a>
+                </div>
+              </div>
+            ))}
+          </div>
+        </form>
+      </div>
+    </section>
+  );
+};
+
+export default Posts;

src/router/Router.tsx

@@ -10,6 +10,7 @@ import Dashboard from '../pages/Dashboard';
 import AddExperience from '../pages/AddExperience';
 import AddEducation from '../pages/AddEducation';
 import PostPage from '../pages/Post';
+import Posts from '../pages/Posts';
 import * as ROUTES from '../constants/routes';
 
 const Router: FC = () => (
@@ -24,6 +25,7 @@ const Router: FC = () => (
     <Route exact path={ROUTES.ADD_EXPERIENCE} component={AddExperience} />
     <Route exact path={ROUTES.ADD_EDUCATION} component={AddEducation} />
     <Route exact path={ROUTES.POST} component={PostPage} />
+    <Route exact path={ROUTES.POSTS} component={Posts} />
   </Switch>
 );