Content Comparison

...

• index.ts: Some React boilerplate code that you shouldn’t need to touch. This is the root file, which imports from App.tsx, where most of the top-level code lives.

• App.tsx: The “main” file in the project, which brings in all of the big components in the app.

• service-worker.ts and serviceWorkerRegistration.ts: 💀 don’t ask

• api directory: How the front-end fetches the data it needs from the back-end, by sending network requests to our server.

  • getAutoTimetable.ts: Fetches a timetable generated by the autotimetabler.

  • getCoursesList.ts: Fetches the list of courses. This list only contains a summary of each course, to save network bandwidth.

  • getCourseInfo.ts: Fetches detailed data for a single course, once you have selected it. This data includes all the classes for the course which will show up in the timetable.

  • config.ts: The URLs for where we should send network requests.

• assets directory: Where images and other media are, including the logo.

• components directory: Contains a bunch of files which App.tsx imports, with most of the app’s components.

  • controls directory: Files related to the controls located above the timetable

    • Autotimetabler.tsx: The autotimetabler button and dropdown menu

    • Controls.tsx: The parent component for all the controls

    • CourseSelect.tsx: Where you search for and select your courses.

    • History.tsx: The undo, redo and reset buttons

  • friends directory: A bunch of old code for social timetabling, which will likely be restructured soon.

  • navbar directory: Files related to the components in the navbar located at the top of the page

    • About.tsx: The about modal.

    • Changelog.tsx and ChangelogContent.tsx: The changelog modal.

    • Navbar.tsx: The navbar itself, which has the title and icons for opening the various modals.

    • Privacy.tsx and PrivacyContent.tsx: The privacy page.

    • Settings.tsx: The settings modal.

  • timetable directory: The timetable contains 3 main layers, which are TimetableLayout.tsx, DroppedClasses.tsx, and Dropzones.tsx.

    • Timetable.tsx: The entrypoint for the timetable, which imports all the other timetable components.

    • TimetableLayout.tsx: The 1st layer, containing the grid that backs the timetable, the hours on the left, and the days at the top. It’s mostly non-interactive, but provides the base users need to understand what’s happening in the timetable.

    • DroppedClasses.tsx. The 2nd layer, which has all the classes which you can drag around the timetable. It has a component which aggregates all the classes, and a component representing each class. These may be split up into separate later (like what was done for dropzones below).

    • Dropzones.tsx: The 3rd layer, containing all those highlighted parts on the timetable which you see while dragging. They’re targets for where you can drop a class. This file puts together all the dropzones in the timetable.

    • Dropzone.tsx (not plural): This includes the component that represents a single dropzone.

  • Alerts.tsx: The pop-up alerts that appear on the bottom of the page (e.g. when something goes wrong)

  • Footer.tsx: The text and links at the bottom of the page.

• constants directory: All the static configuration stuff for the app.

  • defaults.ts: A pretty important file when it comes to storing permanent data (”local storage” in the browser).

    • Local storage (and cookies) are things which remain stored even after you close the browser tab. For us, this includes your courses, timetable, and settings like dark theme toggle.

    • This file provides default values for stored items, which are used when you visit the page for the first time.

    • When you add a new thing to local storage, you need to include it in defaults.ts for it to work, with how we’ve got it set up at the moment.

  • theme.ts: Describes some global settings such as padding and how rounded corners should be, as well as the colours in light and dark theme.

  • timetable.ts: The current year and term, class colours, day names, and the like.

• context directory: All the context stores for the app. This is where all application state which needs to be shared between components is contained.

  • AppContext.tsx: Context store for most of the things we need to keep track of state for.

  • CourseContext.tsx: Context store for a user’s selected courses and selected classes. This is separate to the other context store because these states need to be optimised using useMemo() to prevent lag when dragging classes around.

• hooks directory: Get someone to explain how React hooks work... there’s a few in here anyway.

  • useColorMapper.ts: Assigns the colours for each course in the timetable.

    useUpdateEffect.ts: A bit of a hack I think, but it’s useful when you want a hook to only run when a component updates, but not when it mounts (is created). It’s used in App.tsx. For more context, see: https://stackoverflow.com/q/55075604.

• interfaces directory: All of the app’s interfaces are here. An interface is a bit like a struct in C.

  • Course.ts: All the interfaces concerning the timetable, and how its represented on the front-end (a little different to what the back-end sends us).

  • CourseOverview.ts: I’m not sure why this is in its own file... but the interface here is basically a summary of the full interface for a course. It’s got a basic overview of a course, which is sent by the back-end when we ask it for the course list. When you select a course, it’ll get the full data for that course, including all of its classes.

  • DbCourse.ts: DB (database) is a bit of a misnomer now that we’re not using a database in the back-end, but this file has the interfaces which describe data that we receive from the back-end.

  • PropTypes.ts: All the interfaces defining a component’s props

  • StyleProps.ts: All the interfaces defining a styled component’s props.

  • NetworkError.ts and TimeoutError.ts: Just simple subclasses of the built-in Error class, so we can tell the difference between them.

• utils directory: Miscellaneous code which might not belong anywhere else.

  • Drag.ts: Where most of the drag-and-drop stuff happens. We implemented DnD from scratch, because we need a pretty custom solution. And it works at a level below React (in the DOM), to make the experience smoother and more responsive. It has to interact with our React code in some interesting ways.

  • generateICS.ts: Logic required to generate an ICS file to import into your calendar app from the user’s selected classes.

  • storage.ts: There’s a bit more explanation above with defaults.ts, but basically this file is how we store data in the browser permanently, such as your settings, courses, and timetable.

  • timeoutPromise.ts: A nice promisified timer function. A “promisified” function is one that is converted from using callbacks, to promises. You can ask someone what a promise is (in short, they’re nicer than callbacks).

...