Frontend Documentation

The Structure

Note

to understand the file structure, it is best to complete the following tutorial: EggHead Redux. We follow the same structure and conventions which are typical of React/Redux applications.

Our React/Redux frontend can be found in static/js/redux and has the following structure:

static/js/redux
├── __fixtures__
├── __test_utils__
├── __tests__
├── actions
├── constants
├── helpers
├── init.jsx
├── reducers
├── ui
└── util.jsx

Let’s break down this file structure a bit by exploring what lives in each section.

__fixtures__: JSON fixtures used as props to components during tests.

__test_utils__: mocks and other utilities helpful for testing.

__tests__: unit tests, snapshot tests, all frontend driven tests.

actions: all Redux/Thunk actions dispatched by various components. More info on this (more info on this below: Actions)

constants: application-wide constant variables

init.jsx: handles application initialization. Handles flows (see Flows Documentation), the passing of initial data to the frontend, and on page load methods.

reducers: Redux state reducers. (To understand what part of state each reducer handles, see Reducers).

ui: all components and containers. (For more info see What Components Live Where).

util.jsx: utility functions useful to the entire application.

Init.jsx

This file is responsible for the initialization of the application. It creates a Redux store from the root reducer, then takes care of all initialization. Only in init.jsx do we reference JSON passed from the backend via timetable.html.

It is this JSON, called initData which we read into state as our initial state for the redux application. However, sometimes there are special flows that a user could follow that might change the initial state of the application at page load. For this we use flows which are documented more thoroughly at the following link: Flows Documentation.

Other actions required for page initialization are also dispatched from init.jsx including those which load cached timetables from the browser, alerts that show on page load, the loading of user’s timetables if logged in, and the triggering of the user agreement modal when appropriate.

Finally, init.jsx renders <Semesterly /> to the DOM. This is the root of the application.

Actions

The actions directory follows this structure:

static/js/redux/actions
├── calendar_actions.jsx ── exporting the calendar (ical, google)
├── exam_actions.jsx ── final exam scheduling/sharing
├── modal_actions.jsx ── openning/closing/manipulating all modals
├── school_actions.jsx ── getting school info
├── search_actions.jsx ── search/adv search
├── timetable_actions.jsx ── fetching/loading/manipulating timetables
└── user_actions.jsx ── user settings/friends/logged in functionality

Reducers

The reducers directory follows this structure:

static/js/redux/reducers
├── alerts_reducer.jsx ── visibility of alerts
├── calendar_reducer.jsx
├── classmates_reducer.jsx
├── course_info_reducer.jsx
├── course_sections_reducer.jsx
├── custom_slots_reducer.jsx
├── exploration_modal_reducer.jsx
├── final_exams_modal_reducer.jsx
├── friends_reducer.jsx
├── integration_modal_reducer.jsx
├── integrations_reducer.jsx
├── notification_token_reducer.jsx
├── optional_courses_reducer.jsx
├── peer_modal_reducer.jsx
├── preference_modal_reducer.jsx
├── preferences_reducer.jsx
├── root_reducer.jsx
├── save_calendar_modal_reducer.jsx
├── saving_timetable_reducer.jsx
├── school_reducer.jsx
├── search_results_reducer.jsx
├── semester_reducer.jsx
├── signup_modal_reducer.jsx
├── terms_of_service_banner_reducer.jsx
├── terms_of_service_modal_reducer.jsx
├── timetables_reducer.jsx
├── ui_reducer.jsx
├── user_acquisition_modal_reducer.jsx
└── user_info_reducer.jsx

What Components Live Where

All of the components live under the /ui directory which follow the following structure:

static/js/redux/ui
├── alerts
│   └── ...
├── containers
│   └── ...
├── modals
│   └── ...
└── ...

General components live directly under /ui/ and their containers live under /ui/contaners. However alerts (those little popups that show up in the top right of the app), live under /ui/alerts, and all modals live under /ui/modals. Their containers live under their respective sub-directories.

Modals

Component File

Screenshot

Description

course_modal_body.jsx

_images/course_modal_body.png

course_modal.jsx

_images/course_modal.png

exploration_modal.jsx

_images/exploration_modal.png

final_exams_modal.jsx

_images/final_exams_modal.png

peer_modal.jsx

_images/peer_modal.png

preference_modal.jsx

_images/preference_modal.png

save_calendar_modal.jsx

_images/save_calendar_modal.png

signup_modal.jsx

_images/signup_modal.png

tut_modal.jsx

_images/tut_modal.png

user_acquisition_modal.jsx

_images/user_acquisition_modal.png

user_settings_modal.jsx

_images/user_settings_modal.png

General Components

Component File

Screenshot

Description

alert.jsx

_images/alert.png

Calendar.tsx

_images/calendar.png

course_modal_section.jsx

_images/course_modal_section.png

CreditTicker.tsx

_images/credit_ticker.png

CustomSlot.tsx

_images/custom_slot.png

DayCalendar.tsx

_images/day_calendar.png

evaluation_list.jsx

_images/evaluation_list.png

evaluation.jsx

_images/evaluation.png

MasterSlot.tsx

_images/master_slot.png

pagination.jsx

_images/pagination.png

reaction.jsx

_images/reaction.png

SearchBar.tsx

_images/search_bar.png

SearchResult.tsx

_images/search_result.png

search_side_bar.jsx

_images/search_side_bar.png

Semesterly.tsx

_images/semesterly.png

SideBar.jsx

_images/side_bar.png

side_scroller.jsx

_images/side_scroller.png

slot_hover_tip.jsx

_images/slot_hover_tip.png

SlotManager.tsx

_images/slot_manager.png

slot.jsx

_images/slot.png

social_profile.jsx

_images/social_profile.png

terms_of_service_banner.jsx

_images/terms_of_service_banner.png

terms_of_service_modal.jsx

_images/terms_of_service_modal.png

timetable_loader.jsx

_images/timetable_loader.png

timetable_name_input.jsx

_images/timetable_name_input.png

TopBar.tsx

_images/top_bar.png