se701-t5/frontend

This is the frontend repo of Uni-forum, associated with the University of Auckland, SOFTENG701. This repo will be linked to Netlify for ease of deployment and code review

frontend's Issues

Post page

• Contains the full post details
• contains comments view
• comments can have upvotes and downvotes and a number that shows the net value
• comments are filtered by popularity (net value)
• Reply button
• Button to add comment
• View to add new comment

Complete header functionality and link certain elements to according links.

Header component is currently missing a couple of functionalities (variable fields and displays for profile element) alongside an unconnected links to appropriate links. (communities page, new posts, profile, etc...) These functionalities should be completed for a properly functioning header component.

New Community Page Basic Layout

• contains text box for community name
• contains text area for community description
• able to upload image for community background
• able to see the image that was uploaded and delete it if necessary
• create a new community button in the communities dropdown in the navbar that links to this page
  

Profile page for user details

Currently, we have a register/login function, but no profile page to put user details.

Make a profile page for user details that contains:

• username
• profile picture
• UPI
• email
• posts
• comments
• communities

Other features that are appropriate to put on a profile are welcome too.

New Post Page

As discussed in Wireframing / Feature Planning:

• contains text box for title
• contains dropdown to select forum the post is for
• contains text area for post description
• contains upload media button for pictures

Create a Kanban board for project task management of the front-end repository

Connect Homepage to backend api/v1/communities popular communities

Currently the backend and frontend are unconnected

It would be great to connect homepage to the communities endpoint to fetch all of the real communities then order them from highest members to lowest members for the popular communities section. Would be good to just get the top 10 communities and have a horizontally scrolling component to scroll through the 10 communities.

The full Heroku GET endpoint you need to be hitting is https://uni-forum.herokuapp.com/api/v1/communities

Pre-requisites:

• completion of the communities endpoint in the backend (it's currently completely unimplemented)
• completion of seeding the mongoDB Atlas database automatically through a script which will create all of the communities you need to fetch

How to get started:

• use the axios "api" instance inside the api folder to make the api calls to the backend
• https://axios-http.com/docs/instance
• find a nice horizontal scrolling library or implement it yourself: https://www.npmjs.com/package/react-horizontal-scrolling-menu

Website logo disappears in nested addresses.

When an address is nested, i.e. goes more than one level in directory, (e.g. /hello/wow, /posts/134, etc...) the logo disappears.

Text, Community, Upi search filter for basic posts layout page

Need to add in the text filter capability for the search function.

• also add in upi and community filtering
• Also adds a link to the new post page from new post button.
• Also adds based on search query text.

Login & Register Page

Description:
Develop the Login and Register Page for the Uni Forum Website.
Functionality
1. Login
login using username/email and password
redirect button to register
2. Register
register using email/ username/password
redirect button to register

Add posts preview components into home page.

Posts preview components should be added to the home page following the figma design.

Add CODE_OF_CONDUCT.md

Add the Code of Conduct as a markdown file named CODE_OF_CONDUCT.md in /.github directory for GitHub to link to (refer to the bottom right of Issues when creating them).

This Code of Conduct uses the Citizen Code of Conduct template.

This issue and subsequent Pull Request are intended for the team to review and approve the contribution guidelines before @christopher-alba merges them.

Add CONTRIBUTING.md

Add the contribution guideline as a markdown file named CONTRIBUTING.md in /.github directory for GitHub to link to (refer to the bottom right of Issues when creating them).

This issue and subsequent Pull Request are intended for the team to review and approve the contribution guidelines before @christopher-alba merges them, and also as an example on how to make and use an Issue and Pull Request using a GitHub Kanban project board.

Settings page

Add a settings page under the profile menu where users can go to change settings.

Prerequisites:

• discuss user settings with backend team
• set up backend endpoints
• set up database schemas for settings

Post page responsiveness

Make the individual post page responsive for mobile, desktop, and tablet devices.

Link to post page: https://uniforum.netlify.app/post/id

Fix pull_request_template.md Broken Link

The link to the Contributions Guideline at the bottom of the pull_request_template.md file is broken.

It will be replaced with:

For more information, refer to the Contributing Guidelines and Code of Conduct links at the bottom of this page.

Create README.md

Adds a readme Following a similar format: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2

Connect Communities page to backend GET api/v1/communities

Currently the frontend and backend are unconnected
It would be great if you could connect the communities page to the backend to get all of the communities. There should already be a functioning frontend search so all you need to do is fetch the real data from the database.

The full Heroku GET endpoint you need to be hitting is https://uni-forum.herokuapp.com/api/v1/communities

Pre-requisites:

• completion of the GET communities endpoint in the backend (it's currently unimplemented)
• completion of seeding the MongoDB Atlas database automatically through a script which will create all of the communities you need to fetch

How to get started:

• use the axios "api" instance inside the api folder to make the api calls to the backend
• https://axios-http.com/docs/instance

Add pull_request_template.md

Add a pull request (PR) template to the ./github directory so contributors can automatically see the expected contents for the project in a new PR body.

The PR template will be based on these linked examples provided by @axolo-co but modified to better suit this project.

Posts Page Basic Layout

• contains a list of all the posts (use the existing post preview component)
• contains a searchbar to search all the posts
• contains new post button
  

Wireframing / Feature Planning

Designing the layout of the website.

NavBar Component

• Has a dropdown for all the different communities of a user which shows only if a user is logged in
• Can search for specific posts or communities based on a search filter users can select from a dropdown
  • If user clicks a search icon, it begins search with the current keyword in the search box.
• Button to create a new post
  • If user is not logged in it will redirect them to the Login page
  • If user is logged in it will redirect them to New Post page
• Button to create a new community
  • If user is not logged in it will redirect them to the Login page
  • If user is logged in it will redirect them to New Community page
• If user is logged in button for dropdown menu with these options:
  • Profile
  • Logout
• if user is not logged in display a login button and register button that redirects to specified pages

Nav bar responsiveness

Make the navigation bar responsive for mobile, desktop, and tablet devices.

Community

• contains a background picture (changeable only by the person who created it)
• contains a join button for non-members
• contains a leave button for members
• contains a post button for members
• contains a delete button for creator/admins of the community
• contains a member count and you can click and view all the different member's names
• contains a description of the community
• contains a list of all community's posts ordered by latest timestamp first

Connect Homepage to backend api/v1/posts endpoint

Currently the backend and frontend are unconnected

It would be great to connect homepage to the posts endpoint to fetch all of the real posts then order them from highest net votes to lowest net votes for the popular posts section.

The full Heroku GET endpoint you need to be hitting is https://uni-forum.herokuapp.com/api/v1/posts

Pre-requisites:

• completion of the posts endpoint in the backend (it currently returns a fixed string)
• completion of seeding the mongoDB Atlas database automatically through a script which will create all of the posts you need to fetch

How to get started:

• use the axios "api" instance inside the api folder to make the api calls to the backend
• https://axios-http.com/docs/instance

Post preview component

• reused in homepage, post page, communities page
• contains the community name
• contains timestamp of the post and who posted it
• contains title of the post
• contains description of the post that's cut off at specific character length by ellipsis
• contains upvote/downvote buttons with a number in the middle that represents #upvotes - #downvotes
• contains comment button with floating label for number of comments
• may contain image/image slider (multiple images)

Wiki

According to the project description, a wiki describing "any additional project documentation needed including a list of contributors, a list of contributions made by each student, and minutes from any group meetings" is needed. In addition, we are expecting to provide the list of technology stack we are using and why we are using it.

Search functionality on Communities page

• Add search functionality similar to Posts page
• Change static results text to match search query

Connect Posts Page to backend GET api/v1/posts

Currently the frontend and backend are unconnected
It would be great if you could connect the posts page to the backend to get all of the posts. There should already be a functioning frontend search so all you need to do is fetch the real data from the database.

The full Heroku GET endpoint you need to be hitting is https://uni-forum.herokuapp.com/api/v1/posts

Pre-requisites:

• completion of the posts endpoint in the backend (it's currently unimplemented)
• completion of seeding the MongoDB Atlas database automatically through a script which will create all of the posts you need to fetch

How to get started:

• use the axios "api" instance inside the api folder to make the api calls to the backend
• https://axios-http.com/docs/instance

'New Post' page responsiveness

Make the 'New Post' page responsive for mobile, desktop, and tablet devices

Link to 'New Post' page: https://uniforum.netlify.app/NewPost

Communities page responsiveness

Make the communities page (not to be confused with the individual community page) responsive for mobile, desktop, and tablet devices.

Link to communities page: https://uniforum.netlify.app/communities

Add Ability to view uploaded image and delete it in New Post Page

Add Ability to view uploaded images and delete them in New Post Page

• requires storing the image in a temporary local state using React hooks as a base64 string
• requires adding a new button to delete the image from the temporary local state that only shows when an image is uploaded
• uploading a new image should add to the array of images in the local state
• requires using the react-responsive-carousel library to view the images

Based on #6

Posts page responsiveness

Make the posts page (not to be confused with individual post page) responsive for mobile, desktop, and tablet devices

Link to posts page: https://uniforum.netlify.app/posts

Make General Fixes in App

• add appropriate links to pages in post preview component
• update readme to include netlify deploy link and Qunzhi Zhou in contributions
• other general fixes that are deemed necessary

Switch to Material UI library

• Due to this bug, we have decided to switch over to material UI.
• npm install and set up material UI using: npm install @mui/material @emotion/react @emotion/styled

Nav bar search functionality

Currently, we have implemented the search bar in the navbar UI but have not associated any functionalities with it. Furthermore, the filter button is disassociated with the search bar.

Actionable:

• Link nav bar search bar to the posts and communities page for search queries
• Add posts/communities filtering as a dropdown to the filter button currently next to the search bar
• Move filter button closer to the search bar for more intuitiveness
• Add onChange searching and add a onClick event to the search icon

Connect New Post Page to Backend endpoint POST api/v1/posts

Currently the backend and frontend are unconnected

It would be great to connect the New Post Page to the backend so you could start creating some real posts from the client. Only authenticated users should be able to create a new post.

The full Heroku POST endpoint you need to be hitting is https://uni-forum.herokuapp.com/api/v1/posts

Pre-requisites:

• completion of the posts endpoint in the backend
• completion of user authentication in frontend and backend

How to get started:

• use the axios "api" instance inside the api folder to make the api calls to the backend
• https://axios-http.com/docs/instance

Replace <a href/> inside Login and Register pages to use the useNavigate() hook from react-router-dom

Replace <a href/> inside Login, password-reset and Register pages to use the useNavigate() hook from react-router-dom

Why?

Although this method works, it refreshes the page which may degrade the user experience. By using the useNavigate( ) hook it will use the SPA (single page application) routing features.

For example:

On line 74 in the image above the a tag needs to be removed and instead add an onclick on line 75 and inside an anonymous function use navigate("/register") from useNavigate( )'s return value.

'New Community' page responsiveness

Make the 'New Community' page responsive for mobile, desktop, and tablet devices

Link to 'New Community' page: https://uniforum.netlify.app/NewCommunity

Setup Create-React-App Project

Create a template codebase using create-react-app.

• have template files within each new folder created
• install needed dependencies: semantic-ui-react, axios, react-router-dom, Redux, React-Redux, Redux-Thunk
• setup browser router
• setup _redirects file for Netlify
• setup Redux

Community page bugfixes and changes

Currently, there are 2 bugs that exist on the community page, circled in red in the screenshot below:

Actionable:

• Fix community title positioning
• Fix join button clarity
• Add the community id to the page route. Currently, we just have a community page that is not specific to any community - we want a unique route for each community. (e.g. current: .../community | want: .../community/:communityID). A suggestion is to use the abbreviation for the course as the ID, like SE701

Link to page: https://uniforum.netlify.app/community

Homepage Layout

Based on the Wireframing / Feature Planning issue:

• Code up the basic layout of the "Homepage" of the site.
• Colour scheme to be discussed in next team meeting (14/03/22)

Home page responsiveness

Make the home page responsive for mobile, desktop, and tablet devices.

Link to home page: https://uniforum.netlify.app/

Add CODEOWNERS

A CODEOWNERS file is used by GitHub to define who is automatically requested to review pull requests with changes to code they are responsible for.

The CODEOWNERS file in the SE701-T5/Frontend repository will define the @SE701-T5/frontend team as responsible by default for all changes with exception to:

• README.md
• LICENSE
• .github/*

which all the @SE701-T5/team5 is responsible for as these are documents and changes to these are team-related.

The CODEOWNERS file will be located in the .github/ directory.

Communities Page Basic Layout

• contains a list of all the communities (create a communityPreview component)
• contains a searchbar to search all the communities
• contains a new community button
  

Match nav bar styles to UI prototype.

The elevation style of the nav bar are inconsistent between pages and even the default theme isn't what's described in the UI prototype.

Match nav bar styles so that it would match the style from the ui prototype.

Unable to use MUI Icons

MUI icons are unable to be used in current application as it is not built into the MUI library by default and instead must be added manually by installing @mui/icons-material library. [Relevant Info in MUI Website]

Protected routes

Currently, anyone can visit any page on the website. Add protected routes to restrict access to appropriate pages.

Suggestions:

• New post and new community page for logged in/authorised users
• Profile and settings page for logged in users only

Community page responsiveness

Make the individual community page responsive for mobile, desktop, and tablet devices.

Link to community page: https://uniforum.netlify.app/community

Connect New Community Page to backend POST api/v1/communities

Currently the frontend and backend are unconnected

It would be great if you could connect the new community page to the backend so you can start creating new communities from the client. Only authenticated users should be able to create new communities.

The full Heroku POST endpoint you need to be hitting is https://uni-forum.herokuapp.com/api/v1/communities

Pre-requisites:

• completion of the POST communities endpoint in the backend (it's currently completely unimplemented)
• completion of user authentication in the frontend and backend

How to get started:

• use the axios "api" instance inside the api folder to make the api calls to the backend
• https://axios-http.com/docs/instance