Refactor context in its own provider component

amadeuio · Apr 5, 2024 · 5942dd7 · 5942dd7
1 parent 0075dce
commit 5942dd7
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 78 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,31 +1,11 @@
-import { useState, useEffect, createContext, Dispatch, SetStateAction } from "react";
-import { HeaderObject, EducationObject, ExperienceObject } from "./data/types";
-import {
-  initialHeaderObject,
-  initialEducationArray,
-  initialExperienceArray,
-} from "./data/initialData";
+import { useState, useEffect } from "react";
 
 import FormSection from "./components/FormSection";
 import CvSection from "./components/CvSection";
 import ButtonToggleView from "./components/ButtonToggleView";
-
-interface FormDataContext {
-  headerObject: HeaderObject;
-  setHeaderObject: Dispatch<SetStateAction<HeaderObject>>;
-  educationArray: EducationObject[];
-  setEducationArray: Dispatch<SetStateAction<EducationObject[]>>;
-  experienceArray: ExperienceObject[];
-  setExperienceArray: Dispatch<SetStateAction<ExperienceObject[]>>;
-}
-
-export const FormDataContext = createContext<FormDataContext | undefined>(undefined);
+import { FormDataContextProvider } from "./Context";
 
 function App() {
-  const [headerObject, setHeaderObject] = useState(initialHeaderObject);
-  const [educationArray, setEducationArray] = useState(initialEducationArray);
-  const [experienceArray, setExperienceArray] = useState(initialExperienceArray);
-
   const [showForm, setShowForm] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(window.innerWidth <= 1250);
 
@@ -52,20 +32,12 @@ function App() {
         <h1>Make Your CV 📃</h1>
       </div>
 
-      <div className="main-content-container">
-        <FormDataContext.Provider
-          value={{
-            headerObject,
-            setHeaderObject,
-            educationArray,
-            setEducationArray,
-            experienceArray,
-            setExperienceArray,
-          }}>
+      <FormDataContextProvider>
+        <div className="main-content-container">
           {(!isCollapsed || showForm) && <FormSection />}
           {(!isCollapsed || !showForm) && <CvSection />}
-        </FormDataContext.Provider>
-      </div>
+        </div>
+      </FormDataContextProvider>
     </div>
   );
 }

diff --git a/src/Context.tsx b/src/Context.tsx
@@ -0,0 +1,43 @@
+import { useState, useContext, createContext, Dispatch, SetStateAction } from "react";
+import { HeaderObject, EducationObject, ExperienceObject } from "./data/types";
+import {
+  initialHeaderObject,
+  initialEducationArray,
+  initialExperienceArray,
+} from "./data/initialData";
+
+interface FormDataContext {
+  headerObject: HeaderObject;
+  setHeaderObject: Dispatch<SetStateAction<HeaderObject>>;
+  educationArray: EducationObject[];
+  setEducationArray: Dispatch<SetStateAction<EducationObject[]>>;
+  experienceArray: ExperienceObject[];
+  setExperienceArray: Dispatch<SetStateAction<ExperienceObject[]>>;
+}
+
+export const FormDataContext = createContext<FormDataContext | undefined>(undefined);
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const useFormDataContext = () => {
+  return useContext(FormDataContext);
+};
+
+export const FormDataContextProvider = ({ children }) => {
+  const [headerObject, setHeaderObject] = useState(initialHeaderObject);
+  const [educationArray, setEducationArray] = useState(initialEducationArray);
+  const [experienceArray, setExperienceArray] = useState(initialExperienceArray);
+
+  return (
+    <FormDataContext.Provider
+      value={{
+        headerObject,
+        setHeaderObject,
+        educationArray,
+        setEducationArray,
+        experienceArray,
+        setExperienceArray,
+      }}>
+      {children}
+    </FormDataContext.Provider>
+  );
+};
diff --git a/src/components/CvSection.tsx b/src/components/CvSection.tsx
@@ -1,9 +1,7 @@
-import { useContext, useRef } from "react";
-import { FormDataContext } from "../App";
-
+import { useRef } from "react";
+import { useFormDataContext } from "../Context";
 import html2canvas from "html2canvas";
 import jsPDF from "jspdf";
-
 import HeaderCv from "./HeaderCv";
 import EducationCv from "./EducationCv";
 import ExperienceCv from "./ExperienceCv";
@@ -26,7 +24,7 @@ function Cv({ divRef }: CvProps) {
 }
 
 function CvSection() {
-  const { headerObject } = useContext(FormDataContext)!;
+  const { headerObject } = useFormDataContext();
   const [firstName, lastName] = headerObject.fullName.split(" ");
 
   const divRef = useRef<HTMLDivElement>(null!);

diff --git a/src/components/EducationCv.tsx b/src/components/EducationCv.tsx
@@ -1,7 +1,5 @@
-import { useContext } from "react";
-import { FormDataContext } from "../App";
+import { useFormDataContext } from "../Context";
 import { EducationObject } from "../data/types";
-
 import LocationIcon from "../icons/LocationIcon";
 
 interface EducationItemProps {
@@ -31,7 +29,7 @@ function EducationItem({ educationObject }: EducationItemProps) {
 }
 
 function EducationCv() {
-  const { educationArray } = useContext(FormDataContext)!;
+  const { educationArray } = useFormDataContext();
 
   if (educationArray.length === 0) {
     return null;

diff --git a/src/components/EducationForms.tsx b/src/components/EducationForms.tsx
@@ -1,21 +1,19 @@
-import { useContext, ChangeEvent, FormEvent } from "react";
-import { FormDataContext } from "../App";
+import { ChangeEvent, FormEvent } from "react";
+import { useFormDataContext } from "../Context";
 import { EducationObject } from "../data/types";
-
 import { v4 as uuidv4 } from "uuid";
 import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
-
 import Button from "./Button";
 import ExpandLessIcon from "../icons/ExpandLessIcon";
 import ExpandMoreIcon from "../icons/ExpandMoreIcon";
 
 interface EducationFormProps {
   educationObject: EducationObject;
-  setEducationArray: React.Dispatch<React.SetStateAction<EducationObject[]>>;
 }
 
-function EducationForm({ educationObject, setEducationArray }: EducationFormProps) {
+function EducationForm({ educationObject }: EducationFormProps) {
   const { id, school, qualification, startDate, endDate, location, isOpen } = educationObject;
+  const { setEducationArray } = useFormDataContext();
 
   const toggleDropdown = () => {
     setEducationArray((prevState) =>
@@ -126,7 +124,7 @@ function EducationForm({ educationObject, setEducationArray }: EducationFormProp
 }
 
 function EducationForms() {
-  const { educationArray, setEducationArray } = useContext(FormDataContext)!;
+  const { educationArray, setEducationArray } = useFormDataContext();
 
   const handleAddNew = () => {
     const newEducationEntry = {
@@ -173,10 +171,7 @@ function EducationForms() {
                       ref={provided.innerRef}
                       {...provided.draggableProps}
                       {...provided.dragHandleProps}>
-                      <EducationForm
-                        educationObject={educationObject}
-                        setEducationArray={setEducationArray}
-                      />
+                      <EducationForm educationObject={educationObject} />
                     </div>
                   )}
                 </Draggable>

diff --git a/src/components/ExperienceCv.tsx b/src/components/ExperienceCv.tsx
@@ -1,7 +1,5 @@
-import { useContext } from "react";
-import { FormDataContext } from "../App";
+import { useFormDataContext } from "../Context";
 import { ExperienceObject } from "../data/types";
-
 import LocationIcon from "../icons/LocationIcon";
 
 interface ExperienceItemProps {
@@ -36,7 +34,7 @@ function ExperienceItem({ experienceObject }: ExperienceItemProps) {
 }
 
 function ExperienceCv() {
-  const { experienceArray } = useContext(FormDataContext)!;
+  const { experienceArray } = useFormDataContext();
 
   if (experienceArray.length === 0) {
     return null;

diff --git a/src/components/ExperienceForms.tsx b/src/components/ExperienceForms.tsx
@@ -1,23 +1,22 @@
-import { useContext, ChangeEvent, FormEvent } from "react";
-import { FormDataContext } from "../App";
+import { ChangeEvent, FormEvent } from "react";
+import { useFormDataContext } from "../Context";
 import { ExperienceObject } from "../data/types";
-
 import { v4 as uuidv4 } from "uuid";
 import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
-
 import Button from "./Button";
 import ExpandLessIcon from "../icons/ExpandLessIcon";
 import ExpandMoreIcon from "../icons/ExpandMoreIcon";
 
 interface ExperienceFormProps {
   experienceObject: ExperienceObject;
-  setExperienceArray: React.Dispatch<React.SetStateAction<ExperienceObject[]>>;
 }
 
-function ExperienceForm({ experienceObject, setExperienceArray }: ExperienceFormProps) {
+function ExperienceForm({ experienceObject }: ExperienceFormProps) {
   const { id, company, position, startDate, endDate, location, description, isOpen } =
     experienceObject;
 
+  const { setExperienceArray } = useFormDataContext();
+
   const toggleDropdown = () => {
     setExperienceArray((prevState) =>
       prevState.map((exp) => (exp.id === id ? { ...exp, isOpen: !exp.isOpen } : exp))
@@ -136,7 +135,7 @@ function ExperienceForm({ experienceObject, setExperienceArray }: ExperienceForm
 }
 
 function ExperienceForms() {
-  const { experienceArray, setExperienceArray } = useContext(FormDataContext)!;
+  const { experienceArray, setExperienceArray } = useFormDataContext();
 
   const handleAddNew = () => {
     const newEducationEntry = {
@@ -186,10 +185,7 @@ function ExperienceForms() {
                       ref={provided.innerRef}
                       {...provided.draggableProps}
                       {...provided.dragHandleProps}>
-                      <ExperienceForm
-                        experienceObject={experienceObject}
-                        setExperienceArray={setExperienceArray}
-                      />
+                      <ExperienceForm experienceObject={experienceObject} />
                     </div>
                   )}
                 </Draggable>

diff --git a/src/components/HeaderCv.tsx b/src/components/HeaderCv.tsx
@@ -1,12 +1,10 @@
-import { useContext } from "react";
-import { FormDataContext } from "../App";
-
+import { useFormDataContext } from "../Context";
 import MailIcon from "../icons/MailIcon";
 import PhoneIcon from "../icons/PhoneIcon";
 import LocationIcon from "../icons/LocationIcon";
 
 function HeaderCv() {
-  const { headerObject } = useContext(FormDataContext)!;
+  const { headerObject } = useFormDataContext();
   const { fullName, email, phone, address } = headerObject;
 
   return (

diff --git a/src/components/HeaderForm.tsx b/src/components/HeaderForm.tsx
@@ -1,12 +1,11 @@
-import { useContext, ChangeEvent, FormEvent } from "react";
-import { FormDataContext } from "../App";
-
+import { ChangeEvent, FormEvent } from "react";
+import { useFormDataContext } from "../Context";
 import Button from "./Button";
 import ExpandLessIcon from "../icons/ExpandLessIcon";
 import ExpandMoreIcon from "../icons/ExpandMoreIcon";
 
 function HeaderForm() {
-  const { headerObject, setHeaderObject } = useContext(FormDataContext)!;
+  const { headerObject, setHeaderObject } = useFormDataContext();
   const { fullName, email, phone, address, isOpen } = headerObject;
 
   const toggleDropdown = () => {

diff --git a/tsconfig.json b/tsconfig.json
@@ -15,7 +15,7 @@
     "jsx": "react-jsx",
 
     /* Linting */
-    "strict": true,
+    "strict": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true