Jquery-to-ReactJS render

[OliverBrimdjam]

What:
--In this update, I made a ReactJS render of two pages: options.html and popup.html. To it works, was necessary to use webpack and babel config to insert grafts of React rendered content overwriting the original content. The way choose to do it permit the use of webpack to bundle the React content and no additional adjust is needed for chrome-extension use, just install and run.

--The functions inside js/helpers.js, js/options.js, js/popup.js, js/toDo.js, js/migrations, were copied to src/tools and refactored to be more readable.

--All the Html was separated to react Components, some of the event listeners were changed to events onChange, onClick, onKeyDown, etc. All CSS was left like before, just new elements have different ones.

Why:
--The changes were made to turn the code more readable and workable, making it easier to maintain and more predictable. Some parts of the extension were broken because of old libraries. It was solved using the moderns native ReactJS state hooks.

--The ES6+ standard was used to import/export functions, variable names were rewritten to be more readable. Every storage action was also abstracted to one point, making it easy to change the storage system if necessary.

How:
--The first step was to take all HTML and copy it to ReactJS components. The HTML was split into JSX parts and organized into src/components, these components were grouped by page, and by page section.

--The second step was to bundle it to convert ES6+ into old javascript. To do it was taken webpack configured the loaders, and set to multiple in/out files.

--The third step was to use ReactJS to render the components into HTML

tags on the original popup.html and options.html, and import the script into that pages. These files are in src/grafts/optionsGrafts and src/grafts/popupGrafts.

--The last step was to import all functions that were used into the two pages, and all variables too, rewriting and refactoring them when necessary, to activate all features. All these functions were separated into different files and were stored into src/tools/. At this point, all access to Local Storage was abstracted to be made just through the functions src/tools/helpersTools/lsSet.js and src/tools/helpersTools/lsGet.js.

obs: All CSS was kept to stay at global scope because any style change was made.