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
}