[wip] Adding create question feature with CRUD operations

[megsachdev]

This feature is to add a new question with multiple choice answers. We will be using Polaris for the components on the page. This would include: Create a question Update a question View a question Delete a question

[swolidity]

Need to decide if we will be using a react form helper library such as Formik for this. I started a really rough draft in the lively repo under the quiz branch here: https://github.com/BioMediaLab/lively/blob/quiz/www/pages/quizzes.tsx

[cliffpyles]

@andyk91 The design system we are using for the application has its own form components that provide this functionality. By leveraging the design system we are able to provide a consistent solution across the application.

With that being said, we have the ability to replace it, but making the change would come with a few cons that we should consider. Is that something you want us to investigate further?

[cliffpyles]

We've also completed the design phase and started on the development. Is it possible that we investigate the refactor as an optimization?

[swolidity]

@cliffpyles I'm not sure they cover the same ground. Formik would most likely be able to interop with Shopify's Polaris design components. Formik removes a lot of boilerplate around managing form state in react. It has nothing to do with design.

[swolidity]

@cliffpyles no Formik is not related to design. It is an abstraction over the imperative nature of handling forms in the browser and can be used with custom design components. It may make our lives easier when handling quiz building. If you follow the component tree down here https://github.com/BioMediaLab/lively/blob/quiz/www/pages/quizzes.tsx you will see what I mean.

[swolidity]

Specifically, it may help us with the dynamic nature of the quiz builder ( adding questions, and question options ).

[swolidity]

this may be a better place to look at https://github.com/BioMediaLab/lively/blob/77e3af1d848f66a21aa32633b32a3bd0f9204dc7/www/components/CreateQuizForm.tsx

[swolidity]

Then in CreateQuestions.tsx https://github.com/BioMediaLab/lively/blob/77e3af1d848f66a21aa32633b32a3bd0f9204dc7/www/components/CreateQuestions.tsx you can see that it is dynamic and also CreateQuestionOptions.tsx is also dynamic.

[cliffpyles]

Got it. You are saying compose the functionality with both. Wrap it with the Formik components, render it with Polaris, and the state from Formik can be passed to the presentational components. Is that what you mean?

[swolidity]

Exactly. Although, Formik could be limiting and maybe we need the flexibility of just implementing it ourselves ( without an abstraction layer like Formik ) but my rough draft did work better than I expected it too so we should just evaluate.

[cliffpyles]

The FieldArray and schema validation look like they would be especially helpful.

[swolidity]

Yea I was surprised it handled adding dynamic form fields so well!

[cliffpyles]

We are refactoring some of the other routes and containers. Until these refactors are complete I've marked this one as a work in progress (wip). The work looks great though @megsachdev. Once the refactors are done we will resume with it.