Is your feature request related to a problem? Please describe.
This is a front end component, please refer to the Figma on the wiki for the current design. If there is no design, feel free to add your own to fit the criteria.
We need a page where the user can see posts from their followers and make new posts themselves. The page should be at the route “/feed” (until auth router is added, then it will be at /)
Describe the solution you'd like
The feed needs:
- A MainHeader and Footer
- A list of post components (each in condensed view with no replies shown)
- A way to start writing a new post (could be a button or a text input at the top or bottom). Clicking this component should open a PostComposer component as a modal (on mobile, the modal should cover the whole screen)
Inside the post composer:
- A text area with the placeholder text “What’s Updog?”
- A cancel button and a post button at the bottom or top
In the future, if a user tries to visit /feed without being logged in they will be sent to the landing page.
The post composer component may be used elsewhere so make sure it is reusable. The functionality for sending the post to the backend does not need to be made yet.
Here is some sample mock data for 3 feed posts:
const sampleFeed = [
{
id: 1,
content: "Post 1",
author: {
id: 1,
username: "poster1",
nickname: "Poster 1",
profilePic: "https://i.imgur.com/qZImY9j.jpg",
},
parent: null,
children: [5],
usersLiked: 1,
usersShared: 2,
timestamp: 1646627469012
},
{
id: 2,
content: "Post 2",
author: {
id: 2,
username: "poster2",
nickname: "Poster 2",
profilePic: "https://i.imgur.com/PiJAoqO.jpeg",
},
parent: null,
children: [],
usersLiked: 50,
usersShared: 33,
timestamp: 1646627527764
},
{
id: 3,
content: "Post 3",
author: {
id: 1,
username: "poster1",
nickname: "Poster 1",
profilePic: "https://i.imgur.com/qZImY9j.jpg",
},
parent: null,
children: [],
usersLiked: 10,
usersShared: 20,
timestamp: 1646627527764
},
]
export default sampleFeed
Describe alternatives you've considered
N/A
Additional context
N/A