Explore pages and Article Viewing

[bryanwong8]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Figma Design

Article Display

• You should be editing the pages/article/[pid].tsx file.
• You should also be using ant designs grid to implement the layout and resizing, https://ant.design/components/grid/

User Info Card

• This component already exists. This is the components/global/UserInfoCard.tsx file.
• You should use the {{APIURL}}/api/profiles/{{USERNAME}} route to get information regarding the user for the user info card.

User Articles

• This component also already exists (It just needs to be merged into staging). EDIT It has been merged. It is called UserArticleCard in components/article/UserArticleCard.tsx
• You should call the {{APIURL}}/api/articles?author={{USERNAME}} route to get articles based on the author
• This should display 5 articles from the user if they have any

Like and bookmark

• Both of the emojis should be on the left sidebar of the article. You should be using twitter's emoji library and twitter's emoji. https://www.npmjs.com/package/react-twemoji and https://emojipedia.org/twitter/.
• When the heart is clicked on, it should be calling the Article favorite route, {{APIURL}}/api/articles/{{slug}}/favorite if the heart is not pressed. Else call the unfavorite route, {{APIURL}}/api/articles/{{slug}}/favorite.
• Should invert the colors as well
• When the tag emoji is clicked on, it should call the Article Bookmark route, {{APIURL}}/api/articles/{{slug}}/bookmark and invert the color.
• This logic already exists in the components/article/ArticlePreview.tsx file for likes. I would recommend copy the logic and alter it for bookmarks as well

Article Body

• In the file, there is this variable, const { article }: Article = fetchedArticle || initialArticle; which you can use to get information regarding the article. I would recommend using Postman to visualize the data you are using.