Conversation
| label="Helpful info" | ||
| options={tagOptions} | ||
| labelPlacement="start" | ||
| labelPlacement="end" |
There was a problem hiding this comment.
Can we create the new form without affecting existing forms? Is this change necessary?
| labelPlacement = 'end', | ||
| sx | ||
| }: FormCheckboxFieldProps<Values>) => { | ||
| const { control } = useFormContext<Values>(); |
There was a problem hiding this comment.
Ideally, we only use controlled fields when we have no other choice (e.g., for non-standard form fields that doesn't support native HTML inputs). using uncontrolled form fields (using the register method) should be the preferred way, as it will not trigger rerender for each change. See the existing implementation as a reference
| label: ReactNode; | ||
| helperText?: string; | ||
| labelPlacement?: 'bottom' | 'end' | 'start' | 'top'; | ||
| sx?: TextFieldProps['sx']; |
There was a problem hiding this comment.
For consistency, we should avoid exposing style changes for generic components. This will open the door to inconsistent styling across pages
| label={option.label} | ||
| labelPlacement={labelPlacement} | ||
| value={option.value} | ||
| sx={{ justifyContent: 'space-between' }} |
There was a problem hiding this comment.
What is the reason for this change?
| multiline?: boolean; | ||
| minRows?: number; | ||
| slotProps?: TextFieldProps['slotProps']; | ||
| sx?: TextFieldProps['sx']; |
| /> | ||
|
|
||
| <Stack direction="row" gap={5} mt={2}> | ||
| <Button |
There was a problem hiding this comment.
The design doesn't show a reset button for this form, so I don't think we have to show one
| <Button | ||
| variant="contained" | ||
| type="submit" | ||
| disabled={isPending || isSuccess} |
There was a problem hiding this comment.
you can use the Button loading prop for that
There was a problem hiding this comment.
What is the reason for this icon change?
| import.meta.env.VITE_DB_API_KEY || | ||
| 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6IndhbnR5Y2Zibnp6b2NzYnRocXpzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzcwNDY2OTgsImV4cCI6MjA1MjYyMjY5OH0.yczsMOx3Y-zsWu-GjYEajIb0yw9fYWEIUglmmfM1zCY'; | ||
| const contributorDatabaseName = 'airtable_contributors'; | ||
| const feedbackDatabaseName = 'airtable_feedback'; |
There was a problem hiding this comment.
Is this table sourced from Airtable? Otherwise - I think a better name for it would be user_feedbacks
| bathroom?: BathroomInfo | null; | ||
| }; | ||
|
|
||
| export type FeedbackForm = { |
There was a problem hiding this comment.
The ResourceEntry typing file is dedicated for Resource related type definitions. Since this is a feedback form, it should live in a seperate file
2 participants
Change Summary
This updates the feedback/contact form page. Instead of loading AirTable iframe that was taking about 4 to 5 sec every time, this replaces it with a custom form and does insert to Supabase 'airtable_feedback' table on submit.
Change Reason
Makes the form load and submission instantly and gives full control to us.
This also resolves the below:
#680
#686
#687