ruidy/devbook_ts
1
0
Fork 0
mirror of https://github.com/rjNemo/devbook_ts synced 2026-06-12 13:36:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

create Comment and Post types; PostPage

Browse source
This commit is contained in:
Ruidy Nemausat 2020-05-12 20:16:10 +02:00
parent fba8c336ec
commit 8ce0341b27
6 changed files with 120 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
cypress/integration/router.spec.js
View file

@ -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');
});
});

1
src/constants/routes.ts
View file

@ -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';

13
src/models/Post.ts Normal file
View file

@ -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;

90
src/pages/Post.tsx Normal file
View file

@ -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;

2
src/router/Router.tsx
View file

@ -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>
);

9
src/types/Comment.ts Normal file
View file

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