Make Enter Key Open Course Details & Add Course to Calendar Pop-up

[Luke-W-Hart]

Related to #2137 On MyProfile Schedule, adds a simple onKeyPressEvent so when focused on a specific course, any time a key besides tab, esc, or arrow keys are pressed the add course to schedule pop-up comes up. Could not figure out how to pop-up only on enter key press (for now), but adding the course to your schedule is now possible with just the keyboard. Also ONLN ASYN courses are not accessible via keyboard navigation, but I would assume this isn't necessary.

[Luke-W-Hart]

The code I just pushed worked as intended (opened the pop-up only when I pressed enter), just need to see how to deal with the error.

[jsenning]

LGTM - This now seems to work correctly

[Luke-W-Hart]

@EjPlatzer we keep receiving the error that "key is not a property on type 'SyntheticEvent<HTMLElement, Event>", but if we console.log the key press event we receive this So there is a key property, and testing this out all of these properties give the same error, any idea as to why it would be doing this?

[EjPlatzer]

@EjPlatzer we keep receiving the error that "key is not a property on type 'SyntheticEvent<HTMLElement, Event>", but if we console.log the key press event we receive this So there is a key property, and testing this out all of these properties give the same error, any idea as to why it would be doing this?

@Luke-W-Hart this appears to be a bug (or at least poor design) in the react-big-calendar package (or more accurately, the community-contributed types for the package, since react-big-calendar doesn't use TypeScript).

They have declared the type of onKeyPressEvent's second parameter to be React.SyntheticEvent<HTMLElement>, which is the most general concept of any event in React. In other words, they have said that it will be some kind of event, but not what kind of event it will be. So as far as TypeScript is concerned, this could be any kind of event and we only know that we have access to the properties that all events have in common (e.g. target), but not any of the properties specific to a KeyboardEvent.

We could try to contribute a patch to the types for this package, but in the meantime the simplest fix currently is check whether the property exists and is of the correct type. This will tell TypeScript that it's definitely there. Technically, this is the correct thing to do if we don't know that that event will always be of type KeyboardEvent and therefore always have key: string property.

[Luke-W-Hart]

Thanks for clearing that up Evan!