Implement basic Post UI component for the posts feed

[dogezen]

Requirements

• The posts feed should present a view of all posts (it should be scrollable beyond the page limit)

Each post should present the following information

• The name of who created the post (this should be a clickable link to go view that user's profile)

• Indicate if who posted is a teacher or student (can use different colours for this)

• Present the content of the post

• Have an icon to delete the post if the user viewing the post can delete

• Have an icon to edit the post if the user viewing the post can delete

• Only a teacher can edit or delete another student's post

• The user who made a post can edit or delete their post

UI Approach

Code structure

• The code for the component will live in a Post.js file in the folder: /src/components/posts
• All relevant styles will be added to the style.css in the same folder
• The <Post> component will be instantiated in the <PostsPage> component where we map for each posts. The posts are fetched from the API on component load.
• We may export the <ul> rendering each post in a separate component called <PostsFeed>

Wireframe

In this issue we will only focus on everything above the line (ie. we won't include the like, comments sections).

• The edit and delete buttons can appear on the top right of the post (in alternative to having the ... dropdown menu
• The edit and delete buttons ARE NOT to be displayed if the user does not have permissions to edit or delete that post. To know permissions, pass the loggedInUser state from App.js down to the <Post> Component and check if it matches the user that created the post or whether the user has the TEACHER role.
• The post should present the name of the user; this should be a clickable link that will take me to the /profiles/:id page where id is the user id of the user that created the post