Major updates and refactors #12

jmwohl · 2020-02-08T13:09:32Z

updates dependencies
updated to more current JS standards
updates webpack build process
lots of fixes and refactoring in order to work with updated dependencies

Known issues:

The notifications package I was using hasn't been maintained and doesn't work, so either needs to be forked and fixed or swapped out for another package

jmwohl · 2020-02-09T14:57:11Z

src/config/dev.js

-  apiBase: 'http://localhost:8888/v0/',
+  apiBase: 'https://api.openframe.io/v0/',


@jvolker Notice this — this points the local dev web app at the production api. If/when we get the API server running locally again we should switch this default back.

Might be better long-term to move these settings to env vars.

jmwohl · 2020-02-09T14:58:34Z

src/containers/App.js

@@ -112,41 +127,42 @@ class App extends Component {
        {
          //<Notification notice={ ui.notice } updateNotification={actions.updateNotification}/>
        }
-        <Notifs />
+        {/* <Notifs /> */}


This Notifs (from redux-notifications) wasn't easy to just update along with the other deps... we'll need an alternative, to fork and update this package, or to roll our own little notifications lib.

What is the exact functionality we would be loosing with this?

Is that all notifications outside overlays?
What's the problem with redux-notifications?

This is for the success/info/error notifications for the UI (not the error warnings in edit forms).

I don't remember exactly what the error was, but think it hasn't been updated to work with the latest versions of react and/or redux. Maybe be that we can fork and update it or find another comparable package.

jmwohl · 2020-02-09T15:00:49Z

@jvolker As I mentioned in slack, don't worry too much about reviewing this in detail. It's WAY too big of a PR to review in a comprehensive way, and I don't plan on releasing this version until it's well tested, so I imagine there will be a number of bug fix and update PRs after this before we'd release this code.

jvolker · 2020-02-09T23:15:37Z

Thanks so much for this big update @jmwohl. I'm going to do review it later. I can already confirm that I can run this locally without errors using npm start.

jvolker · 2020-02-12T04:50:52Z

server.js

 const open = require('open');

 let server = new WebpackDevServer(webpack(config), config.devServer);

-server.listen(config.port, '0.0.0.0', (err) => {


Is there a particular reason why you hardcoded the port?

Nope! I don't remember why I did that, and there's no reason it can't come from the config. I'll update that.

Thanks! 👍

Realized this file isn't actually used, removed it.

Remove duplicate comment.

jvolker · 2020-02-13T00:43:44Z

Editing artwork and saving it without a name crashes the website and throws this error:

backend.js:6 The above error occurred in the <div> component:
    in div (created by ArtworkEditArtworkModalComponent)
    in div (created by ArtworkEditArtworkModalComponent)
    in div (created by ArtworkEditArtworkModalComponent)
    in div (created by ArtworkEditArtworkModalComponent)
    in div (created by ModalPortal)
    in div (created by ModalPortal)
    in ModalPortal (created by Modal)
    in Modal (created by ArtworkEditArtworkModalComponent)
    in div (created by ArtworkEditArtworkModalComponent)
    in ArtworkEditArtworkModalComponent (created by ModalManagerContainer)
    in div (created by ModalManagerContainer)
    in ModalManagerContainer (created by ConnectFunction)
    in ConnectFunction (created by App)
    in div (created by App)
    in App (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in withRouter(Connect(App))
    in Router
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
r @ backend.js:6
logCapturedError @ react-dom.development.js:21843
logError @ react-dom.development.js:21880
update.callback @ react-dom.development.js:23232
callCallback @ react-dom.development.js:13829
commitUpdateEffects @ react-dom.development.js:13867
commitUpdateQueue @ react-dom.development.js:13857
commitLifeCycles @ react-dom.development.js:22160
commitLayoutEffects @ react-dom.development.js:25344
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
commitRootImpl @ react-dom.development.js:25082
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
commitRoot @ react-dom.development.js:24922
finishSyncRender @ react-dom.development.js:24329
performSyncWorkOnRoot @ react-dom.development.js:24307
eval @ react-dom.development.js:12199
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
flushSyncCallbackQueueImpl @ react-dom.development.js:12194
flushSyncCallbackQueue @ react-dom.development.js:12182
batchedUpdates$1 @ react-dom.development.js:24392
notify @ Subscription.js:26
notifyNestedSubs @ Subscription.js:68
handleChangeWrapper @ Subscription.js:73
dispatch @ redux.js:229
eval @ index.js:104
eval @ index.js:12
dispatch @ redux.js:644
eval @ updateArtworkRequest.js:19
Promise.then (async)
eval @ updateArtworkRequest.js:16
eval @ index.js:9
eval @ redux.js:483
_handleSubmitSaveArtwork @ ModalManagerContainer.js:159
executeSubmit @ handleSubmit.js:56
handleSubmit @ handleSubmit.js:149
Form._this.submit @ createReduxForm.js:366
callCallback @ react-dom.development.js:336
invokeGuardedCallbackDev @ react-dom.development.js:385
invokeGuardedCallback @ react-dom.development.js:440
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:454
executeDispatch @ react-dom.development.js:584
executeDispatchesInOrder @ react-dom.development.js:609
executeDispatchesAndRelease @ react-dom.development.js:713
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:722
forEachAccumulated @ react-dom.development.js:694
runEventsInBatch @ react-dom.development.js:739
runExtractedPluginEventsInBatch @ react-dom.development.js:880
handleTopLevel @ react-dom.development.js:5803
batchedEventUpdates$1 @ react-dom.development.js:24401
batchedEventUpdates @ react-dom.development.js:1415
dispatchEventForPluginEventSystem @ react-dom.development.js:5894
attemptToDispatchEvent @ react-dom.development.js:6010
dispatchEvent @ react-dom.development.js:5914
unstable_runWithPriority @ scheduler.development.js:697
runWithPriority$2 @ react-dom.development.js:12149
discreteUpdates$1 @ react-dom.development.js:24417
discreteUpdates @ react-dom.development.js:1438
dispatchDiscreteEvent @ react-dom.development.js:5881
Show 2 more frames
react-dom.development.js:14748 Uncaught (in promise) Error: Objects are not valid as a React child (found: Error: The `Artwork` instance is not valid. Details: `title` can't be blank (value: "").). If you meant to render a collection of children, use an array instead.
    in div (created by ArtworkEditArtworkModalComponent)
    in div (created by ArtworkEditArtworkModalComponent)
    in div (created by ArtworkEditArtworkModalComponent)
    in div (created by ArtworkEditArtworkModalComponent)
    in div (created by ModalPortal)
    in div (created by ModalPortal)
    in ModalPortal (created by Modal)
    in Modal (created by ArtworkEditArtworkModalComponent)
    in div (created by ArtworkEditArtworkModalComponent)
    in ArtworkEditArtworkModalComponent (created by ModalManagerContainer)
    in div (created by ModalManagerContainer)
    in ModalManagerContainer (created by ConnectFunction)
    in ConnectFunction (created by App)
    in div (created by App)
    in App (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in withRouter(Connect(App))
    in Router
    in Provider
    at throwOnInvalidObjectType (react-dom.development.js:14748)
    at reconcileChildFibers (react-dom.development.js:15606)
    at reconcileChildren (react-dom.development.js:18096)
    at updateHostComponent (react-dom.development.js:18611)
    at beginWork$1 (react-dom.development.js:20193)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24695)

jvolker

I skimmed the code as requested and ran the app to test manually for errors:

browse public and private channels (multiple artwork formats incl. shaders)
adding artwork
editing artwork
deleting artwork
edited frame
deleting frame

I've found a bug when editing artwork and added a few more comments.

Again, thanks a lot for this massive update!

jvolker · 2020-02-13T01:10:21Z

Closes #5

jmwohl · 2020-02-16T13:44:50Z

I fixed the artwork edit error, but there's definitely more work to do on normalizing our error handling in the UI.

jmwohl · 2020-02-16T20:08:26Z

Alright, I decided to just pull the redux-notifications code into our project rather than use the unmaintained dependency. I've updated the code a bit so we should have working notifications again now.

jvolker · 2020-02-16T21:59:33Z

Great, thanks for your work! I opened #15 to continue the conversation about notifications/alerts there.

jvolker · 2020-02-16T22:15:24Z

I fixed the artwork edit error, but there's definitely more work to do on normalizing our error handling in the UI.

I've just tested this and it's still an issue for me. I've tested with artwork "5e449d86a38167076035c032".

jmwohl added 2 commits December 1, 2019 14:20

WIP - updating EVERYTHING

34043fa

WIP - major dependency updates and build refactor

70c10d2

jmwohl mentioned this pull request Feb 8, 2020

Start from source fails #5

Closed

Fix npm script, can use npm start to run dev server

971b56d

jmwohl commented Feb 9, 2020

View reviewed changes

jmwohl requested a review from jvolker February 9, 2020 14:59

jvolker reviewed Feb 12, 2020

View reviewed changes

Update index.html

73cadfa

Remove duplicate comment.

jvolker requested changes Feb 13, 2020

View reviewed changes

jmwohl merged commit c56c941 into master Feb 16, 2020

jmwohl deleted the npmupdates branch February 16, 2020 20:08

jvolker mentioned this pull request Feb 16, 2020

Normalise error handling in the UI #15

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Major updates and refactors #12

Major updates and refactors #12

jmwohl commented Feb 8, 2020 •

edited

Loading

jmwohl Feb 9, 2020

jmwohl Feb 9, 2020

jvolker Feb 13, 2020

jvolker Feb 13, 2020

jmwohl Feb 16, 2020

jmwohl commented Feb 9, 2020

jvolker commented Feb 9, 2020 •

edited

Loading

jvolker Feb 12, 2020

jmwohl Feb 13, 2020

jvolker Feb 13, 2020

jmwohl Feb 16, 2020

jvolker commented Feb 13, 2020

jvolker left a comment •

edited

Loading

jvolker commented Feb 13, 2020

jmwohl commented Feb 16, 2020

jmwohl commented Feb 16, 2020

jvolker commented Feb 16, 2020

jvolker commented Feb 16, 2020 •

edited

Loading

		apiBase: 'http://localhost:8888/v0/',
		apiBase: 'https://api.openframe.io/v0/',

Major updates and refactors #12

Major updates and refactors #12

Conversation

jmwohl commented Feb 8, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jmwohl commented Feb 9, 2020

jvolker commented Feb 9, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jvolker commented Feb 13, 2020

jvolker left a comment • edited Loading

Choose a reason for hiding this comment

jvolker commented Feb 13, 2020

jmwohl commented Feb 16, 2020

jmwohl commented Feb 16, 2020

jvolker commented Feb 16, 2020

jvolker commented Feb 16, 2020 • edited Loading

jmwohl commented Feb 8, 2020 •

edited

Loading

jvolker commented Feb 9, 2020 •

edited

Loading

jvolker left a comment •

edited

Loading

jvolker commented Feb 16, 2020 •

edited

Loading