Skip to content

initial integration of formik & formik-antd to assign badge page #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

initial integration of formik & formik-antd to assign badge page #24

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
734d44d
initial integration of formik & formik-antd to assign badge page
jontkoh Mar 1, 2021
c2cfac8
Merge branch 'develop' of https://github.com/FightPandemics/FightPand…
jontkoh Mar 2, 2021
547fba5
Merge branch 'develop' of https://github.com/FightPandemics/FightPand…
jontkoh Mar 2, 2021
77eb532
added htmltype to both buttons of account/nonaccount form pages
jontkoh Mar 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
"axios": "^0.21.1",
"eslint-plugin-react-hooks": "^4.2.0",
"ethers": "^5.0.24",
"formik": "^2.2.6",
"formik-antd": "^2.0.1",
"localStorage": "^1.0.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
Expand Down
142 changes: 52 additions & 90 deletions client/src/pages/Assign Badge/AccountHolderForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,72 +1,16 @@
/* eslint-disable max-len */
/* eslint-disable no-unused-vars */
import React, { useState } from "react";
import { Form, Input, Radio } from "antd";
import styled, { css } from "styled-components";
import { Form } from "antd";
import { useFormik, FormikProvider } from "formik";
import { Form as FormikAntdForm, Input } from "formik-antd";
import StyledForm from "./StyledAccountHolderForm";
import Modal from "../../components/Modals/Modal";
import useModal from "../../hooks/useModal";
import PrimaryFormButton from "../../components/Button/PrimaryFormButton";
import { theme } from "../../constants/theme";
import SearchInput from "../../components/Input/SearchInput";
const { display, body } = theme.typography.font.family;
const { royalBlue } = theme.colors;
const { TextArea } = Input;

const StyledForm = styled(Form)`

width: 33%;
min-width: 250px;
margin: 2.5vh auto;

.ant-form-item-label label {
padding: 0;
width: 100%;
min-width: 250px;
font-weight: 800;
font-size: 16px;
font-family: ${body};
}

.ant-input {
width: 100%;
min-width: 250px;
margin-bottom -7px;
padding: 4.5px;
}

.ant-form-item-control-input-content .jpEryk {
align-self: flex-end;
width: 148px;
font-size: 14px;
}

.modal {
border-radius: 10px;
}
h4 { padding: 0; margin: 0; }

.ant-form-item-control-input-content {
position: relative;
display: flex;
flex-direction: column;
span {
text-align: left;
}
}

.ant-input-group-addon button {
border-top: hidden;
border-bottom: hidden;
border-right: hidden;
&:hover {
border: ${royalBlue}
border-top: solid;
border-bottom: solid;
border-right: solid;
}
}
`;

export default function AccountHolderForm() {
const { isShowing, toggle } = useModal();
const [form] = Form.useForm();
Expand Down Expand Up @@ -100,36 +44,54 @@ export default function AccountHolderForm() {
console.log("account holder submitting", accountValue, evidenceValue);
};

const handleSubmit = values => {
alert(JSON.stringify(values, null, 2));
};

const formik = useFormik({
initialValues: {
accountHolder: "",
evidence: "",
},
onSubmit: values => {
handleSubmit(values);
},
});

return (
<StyledForm
id = "create-badge-form"
{...formItemLayout}
layout={formLayout}
form={form}
initialValues={{
layout: formLayout,
}}
onValuesChange={onFormLayoutChange}
>
<Form.Item label="Select a FightPandemics account holder">
<SearchInput placeholder="Start typing names of the person you want to award badges to" forminputs={formInputs({ value })}/>
</Form.Item>
<Form.Item label="">
<span>Evidence</span>
<TextArea placeholder="Optionally provide evidence for the person who completed the task" forminputs={formInputs({ value })}/>
</Form.Item>
<Form.Item>
<PrimaryFormButton className="btn-right" type="primary" onClick={toggle} onSubmit={submitHandler()}>Assign Badge</PrimaryFormButton>
<Modal
isShowing={isShowing}
hide={toggle}
modalWidth={800}
title="Congratulations your badge has been assigned!"
buttonPrimary="Copy URL"
buttonSecondary="Link"
modalBodyText="Your badge has been sent to [recipient name]! They will receieve an email notification for their new badge. You now have xxx badges remaining."
/>
</Form.Item>
</StyledForm>
<FormikProvider value={formik}>
<StyledForm
id = "create-badge-form"
{...formItemLayout}
layout={formLayout}
form={form}
initialValues={{
layout: formLayout,
}}
onValuesChange={onFormLayoutChange}
>
<FormikAntdForm>
<Form.Item label="Select a FightPandemics account holder">
<SearchInput name="accountHolder" placeholder="Start typing names of the person you want to award badges to" forminputs={formInputs({ value })}/>
</Form.Item>
<Form.Item label="">
<span>Evidence</span>
<TextArea name="evidence" placeholder="Optionally provide evidence for the person who completed the task" forminputs={formInputs({ value })}/>
</Form.Item>
<Form.Item>
<PrimaryFormButton className="btn-right" type="primary" onClick={toggle} onSubmit={handleSubmit}>Assign Badge</PrimaryFormButton>
Copy link
Collaborator

@sraj50 sraj50 Mar 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You will need to include the prop htmlType="submit" to hook up the form values to the Formik onSubmit property. See Antd Button API reference and useFormik reference.

<Modal
isShowing={isShowing}
hide={toggle}
modalWidth={800}
title="Congratulations your badge has been assigned!"
buttonPrimary="Copy URL"
buttonSecondary="Link"
modalBodyText="Your badge has been sent to [recipient name]! They will receieve an email notification for their new badge. You now have xxx badges remaining."
/>
</Form.Item>
</FormikAntdForm>
</StyledForm>
</FormikProvider>
);
}
185 changes: 65 additions & 120 deletions client/src/pages/Assign Badge/NonAccountHolderForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,15 @@
/* eslint-disable max-len */
/* eslint-disable no-unused-vars */
import React, { useState } from "react";
import { Form, Input, Radio } from "antd";
import styled from "styled-components";
import { Form } from "antd";
import { useFormik, FormikProvider } from "formik";
import { Form as FormikAntdForm, Input, Radio } from "formik-antd";
import StyledForm from "./StyledAccountHolderForm";
import Modal from "../../components/Modals/Modal";
import useModal from "../../hooks/useModal";
import PrimaryFormButton from "../../components/Button/PrimaryFormButton";
import { theme } from "../../constants/theme";
import SearchInput from "../../components/Input/SearchInput";
const { body } = theme.typography.font.family;
const { royalBlue } = theme.colors;
const { TextArea } = Input;

const StyledForm = styled(Form)`

width: 33%;
min-width: 250px;
margin: 2.5vh auto;

button {
width: 100%;
margin: 0;
}

span {
text-align: left;
}

.ant-form-item-label label {
padding: 0;
width: 100%;
min-width: 250px;
font-weight: 800;
font-size: 16px;
font-family: ${body};
}

.ant-input {
width: 100%;
min-width: 250px;
}
.modal {
border-radius: 10px;
}
h4 { padding: 0; margin: 0; }

.ant-form-item-control-input-content {
position: relative;
display: flex;
flex-direction: column;
}

.ant-form-item-control-input-content .jpEryk {
align-self: flex-end;
width: 226px;
}

.radio {
display: flex
flex-direction: row
margin-bottom: 10px;
.ant-radio-wrapper {
justify-content: space-between;
}
}

.ant-radio-checked .ant-radio-inner{
border-color: ${royalBlue} !important ;
}

.ant-radio-checked:before{
background-color: ${royalBlue};
}

.ant-radio-checked .ant-radio-inner:after{
background-color: ${royalBlue};
}

.ant-radio:hover .ant-radio-inner {
border-color: ${royalBlue} ;
}
`;

export default function AccountHolderForm() {
export default function NonAccountHolderForm() {
const { isShowing, toggle } = useModal();
const [form] = Form.useForm();
const [formLayout, setFormLayout] = useState("vertical");
Expand Down Expand Up @@ -122,49 +49,67 @@ export default function AccountHolderForm() {
);
};

return (
<StyledForm
id = "create-badge-form"
{...formItemLayout}
layout={formLayout}
form={form}
initialValues={{
layout: formLayout,
}}
onValuesChange={onFormLayoutChange}
>
<Form.Item label= "Share link with a non-account holder">
<span>Name</span>
<Input placeholder="First and Last Name" forminputs={formInputs(value)} />
</Form.Item>
<Form.Item >
<Radio.Group className="radio" onChange={onChange} value={value} forminputs={formInputs({ value })}>
<Radio value={1}>I know the recipient&apos;s email </Radio>
<Radio value={2}>I don&apos;t know the recipient&apos;s email </Radio>
</Radio.Group>
</Form.Item>
const handleSubmit = values => {
alert(JSON.stringify(values, null, 2));
};

{value === 1
? (
<Form.Item label="">
<span>Email</span>
<Input placeholder="Email of non-account holder recipient" />
</Form.Item>)
: null
}
const formik = useFormik({
initialValues: {
name: "",
email: "",
},
onSubmit: values => {
handleSubmit(values);
},
});

<Form.Item>
<PrimaryFormButton className="btn-right" type="primary" onClick={toggle} onSubmit={linkSubmitHandler()}>Generate Link to Share</PrimaryFormButton>
<Modal
isShowing={isShowing}
hide={toggle}
modalWidth={800}
title="Share Link with a non-account holder"
buttonPrimary="Copy URL"
buttonSecondary="Link"
modalBodyText="The badge link has been successfully generated for [name]. Please copy this link to send to them!"
/>
</Form.Item>
</StyledForm>
return (
<FormikProvider value={formik}>
<StyledForm
id = "create-badge-form"
{...formItemLayout}
layout={formLayout}
form={form}
initialValues={{
layout: formLayout,
}}
onValuesChange={onFormLayoutChange}
>
<FormikAntdForm>
<Form.Item label= "Share link with a non-account holder">
<span>Name</span>
<Input name="name" placeholder="First and Last Name" forminputs={formInputs(value)} />
</Form.Item>
<Form.Item >
<Radio.Group className="radio" onChange={onChange} value={value} forminputs={formInputs({ value })}>
<Radio value={1}>I know the recipient&apos;s email </Radio>
<Radio value={2}>I don&apos;t know the recipient&apos;s email </Radio>
</Radio.Group>
</Form.Item>

{value === 1
? (
<Form.Item label="">
<span>Email</span>
<Input name="email" placeholder="Email of non-account holder recipient" />
</Form.Item>)
: null
}

<Form.Item>
<PrimaryFormButton className="btn-right" type="primary" onClick={toggle} onSubmit={handleSubmit}>Generate Link to Share</PrimaryFormButton>
Copy link
Collaborator

@sraj50 sraj50 Mar 2, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, use prop htmlType="submit"

<Modal
isShowing={isShowing}
hide={toggle}
modalWidth={800}
title="Share Link with a non-account holder"
buttonPrimary="Copy URL"
buttonSecondary="Link"
modalBodyText="The badge link has been successfully generated for [name]. Please copy this link to send to them!"
/>
</Form.Item>
</FormikAntdForm>
</StyledForm>
</FormikProvider>
);
}
Loading