mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2025-11-23 21:21:32 +10:00
- implement work experience
- implement education - show dynamic names in layout
This commit is contained in:
Amruth Pillai
154
src/modals/sections/EducationModal.js
Normal file
154
src/modals/sections/EducationModal.js
Normal file
@ -0,0 +1,154 @@
|
||||
import { Field, FieldArray, Formik } from "formik";
|
||||
import { get } from "lodash";
|
||||
import React, { useContext } from "react";
|
||||
import { MdAdd } from "react-icons/md";
|
||||
import * as Yup from "yup";
|
||||
import Input from "../../components/shared/Input";
|
||||
import ModalContext from "../../contexts/ModalContext";
|
||||
import { handleKeyDown } from "../../utils";
|
||||
import DataModal from "../DataModal";
|
||||
|
||||
const initialValues = {
|
||||
institution: "",
|
||||
field: "",
|
||||
degree: "",
|
||||
gpa: "",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
courses: [],
|
||||
__temp: "",
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
institution: Yup.string().required("This is a required field."),
|
||||
field: Yup.string().required("This is a required field."),
|
||||
degree: Yup.string(),
|
||||
gpa: Yup.string(),
|
||||
startDate: Yup.date().required("This is a required field."),
|
||||
endDate: Yup.date().when(
|
||||
"startDate",
|
||||
(startDate, schema) =>
|
||||
startDate &&
|
||||
schema.min(startDate, "End Date must be later than Start Date")
|
||||
),
|
||||
courses: Yup.array().of(Yup.string().required("This is a required field.")),
|
||||
__temp: Yup.string().ensure(),
|
||||
});
|
||||
|
||||
const EducationModal = () => {
|
||||
const { events } = useContext(ModalContext);
|
||||
|
||||
const getFieldProps = (formik, name) => ({
|
||||
touched: get(formik, `touched.${name}`, false),
|
||||
error: get(formik, `errors.${name}`, ""),
|
||||
...formik.getFieldProps(name),
|
||||
});
|
||||
|
||||
return (
|
||||
<Formik
|
||||
validateOnBlur
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(formik) => (
|
||||
<DataModal
|
||||
path="education.items"
|
||||
name="Education"
|
||||
event={events.EDUCATION_MODAL}
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<Input
|
||||
label="Institution"
|
||||
className="col-span-2"
|
||||
placeholder="Dayananda Sagar College of Engineering"
|
||||
{...getFieldProps(formik, "institution")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Field of Study"
|
||||
className="col-span-2"
|
||||
placeholder="Computer Science & Engineering"
|
||||
{...getFieldProps(formik, "field")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Degree Type"
|
||||
placeholder="Bachelor's Degree"
|
||||
{...getFieldProps(formik, "degree")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="GPA"
|
||||
placeholder="8.8"
|
||||
{...getFieldProps(formik, "gpa")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="date"
|
||||
label="Start Date"
|
||||
placeholder="6th August 208"
|
||||
{...getFieldProps(formik, "startDate")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="date"
|
||||
label="End Date"
|
||||
placeholder="6th August 208"
|
||||
{...getFieldProps(formik, "endDate")}
|
||||
/>
|
||||
|
||||
<FieldArray
|
||||
name="courses"
|
||||
render={(arrayHelpers) => {
|
||||
const handleClickAdd = () => {
|
||||
formik.values.__temp &&
|
||||
arrayHelpers.push(formik.values.__temp);
|
||||
formik.setFieldValue("__temp", "");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="col-span-2">
|
||||
<label>
|
||||
<span>Courses</span>
|
||||
|
||||
{formik.values.courses &&
|
||||
formik.values.courses.map((x, i) => (
|
||||
<Field key={i} name={`courses.${i}`}>
|
||||
{({ field, meta }) => (
|
||||
<Input
|
||||
className="my-1"
|
||||
showDeleteItemButton
|
||||
onDeleteItem={() => arrayHelpers.remove(i)}
|
||||
{...field}
|
||||
{...meta}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
))}
|
||||
|
||||
<div className="flex items-center">
|
||||
<Input
|
||||
placeholder="Algorithms & Data Structures"
|
||||
{...getFieldProps(formik, "__temp")}
|
||||
/>
|
||||
<MdAdd
|
||||
size="18px"
|
||||
tabIndex="0"
|
||||
className="mx-4 cursor-pointer opacity-50 hover:opacity-75"
|
||||
onKeyDown={(e) => handleKeyDown(e, handleClickAdd)}
|
||||
onClick={handleClickAdd}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</DataModal>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default EducationModal;
|
||||
@ -1,4 +1,5 @@
|
||||
import { useFormik } from "formik";
|
||||
import { Formik } from "formik";
|
||||
import { get } from "lodash";
|
||||
import React, { useContext } from "react";
|
||||
import * as Yup from "yup";
|
||||
import Input from "../../components/shared/Input";
|
||||
@ -25,52 +26,47 @@ const validationSchema = Yup.object().shape({
|
||||
const SocialModal = () => {
|
||||
const { events } = useContext(ModalContext);
|
||||
|
||||
const formik = useFormik({
|
||||
initialValues,
|
||||
validationSchema,
|
||||
validateOnBlur: true,
|
||||
});
|
||||
|
||||
const getFieldProps = (name) => ({
|
||||
const getFieldProps = (formik, name) => ({
|
||||
touched: get(formik, `touched.${name}`, false),
|
||||
error: get(formik, `errors.${name}`, ""),
|
||||
...formik.getFieldProps(name),
|
||||
touched: formik.touched[name],
|
||||
error: formik.errors[name],
|
||||
});
|
||||
|
||||
return (
|
||||
<DataModal
|
||||
formik={formik}
|
||||
path="social.items"
|
||||
name="Social Network"
|
||||
event={events.SOCIAL_MODAL}
|
||||
<Formik
|
||||
validateOnBlur
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<Input
|
||||
type="text"
|
||||
name="network"
|
||||
label="Network"
|
||||
placeholder="Twitter"
|
||||
{...getFieldProps("network")}
|
||||
/>
|
||||
{(formik) => (
|
||||
<DataModal
|
||||
path="social.items"
|
||||
name="Social Network"
|
||||
event={events.SOCIAL_MODAL}
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<Input
|
||||
label="Network"
|
||||
placeholder="Twitter"
|
||||
{...getFieldProps(formik, "network")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
name="username"
|
||||
label="Username"
|
||||
placeholder="KingOKings"
|
||||
{...getFieldProps("username")}
|
||||
/>
|
||||
<Input
|
||||
label="Username"
|
||||
placeholder="KingOKings"
|
||||
{...getFieldProps(formik, "username")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="text"
|
||||
name="url"
|
||||
label="URL"
|
||||
className="col-span-2"
|
||||
placeholder="https://twitter.com/KingOKings"
|
||||
{...getFieldProps("url")}
|
||||
/>
|
||||
</div>
|
||||
</DataModal>
|
||||
<Input
|
||||
label="URL"
|
||||
className="col-span-2"
|
||||
placeholder="https://twitter.com/KingOKings"
|
||||
{...getFieldProps(formik, "url")}
|
||||
/>
|
||||
</div>
|
||||
</DataModal>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
156
src/modals/sections/WorkModal.js
Normal file
156
src/modals/sections/WorkModal.js
Normal file
@ -0,0 +1,156 @@
|
||||
import { Field, FieldArray, Formik } from "formik";
|
||||
import { get } from "lodash";
|
||||
import React, { useContext } from "react";
|
||||
import { MdAdd } from "react-icons/md";
|
||||
import * as Yup from "yup";
|
||||
import Input from "../../components/shared/Input";
|
||||
import ModalContext from "../../contexts/ModalContext";
|
||||
import { handleKeyDown } from "../../utils";
|
||||
import DataModal from "../DataModal";
|
||||
|
||||
const initialValues = {
|
||||
company: "",
|
||||
position: "",
|
||||
website: "https://",
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
summary: "",
|
||||
highlights: [],
|
||||
__temp: "",
|
||||
};
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
company: Yup.string().required("This is a required field."),
|
||||
position: Yup.string().required("This is a required field."),
|
||||
website: Yup.string().url("Must be a valid URL"),
|
||||
startDate: Yup.date().required("This is a required field."),
|
||||
endDate: Yup.date().when(
|
||||
"startDate",
|
||||
(startDate, schema) =>
|
||||
startDate &&
|
||||
schema.min(startDate, "End Date must be later than Start Date")
|
||||
),
|
||||
summary: Yup.string().min(10, "Please enter at least 10 characters."),
|
||||
highlights: Yup.array().of(
|
||||
Yup.string().required("This is a required field.")
|
||||
),
|
||||
__temp: Yup.string().ensure(),
|
||||
});
|
||||
|
||||
const WorkModal = () => {
|
||||
const { events } = useContext(ModalContext);
|
||||
|
||||
const getFieldProps = (formik, name) => ({
|
||||
touched: get(formik, `touched.${name}`, false),
|
||||
error: get(formik, `errors.${name}`, ""),
|
||||
...formik.getFieldProps(name),
|
||||
});
|
||||
|
||||
return (
|
||||
<Formik
|
||||
validateOnBlur
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
>
|
||||
{(formik) => (
|
||||
<DataModal
|
||||
path="work.items"
|
||||
name="Work Experience"
|
||||
event={events.WORK_MODAL}
|
||||
>
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<Input
|
||||
label="Company"
|
||||
className="col-span-2"
|
||||
placeholder="Postdot Technologies Pvt. Ltd."
|
||||
{...getFieldProps(formik, "company")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Position"
|
||||
placeholder="Full Stack Web Developer"
|
||||
{...getFieldProps(formik, "position")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Website"
|
||||
placeholder="https://example.com/"
|
||||
{...getFieldProps(formik, "website")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="date"
|
||||
label="Start Date"
|
||||
placeholder="6th August 208"
|
||||
{...getFieldProps(formik, "startDate")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="date"
|
||||
label="End Date"
|
||||
placeholder="6th August 208"
|
||||
{...getFieldProps(formik, "endDate")}
|
||||
/>
|
||||
|
||||
<Input
|
||||
type="textarea"
|
||||
label="Summary"
|
||||
className="col-span-2"
|
||||
{...getFieldProps(formik, "summary")}
|
||||
/>
|
||||
|
||||
<FieldArray
|
||||
name="highlights"
|
||||
render={(arrayHelpers) => {
|
||||
const handleClickAdd = () => {
|
||||
formik.values.__temp &&
|
||||
arrayHelpers.push(formik.values.__temp);
|
||||
formik.setFieldValue("__temp", "");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="col-span-2">
|
||||
<label>
|
||||
<span>Highlights</span>
|
||||
|
||||
{formik.values.highlights &&
|
||||
formik.values.highlights.map((x, i) => (
|
||||
<Field key={i} name={`highlights.${i}`}>
|
||||
{({ field, meta }) => (
|
||||
<Input
|
||||
className="my-1"
|
||||
showDeleteItemButton
|
||||
onDeleteItem={() => arrayHelpers.remove(i)}
|
||||
{...field}
|
||||
{...meta}
|
||||
/>
|
||||
)}
|
||||
</Field>
|
||||
))}
|
||||
|
||||
<div className="flex items-center">
|
||||
<Input
|
||||
placeholder="Worked passionately in customer service in a high volume restaurant."
|
||||
{...getFieldProps(formik, "__temp")}
|
||||
/>
|
||||
<MdAdd
|
||||
size="18px"
|
||||
tabIndex="0"
|
||||
className="mx-4 cursor-pointer opacity-50 hover:opacity-75"
|
||||
onKeyDown={(e) => handleKeyDown(e, handleClickAdd)}
|
||||
onClick={handleClickAdd}
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</DataModal>
|
||||
)}
|
||||
</Formik>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkModal;
|
||||
Reference in New Issue
Block a user