diff --git a/src/app/components/Resume/ResumePDF/index.tsx b/src/app/components/Resume/ResumePDF/index.tsx index b1ad01d7..2cc41091 100644 --- a/src/app/components/Resume/ResumePDF/index.tsx +++ b/src/app/components/Resume/ResumePDF/index.tsx @@ -52,6 +52,13 @@ export const ResumePDF = ({ const showFormsOrder = formsOrder.filter((form) => formToShow[form]); const formTypeToComponent: { [type in ShowForm]: () => JSX.Element } = { + profile: () => ( + + ), + workExperiences: () => ( - {showFormsOrder.map((form) => { const Component = formTypeToComponent[form]; return ; diff --git a/src/app/components/ResumeDropzone.tsx b/src/app/components/ResumeDropzone.tsx index 2b984855..5920e32a 100644 --- a/src/app/components/ResumeDropzone.tsx +++ b/src/app/components/ResumeDropzone.tsx @@ -84,6 +84,7 @@ export const ResumeDropzone = ({ projects: resume.projects.length > 0, skills: resume.skills.descriptions.length > 0, custom: resume.custom.descriptions.length > 0, + profile: resume.custom.descriptions.length > 0 }; for (const section of sections) { settings.formToShow[section] = sectionToFormToShow[section]; diff --git a/src/app/components/ResumeForm/Form/index.tsx b/src/app/components/ResumeForm/Form/index.tsx index 49aacf32..9b3cc525 100644 --- a/src/app/components/ResumeForm/Form/index.tsx +++ b/src/app/components/ResumeForm/Form/index.tsx @@ -46,12 +46,13 @@ export const BaseForm = ({ ); -const FORM_TO_ICON: { [section in ShowForm]: typeof BuildingOfficeIcon } = { +export const FORM_TO_ICON: { [section in ShowForm]: typeof BuildingOfficeIcon } = { workExperiences: BuildingOfficeIcon, educations: AcademicCapIcon, projects: LightBulbIcon, skills: WrenchIcon, custom: WrenchIcon, + profile: LightBulbIcon }; export const Form = ({ diff --git a/src/app/components/ResumeForm/ProfileForm.tsx b/src/app/components/ResumeForm/ProfileForm.tsx index c7461d87..4e321d69 100644 --- a/src/app/components/ResumeForm/ProfileForm.tsx +++ b/src/app/components/ResumeForm/ProfileForm.tsx @@ -1,20 +1,72 @@ -import { BaseForm } from "components/ResumeForm/Form"; +import { BaseForm, FORM_TO_ICON } from "components/ResumeForm/Form"; import { Input, Textarea } from "components/ResumeForm/Form/InputGroup"; import { useAppDispatch, useAppSelector } from "lib/redux/hooks"; import { changeProfile, selectProfile } from "lib/redux/resumeSlice"; import { ResumeProfile } from "lib/redux/types"; +import { + selectIsFirstForm, + selectIsLastForm, + changeFormOrder, + selectShowByForm, + changeShowForm, + selectHeadingByForm, + changeFormHeading, +} from "lib/redux/settingsSlice"; +import { + MoveIconButton, + ShowIconButton, +} from "components/ResumeForm/Form/IconButton"; export const ProfileForm = () => { const profile = useAppSelector(selectProfile); const dispatch = useAppDispatch(); + const form = "profile"; + const isFirstForm = useAppSelector(selectIsFirstForm(form)); + const isLastForm = useAppSelector(selectIsLastForm(form)); + const showForm = useAppSelector(selectShowByForm(form)); + const heading = useAppSelector(selectHeadingByForm(form)); + + const handleMoveClick = (type: "up" | "down") => { + dispatch(changeFormOrder({ form, type })); + }; const { name, email, phone, url, summary, location } = profile; const handleProfileChange = (field: keyof ResumeProfile, value: string) => { dispatch(changeProfile({ field, value })); }; + const setShowForm = (showForm: boolean) => { + dispatch(changeShowForm({ field: form, value: showForm })); + }; + + const setHeading = (heading: string) => { + dispatch(changeFormHeading({ field: form, value: heading })); + }; + + const Icon = FORM_TO_ICON[form]; + return ( +
+
+
+
+ {!isFirstForm && ( + + )} + {!isLastForm && ( + + )} + +
+
JSX.Element } = { projects: ProjectsForm, skills: SkillsForm, custom: CustomForm, + profile: ProfileForm }; export const ResumeForm = () => { @@ -41,7 +42,6 @@ export const ResumeForm = () => { onMouseLeave={() => setIsHover(false)} >
- {formsOrder.map((form) => { const Component = formTypeToComponent[form]; return ; diff --git a/src/app/home/AutoTypingResume.tsx b/src/app/home/AutoTypingResume.tsx index 1cb01256..84a5e7f1 100644 --- a/src/app/home/AutoTypingResume.tsx +++ b/src/app/home/AutoTypingResume.tsx @@ -74,6 +74,7 @@ export const AutoTypingResume = () => { projects: resume.projects[0].project ? "PROJECT" : "", skills: resume.skills.featuredSkills[0].skill ? "SKILLS" : "", custom: "CUSTOM SECTION", + profile: "PROFILE" }, }} /> diff --git a/src/app/lib/redux/settingsSlice.ts b/src/app/lib/redux/settingsSlice.ts index 7e8fa83d..d03f373b 100644 --- a/src/app/lib/redux/settingsSlice.ts +++ b/src/app/lib/redux/settingsSlice.ts @@ -12,6 +12,7 @@ export interface Settings { projects: boolean; skills: boolean; custom: boolean; + profile: boolean; }; formToHeading: { workExperiences: string; @@ -19,6 +20,8 @@ export interface Settings { projects: string; skills: string; custom: string; + profile: string; + }; formsOrder: ShowForm[]; showBulletPoints: { @@ -52,6 +55,7 @@ export const initialSettings: Settings = { projects: true, skills: true, custom: false, + profile: true, }, formToHeading: { workExperiences: "WORK EXPERIENCE", @@ -59,8 +63,9 @@ export const initialSettings: Settings = { projects: "PROJECT", skills: "SKILLS", custom: "CUSTOM SECTION", + profile: "Profile" }, - formsOrder: ["workExperiences", "educations", "projects", "skills", "custom"], + formsOrder: ["profile","workExperiences", "educations", "projects", "skills", "custom"], showBulletPoints: { educations: true, projects: true,