ffcsthingy / ffcsthingy2.0 Goto Github PK

Add a git hook manager
Ideally, lefthook

• Will help maintain code quality
• Cleaner and more transparent than husky

Modify passport to accept sessions without auth
Allow linking a google account to session if data sync is preferred

Functions Left:

courseUtility.js:

• updateHeatmap()
• doCleanRemovedCourses()
• doCleanRemovedCourses()

It would be really handy if the site Email setup and would notify users via Email.
I can work on it with Sendgrid and SMTP if given the right resources

Prefix all interfaces with I to add consistency and reduce ambiguous naming.
Ex: ISomeComponent or IUser, IDashboardComponent, IDashboard

Served from backend right now. Remove that dependency

The layout of the app does not look good on iPads in portrait mode (768x1024 px).
This could be fixed by making the CourseSelection component wider and the SlotTable narrower, and changing the column count for it.
The Navbar also needs editing. A possible solution would be to allow it to collapse into a hamburger menu like on mobile screens.

The Timetable component also overflows. It could be made to split into two parts like on Mobile Screens (eg: 360x740 px).
This should be a quick fix by changing the media query here:

The timetable component on mobile screens:

A lot of places in the codebase use snake_casing, which is not consistent with the rest of the code. These could be replaced with camelCased names to adhere to JS naming conventions.

Examples:
User Model
Course Model

Changes to these will require changes in places in the frontend as well as the backend.

This is a significant refactor spanning multiple files in both the frontend and the backend.

Add two same slots to different timetables
Deleting from one will also delete from the other

If I am allowed I can Help to deploy this Website on Heroku and the DB on MongoDB servers and make the project live .
I have made similar projects and can help you with it

Axios Hooks make code unclean imo

Can be replaced with simple useEffects
https://www.robinwieruch.de/react-hooks-fetch-data

Not a very major refactor

If showModal is true
Initial Render renders the modal with the animation multiple times

Possibly due to multiple re-renders of the navbar
Maybe move the modal to Dashboard?

Currently, protected routes use weird route names to attempt to obfuscate them.

Adding scopes to the user model should alleviate the need for this.

On phones, it is possible to zoom in and out. This shouldn't be possible.

Fixing this should be possible with minor changes to the Index HTML

classnames is a simpler way to interact with class names in React.

Allows for using an array or dict to defined classes, can make code a lot cleaner.

/* components/submit-button.js */
import { Component } from 'react';
import classNames from 'classnames/bind';
import styles from './submit-button.css';

let cx = classNames.bind(styles);

export default class SubmitButton extends Component {
  render () {
    let text = this.props.store.submissionInProgress ? 'Processing...' : 'Submit';
    let className = cx({
      base: true,
      inProgress: this.props.store.submissionInProgress,
      error: this.props.store.errorOccurred,
      disabled: this.props.form.valid,
    });
    return <button className={className}>{text}</button>;
  }
};

Something like, since you chose this course, you might want to take this too. Or something like, Other people have taken B when they took A.

This is a major feature that would require leveraging the data in the DB and adding routes to provide the recommendations to the client.

There is no defined structure to this feature. Ideation and Suggestions on how to do this with Node and Mongo is welcomed.

SlotTable uses componentWillReceiveProps
MagicFill uses ComponentDidUpdate

Both set state inside this
Change to DerivedStateFromProps

Allow copying the timetable with a new name

Had issues making it work previously. For some reason the array didn't get updated with a new timetableName for the copied values. Could be some logic bug. (pretty sure that map call is fucked up).

This code is old and will need to be refactored to work with hooks similar to how the other timetable actions are handled

    doTimetableCopy = (newName) => {
		if (this.state.timetableNames.includes(newName)) return;

		this.setState(prevState => ({
			timetableNames: [...prevState.timetableNames, newName],
			timetable: [...prevState.timetable, ...prevState.timetable.map(v => {
				if(v.timetableName === prevState.activeTimetable)
					v.timetableName = newName;
				return v;
			})]
		}), () => {
				this.changeActiveTimetable(newName);
		});
	} 

Lots of reducers call Date.now(). This is an anti-pattern and makes the reducer an impure function.

Solution

• Pass a timestamp with the dispatch
• Convert the timestamp to appropriate format inside the reducer

In terms of the implementation I had in mind, we could try passing a timestamp to the reducer (using Date.now()), which can then be processed to convert it to the ISOString that the reducer uses currently.
Essentially, the Date.now() component moves out of the reducers and to the place where the action is being dispatched. The reducers would not need any changes in logic.

Keep in mind, we will also have to modify the dispatches that happen from the components.

• Current scrapers are outdated and tend to break with changes
  • Scrapers have undocumented code
• Rewrite scrapers, ideally with functions for each different year/format

When a course is deleted, clashing slots list on SlotCard doesn't update to reflect the new list until forced to re-render by changing selected course to something else and back.

Slot: L1+L2
Clash shows: A1, F1

A1 deleted
Clash show: A1, F1

Should Show: F1

Currently, a backend is required to get courses, curriculums. This dependency can be removed if a bare-bones app is required.

• Setup a data source (like raw.github)
• Add an env variable in frontend build, based on which
  • Disable login button
  • Fetch data from data source
  • Disable all sync actions

Content that would need to be hosted can be found in the response of:

• /course/fullHeatmap
• /course/allCourseLists
• /curriculum/curriculumFromPrefix/<prefix>
• /curriculum/prefixes

Reproduction

• Add courses without logging in
• Login in keeping local data
• On sync, local data is overwritten by server data

Expected

• On sync, local data overwrites server data

Problem

req.user.timestamp seems to be updated on login

Suggested Solution

Add a property timetableTimestamp and use that to check for update time
OR
Figure out where the timestamp is being changed and fix it

• Endpoints like allCourseLists and fullHeatmap return data along with a success message.
• The data is memory cached, but the whole response isn't.
• GZip can be enabled on the full response, which would lead to much lighter responses.
• This would be more efficient than enabling gzip on nginx for the response, since it would probably have to process the whole thing on every response.

Will require restructuring of the routes

• Move the logic to a function in the courseUtility file
• Add zlib for gzipping
• Keep a gzipped version of the success response
• Send the gzipped response if available
• Add a regardless parameter like in the existing queries to force an update
• Run a forced update everytime the courses are updated

The selected courses table can have a column for course category (UC/PC/UE/PE/whatever)

There is no way to share/save timetables for now.

A useful feature would be to add a button that allows saving a screenshot of the timetable as a PNG/PDF or the course list as a CSV/TXT file.

Something like this could be used, provided it keeps the CSS on print.

Exporting to a downloadable CSV/TXT file should be trivial.

The useEffect hook for slot filter should trigger only on selected course change

• reducer actions (add/remove/rename/copy timetable, etc)
• timetable generator
• syncing

Most components and reducers do not have tests as of now.
Tests are implemented for timetable and course reducers, but lack certain cases/tests.

Specific tests that need to be implemented:

• Timetable reducer/slice
  • updateClashmap() utility function
  • syncTimetable Thunk call with redux-mock-store. rejected/pending/fulfilled reducer tests implemented.
• Empty String Checks/Tests
  • Filter Controls -> setSelectedCategory
  • curriculumReducer/setSelectedCurriculum
  • themeReducer/changeTheme
  • timetableReducer/changeTimetable
• Dashboard Component
  • Dispatches
  • Thunk calls with redux-mock-store
  • Snapshot Testing
  • Alerts

Currently deployment is through a standard pull and restart method.

Can add docker and setup a CI/CD pipeline for seamless deployments.

• Data in backend/samples/curriculum could be converted to JSON.
• Can keep a few from each year to test scrapers
  • Need to strip them and reduce size for HTMLs (Use Palash's script)