Bug: Dynamic Assignment Demo Page Not Loading

[crayolakat]

Describe the bug
An error in the dynamic assignment demo page prevents it from loading

To Reproduce
Steps to reproduce the behavior:

1. Start up your dev environment
2. Go to http://localhost:3000/demo/dyn . Relevant documentation: https://github.com/MoveOnOrg/Spoke/blob/2e8c479ef7e4071bc903bdf882334488b50f2910/docs/HOWTO-use-texter-sideboxes.md?plain=1#L135
3. Issue: The page won't load. The console in Developer Tools displays the following error: Uncaught TypeError: Cannot read properties of null (reading 'questionResponseValues')

Expected behavior
The page should load successfully.

Screenshots

Platform (please complete the following information):

• OS: macOS
• Browser: Chrome
• Desktop
• Version: 12.3.0

Additional context
Unsure when the problem first started

[zachblume]

I checked out the current version 2e8c479ef7e4071bc903bdf882334488b50f2910 yesterday. /demo/dyn is not rendering anything as you said and there are console errors. I inserted console.debugs through the code of /syc/components/assignmenttexter/controls and prevented undefined variables being called until I got the page to render. DemoTexterDynAssign is assigned test data "d" and preventing undefined variable object access got most of the way but adding testData.d.contact={} let the page render (it rendered a page as if there was no contact properly loaded). Then I realized there was no siodebar rendering, and even more none of the 4 sidebar tests mentioned in HOWTO-use-texter-sideboxes.md (/demo/text.../demo/reply...etc) render a sidebar.

I checked out commit d6f228d42b5ca08e76048760b7bfa2852d19c532 because that is the first commit of the how-to file we have been referencing so I figured it must've worked then, and the sidebars are present in /demo/text, /demo/reply, and /demo/reply2 but /demo/dyn is not loading as far as I can tell. However, this commit was issuing "webpack: Failed to compile." errors on initial "yarn dev" -- running the home page at localhost:3000 only gave a few dozen errors but running any of the demos was churning out thousands of errors. But those seem like potentially commit-specific issues that have been fixed. /demo/dyn fails on this commit with:

Uncaught TypeError: Cannot read properties of undefined (reading 'roles')
    at Object.showSidebox (react-component.js:24:17)
    at components.js:58:35
    at Array.filter (<anonymous>)
    at getSideboxes (components.js:51:6)
    at ContactController.render (ContactController.jsx:520:30)
    at ContactController.<anonymous> (makeAssimilatePrototype.js:15:1)
    at ReactCompositeComponent.js:793:1
    at measureLifeCyclePerf (ReactCompositeComponent.js:73:1)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:792:1)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:819:1)

The investigation continues...

This is my first open source contribution! Bear with me...

[zachblume]

< AssignmentTexterContactControls > expects a prop passed from parent as props.enabledSideboxes, but it's undefined

In these current demos, the only parent components of Controls is AssignmentTexterContactControls,DemoTexterTest,main,TexterDashboard, and the theme+context+app+router+apollo providers. Seems like the right prop isn't being passed and perhaps a previous refactor requires a new parent to be rendered around AssignmentTexterContactControls?

Or perhaps for these demos we just have to manually give this value

[zachblume]

OK. I got the sideboxes to render in /demo/text, /demo/reply, and /demo/reply2 by injecting most of the code that prepares const enabledSideboxes = getSideboxes(...) from < ContactController >.render ... into Demo.generateDemoTexterContact.DemoTexterTest ... but this makes it seem like we should be rendering ContactController instead of AssignmentTexterContactControls in Demo.

Possible that there's similar missing context from /demo/dyn that is preventing dynamic loading or a simulated version from happening?

[zachblume]

By (1) providing enabledSideboxes as mentioned above and (2) more thoroughly tracing and preventing undefined variables from throwing fatal errors, I got rendering to finish on /demo/dyn. Then I realized I don't know the exact expected correct result that is actually being demonstrated here so I may be stuck, but I'll go check documentation etc.

[zachblume]

One more quick note as I think, I don't see any way around either (1) making these undefined variables go gracefully for demo purposes or (2) changing the toplevel component being rendered. Demo.jsx renders < AssignmentTexterContactControls > and its Constructor directly calls props.contact.questionResponseValues.forEach even though the testData.d leaves .contact which gets passed as props.contact undefined. When I pull up the actual development build and create a dynamic campaign and run out of contacts, in fact < AssignmentTexterContactControls > is not rendered at all, but just TexterSidebox inside ContactController, making me think that rendering < AssignmentTexterContactControls > with null contacts is now a bad demo.

[zachblume]

By doing a conditional render of < ContactController > instead of < AssignmentTexterContactControls > for just /demo/dyn, the demo returns the production-style full screen "sidebox list" that presents the user with a request for new batch of texts. So I'm pretty sure that solves the remaining issue here as long as the following screen should also be the correct behavior for /demo/dyn ?