Connect to Backend

[frasermcc9]

Description

We need to connect the frontend with the backend.

Tasks

• Make a list of things that need to be connected. Reply to this issue with this list.
• Create a nice way to call the api - otherwise we have to do useEffect and fetch everywhere which is annoying. Something like useSwr or react query.
• Also a way to do mutations i.e. post requests.
• Actually connect things up.

[GlockTian]

see below

[wshe874]

Peter's list is very comprehensive, to add on top it , we need some GET requests for the NavBar:

• Get the joined communities (may be stored in context)
• Get search results
• Get user information (may be stored in context)

[wshe874]

Currently available endpoints:

" /api/v1/posts"

• get posts
• create post

"/api/v1/posts/:id"

• get post b id
• patch post by id
• delete post by id

"/api/v1/posts/:id/comments"

• get comment by post id
• create comment by post id

"/api/v1/posts/:id/comments/:id"

• patch comment by comment id

"'/api/v1/users"

• creat a user

'/api/v1/users/login'

• post request for user login

'/api/v1/users/logout'

• post requuest for user logout

'/api/v1/users/:id'

• get user by id
• update user by id
• delete user by id

'/api/v1/reset'

• post request to rest mongo db

'/api/v1/resample'

• post request to resample mongo db

for detailed request body structure or response structure, see backend code

[GlockTian]

login page and Signup page and ForgetPassword page:

[API Required]

login: POST

signup: POST

forget password: POST

const signUp ={
	email: 'test@gmail.com',
	username: 'Ronald',
	passwordHash: ''
}

const login = {
	email: '',
	passwordHash: '',
}

//send a link to email to reset password :) Good Luck
const forgetPassword = {
	email: ''
}

Home Page:

[GET API Required] list of popular Communities

[GET API Required] list of popular posts in preview form

Community Page:

this is the page for a single community. It probably needs the id of the community in its path

const communityInfo = {
	name: "good name",
	description: "",
	img: "<https://picsum.photos/400/300>"
}

Community Action:

[POST API Required] we probably need request to join and unjoined a community

[GET API Required] list of posts in preview under the particular community

New Community Page

Note: we also need to upload a image here

[POST API Required] create a new community

const newCommunity =   {
	name: "good name",
	description: "",
	img: "<https://picsum.photos/400/300>"
}

I don't understand what this page is doing:

• /CommunitiesPage

Communities page:

[GET API Required] show a list of communities

[GET API Required] show a list of communities by searching it. parameter=”SearchText”

Community Action:

[POST API Required] we probably need request to join and unjoined a community

Posts Page

[GET API Required] Get a list of posts

[GET API Required] show a list of posts by searching it

Post detail pages:

[GET API Required] /post/:id to get detailed post information

Post Action

[POST API Required] There is also where you can upvote or downvote a comment

[POST API Required] You can create new comments for the post.

New Post Page

Note: we also need to upload an image here

A new post can have

const newPost = {
	title: "",
	community:"", //something that points to an existing community/forum
	text: "",
	img: "" // a single image
}

Schema Section:

Post:

{
	id:"", // mongoID
	communityId: "", //id  link to community schema
	userId: "", // id link to user schema
	time: "23:57", // unix time maybe?
	title: "sjngosnhpmre",
	text:  "I love react and react libraries but I have never used Semantic UI...  I heard from a teammate  that it’s pretty easy to use and has a lot of documentation so hopefully I’ll be fine. Any tips...",
	images: [""],// list of images url
	upvotes: 534,
	downvotes: 352,
	commentsArray:[
		{
			id:"",// mongoID
			comment: "I love react and react libraries but I have never used Semantic UI...  I heard from a teammate that it’s pretty easy to use and has a lot of documentation so hopefully I’ll be fine. Any tips for using this new frontend framework?",
			commentUpvotes: 456,
			commentDownvotes: 352,
			commentUpi: "shr23456",
			commentTime: "23:57" // or UNIX time
		},
		...
	]
}

Comments

{
  id:"",// mongoID
	comment: "I love react and react libraries but I have never used Semantic UI...  I heard from a teammate that it’s pretty easy to use and has a lot of documentation so hopefully I’ll be fine. Any tips for using this new frontend framework?",
	commentUpvotes: 456,
	commentDownvotes: 352,
	commentUpi: "shr23456",
	commentTime: "23:57" // or UNIX time??
}

Community

{
  id: "", // mongoID
  community: "SOFTENG 701",// mongoID
  members: "150",
  description:
    "A fun project-driven course emphasising teamwork. This is a very cool course where you can learn lots of things from peers and lecturers.",
  image: "<https://picsum.photos/400/300>"
}

User

{
  id: "",
  email: "",
  username: "",
  passwordHash: "",
  posts:[], // list of post id
  communities:[] // list of community id
}