Custom modules #2785

agnesnatasya · 2020-07-26T07:49:50Z

Context

#2040
Feature request to add customised module to the timetable.

Implementation

I created a form that will require the user to input necessary information to create class of the customised module. The added class is supposed to appear in the timetable.

This is the responsive design for several screen widths

Wide screen

Below md

Small screen

Other Information

This is my first PR, I encountered a problem but not really sure how to solve it. After the submit button is clicked, it dispatches the action, and in the log, the difference of the state is correct, but the page is just loading and it just hang in there. In the log, there is no log of waiting or doing for something, so I am not sure what did I do wrong.

If this problem has been rectified, I will modify the reducer, when it encounters the same module code and title, there are some checks that needs to be done.

Any help is appreciated, thank you!

…custom modules when timetable is set

ZhangYiJiang

Good job on your first PR!

The reason the page won't stop loading is because the final rendered timetable needs data from two places - the timetable config, which you have implemented, and the actual Module object loaded from the API and cached in module bank, which you have not. If the page finds a config but no module, it assumes the module is not loaded, and displays a spinner.

To fix this, you need to store the custom module's data in the module bank too. You will also need to persist this. I suggest adding a new customModules key to the settings reducer (which is already persisted) and creating a selector to merge that with the module bank.

Do also run the linter before pushing

ZhangYiJiang · 2020-07-26T18:36:52Z

website/src/views/timetable/CustomModuleTimetableForm.tsx

+            onChange={(e) => this.props.onChangeVenue(e)}
+            placeholder="Venue."
+          />
+          <Downshift onChange={this.onSelectDay}>{this.renderDropdownDay}</Downshift>


These dropdown menu should just be <select> elements - use Downshift only if you want comboboxes where there are too many options to select without searching. See AvailabilitySearch for an example of time selection. You might actually be able to reuse that component if you can make it more generic

ZhangYiJiang · 2020-07-26T18:43:48Z

website/src/views/timetable/CustomModuleTimetableForm.scss

+$item-padding-vertical: 0.6rem;
+$btn-margin: 0.5rem;
+
+.formGroup {


Should use Bootstrap's form and layout system instead of trying to rebuild everything from scratch https://getbootstrap.com/docs/4.5/components/forms/

ZhangYiJiang · 2020-07-26T18:49:35Z

website/src/views/timetable/CustomModulesForm.tsx

+          <input
+            className={classnames(styles.input, styles.titleIcon)}
+            onChange={(e) => this.setState({ moduleCode: e.target.value })}
+            placeholder="Module Code"


Avoid using the placeholder for label. Each form elements should have a proper label element associated with them (which can be hidden visually if needed)

ZhangYiJiang · 2020-07-26T18:50:15Z

website/src/views/timetable/CustomModulesForm.tsx

+  };
+
+  isFormValid = () => {
+    const validity = Boolean(


Try relying on HTML validation instead by adding required property to input elements

ZhangYiJiang · 2020-07-26T18:53:52Z

website/src/views/timetable/CustomModulesForm.tsx

+  timestamp: number;
+};
+
+class CustomModulesForm extends React.Component<Props, State> {


If you can, try creating functional components. At least make this a PureComponent for better performance

…t existing modules

…ing module code and validate the title

…downshift

…unction

codecov · 2020-07-29T12:57:02Z

Codecov Report

Attention: Patch coverage is 8.04598% with 80 lines in your changes missing coverage. Please review.

Project coverage is 45.34%. Comparing base (eb521e6) to head (a32aace).
Report is 639 commits behind head on master.

Files	Patch %	Lines
website/src/views/timetable/CustomModulesForm.tsx	4.25%	45 Missing ⚠️
website/src/actions/timetables.ts	4.34%	22 Missing ⚠️
...ite/src/views/timetable/CustomModulesContainer.tsx	0.00%	10 Missing ⚠️
website/src/reducers/moduleBank.ts	0.00%	2 Missing ⚠️
website/src/views/timetable/TimetableContent.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #2785      +/-   ##
==========================================
- Coverage   45.95%   45.34%   -0.61%     
==========================================
  Files         248      250       +2     
  Lines        5273     5359      +86     
  Branches     1222     1234      +12     
==========================================
+ Hits         2423     2430       +7     
- Misses       2850     2929      +79

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

nusmods-deploy-bot · 2020-07-29T12:58:23Z

Deployment preview for a32aace7 ready at http://5f30452cbed268051e703c42--nusmods-deploy-preview.netlify.app

agnesnatasya · 2020-07-29T14:01:13Z

Hi @ZhangYiJiang thank you so much for your help and review. I have solved the loading problem by making moduleBank reducer process ADD_CUSTOM_MODULE action too. I have also implemented all of your review suggestions.

The UI is responsive, here is the display in larger screen, you can look at the other screen widths in the deployment preview.

This functionality is also available in the vertical mode.

Several cases that I considered:

If the user adds a custom module with same code as one of their custom modules, and the title is different, a notification will be displayed.
If the user adds a custom module with the same code and title as one of their custom modules, the classes willl be added to the Semester data
All custom module code added will be appended with an apostrophe, to indicate that it is a custom module

Thank you!

ZhangYiJiang · 2020-07-29T17:27:27Z

website/src/views/timetable/CustomModulesForm.tsx

+  renderInputClassNo = () => {
+    return (
+      <div className="form-group">
+        <label htmlFor="module-code">Class No.</label>


IDs should be unique. module-code might be a bit generic, so you want to prefix it with something, and here it is a copy-paste error. Also class no. can probably be generated automatically - they don't matter for custom modules

Okay, I will add '-custom-module' to the end of it to ensure uniqueness. For class number, I think it is still useful for custom modules, there might be several tutorial classes, for example.

website/src/views/timetable/CustomModulesForm.tsx

ZhangYiJiang · 2020-07-31T04:09:08Z

Using the module code field to indicate a module is custom is probably a bad idea. You're using a single field to store two pieces of unrelated information, and that's only going to cause issues in the future. A better way would be to add a customModule?: boolean property to the Module type and use that instead.

The UI is going to take a bit of work. You probably need a way for the user to specify different lesson types. The horizontal mode UI is also a bit too wide - you can probably fit the lesson fields on one line, which would make it easier to specify additional lessons. You'll also need to consider UI for editing existing custom modules and removing them.

agnesnatasya · 2020-08-09T18:21:24Z

Hi @ZhangYiJiang thank you so much for your review again, appreciate it.
The reason that I add apostrophe, ', in the code of the custom module, is to not confuse the user when they input the same code as a pre-existing module. For example, if someone puts CS1010 in the custom module, the name will be CS1010', so that it is still displayed as a different module from the original CS1010 module from NUSMods, so someone can have both in the timetable.

Also, it is to prevent custom module with the same code as a pre-existing module to overwrite the pre-existing module in the reducer. For example, in timetables reducer, if the moduleCode is the same, the old one will be overwritten, because it is a key-value pair in the dictionary.

    case ADD_MODULE:
    case ADD_CUSTOM_MODULE:
      return {
        ...state,
        [moduleCode]: action.payload.moduleLessonConfig,
      };

If I add a customModule? field in Module type, it still cannot handle this case because it is key-pair of dictionary.

May I clarify what do you mean by 'You probably need a way for the user to specify different lesson types'? There has been a 'lesson type' field in the form, or do I understand you wrongly?

Also, for the part 'you can probably fit the lesson fields on one line, which would make it easier to specify additional lessons', do you want the UI for horizontal mode on large screen or above, to be like

Module Code, Module Title and Module Credit in first line
Lesson Type, Class No, Venue, Day, Start Time, End Time in second line

?

Thank you very much!

…ique

agnesnatasya added 29 commits July 15, 2020 23:13

Add CustomModulesContainer to the TimetableContent

37c0ef3

Add styling to CustomModulesContainer'

7ce94e0

Add CustomModulesForm to add new customised modules

1e35b4c

Add styling to form

45d87f2

Move the form out of the button in CustomModulesContainer'

a6924cc

Add styling to input of CustomModulesForm

0ff5e0e

Form to add custom modules and handle on submit function

371f32d

Remove console log statement

bc7eced

remove console log statements from actions timetables

33c0c0e

Map Dispatch to Props of Custom Modules Form and call AddModule action

1864ade

CustomModules Form to render CustomModuleTimetableForm

f3c2b1b

Add styling for input in CustomMOduleTimetableForm

2622afc

Add CustomMOduleTimetableForm to inset timetable data through form

fe6e1fc

CustomMOdulesForm to render CustomModuleTimetableForm

6131f6c

Declare Day as a constant of list days

bd4d585

Remove typo statement

98a309e

Working downshift element to chosse from Dropdown

3bd4a58

Add styling to adding timetable

6ab4260

CustomModulesForm declare callback function to set properties of the …

29caa3a

…custom modules when timetable is set

Add styling for timetable form, responsive width for flex elements

44c2e65

Add fields for custom module form

6686371

Add margin to the button

7c18a50

Responsive width of the form, using flex basis

0327ae3

Add function to handle change on form

343fbd3

Make downshift reflect selected value

e042896

Fix bug in handler functions for change in form input

37fa523

Streamline definition of add custom module action

97161d0

Set reducer for case ADD_CUSTOM_MODULE action

30c03eb

Remove dummy data from form

aceee7f

ZhangYiJiang reviewed Jul 26, 2020

View reviewed changes

agnesnatasya added 14 commits July 28, 2020 00:08

Add module key to add custom module action

e5bc996

ModuleBank reducer handles add custom module action

5bc7ed1

Set the default weeks to be 1-13

4b872f9

Add apostrophe to custom modules name, to handle conflict with curren…

cca2bca

…t existing modules

In action of add custom module, check first whether there is an exist…

97475dc

…ing module code and validate the title

Add check if the current module code has existed in store

e8ec45a

Add check whether the custom module code and title is already present

85c3047

Add functions to handle change on form and change form to select not …

0c01770

…downshift

Custom Modules form to still appear in vertical mode

1f5153b

Redefine all downshift to a select element, give label, and handler f…

0ca523a

…unction

Change to form and use HTML validation

7ca7bc9

Make flex grow to be 0

0148332

Delete CustomMOduleTimetableForm component

439f6b1

Lint fix

aa281e5

agnesnatasya marked this pull request as ready for review July 29, 2020 13:03

agnesnatasya added 2 commits July 29, 2020 21:04

Remove unneccessary styling

32a3fd2

Notification when clash module code to remove the last character

a1194e5

ZhangYiJiang reviewed Jul 31, 2020

View reviewed changes

agnesnatasya added 3 commits August 10, 2020 02:26

Change input to button for submit, rename variable according to review

4c8df8e

Remove unchanged state from state and put it when submitting form

55c1b13

Lint fix and add '-custom-module' suffix to the id to ensure it is un…

a32aace

…ique

This was referenced Aug 8, 2021

Feature Request: Support Hiding of Certain Lesson Types #3334

Closed

Feature: Add 'Custom Modules' to timetable #2040

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom modules #2785

Custom modules #2785

agnesnatasya commented Jul 26, 2020 •

edited

Loading

ZhangYiJiang left a comment

ZhangYiJiang Jul 26, 2020

ZhangYiJiang Jul 26, 2020

ZhangYiJiang Jul 26, 2020

ZhangYiJiang Jul 26, 2020

ZhangYiJiang Jul 26, 2020

codecov bot commented Jul 29, 2020 •

edited

Loading

nusmods-deploy-bot bot commented Jul 29, 2020 •

edited

Loading

agnesnatasya commented Jul 29, 2020 •

edited

Loading

ZhangYiJiang Jul 29, 2020

agnesnatasya Aug 9, 2020

ZhangYiJiang commented Jul 31, 2020

agnesnatasya commented Aug 9, 2020

Custom modules #2785

Are you sure you want to change the base?

Custom modules #2785

Conversation

agnesnatasya commented Jul 26, 2020 • edited Loading

Context

Implementation

Other Information

ZhangYiJiang left a comment

Choose a reason for hiding this comment

ZhangYiJiang Jul 26, 2020

Choose a reason for hiding this comment

ZhangYiJiang Jul 26, 2020

Choose a reason for hiding this comment

ZhangYiJiang Jul 26, 2020

Choose a reason for hiding this comment

ZhangYiJiang Jul 26, 2020

Choose a reason for hiding this comment

ZhangYiJiang Jul 26, 2020

Choose a reason for hiding this comment

codecov bot commented Jul 29, 2020 • edited Loading

Codecov Report

nusmods-deploy-bot bot commented Jul 29, 2020 • edited Loading

agnesnatasya commented Jul 29, 2020 • edited Loading

ZhangYiJiang Jul 29, 2020

Choose a reason for hiding this comment

agnesnatasya Aug 9, 2020

Choose a reason for hiding this comment

ZhangYiJiang commented Jul 31, 2020

agnesnatasya commented Aug 9, 2020

agnesnatasya commented Jul 26, 2020 •

edited

Loading

codecov bot commented Jul 29, 2020 •

edited

Loading

nusmods-deploy-bot bot commented Jul 29, 2020 •

edited

Loading

agnesnatasya commented Jul 29, 2020 •

edited

Loading