-
-
Notifications
You must be signed in to change notification settings - Fork 41
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use formik library to aid in reactifying the forms. This is useful in providing form validation feedback to the user without requiring the user to submit it first.
- Loading branch information
Showing
14 changed files
with
1,258 additions
and
551 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
import { Formik } from "formik"; | ||
import React, { JSX } from "react"; | ||
import { createRoot } from "react-dom/client"; | ||
import * as Yup from "yup"; | ||
import { getPageProps } from "../utils"; | ||
import { Dataset, DatasetsInput, TextInput } from "./utils"; | ||
|
||
type ProfileEditProps = { | ||
datasets: Dataset[]; | ||
is_commercial: boolean; | ||
csrf_token: string; | ||
initial_form_data: any; | ||
initial_errors: any; | ||
}; | ||
|
||
function ProfileEdit({ | ||
datasets, | ||
is_commercial, | ||
csrf_token, | ||
initial_form_data, | ||
initial_errors, | ||
}: ProfileEditProps): JSX.Element { | ||
return ( | ||
<> | ||
<h1 className="page-title">Your Profile</h1> | ||
<h2>Edit contact information</h2> | ||
|
||
<Formik | ||
initialValues={{ | ||
datasets: | ||
initial_form_data.datasets?.map((x: number) => x.toString()) ?? [], | ||
contact_name: initial_form_data.contact_name ?? "", | ||
contact_email: initial_form_data.contact_email ?? "", | ||
csrf_token, | ||
}} | ||
initialErrors={initial_errors} | ||
initialTouched={initial_errors} | ||
validationSchema={Yup.object({ | ||
contact_name: Yup.string().required("Contact name is required!"), | ||
contact_email: Yup.string() | ||
.email() | ||
.required("Email address is required!"), | ||
})} | ||
onSubmit={() => {}} | ||
> | ||
{({ errors }) => ( | ||
<form method="POST" className="form-horizontal"> | ||
<div className="form-group"> | ||
<div className="col-sm-offset-4 col-sm-5"> | ||
<input | ||
id="csrf_token" | ||
name="csrf_token" | ||
type="hidden" | ||
value={csrf_token} | ||
/> | ||
</div> | ||
{errors.csrf_token && ( | ||
<div className="alert alert-danger">{errors.csrf_token}</div> | ||
)} | ||
</div> | ||
|
||
<TextInput | ||
type="text" | ||
id="contact_name" | ||
name="contact_name" | ||
label="Name" | ||
required | ||
/> | ||
|
||
<TextInput | ||
type="email" | ||
id="contact_email" | ||
name="contact_email" | ||
label="Email" | ||
required | ||
/> | ||
<br /> | ||
|
||
{!is_commercial && <DatasetsInput datasets={datasets} />} | ||
|
||
<div className="form-group"> | ||
<div className="col-sm-offset-4 col-sm-10"> | ||
<button type="submit" className="btn btn-primary"> | ||
Update | ||
</button> | ||
</div> | ||
</div> | ||
</form> | ||
)} | ||
</Formik> | ||
</> | ||
); | ||
} | ||
|
||
document.addEventListener("DOMContentLoaded", () => { | ||
const { domContainer, reactProps, globalProps } = getPageProps(); | ||
const { | ||
datasets, | ||
is_commercial, | ||
csrf_token, | ||
initial_form_data, | ||
initial_errors, | ||
} = reactProps; | ||
|
||
const renderRoot = createRoot(domContainer!); | ||
renderRoot.render( | ||
<ProfileEdit | ||
datasets={datasets} | ||
is_commercial={is_commercial} | ||
csrf_token={csrf_token} | ||
initial_form_data={initial_form_data} | ||
initial_errors={initial_errors} | ||
/> | ||
); | ||
}); |
Oops, something went wrong.