feat: reactify

[ahmaxed]

No description provided.

[raisedadead]

Here are some initial recommendations(because this not now in MVP mode):

• Squash your commits or make them like so that each commit does on thing that you want to keep, for later. That just makes it super easy to rebase and continue QA.
• Remove all the files that you do not really need from CRA. Service workers?
• Make the code formatting consistent. Add a linter config or re-use the setup from the main codebase.
• Make all the code speak one voice, right now it's a bunch of classes thrown in, some random vanilla code thrown in with ES6?
• Use a bundler to minify all the code that you want to ship.

Essentially this is really good candidate for a spike but we should not ship this to production.

[ahmaxed]

one note:

the pause button works when toggling device toolbar, but when I tried it from a lower end phone it did not.

I was wondering if others are experiencing the same thing.
https://5d41f62b67d098b318e745fa--coderadio-local.netlify.com

[ahmaxed]

@raisedadead thank you for the review.
A couple of thoughts on the bullet points.

• Make all the code speak one voice, right now it's a bunch of classes thrown in, some random vanilla code thrown in with ES6?

at the moment, only keydown event listeners are in vanila because they performed better than react's onKeyPress on my side. I could onKeyPress work if needed.

Also, the visualizer.js is in plain javascript. Because it meant to be separate and replaceable by design with other community data vis solutions, I was not should if I need to change that.
Please let me know if that needs to be reactified as well.

• Use a bundler to minify all the code that you want to ship.

I am currently bundling and minifying via npm run build and serve via netlify cli.
not sure if that is sufficient or if you have another approach in mind.

[ahmaxed]

last state deployed: https://5d42d25eee60bdfb275c83ad--coderadio.netlify.com/

[raisedadead]

npm run build and serve via netlify cli.

You will need to add the to the config and version control, right? Using a netlify.toml?

5d42d25eee60bdfb275c83ad--coderadio.netlify.com

Is this from your local dev?

[raisedadead]

Note that the build step (scripts) that you configure should be served off the static location that netlify understands. This should be in the config.

[raisedadead]

Also, the visualizer.js is in plain javascript. Because it meant to be separate and replaceable by design with other community data vis solutions, I was not should if I need to change that.

Replaceable how? People can add these files to our codebase? And we let them choose from a list?

If yes, then I don't like the way the integration is done, currently per the code its a direct import. Extremely Fragile IMHO. Breaking the convention of a react based app and If that's the direction, they should be wrapped in their own packages and included via conventional imports, and have their own tests, etc.

For now, simplest way forward is making it in react.

[raisedadead]

at the moment, only keydown event listeners are in vanila because they performed better than react's onKeyPress on my side. I could onKeyPress work if needed.

Can you elaborate more on this?

[raisedadead]

Currently the deploy preview is not available on this PR because of the missing build config.

5:59:22 PM: Build ready to start
5:59:24 PM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
5:59:24 PM: build-image tag: v3.3.2
5:59:24 PM: buildbot version: ef8d0929ed0baabafd8bbb7d0b021e1fc24180c0
5:59:24 PM: Fetching cached dependencies
5:59:25 PM: Starting to download cache of 4.0MB
5:59:25 PM: Finished downloading cache in 217.08962ms
5:59:25 PM: Starting to extract cache
5:59:25 PM: Finished extracting cache in 37.109544ms
5:59:25 PM: Finished fetching cache in 256.729394ms
5:59:25 PM: Starting to prepare the repo for build
5:59:25 PM: Preparing Git Reference pull/23/head
5:59:26 PM: No build command found, continuing to publishing
5:59:26 PM: Starting to deploy site from '/'
5:59:26 PM: Creating deploy tree 
5:59:26 PM: 0 new files to upload
5:59:26 PM: 0 new functions to upload
5:59:27 PM: Finished processing build request in 2.464267318s
5:59:27 PM: Starting post processing
5:59:27 PM: Post processing done
5:59:28 PM: Site is live

Netlify simply starts serving from the root on this PR.

[ahmaxed]

@raisedadead thanks for the detailed review.

I have taken care of these remaining tasks.

• replaced the Vanila event listeners with react's onkeypress.
• rectified visualizer.
• added deploy scripts.

Please let me know if you would like me to further modify this branch.