Currently we have "2" versions of most dev tools etc. It's quite cumbersome. We should also be able to use code between the backend/frontend. Things like Lerna and nx might help or better scripts.

Currently the <title> doesn't change dependent on the content. This is poor UX when wanting to see what a tab my contain or when a page is bookmarked in the browser. This task would involve installing React Helmet and configuring the pages with it.

• /: Home | Clockwork
• /calendar/202009: 2020 Fall Calendar | Clockwork
• /calendar/202009/CSC: CSC - Fall 2020 | Clockwork

Note: These are not final but to illustrate the generic solution however it should follow this pattern more or less.

Figma

We need a component to showcase seating & waitlist information.

Functionality:

• should take in an amount, a max value, and a label as props (i.e. 45, 115, "Seats")
• mock-up used the ant-design progress component, can use this
  • may need to modify it slightly, ideally ours will change colours as the bar fills up. We also would like to display data differently (i.e. 10/100 at the end).
  • the standard progress bar is a good starting point

Style:

• see ant-design component linked above
• colour changes as seats fill up
• the label is underneath the progress bar, describing what the data is for.

everything above can be treated as tentative, feel free to make changes you view as necessary in development

This epic is adding search functionality to the application

Populate a search index, to be chosen and create a script that allows a developer to populate said index.

Currently when you first load the website, the term context is set to the current term. However, by default the term buttons at the top are set to always have the first term active. Thus when a user first accesses a page during the spring semester, they will be searching for courses during the spring semester while it is showing that they are in fall.

Steps to reproduce:

• Navigate to https://staging-clockwork.vikelabs.dev/
• Term will be set to Fall 2020
• Navigate to AGEI 472
• After section info loads, which there is none, it will say Unable to find sections for Spring 2021 whilst the Fall 2020 button is active.

Reproduction

1. Open the application and open the network tab in dev tools.
2. Open a course and clear the network tab entries
3. Open another course and observe the network requests. There should be one for first course followed by the second course.

Fix

Only make network requests related to the selected course.

Figma

We need a component to populate the course content area with shields for any general information (units, course hours, etc.).

Functionality:

• takes in name, value, and colour (maybe?) as props. (i.e. "Hours", "3-2-0", "green")

Style:

• see here for the general idea I was going for with the mock-up
• name in the main area
• value in the coloured area on the right
• drop-shadow if it looks nice

everything above can be treated as tentative, feel free to make changes you view as necessary in development

Add the hours field into the course details response.

This involves updating the scraper library version in the dependencies and adding another "badge" to the frontend code.

Tickets related to the scheduling feature

Currently when a window is small enough, the header eventually gets cut off and half the content is no longer visible. It would be ideal if all of the same content was visible on mobile, i.e. the app name, search, and term buttons. Obviously this is a lot of stuff to cram into a smaller header, but everything can be refactored into something along the lines of what apps like Facebook offer (see screenshots).

When the /sections/*/seats endpoint is called, it checks Firestore for CRNs to use to make the appropriate requests. However the logic to check the mapping retrieval and subsequent comparison is broken. This results in an exception being thrown and no seat info being returned.

• Linting
• Build
• Test
• Deploy

Currently the API calls to /sections (to get sections) and /seats etc. have to wait for the call to getCourseDetails to finish in order to make requests. This is because the course details use pid and the sections/seats use subject, code to make their requests however we only keep track of the pid and term.

We can make the app faster by storing the subject and code just like the pid. This information is currently available since the sidebar needs it to display information.

Currently when a window is small enough, eventually the sidebar becomes unusable, and covers the main content component. A work around this would be to refactor how the sidebar works once a window is a certain size. i.e. when a user is on mobile, there will be a menu button on the header or somewhere on the page that when they click, the sidebar pops up. Then users can select a course from there and the "sidebar" disappears and the main content is loaded in.
An example is on the YouTube app, when you search the whole screen is populated by search results. Then after you make a query your whole screen is presented with results. Ours would be like this except with course results and main content.

When a user bookmarks a course, the course should be saved to local browser storage so the bookmarked courses can be persisted between browser sessions, without the user needing an account. It would be nice if there was a button to clear all bookmarked courses also developed for this issue. There should be an option to hide this button on the UI so we can turn it off in the staging env. Maybe the button would just go in the navbar for now.

Off the top of my head, a simple way to implement this would be to store an array of bookmarked courses in local storage. Each course in this array can be indexed on its term, subject, and code.

Would be nice for feedback to user to have a spinner displayed when:

1. All courses are initially fetched, saying something like "Getting courses"
2. Between selecting different courses, if it takes that long to fetch (unlikely with caching)

• Make Figma mockup

• evaluate react-components

  • https://github.com/remotelock/react-week-scheduler
  • http://jquense.github.io/react-big-calendar/examples/index.html#intro
  • fullcalendar.io

To reduce load on UVic API and increase responsiveness of app we should add HTTP caching (via a CDN). Initial investigation shows that Cloudflare has a free tier capable of this.

Done means:

• CDN is in place which implements HTTP caching on requests sent to deployed serverless functions, for all functions

Side note: For HTTP caching to be used, all backend functions must serve GET methods with query params.

PS. First issue, yay!

The header should persistent between pages but everything else like the current sidebar and content should be a "page"

For this task, only the basic functionality should be implemented and there is no need to consider the routes etc.

Figma

Please check the Figma and set the scale to 100% in order to get the right scaling. The card heading size and text size should be the same as the existing Card component. This component should implement a check-box props (selected, onchange etc) and onDelete, onInfo callback props that correlate to the button respectively.

The delete and add button should be implemented as shared components and implemented using the Chakra button as a base.

Currently all courses that are part of a calendar will be returned. However, not all courses are available in a semester.

This work would add functionality to the /courses endpoint and allow specifying an option to filter condition on only showing courses with one or more sections (a requirement for a course to be available)

This involves working with the backend and Firestore by probably restructuring how we store course/section information in general as the current format would not allow such queries to run very efficiently.

The credit object has "chosen" property which is "fixed" or "range".

If chosen is "fixed", it displays as a single credit number.

If chosen is "range", it displays credit as a range (e.g 1.5-3.0)

As a user, I want to be able to "save" (bookmark) courses I want to take and be able to refer to them later.

In order to use the /courses/:term/:pid (course details) endpoint right now, the pid is required. This causes an issue with the frontend where the pid + term cannot be used to retrieve section information. This results in the sections to be requested requires the details to be loaded in first which makes the frontend roughly twice as slow. We can fix this by using the pid stored in Firebase and allow fetching the course details with just the term, subject and code ie ( 202009 CSC 100).

Seats available are 44/45 but waitlist seats are 10/10. It should 45/45 or red because they're not able to sign up for the course.

Set up a system to receive feedback on, such as email, GitHub discussion/issues, etc.

Figma

We need a component to populate the sidebar with drop downs for each subject. The component should closely match the screenshots provided (see properties in Figma).

Functionality:

• could take in the an array of courses and the subject name and abbreviation as props
• can use the ant-design menu component (this is what I used in the mock-up).
  • menu items should be replaced with the components from #12
  • menu items can be created using the array of courses from props

Style:

• has a course subject (i.e. CSC - Computer Science) as the "title" of the component
• should just match the ant-design component linked above
• longer subject titles can be dealt with in a number of ways:
  • expand height of component
  • font size is responsive (would be cool)
• drop-shadow if it looks nice

everything above can be treated as tentative, feel free to make changes you view as necessary in development

When the website is in the hands of the public, we are going to need a way to receive user feedback. We should add some type of pop-up, button, tab, etc. that a user can click to send us feedback.
A good example of this is https://www.intercom.com/ with the button in the bottom right corner that provides a pop-up. See #63 for what kind of links we would display or get feedback on.

Currently course sections display badges based on a few criteria such as online, asynchronous, and SENG/CSC only (see screenshot). However, the code is somewhat hacky and could be improved on by being made more generic and reliable, as well as hit more cases than the current ones.

For this ticket, you could take a look at the current implementation and think of ways it can be improved on and look through subjects other than SENG that have generic attributes which could be represented as a badge. Badges are key information we want to show users front and center, so consider this when looking.
An example of why we should refactor the code would be that there is not a synchronous badge because using the current logic, synchronous would be found when asynchronous is present and you can see how that's wrong.

See Figma for the mock-up and issues in the epic for details.

We would ideally like our page to be at least usable on mobile, and to do this we need to make some components more responsive.

Figma

We need a component to hold section data to make it look nice in the course content container.

Functionality:

• should take in an icon, value (text), and a colour as props. (i.e. Calendar icon, "M, Th", and blue)
  • this is data that will be fetched from the outside, this component doesn't need to worry about API calls or fetching data.
  • could also pass a name as a prop instead of an icon, i.e. pass "times" and the logic in the component will know to use the clock icon. Whatever makes more sense.

Style:

• see screenshot above
  • if you feel any changes may look better, feel free to apply them.
• can just be a simple box component
• drop shadow

everything above can be treated as tentative, feel free to make changes you view as necessary in development

Despite having an awesome OpenAPI 3 spec file, we don't have documentation to easily read it. Ideally we can access the documentation through the application easily.

Figma

We need a component to populate the sidebar with search results. The component should closely match the screenshot provided (see properties in Figma).

Functionality:

• should take in the course code and subject and course title as props
• should be a button so it can have the onClick() prop

Style:

• has a course subject & code as the header of the component
• has the course title as the components subtitle.
  • long course titles should wrap and go to the next line (component should be big enough to account for large titles)
  • as a safety net, really long course titles can be cut off if the component is getting too big when trying to account for large titles
• component should be same size for all courses
• should be white by default with black header text and lighter grey subtitle
• should turn yellow, or just a different colour when selected
• has a drop-shadow ;)

everything above can be treated as tentative, feel free to make changes you view as necessary in development

Figma

We need a component to populate the course content area with general information course information.

Functionality:

• ideally takes in an object with all the course data from the API as a prop (if this is not implemented yet, ping me in the discord and I will provide objects for testing)
  • this will be similar (if not the same) to what's returned from the getCourseDetails() function in uvic-course-scraper

Style:

• see screenshot above
  • if you feel the title looks better on the side, or small changes like that, feel free to apply them!
  • all data should be from the object passed in as a prop
• shields should be from #14, can be "mocked" if this issue is still open
• ping me on discord about the list of pre-reqs when you get there, I'd like to base this on how the rest is implemented.

everything above can be treated as tentative, feel free to make changes you view as necessary in development