create Comment and Post types; PostPage

cypress/integration/router.spec.js

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

src/constants/routes.ts

@@ -11,3 +11,4 @@ export const EDIT_PROFILE: string = '/edit-profile';
 export const DASHBOARD: string = '/dashboard';
 export const ADD_EXPERIENCE: string = '/add-experience';
 export const ADD_EDUCATION: string = '/add-education';
+export const POST: string = '/post';

src/models/Post.ts

@@ -0,0 +1,13 @@
+import Comment from '../types/Comment';
+
+interface Post {
+  userID: string;
+  name: string;
+  text: string;
+  picture: string;
+  likes: string[];
+  comments: Comment[];
+  date: Date;
+}
+
+export default Post;

src/pages/Post.tsx

@@ -0,0 +1,90 @@
+import React, {FC} from 'react';
+
+const Post: FC = () => (
+  <section className="container">
+    <a href="posts.html" className="btn btn-light">
+      Back To Posts
+    </a>
+    <div className="post bg-white p-1 my-1">
+      <div>
+        <a href="profile.html">
+          <img
+            className="round-img"
+            src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200"
+            alt=""
+          />
+          <h4>John Doe</h4>
+        </a>
+      </div>
+      <div>
+        <p className="my-1">
+          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?
+        </p>
+      </div>
+    </div>
+
+    <div className="post-form">
+      <div className="post-form-header bg-primary">
+        <h3>Leave A Comment</h3>
+      </div>
+      <form className="form my-1">
+        <textarea
+          name="text"
+          cols={30}
+          rows={5}
+          placeholder="Comment on this post"
+        ></textarea>
+        <input type="submit" className="btn btn-dark my-1" value="Submit" />
+      </form>
+    </div>
+
+    <div className="posts">
+      <div className="post bg-white p-1 my-1">
+        <div>
+          <a href="profile.html">
+            <img
+              className="round-img"
+              src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200"
+              alt=""
+            />
+            <h4>John Doe</h4>
+          </a>
+        </div>
+        <div>
+          <p className="my-1">
+            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?
+          </p>
+        </div>
+      </div>
+
+      <div className="post bg-white p-1 my-1">
+        <div>
+          <a href="profile.html">
+            <img
+              className="round-img"
+              src="https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50?s=200"
+              alt=""
+            />
+            <h4>John Doe</h4>
+          </a>
+        </div>
+        <div>
+          <p className="my-1">
+            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?
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default Post;

src/router/Router.tsx

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

src/types/Comment.ts

@@ -0,0 +1,9 @@
+interface Comment {
+  userID: string;
+  text: string;
+  name: string;
+  avatar: string;
+  date: Date;
+}
+
+export default Comment;