icssc/peterportal-client

A web application to aid UCI students with course discovery and planning.

peterportal-client's Issues

Review component

Task Summary

• Create a component to display the review using the provided boilerplate site/src/component/Review
• This is purely a front-end task (for now). Use the dummy data provided in the file. Don't worry about the back-end yet, the final schema will most likely be the same as DUMMY_DATA.
• Map each JSON in the DUMMY_DATA to a container.
• Each review should be a subcomponent.
• The task is only for the review component, we'll work on the form later!
• Feel free to use the component provided by the Semantic-UI React library to help you with this task (already installed in the app, https://react.semantic-ui.com/collections/grid/).
• Work on the review-component branch

Mockup

Numerical rating should follow this color scheme:

The colors are already implemented as CSS variables:

You can call the variable using var(--peterportal-primary-color-1) for example.

Additional Info

• For now, let's just hardcode the reviewer name as Anonymous Anteater and the avatar placeholder as a solid color.
• In the future, we want to implement something similar to Google Docs anonymous animals feature but with different types of Petr. 😄

Scroll on new page

Currently, when you go to a new page index (Page1 => Page2) in the Search Page, it doesn't scroll back to the top of the page. The user has to manually scroll up which is annoying.

Implement Redux-Toolkit for better state management

Look into Redux Tookit for global store.

Semantic-UI → Bootstrap

Review Components

Redesign Review Form to look like this.
Redesign Review to look like this.

Make the components reusable for courses/professors. Set global state to determine which type. Store course and professor data, store string containing which review type.

• Change Review schema to include tags. online, attendance, etc.
• Create a new page for creating reviews
  • If rating course, select dropdown for professor
  • If rating professors, select dropdown for course
• Display review based on what page it is on
  • If on course page, display professor name.
  • If on professor page, display course name.
• Display rating, difficulty, quarter, grade, author, date, votes, tags.

Reimplement Professor search index and hits

• Change the ES index to the correct one
• Fix the filters params
• Route hits to Professor page

Display instructor name instead of ucinetid in Course Page

Currently the Course Page shows the ucinetid of the professor, which is not very readable. Would be better to display their names instead.

• Make fetch request to professors endpoint to get their full name
• Probably better if we make an endpoint that allows us to query multiple professors in one request instead of sending 1 request per professor. Would be a good opportunity to use the public api's GraphQL endpoints.
• Attach a link to each professor, so when the user clicks on their names, it redirects to the professor's page.
• Route to /professor/ucinetid

Report a Review

• Create endpoint in server to flag a review as reported
• Add an endpoint in api/controllers/reviews.js
• Endpoint takes in an id to identify the review
• Add a Mongo Collection called "reports"
  • Add an entry in COLLECTION_NAMES in api/helpers/mongo.js
• Flag the review by adding a document in the reports collection
  • There's an addDocument function in api/helpers/mongo.js
  • Document should look like this:

  • {  
      reviewID: <string>   
      userID: <string>  
      reason: <string>  
    }  
    

• Connect frontend 'Report' button to call the backend endpoint.
• When the user clicks on the report button, make a request to the endpoint you wrote above

ReviewForm component

Task Summary: WIP

Set up ElasticSearch

http://searchkit.github.io/searchkit/stable/

• follow how it's set up in SearchPage
• implement in RoadmapPage/SearchSidebar
• feel free to make new files if needed
• don't worry about filters for now

Connect React's Review Component to Express API

Goal

Integrate the Reviews API into React. Don't start until the pull request #19 is approved. Ask Mars for a FAUNA_SECRET, then add an additional entry to api/.env (FAUNA_SECRET=). I recommend you play around with the endpoints in Postman. Make some dummy data first and get familiar with the endpoints.
Fauna extension: https://docs.fauna.com/fauna/current/integrations/vs_code.html

Get Review

• Endpoint URL: /reviews
• Method: GET
• Query: to filter reviews, use one of the below query parameters. To get all reviews, do not provide any query parameters.

1. courseID: String
2. professorID: String
3. userID: String

• Replace dummy data with data from our database using the get review endpoint.

Post Review

• Endpoint URL: /reviews
• Method: POST
• Body: key names must be the same
  {
  professorID: String
  courseID: String
  userID: String
  reviewContent: String
  rating: Float
  difficulty: Float
  timestamp: String
  gradeReceived: String
  forCredit: Boolean
  score: Int
  }
• When user submits review form in client, send fetch request to update database using the post review endpoint.
• Update: approve the pull request #28 to get access to professor endpoint.
• use the endpoints courses/api/:courseID and professors/api/:ucinetid

Vote Review

• Enpoint URL: /reviews/vote
• Method: PATCH
• Body:
  {
  id: String // a review's id is included in the get review endpoint
  upvote: Boolean // true if is an upvote request, false if is a downvote request
  }
• When user upvotes or downvotes a review, update the database using the vote review endpoint.

Hover to view course info

• Add "More Info" icon to course cards (Course.jsx) (tip: import InfoCircle from react-bootstrap-icons)
  

• Implement Bootstrap overlay/popover when hovering over the icon

• Display course name, title, description, prerequisites, and units in the popover (reminder to pass all the props to the course function)

• You can decide where is best to place the popover relative to the course card
  

Schedule component (Timetable View)

Collapse/expand sidebar and fix responsiveness

Update sidebar styling

• Update sidebar styling to match mockup (SearchSidebar.scss)
• Use react bootstrap for the searchbar https://react-bootstrap.github.io/components/input-group/

Add quarters to planner

• when a new year is added. automatically populate fall, winter, and spring quarter modules with the correct year
• add summer session option
• edit and delete quarters

Implement QuickView on SearchPage

Connect to course page

• When click on course title, open the course page in a new tab.

Set up base project

Setup bug report pipeline

Planner page

• Fix quarters (show fall, winter, spring as default)
• Split up modules (year, quarter, course)
• Edit/delete quarter feature
• Update styling w bootstrap

Delete course

• When drag out of quarter, delete the course.

Create Professor Page

The layout should be similar to the Course Page, but without the prerequisite component.

• Summary Card
• Display the following fields: ucinetid, phone, title, department, course_history
• Schedule of Classes Component
• Filter course offerings by this professor
• Grade Distribution Component
• Change the dropdown to list of courses this professor taught
• Reviews
• Filter reviews by this professor's ucinetid
• Use the professorID query parameter in the GET request

Create Admin Page

Allow authorized users to remove flagged comments.

• Get familiar with retool to create admin page.

Tooltip for node in prereq tree is blank

Figure out why the tooltip is empty and fix it.

Update sidebar

• Update sidebar styling to match mockup
• Look into react redux

Schedule

Redesign to have a rounded container like GradeDist.

• Current quarter is hardcoded. Figure out a way to get the most recent quarter from the Schedule of Classes.
• Add paging system using this component. Alternatively, existing component works here, but need to customize looks.

Grade Dist

Redesign Grade Dist component to look like this and this.

• Redesign component with Chart/Pie dropdown, Courses/Professor dropdown, and Quarter dropdown. No need for 'More Information'.
  • Can have a 'minify' prop that only displays chart/pie. Use minify on popup, use regular size on course/prof page.

Display review after creating it.

Currently, the user has to reload the page to see their new review. Would be better if the review is rendered automatically after a request is sent.
After sending a post request to make a review, the server responds with the review object in the database. Just append that new review to the Review Component's state and it should render the new review.

Search Filter Enhancements

• Sort 'Terms Offered' by chronological order instead of by number of hits.
  
• 2021 Terms should be at the top
• Add a search bar for 'Departments'
  
• Hard to find desired department

Export planner feature

• Allow users to export/download their plan

Fix drag and drop

• Implement dragging and dropping courses from sidebar
• Implement dragging and dropping courses between years
• Fix year module header styling
• Update styling
• Convert to bootstrap (after Ryan fixes it)

Sidebar

Redesign Sidebar to look like this.

• Display when global state's sidebar toggle is on. (Refer to App Header)
• Add default icon and display name.
• Add links to Catalogue and Peter's Roadmap.
• Add login/logout button based on user's login status. (Stored in cookies)
  • Login by google

App Header

Redesign App Header to look like this.

• Hamburger menu toggles sidebar. Add global state.
• Course/Professor toggle determine active page. Use react-router Link.
• Align logo to the center.
• Align current week to the right.

Search Page: Search Module and Search Filters

Redesign Search Bar to look like this. Redesign Search Filters to slide out as a drawer like this for courses and this for professors.

• Add a filter button that toggles open/close the filter component
• Add filter component as a right drawer that displays certain filters based on the current index (course/professor)
  • Change SearchSidebar component to SearchFilter.
• See if its possible to add search filter to filter categories

Update year header styling

• Update year header styling to match mockup (Year.scss)
• Right-align courses and units
• Vertical-align ellipsis icon

Mirror Prerequisite tree for better readability

Department emoji feature on CoursePage

Implement GET and POST endpoint for Review

• Connect to main FaunaDB either via the VS Code extension (https://docs.fauna.com/fauna/current/integrations/vs_code) or using the fauna-shell (https://docs.fauna.com/fauna/current/integrations/shell/)

Ask Mars for an API key, when you're ready

• Create a collection for Reviews

• Create an endpoint on the internal API to POST documents to the FaunaDB Reviews collection using form data.

Schema:
{
professorID: '...',
courseID: '...',
userID: '...',
reviewContent: '...',
rating: '...',
difficulty: '...',
timestamp: '...',
gradeReceived: '...',
forCredit: true|false,
score: '...'
}

• Create separate indexes on FaunaDB Reviews collection to query by courseID, professorID, and userID

• Create an index to query all Reviews

• Create an endpoint on the internal API to GET/query FaunaDB for reviews by courseID and professorID.

• Create endpoints on the internal API to PATCH/modify existing reviews. (Let's just do this for upvote/downvote score for now 😄 )

Additional Comment

There are two methods to drive FaunaDB. FQL and GraphQL. I would recommend you look into GraphQL because a lot of jobs these days are looking for GraphQL skill. But the choice is up to you! 😉

Also, try to play with FaunaDB on your personal account first. It can be a lil bit tricky at first, but the Dashboard GUI can be mighty helpful/

Set up search sidebar

• Create search sidebar based on figma prototype
• Add search bar
• Use temporary placeholder course modules
• Format layout and styling

Sidebar app navigation

Task Summary

• Create a component for navigation between different pages in site/src/App.js
• Create two other page components (these can just include an H1 element of their page title for now) -- Peter's Roadmap / Zotistics
• Create the routes to those components /roadmap and /zotistics
• The sidebar component should be in the component folder.
• The filter on the search page should appear below the nav sidebar and only appear on the search page.
• The design is very rough so feel free to add your take on it. 😄

Mockup

Set up planner page

• Create header
• Create year module (pass in custom props for year number, dates, etc.)
• Create quarter module
• Format basic layout and styling

Create Docker Container for Devs

Currently, AWS services are pricy, would be nice to have local dev environment. Would be easy to distribute for open source contributors.

• Include ElasticSearch and Fauna locally.
• Add script to index data automatically.

Dark mode

Save user plans

Calculate number of courses and units (quarter, year, total)

Implement user login endpoint

Use passportjs.

Visiting a CRM/LAW Course Page Crashes the App

Due to how we handle routing in the URL, the CRM/LAW C172 course is slicing the URL and react thinks were going to a course called 'CRM' instead of 'CRM/LAW C172'. Need routes to handle the '/' character.
https://stackoverflow.com/questions/56133182/allow-slashes-in-route-parameter-on-react

Schedule component (List View)

Task Summary

• Create a component to display the schedule of classes using the provided boilerplate site/src/component/Schedule
• This is purely a front-end task (for now). Use the dummy data provided in the file. Don't worry about the back-end yet, the final schema will most likely be the same as DUMMY_DATA.
• Map each JSON in the DUMMY_DATA to each row in a table.
• Each row should be a subcomponent.
• Feel free to use the component provided by the Semantic-UI React library to help you with this task (already installed in the app, https://react.semantic-ui.com/collections/table/).
• Work on the schedule-component branch

NEW TASKS

• Create endpoint in backend to query schedule data
  • Add an endpoint at /api/controllers/schedule.js.
  • Reference the PeterPortal Public API docs to see what data you need (https://api.peterportal.org/docs/REST-API/schedule/).
• Make fetch request to backend to replace dummy data.
  • Fetch data using the endpoint you just made.

Mockup

Implement GET and POST endpoint for WebSoC