Reorganize folder structure for better readability

README.md

@@ -34,12 +34,12 @@ CV builder web app.
 Located in `src`:
 
 - `components`: React components
-- `icons`: Components with SVG icons
-- `styles`: CSS styles & reset
+- `data`: Storage of initial data and its type definitions
+- `icons`: SVG icons components
+- `css`: CSS styles
+- `Context.tsx`: Context API provider component
 - `App.tsx`: Main component responsible for managing state and rendering components of the app
 - `main.tsx`: Entry point for the React app
-- `initialData.ts`: Storage of initial placeholder data
-- `types.ts`: TypeScript type definitions for the data
 
 Located in root:
 

src/App.tsx

@@ -1,9 +1,8 @@
 import { useState, useEffect } from "react";
-
-import FormSection from "./components/FormSection";
-import CvSection from "./components/CvSection";
-import ButtonToggleView from "./components/ButtonToggleView";
 import { FormDataContextProvider } from "./Context";
+import FormSection from "./components/FormSection/FormSection";
+import CvSection from "./components/CvSection/CvSection";
+import ButtonToggleView from "./components/common/ButtonToggleView";
 
 function App() {
   const [showForm, setShowForm] = useState(false);

src/components/CvSection.tsx → src/components/CvSection/CvSection.tsx

@@ -1,11 +1,11 @@
 import { useRef } from "react";
-import { useFormDataContext } from "../Context";
+import { useFormDataContext } from "../../Context";
 import html2canvas from "html2canvas";
 import jsPDF from "jspdf";
 import HeaderCv from "./HeaderCv";
 import EducationCv from "./EducationCv";
 import ExperienceCv from "./ExperienceCv";
-import DownloadIcon from "../icons/DownloadIcon";
+import DownloadIcon from "../../icons/DownloadIcon";
 
 interface CvProps {
   divRef: React.RefObject<HTMLDivElement>;

src/components/EducationCv.tsx → src/components/CvSection/EducationCv.tsx

@@ -1,6 +1,6 @@
-import { useFormDataContext } from "../Context";
-import { EducationObject } from "../data/types";
-import LocationIcon from "../icons/LocationIcon";
+import { useFormDataContext } from "../../Context";
+import { EducationObject } from "../../data/types";
+import LocationIcon from "../../icons/LocationIcon";
 
 interface EducationItemProps {
   educationObject: EducationObject;
@@ -31,17 +31,15 @@ function EducationItem({ educationObject }: EducationItemProps) {
 function EducationCv() {
   const { educationArray } = useFormDataContext();
 
-  if (educationArray.length === 0) {
-    return null;
-  }
-
   return (
-    <div className="education-container cv-container">
-      <h1>Education</h1>
-      {educationArray.map((educationObject) => (
-        <EducationItem key={educationObject.id} educationObject={educationObject} />
-      ))}
-    </div>
+    educationArray.length && (
+      <div className="education-container cv-container">
+        <h1>Education</h1>
+        {educationArray.map((educationObject) => (
+          <EducationItem key={educationObject.id} educationObject={educationObject} />
+        ))}
+      </div>
+    )
   );
 }
 

src/components/ExperienceCv.tsx → src/components/CvSection/ExperienceCv.tsx

@@ -1,6 +1,6 @@
-import { useFormDataContext } from "../Context";
-import { ExperienceObject } from "../data/types";
-import LocationIcon from "../icons/LocationIcon";
+import { useFormDataContext } from "../../Context";
+import { ExperienceObject } from "../../data/types";
+import LocationIcon from "../../icons/LocationIcon";
 
 interface ExperienceItemProps {
   experienceObject: ExperienceObject;
@@ -36,17 +36,15 @@ function ExperienceItem({ experienceObject }: ExperienceItemProps) {
 function ExperienceCv() {
   const { experienceArray } = useFormDataContext();
 
-  if (experienceArray.length === 0) {
-    return null;
-  }
-
   return (
-    <div className="experience-container cv-container">
-      <h1>Experience</h1>
-      {experienceArray.map((experienceObject) => (
-        <ExperienceItem key={experienceObject.id} experienceObject={experienceObject} />
-      ))}
-    </div>
+    experienceArray.length && (
+      <div className="experience-container cv-container">
+        <h1>Experience</h1>
+        {experienceArray.map((experienceObject) => (
+          <ExperienceItem key={experienceObject.id} experienceObject={experienceObject} />
+        ))}
+      </div>
+    )
   );
 }
 

src/components/HeaderCv.tsx → src/components/CvSection/HeaderCv.tsx

@@ -1,7 +1,7 @@
-import { useFormDataContext } from "../Context";
-import MailIcon from "../icons/MailIcon";
-import PhoneIcon from "../icons/PhoneIcon";
-import LocationIcon from "../icons/LocationIcon";
+import { useFormDataContext } from "../../Context";
+import MailIcon from "../../icons/MailIcon";
+import PhoneIcon from "../../icons/PhoneIcon";
+import LocationIcon from "../../icons/LocationIcon";
 
 function HeaderCv() {
   const { headerObject } = useFormDataContext();

src/components/EducationForms.tsx → src/components/FormSection/EducationForms/EducationForm.tsx

@@ -1,11 +1,9 @@
 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";
+import { useFormDataContext } from "../../../Context";
+import { EducationObject } from "../../../data/types";
+import Button from "../../common/Button";
+import ExpandLessIcon from "../../../icons/ExpandLessIcon";
+import ExpandMoreIcon from "../../../icons/ExpandMoreIcon";
 
 interface EducationFormProps {
   educationObject: EducationObject;
@@ -123,68 +121,4 @@ function EducationForm({ educationObject }: EducationFormProps) {
   );
 }
 
-function EducationForms() {
-  const { educationArray, setEducationArray } = useFormDataContext();
-
-  const handleAddNew = () => {
-    const newEducationEntry = {
-      id: uuidv4(),
-      school: "",
-      qualification: "",
-      startDate: "",
-      endDate: "",
-      location: "",
-      isOpen: true,
-    };
-
-    setEducationArray((prevState) => [...prevState, newEducationEntry]);
-  };
-
-  const onDragEnd = (result: DropResult) => {
-    if (!result.destination) {
-      return;
-    }
-
-    const startIndex = result.source.index;
-    const endIndex = result.destination.index;
-
-    const updatedArray = Array.from(educationArray);
-    const [removed] = updatedArray.splice(startIndex, 1);
-    updatedArray.splice(endIndex, 0, removed);
-
-    setEducationArray(updatedArray);
-  };
-
-  return (
-    <>
-      <div className="forms-title">Education</div>
-
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable droppableId="educationFormsContainer">
-          {(provided) => (
-            <div className="forms-container" {...provided.droppableProps} ref={provided.innerRef}>
-              {/* Creates a form synced with each object */}
-              {educationArray.map((educationObject, index) => (
-                <Draggable key={educationObject.id} draggableId={educationObject.id} index={index}>
-                  {(provided) => (
-                    <div
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}>
-                      <EducationForm educationObject={educationObject} />
-                    </div>
-                  )}
-                </Draggable>
-              ))}
-              {provided.placeholder}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
-
-      <Button className="forms-add-new" label={"+ Add new"} onClick={handleAddNew} />
-    </>
-  );
-}
-
-export default EducationForms;
+export default EducationForm;

src/components/FormSection/EducationForms/EducationForms.tsx

@@ -0,0 +1,71 @@
+import { useFormDataContext } from "../../../Context";
+import { v4 as uuidv4 } from "uuid";
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
+import EducationForm from "./EducationForm";
+import Button from "../../common/Button";
+
+function EducationForms() {
+  const { educationArray, setEducationArray } = useFormDataContext();
+
+  const handleAddNew = () => {
+    const newEducationEntry = {
+      id: uuidv4(),
+      school: "",
+      qualification: "",
+      startDate: "",
+      endDate: "",
+      location: "",
+      isOpen: true,
+    };
+
+    setEducationArray((prevState) => [...prevState, newEducationEntry]);
+  };
+
+  const onDragEnd = (result: DropResult) => {
+    if (!result.destination) {
+      return;
+    }
+
+    const startIndex = result.source.index;
+    const endIndex = result.destination.index;
+
+    const updatedArray = Array.from(educationArray);
+    const [removed] = updatedArray.splice(startIndex, 1);
+    updatedArray.splice(endIndex, 0, removed);
+
+    setEducationArray(updatedArray);
+  };
+
+  return (
+    <>
+      <div className="forms-title">Education</div>
+
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId="educationFormsContainer">
+          {(provided) => (
+            <div className="forms-container" {...provided.droppableProps} ref={provided.innerRef}>
+              {/* Creates a form synced with each object */}
+              {educationArray.map((educationObject, index) => (
+                <Draggable key={educationObject.id} draggableId={educationObject.id} index={index}>
+                  {(provided) => (
+                    <div
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}>
+                      <EducationForm educationObject={educationObject} />
+                    </div>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+
+      <Button className="forms-add-new" label={"+ Add new"} onClick={handleAddNew} />
+    </>
+  );
+}
+
+export default EducationForms;

src/components/ExperienceForms.tsx → src/components/FormSection/ExperienceForms/ExperienceForm.tsx

@@ -1,11 +1,9 @@
 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";
+import { useFormDataContext } from "../../../Context";
+import { ExperienceObject } from "../../../data/types";
+import Button from "../../common/Button";
+import ExpandLessIcon from "../../../icons/ExpandLessIcon";
+import ExpandMoreIcon from "../../../icons/ExpandMoreIcon";
 
 interface ExperienceFormProps {
   experienceObject: ExperienceObject;
@@ -14,7 +12,6 @@ interface ExperienceFormProps {
 function ExperienceForm({ experienceObject }: ExperienceFormProps) {
   const { id, company, position, startDate, endDate, location, description, isOpen } =
     experienceObject;
-
   const { setExperienceArray } = useFormDataContext();
 
   const toggleDropdown = () => {
@@ -134,71 +131,4 @@ function ExperienceForm({ experienceObject }: ExperienceFormProps) {
   );
 }
 
-function ExperienceForms() {
-  const { experienceArray, setExperienceArray } = useFormDataContext();
-
-  const handleAddNew = () => {
-    const newEducationEntry = {
-      id: uuidv4(),
-      company: "",
-      position: "",
-      startDate: "",
-      endDate: "",
-      location: "",
-      description: "",
-      isOpen: true,
-    };
-
-    setExperienceArray((prevState) => [...prevState, newEducationEntry]);
-  };
-
-  const onDragEnd = (result: DropResult) => {
-    if (!result.destination) {
-      return;
-    }
-
-    const startIndex = result.source.index;
-    const endIndex = result.destination.index;
-
-    const updatedArray = Array.from(experienceArray);
-    const [removed] = updatedArray.splice(startIndex, 1);
-    updatedArray.splice(endIndex, 0, removed);
-
-    setExperienceArray(updatedArray);
-  };
-
-  return (
-    <>
-      <div className="forms-title">Experience</div>
-
-      <DragDropContext onDragEnd={onDragEnd}>
-        <Droppable droppableId="experienceFormsContainer">
-          {(provided) => (
-            <div className="forms-container" {...provided.droppableProps} ref={provided.innerRef}>
-              {experienceArray.map((experienceObject, index) => (
-                <Draggable
-                  key={experienceObject.id}
-                  draggableId={experienceObject.id}
-                  index={index}>
-                  {(provided) => (
-                    <div
-                      ref={provided.innerRef}
-                      {...provided.draggableProps}
-                      {...provided.dragHandleProps}>
-                      <ExperienceForm experienceObject={experienceObject} />
-                    </div>
-                  )}
-                </Draggable>
-              ))}
-              {provided.placeholder}
-            </div>
-          )}
-        </Droppable>
-      </DragDropContext>
-
-      <Button className="forms-add-new" label={"+ Add new"} onClick={handleAddNew} />
-    </>
-  );
-}
-
-export default ExperienceForms;
+export default ExperienceForm;