Update SurveyPage on Public View according to Figma wireframe

[dpytko]

Description

• Follow the Figma wireframe (link provided) to update the context for SurveyPage.
• Use JavaScript instead of JSX to maintain coding standards.
• Relocate the SurveyComponent folder to FRONT > SRC > PAGES > PUBLIC > PAGES > SurveyPage.
• Relocate the ReCaptcha file to FRONT > SRC > PAGES > PUBLIC > Components
• Discuss with Dat to confirm if we need to include the test pages.
• Use Material-ui's SX to create CSS and delete the SurveyComponent.module.css file.

Links Material-ui's SX: https://mui.com/system/getting-started/the-sx-prop/ Figma link: https://www.figma.com/file/KbNIbEz1n8R5EVXEQLRSEX/Heat-Pump?node-id=1002-12532&t=hpcnMVa7pdeWtzGO-4

Note If you have design concerns, contact Sumit B. (@S7mitbarua). For content questions, reach out to Katharine Bierce (@kbierce). For coding concerns, contact Thiago Bardini (@thiagobardini) or Dat Nguyen (@Zevez7).

Ref: https://github.com/codeforboston/urban-league-heat-pump-accelerator/pull/187

[S7mitbarua]

Opened Ticket.

[S7mitbarua]

Design in progress- https://www.figma.com/file/KbNIbEz1n8R5EVXEQLRSEX/Heat-Pump?node-id=1002%3A12532&t=lCcrqoTGRqEhIIYq-0

[S7mitbarua]

Done & Completed https://www.figma.com/file/KbNIbEz1n8R5EVXEQLRSEX/Heat-Pump?node-id=1002%3A12532&t=iNDpxvgZeWUfcP5j-0

[thiagobardini]

Ready to update - @mattdelsordo, if you have any concerns about the instructions above, we can talk about it.

[mattdelsordo]

I'm a bit confused about the wireframe - I see the updates and I can totally make those changes but these aren't the actual survey questions from Christopher, which we're going to be getting dynamically from the back-end either way.

[mattdelsordo]

Also, why the preference of .js over .jsx? Again super easy change, but it seems to me that, given that the code itself is JSX, we should label it so its clear at a glance what's a React component and what isn't.

[thiagobardini]

@mattdelsordo For the dummy questions, we can just hard code them for now until the backend team figures out how to do it. Chris seems to like the questions, so just update the dummy JSON file and make changes as needed. This should work for the time being.

[thiagobardini]

@mattdelsordo about the JSX thing, React hooks can be used with plain JavaScript (JS) code, there's no need to use JSX if you don't want to.

Dat has been using JS since day one, so it's probably better to stick to that and keep things consistent.

[mikelynch]

@mattdelsordo For the dummy questions, we can just hard code them for now until the backend team figures out how to do it. Chris seems to like the questions, so just update the dummy JSON file and make changes as needed. This should work for the time being.

@thiagobardini did you see we have exemplar JSON now for how the survey will be returned? (See frontend/front/src/dummyData/survey_show.json)

[Zevez7]

@mattdelsordo @thiagobardini I have used jsx in the past and it didn't contribute much to the overall work flow besides having a file name jsx. But I did notice that my IDE linter was having trouble recognizing jsx files and I wasn't able to correctly format the file. Sometimes the jsx files messes with the import. This was a while ago so maybe things have changed and jsx has improved so that it's detectable with the linter. I have already used js files without any problem for the project, so unless there's a compelling reason to use jsx, staying with js files would keep things consistent and might prevent issue later on.

[thiagobardini]

@mikelynch I saw your JSON file. My question is, did Chris approve this questionnaire? Because @kbierce just validated the survey questionnaire with Chris (Figma link above) and this survey is related to the page https://bhpa.vercel.app/public/survey. Could you or @Zevez7 give us some direction please?

[mikelynch]

I'm not aware of final confirmation of the survey questions but these were created from the draft that Christopher shared before.

That said: our (i.e. the backend teams') understanding was that the frontend components for this would generate the UI dynamically based on what's in the database – so it doesn't really matter if these questions change or not. We just need the UI to dynamically handle the different question types, and the allowed options, which are provided in that JSON. Is that not what you're aiming to implement?

[Zevez7]

@mikelynch This is correct. @thiagobardini frontend Matt is working on the survey and knows what's going on. I'll just let him coordinate with backend to figure out what he needs from them.