forked from codeforboston/home-energy-analysis-tool
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add home info conform (codeforboston#150)
* Did a first draft of zod+conform v1 Must move action to a route for submit to work. Co-authored-by: plocket <[email protected]> Co-authored-by: Clayton Schneider <[email protected]> Co-authored-by: teykamp <[email protected]> * Route for input1 and Conform on HomeInformation Co-authored-by: plocket <[email protected]> Co-authored-by: Clayton Schneider <[email protected]> Co-authored-by: teykamp <[email protected]> Co-authored-by: Jeff Korenstein <[email protected]> Co-authored-by: Leopardfoot <[email protected]> Co-authored-by: hectorbenitez19 <[email protected]> * Client side conform form validation Co-authored-by: Clayton Schneider <[email protected]> Co-authored-by: hectorbenitez19 <[email protected]> Co-authored-by: Michael Hughes <[email protected]> Co-authored-by: Leopardfoot <[email protected]> * Server side checking/handling Co-authored-by: Clayton Schneider <[email protected]> Co-authored-by: plocket <[email protected]> Co-authored-by: Leopardfoot <[email protected]> * consolidated form to single page Co-authored-by: Clayton Schneider <[email protected]> Co-authored-by: Michael Hughes <[email protected]> Co-authored-by: Leopardfoot <[email protected]> Co-authored-by: plocket <[email protected]> * WIP form #2 * Finished HomeInformation on single, CurrentHeatingSystem WIP Co-authored-by: plocket <[email protected]> Co-authored-by: Clayton Schneider <[email protected]> Co-authored-by: Leopardfoot <[email protected]> Co-authored-by: Camden Blatchly <[email protected]> --------- Co-authored-by: plocket <[email protected]> Co-authored-by: Clayton Schneider <[email protected]> Co-authored-by: teykamp <[email protected]> Co-authored-by: teykamp <[email protected]> Co-authored-by: Jeff Korenstein <[email protected]> Co-authored-by: Leopardfoot <[email protected]> Co-authored-by: hectorbenitez19 <[email protected]> Co-authored-by: Michael Hughes <[email protected]> Co-authored-by: Camden Blatchly <[email protected]>
- Loading branch information
10 people
authored
Mar 20, 2024
1 parent
674ec63
commit 8791631
Showing
6 changed files
with
285 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
heat-stack/app/components/ui/heat/CaseSummaryComponents/EnergyUseHistory.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
heat-stack/app/components/ui/heat/CaseSummaryComponents/ErrorList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| export function ErrorList({ | ||
| id, | ||
| errors, | ||
| }: { | ||
| id?: string | ||
| errors?: Array<string> | null | ||
| }) { | ||
| return errors?.length ? ( | ||
| <ul id={id} className="flex flex-col gap-1"> | ||
| {errors.map((error, i) => ( | ||
| <li key={i} className="text-[10px] text-foreground-destructive"> | ||
| {error} | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ) : null | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,86 @@ | ||
|
|
||
|
|
||
| // Archived 03/19/2024 | ||
|
|
||
|
|
||
| import { useForm } from '@conform-to/react' | ||
| import { HomeInformation } from '../../components/ui/heat/CaseSummaryComponents/HomeInformation.tsx' | ||
|
|
||
| /** THE BELOW PROBABLY NEED TO MOVE TO A ROUTE RATHER THAN A COMPONENT, including action function, */ | ||
| // import { redirect } from '@remix-run/react' | ||
| import { json, ActionFunctionArgs } from '@remix-run/node' | ||
| import { parseWithZod } from '@conform-to/zod' | ||
| import { invariantResponse } from '@epic-web/invariant' | ||
| import { Form, redirect, useActionData } from '@remix-run/react' | ||
| import { z } from 'zod' | ||
| import { ErrorList } from '#app/components/ui/heat/CaseSummaryComponents/ErrorList.tsx' | ||
|
|
||
| const nameMaxLength = 50 | ||
| const addressMaxLength = 100 | ||
|
|
||
| /** Modeled off the conform example at | ||
| * https://github.com/epicweb-dev/web-forms/blob/b69e441f5577b91e7df116eba415d4714daacb9d/exercises/03.schema-validation/03.solution.conform-form/app/routes/users%2B/%24username_%2B/notes.%24noteId_.edit.tsx#L48 */ | ||
| const HomeInformationSchema = z.object({ | ||
| name: z.string().min(1).max(nameMaxLength), | ||
| address: z.string().min(1).max(addressMaxLength), | ||
| livingSpace: z.number().min(1), | ||
| }) | ||
|
|
||
| export async function action({ request, params }: ActionFunctionArgs) { | ||
| // Checks if url has a homeId parameter, throws 400 if not there | ||
| // invariantResponse(params.homeId, 'homeId param is required') | ||
|
|
||
| const formData = await request.formData() | ||
| const submission = parseWithZod(formData, { | ||
| schema: HomeInformationSchema, | ||
| }) | ||
|
|
||
| if(submission.status !== "success") { | ||
| return submission.reply() | ||
| // submission.reply({ | ||
| // // You can also pass additional error to the `reply` method | ||
| // formErrors: ['Submission failed'], | ||
| // fieldErrors: { | ||
| // address: ['Address is invalid'], | ||
| // }, | ||
|
|
||
| // // or avoid sending the the field value back to client by specifying the field names | ||
| // hideFields: ['password'], | ||
| // }), | ||
| // {status: submission.status === "error" ? 400 : 200} | ||
| } | ||
|
|
||
| // TODO NEXT WEEK | ||
| // - [x] Server side error checking/handling | ||
| // - [ ] Save to cookie and redirect to next form | ||
| // - [ ] Build form #2 and #3 | ||
| // - [ ] Form errors (if we think of a use case - 2 fields conflicting...) | ||
|
|
||
| const { name, address, livingSpace } = submission.value | ||
|
|
||
| // await updateNote({ id: params.noteId, title, content }) | ||
|
|
||
| return redirect(`/inputs1`) | ||
| } | ||
|
|
||
| export default function Inputs1() { | ||
| const lastResult = useActionData<typeof action>() | ||
| const [form, fields] = useForm({ | ||
| lastResult, | ||
| onValidate({ formData }) { | ||
| return parseWithZod(formData, { schema: HomeInformationSchema }) | ||
| }, | ||
| defaultValue: { | ||
|
|
||
| }, | ||
| shouldValidate: 'onBlur', | ||
| }) | ||
|
|
||
| return ( | ||
| <div> | ||
| <HomeInformation /> | ||
| </div> | ||
|
|
||
| <Form id={form.id} method="post" onSubmit={form.onSubmit} action="/inputs1"> | ||
| <HomeInformation fields={fields} /> | ||
| <ErrorList id={form.errorId} errors={form.errors} /> | ||
| </Form> | ||
| ) | ||
| } |
Oops, something went wrong.