Merge branch 'main' into feature/edit-pages

Author: p0nch000

src/App.css

@@ -40,3 +40,50 @@ button:hover {
   gap: 10px;
   margin-top: 10px;
 }
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+
+.modal {
+  position: relative;
+  background-color: white;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  width: 400px;
+  height: 300px;
+}
+
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+  justify-content: center;
+}
+
+.form input {
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}

src/App.js

@@ -6,6 +6,7 @@ import SkillEditPage from "./components/skills/SkillEditPage";
 import EducationForm from "./components/education/EducationForm";
 import EducationView from "./components/education/EducationView";
 import EducationEditPage from "./components/education/EducationEditPage";
+import User from "./components/User/page";
 
 function App() {
   const [showAddSkillForm, setShowAddSkillForm] = useState(false);
@@ -55,6 +56,12 @@ function App() {
   return (
     <div className="App">
       <h1>Resume Builder</h1>
+      <div className="resumeSection">
+        <h2>User</h2>
+        <p>Add User Information</p>
+        <User />
+        <br></br>
+      </div>
       <div className="resumeSection">
         <h2>Experience</h2>
         <p>Experience Placeholder</p>

src/App.test.js

@@ -1,7 +1,9 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import App from "./App";
+import User from "./components/User/page.jsx";
 
+// App component test
 test("renders main components of Resume Builder", () => {
   render(<App />);
 
@@ -30,3 +32,86 @@ test("renders main components of Resume Builder", () => {
   ).toBeInTheDocument();
   expect(screen.getByRole("button", { name: /Export/i })).toBeInTheDocument();
 });
+
+// User component test
+describe("User Component", () => {
+  test("renders Add User button", () => {
+    render(<User />);
+    const addButton = screen.getByRole("button", { name: /Add User/i });
+    expect(addButton).toBeInTheDocument();
+  });
+
+  test("opens modal when Add User button is clicked", async () => {
+    render(<User />);
+    const addButton = screen.getByRole("button", { name: /Add User/i });
+
+    fireEvent.click(addButton);
+
+    await waitFor(() => {
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+  });
+
+  test("closes modal when close button is clicked", async () => {
+    render(<User />);
+    const addButton = screen.getByRole("button", { name: /Add User/i });
+
+    fireEvent.click(addButton);
+
+    await waitFor(() => {
+      const closeButton = screen.getByRole("button", { name: /×/i });
+      fireEvent.click(closeButton);
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  test("closes modal when clicking outside", async () => {
+    render(<User />);
+    const addButton = screen.getByRole("button", { name: /Add User/i });
+
+    fireEvent.click(addButton);
+
+    await waitFor(() => {
+      const modal = screen.getByRole("dialog");
+      fireEvent.mouseDown(document.body);
+      expect(modal).not.toBeInTheDocument();
+    });
+  });
+
+  test("handles form input and submission", async () => {
+    render(<User />);
+    const addButton = screen.getByRole("button", { name: /Add User/i });
+
+    fireEvent.click(addButton);
+
+    await waitFor(() => {
+      const nameInput = screen.getByPlaceholderText(/name/i);
+      const phoneInput = screen.getByPlaceholderText(/phone/i);
+      const emailInput = screen.getByPlaceholderText(/email/i);
+      const submitButton = screen.getByRole("button", { name: /save/i });
+
+      fireEvent.change(nameInput, { target: { value: "John Doe" } });
+      fireEvent.change(phoneInput, { target: { value: "+2343456890" } });
+      fireEvent.change(emailInput, {
+        target: { value: "[email protected]" },
+      });
+
+      expect(nameInput).toHaveValue("John Doe");
+      expect(phoneInput).toHaveValue("+2343456890");
+      expect(emailInput).toHaveValue("[email protected]");
+
+      const consoleSpy = jest.spyOn(console, "log");
+      fireEvent.click(submitButton);
+
+      expect(consoleSpy).toHaveBeenCalledWith({
+        name: "John Doe",
+        phone_number: "+2343456890",
+        email: "[email protected]",
+      });
+      consoleSpy.mockRestore();
+
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+});
+

src/components/User/page.jsx

@@ -0,0 +1,81 @@
+import React, { useState, useRef, useEffect } from "react";
+
+const User = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [userInfo, setUserInfo] = useState({
+    name: "",
+    phone_number: "",
+    email: "",
+  });
+
+  const handleChange = (e) => {
+    setUserInfo({ ...userInfo, [e.target.name]: e.target.value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // handle form submission here
+    console.log(userInfo);
+    setIsOpen(false);
+  };
+
+  //  clicking outside modal should close the form
+  const modalRef = useRef();
+
+  const handleClickOutside = (e) => {
+    if (modalRef.current && !modalRef.current.contains(e.target)) {
+      setIsOpen(false);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  // modal form
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Add User</button>
+
+      {isOpen && (
+        <div className="modal-overlay">
+          <div className="modal" ref={modalRef} role="dialog">
+            <button className="close-button" onClick={() => setIsOpen(false)}>
+              &times;
+            </button>
+            <p>Add User information</p>
+            <form className="form" onSubmit={handleSubmit} role="form">
+              <input
+                type="text"
+                name="name"
+                placeholder="Name"
+                value={userInfo.name}
+                onChange={handleChange}
+              />
+              <input
+                type="tel"
+                name="phone_number"
+                placeholder="Phone"
+                value={userInfo.phone_number}
+                onChange={handleChange}
+              />
+              <input
+                type="email"
+                name="email"
+                placeholder="Email"
+                value={userInfo.email}
+                onChange={handleChange}
+              />
+              <button type="submit">Save</button>
+            </form>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default User;