Scribd
Upload
55 views24 pages

React Form Editor Component Guide

This document defines an Editor component in React that allows a user to edit different sections of a resume or profile. It uses state to track the active section, details, and user input values. Different components are rendered depending on the active section, including input fields to edit basic info, work experience, projects, education, and achievements. State is updated asynchronously on user input to track changes to the profile.

Uploaded by

2083nikhil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
55 views24 pages

React Form Editor Component Guide

This document defines an Editor component in React that allows a user to edit different sections of a resume or profile. It uses state to track the active section, details, and user input values. Different components are rendered depending on the active section, including input fields to edit basic info, work experience, projects, education, and achievements. State is updated asynchronously on user input to track changes to the profile.

Uploaded by

2083nikhil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

import React, { useEffect, useState } from "react";

import { X } from "react-feather";

import InputControl from


"../InputControl/InputControl";

import styles from "./[Link]";

function Editor(props) {
const sections = [Link];
const information = [Link];

const [activeSectionKey, setActiveSectionKey] =


useState(
[Link](sections)[0]
);
const [activeInformation, setActiveInformation] =
useState(
information[sections[[Link](sections)[0]]]
);
const [activeDetailIndex, setActiveDetailIndex] =
useState(0);
const [sectionTitle, setSectionTitle] = useState(
sections[[Link](sections)[0]]
);
const [values, setValues] = useState({
name: activeInformation?.detail?.name || "",
title: activeInformation?.detail?.title || "",
linkedin: activeInformation?.detail?.linkedin
|| "",
github: activeInformation?.detail?.github ||
"",
phone: activeInformation?.detail?.phone || "",
email: activeInformation?.detail?.email || "",
});

const handlePointUpdate = (value, index) => {


const tempValues = { ...values };
if (![Link]([Link]))
[Link] = [];
[Link][index] = value;
setValues(tempValues);
};

const workExpBody = (
<div className={[Link]}>
<div className={[Link]}>
<InputControl
label="Title"
placeholder="Enter title eg. Frontend
developer"
value={[Link]}
onChange={(event) =>
setValues((prev) => ({ ...prev, title:
[Link] }))
}
/>
<InputControl
label="Company Name"
placeholder="Enter company name eg.
amazon"
value={[Link]}
onChange={(event) =>
setValues((prev) => ({ ...prev,
companyName: [Link] }))
}
/>
</div>
<div className={[Link]}>
<InputControl
label="Certificate Link"
placeholder="Enter certificate link"
value={[Link]}
onChange={(event) =>
setValues((prev) => ({
...prev,
certificationLink:
[Link],
}))
}
/>
<InputControl
label="Location"
placeholder="Enter location eg. Remote"
value={[Link]}
onChange={(event) =>
setValues((prev) => ({ ...prev,
location: [Link] }))
}
/>
</div>
<div className={[Link]}>
<InputControl
label="Start Date"
type="date"
placeholder="Enter start date of work"
value={[Link]}
onChange={(event) =>
setValues((prev) => ({ ...prev,
startDate: [Link] }))
}
/>
<InputControl
label="End Date"
type="date"
placeholder="Enter end date of work"
value={[Link]}
onChange={(event) =>
setValues((prev) => ({ ...prev,
endDate: [Link] }))
}
/>
</div>

<div className={[Link]}>
<label>Enter work description</label>
<InputControl
placeholder="Line 1"
value={[Link] ? [Link][0] :
""}
onChange={(event) =>
handlePointUpdate([Link], 0)}
/>
<InputControl
placeholder="Line 2"
value={[Link] ? [Link][1] :
""}
onChange={(event) =>
handlePointUpdate([Link], 1)}
/>
<InputControl
placeholder="Line 3"
value={[Link] ? [Link][2] :
""}
onChange={(event) =>
handlePointUpdate([Link], 2)}
/>
</div>
</div>
);
const projectBody = (
<div className={[Link]}>
<div className={[Link]}>
<InputControl
label="Title"
value={[Link]}
placeholder="Enter title eg. Chat app"
onChange={(event) =>
setValues((prev) => ({ ...prev, title:
[Link] }))
}
/>
</div>
<InputControl
label="Overview"
value={[Link]}
placeholder="Enter basic overview of
project"
onChange={(event) =>
setValues((prev) => ({ ...prev, overview:
[Link] }))
}
/>
<div className={[Link]}>
<InputControl
label="Deployed Link"
value={[Link]}
placeholder="Enter deployed link of
project"
onChange={(event) =>
setValues((prev) => ({ ...prev, link:
[Link] }))
}
/>
<InputControl
label="Github Link"
value={[Link]}
placeholder="Enter github link of
project"
onChange={(event) =>
setValues((prev) => ({ ...prev, github:
[Link] }))
}
/>
</div>
<div className={[Link]}>
<label>Enter project description</label>
<InputControl
placeholder="Line 1"
value={[Link] ? [Link][0] :
""}
onChange={(event) =>
handlePointUpdate([Link], 0)}
/>
<InputControl
placeholder="Line 2"
value={[Link] ? [Link][1] :
""}
onChange={(event) =>
handlePointUpdate([Link], 1)}
/>
<InputControl
placeholder="Line 3"
value={[Link] ? [Link][2] :
""}
onChange={(event) =>
handlePointUpdate([Link], 2)}
/>
<InputControl
placeholder="Line 4"
value={[Link] ? [Link][3] :
""}
onChange={(event) =>
handlePointUpdate([Link], 3)}
/>
</div>
</div>
);
const educationBody = (
<div className={[Link]}>
<div className={[Link]}>
<InputControl
label="Title"
value={[Link]}
placeholder="Enter title eg. B-tech"
onChange={(event) =>
setValues((prev) => ({ ...prev, title:
[Link] }))
}
/>
</div>
<InputControl
label="College/School Name"
value={[Link]}
placeholder="Enter name of your
college/school"
onChange={(event) =>
setValues((prev) => ({ ...prev, college:
[Link] }))
}
/>
<div className={[Link]}>
<InputControl
label="Start Date"
type="date"
placeholder="Enter start date of this
education"
value={[Link]}
onChange={(event) =>
setValues((prev) => ({ ...prev,
startDate: [Link] }))
}
/>
<InputControl
label="End Date"
type="date"
placeholder="Enter end date of this
education"
value={[Link]}
onChange={(event) =>
setValues((prev) => ({ ...prev,
endDate: [Link] }))
}
/>
</div>
</div>
);
const basicInfoBody = (
<div className={[Link]}>
<div className={[Link]}>
<InputControl
label="Name"
placeholder="Enter your full name eg.
Aashu"
value={[Link]}
onChange={(event) =>
setValues((prev) => ({ ...prev, name:
[Link] }))
}
/>
<InputControl
label="Title"
value={[Link]}
placeholder="Enter your title eg.
Frontend developer"
onChange={(event) =>
setValues((prev) => ({ ...prev, title:
[Link] }))
}
/>
</div>
<div className={[Link]}>
<InputControl
label="Linkedin Link"
value={[Link]}
placeholder="Enter your linkedin profile
link"
onChange={(event) =>
setValues((prev) => ({ ...prev,
linkedin: [Link] }))
}
/>
<InputControl
label="Github Link"
value={[Link]}
placeholder="Enter your github profile
link"
onChange={(event) =>
setValues((prev) => ({ ...prev, github:
[Link] }))
}
/>
</div>
<div className={[Link]}>
<InputControl
label="Email"
value={[Link]}
placeholder="Enter your email"
onChange={(event) =>
setValues((prev) => ({ ...prev, email:
[Link] }))
}
/>
<InputControl
label="Enter phone"
value={[Link]}
placeholder="Enter your phone number"
onChange={(event) =>
setValues((prev) => ({ ...prev, phone:
[Link] }))
}
/>
</div>
</div>
);
const achievementsBody = (
<div className={[Link]}>
<div className={[Link]}>
<label>List your achievements</label>
<InputControl
placeholder="Line 1"
value={[Link] ? [Link][0] :
""}
onChange={(event) =>
handlePointUpdate([Link], 0)}
/>
<InputControl
placeholder="Line 2"
value={[Link] ? [Link][1] :
""}
onChange={(event) =>
handlePointUpdate([Link], 1)}
/>
<InputControl
placeholder="Line 3"
value={[Link] ? [Link][2] :
""}
onChange={(event) =>
handlePointUpdate([Link], 2)}
/>
<InputControl
placeholder="Line 4"
value={[Link] ? [Link][3] :
""}
onChange={(event) =>
handlePointUpdate([Link], 3)}
/>
</div>
</div>
);
const summaryBody = (
<div className={[Link]}>
<InputControl
label="Summary"
value={[Link]}
placeholder="Enter your objective/summary"
onChange={(event) =>
setValues((prev) => ({ ...prev, summary:
[Link] }))
}
/>
</div>
);
const otherBody = (
<div className={[Link]}>
<InputControl
label="Other"
value={[Link]}
placeholder="Enter something"
onChange={(event) =>
setValues((prev) => ({ ...prev, other:
[Link] }))
}
/>
</div>
);

const generateBody = () => {


switch (sections[activeSectionKey]) {
case [Link]:
return basicInfoBody;
case [Link]:
return workExpBody;
case [Link]:
return projectBody;
case [Link]:
return educationBody;
case [Link]:
return achievementsBody;
case [Link]:
return summaryBody;
case [Link]:
return otherBody;
default:
return null;
}
};

const handleSubmission = () => {


switch (sections[activeSectionKey]) {
case [Link]: {
const tempDetail = {
name: [Link],
title: [Link],
linkedin: [Link],
github: [Link],
email: [Link],
phone: [Link],
};

[Link]((prev) => ({
...prev,
[[Link]]: {
...prev[[Link]],
detail: tempDetail,
sectionTitle,
},
}));
break;
}
case [Link]: {
const tempDetail = {
certificationLink:
[Link],
title: [Link],
startDate: [Link],
endDate: [Link],
companyName: [Link],
location: [Link],
points: [Link],
};
const tempDetails =
[...information[[Link]]?.details];
tempDetails[activeDetailIndex] =
tempDetail;

[Link]((prev) => ({
...prev,
[[Link]]: {
...prev[[Link]],
details: tempDetails,
sectionTitle,
},
}));
break;
}
case [Link]: {
const tempDetail = {
link: [Link],
title: [Link],
overview: [Link],
github: [Link],
points: [Link],
};
const tempDetails =
[...information[[Link]]?.details];
tempDetails[activeDetailIndex] =
tempDetail;

[Link]((prev) => ({
...prev,
[[Link]]: {
...prev[[Link]],
details: tempDetails,
sectionTitle,
},
}));
break;
}
case [Link]: {
const tempDetail = {
title: [Link],
college: [Link],
startDate: [Link],
endDate: [Link],
};
const tempDetails =
[...information[[Link]]?.details];
tempDetails[activeDetailIndex] =
tempDetail;

[Link]((prev) => ({
...prev,
[[Link]]: {
...prev[[Link]],
details: tempDetails,
sectionTitle,
},
}));
break;
}
case [Link]: {
const tempPoints = [Link];

[Link]((prev) => ({
...prev,
[[Link]]: {
...prev[[Link]],
points: tempPoints,
sectionTitle,
},
}));
break;
}
case [Link]: {
const tempDetail = [Link];
[Link]((prev) => ({
...prev,
[[Link]]: {
...prev[[Link]],
detail: tempDetail,
sectionTitle,
},
}));
break;
}
case [Link]: {
const tempDetail = [Link];

[Link]((prev) => ({
...prev,
[[Link]]: {
...prev[[Link]],
detail: tempDetail,
sectionTitle,
},
}));
break;
}
}
};

const handleAddNew = () => {


const details = activeInformation?.details;
if (!details) return;
const lastDetail = [Link](-1)[0];
if (![Link](lastDetail).length) return;
details?.push({});
[Link]((prev) => ({
...prev,
[sections[activeSectionKey]]: {
...information[sections[activeSectionKey]],
details: details,
},
}));
setActiveDetailIndex(details?.length - 1);
};

const handleDeleteDetail = (index) => {


const details = activeInformation?.details
? [...activeInformation?.details]
: "";
if (!details) return;
[Link](index, 1);
[Link]((prev) => ({
...prev,
[sections[activeSectionKey]]: {
...information[sections[activeSectionKey]],
details: details,
},
}));

setActiveDetailIndex((prev) => (prev === index


? 0 : prev - 1));
};

useEffect(() => {
const activeInfo =
information[sections[activeSectionKey]];
setActiveInformation(activeInfo);
setSectionTitle(sections[activeSectionKey]);
setActiveDetailIndex(0);
setValues({
name: activeInfo?.detail?.name || "",
overview: activeInfo?.details
? [Link][0]?.overview || ""
: "",
link: activeInfo?.details ?
[Link][0]?.link || "" : "",
certificationLink: activeInfo?.details
? [Link][0]?.certificationLink
|| ""
: "",
companyName: activeInfo?.details
? [Link][0]?.companyName || ""
: "",
college: activeInfo?.details
? [Link][0]?.college || ""
: "",
location: activeInfo?.details
? [Link][0]?.location || ""
: "",
startDate: activeInfo?.details
? [Link][0]?.startDate || ""
: "",
endDate: activeInfo?.details ?
[Link][0]?.endDate || "" : "",
points: activeInfo?.details
? [Link][0]?.points
? [...[Link][0]?.points]
: ""
: activeInfo?.points
? [...[Link]]
: "",
title: activeInfo?.details
? [Link][0]?.title || ""
: activeInfo?.detail?.title || "",
linkedin: activeInfo?.detail?.linkedin || "",
github: activeInfo?.details
? [Link][0]?.github || ""
: activeInfo?.detail?.github || "",
phone: activeInfo?.detail?.phone || "",
email: activeInfo?.detail?.email || "",
summary: typeof activeInfo?.detail !==
"object" ? [Link] : "",
other: typeof activeInfo?.detail !== "object"
? [Link] : "",
});
}, [activeSectionKey]);

useEffect(() => {
setActiveInformation(information[sections[activ
eSectionKey]]);
}, [information]);

useEffect(() => {
const details = activeInformation?.details;
if (!details) return;

const activeInfo =
information[sections[activeSectionKey]];
setValues({
overview:
[Link][activeDetailIndex]?.overview ||
"",
link:
[Link][activeDetailIndex]?.link || "",
certificationLink:
[Link][activeDetailIndex]?.cert
ificationLink || "",
companyName:
[Link][activeDetailIndex]?.companyName
|| "",
location:
[Link][activeDetailIndex]?.location ||
"",
startDate:
[Link][activeDetailIndex]?.startDate ||
"",
endDate:
[Link][activeDetailIndex]?.endDate ||
"",
points:
[Link][activeDetailIndex]?.points ||
"",
title:
[Link][activeDetailIndex]?.title || "",
linkedin:
[Link][activeDetailIndex]?.linkedin ||
"",
github:
[Link][activeDetailIndex]?.github ||
"",
college:
[Link][activeDetailIndex]?.college ||
"",
});
}, [activeDetailIndex]);
return (
<div className={[Link]}>
<div className={[Link]}>
{[Link](sections)?.map((key) => (
<div
className={`${[Link]} ${
activeSectionKey === key ?
[Link] : ""
}`}
key={key}
onClick={() =>
setActiveSectionKey(key)}
>
{sections[key]}
</div>
))}
</div>

<div className={[Link]}>
<InputControl
label="Title"
placeholder="Enter section title"
value={sectionTitle}
onChange={(event) =>
setSectionTitle([Link])}
/>

<div className={[Link]}>
{activeInformation?.details
?
activeInformation?.details?.map((item, index) => (
<div
className={`${[Link]} ${
activeDetailIndex === index ?
[Link] : ""
}`}
key={[Link] + index}
onClick={() =>
setActiveDetailIndex(index)}
>
<p>
{sections[activeSectionKey]}
{index + 1}
</p>
<X
onClick={(event) => {
[Link]();
handleDeleteDetail(index);
}}
/>
</div>
))
: ""}
{activeInformation?.details &&
activeInformation?.details?.length > 0 ?
(
<div className={[Link]}
onClick={handleAddNew}>
+New
</div>
) : (
""
)}
</div>
{generateBody()}

<button
onClick={handleSubmission}>Save</button>
</div>
</div>
);
}

export default Editor;

You might also like