Major updates and refactors - Githubissues

OpenframeProject / Openframe-WebApp

A responsive front-end web app for Openframe.

GNU Affero General Public License v3.0

2 stars 4 forks source link

Major updates and refactors #12

Closed jmwohl closed 4 years ago

jmwohl commented 4 years ago

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:

[x] 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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Closes #5

jmwohl commented 4 years ago

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

jmwohl commented 4 years ago

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 commented 4 years ago

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

jvolker commented 4 years ago

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".