Remove jquery

[angrave]

A search suggests it appears jquery is only used in

./src/screens/Admin/Instructors/InstructorList.jsx
./src/screens/Watch/Utils/keydown.control.js

as a wrapper for getElementById. Once it is no longer needed it remove it from package.json and yarn.lock.

A simple fix would be to replace jquery with native functions. However working directly with html DOM is not the react way of doing things. Is there a better way?

When fixing this, it would be important to fully-understand (and manually check that the arrow key behavior is unchanged) the focus / UI behavior in keydown.control.js i.e.,

Does the implemented behavior work well for users who use a screen reader and keyboard control?

[harsh183]

#806 - first we fix instructor view with a react state

Part 2 with keydown.control.js is a lot more complicated with 58 instances of $. Most of them are finding the element, using length, or focusing, but some have more complicated selectors. It's definitely far from the react way, so I'd recommend

• writing a fairly extensive set of tests for the Watch screen
• adding the right state+call backs for various keyboard actions
• more tests to make sure each action is good

Having jQuery (or even native findElementById) is a code smell, but it's a fairly sizable refactor to fix.

[harsh183]

Reviving this effort

1. Move existing dispatch call to test cases so we can track regressions
2. Rewrite the jquery based interactions to also fire events into the dispatch/route the call some React-ish way
3. Test those new flows to make sure we're doing the right events
4. Test the video player to be sure everything works as before

#839 - here is an example of the new Dispatch tests and moving one jQuery interaction to something more React-friendly. If this looks good I can quickly convert a lot more instances.