harsh183
commented
1 month ago https://github.com/classtranscribe/FrontEnd/pull/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
Watchscreen - 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.
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?