Merge pull request #103 from turingschool/feat/contact_dropdown

Feat/contact dropdown
turingschool · Feb 14, 2025 · e023104 · e023104
2 parents 7bfd621 + b77313b
commit e023104
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -522,8 +522,11 @@ Click delete in show contact page to remove a contact, with a modal to verify th
 - View A Job Application:
 
 - Create A Job Application:
-  Add a new job application by filling out a form with fields for Position Title, Company, Date Applied, Application Status, Job Description, Application URL, and Notes.
-  Choose a company that exists under your profile.
+
+Add a new job application by filling out a form with fields for Position Title, Company, Date Applied, Application Status, Job Description, User Contacts, Application URL, and Notes.
+Choose a company that exists under your profile.
+
+
 
 ![Add New Job Application Page Demo](./src/assets/newJobAppPage.png)
 
@@ -625,6 +628,10 @@ FORMAT: lastname, firstname
 - [Github](https://github.com/aloraalee)
 - [LinkedIn](https://www.linkedin.com/in/alorariley/)
 
+**Salazar, Kaelin**
+- [Github](https://github.com/kaelinpsalazar)
+- [LinkedIn](https://www.linkedin.com/in/kaelin-salazar/)
+
 **Verrill, Seth**
 - [Github](https://github.com/sethverrill)
 - [LinkedIn](https://www.linkedin.com/in/sethverrill/)
@@ -634,6 +641,7 @@ FORMAT: lastname, firstname
 - [Github](https://github.com/wally-yawn)
 - [LinkedIn](https://www.https://www.linkedin.com/in/wally-wallace-719b0875/)
 
+
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 <!-- LICENSE -->

diff --git a/cypress/e2e/NewJobApplicationspec.cy.js b/cypress/e2e/NewJobApplicationspec.cy.js
@@ -31,6 +31,7 @@ describe('Create New Job Application page after logging in', () => {
       },
     }).as("getCompanies");
 
+
     cy.intercept("GET", "http://localhost:3001/api/v1/users/2/job_applications", (req) => {
       req.on("response", (res) => {
         res.setDelay(2000); 
@@ -55,10 +56,45 @@ describe('Create New Job Application page after logging in', () => {
         status: 'Offer',
         job_description: 'Test Description',
         application_url: 'www.example.com',
-        notes: 'Test Notes'
+        notes: 'Test Notes',
       }
     }).as('addJobApplication');
 
+      cy.intercept("GET", "http://localhost:3001/api/v1/users/2/contacts", {
+        statusCode: 200,
+        body: {
+            "data": [
+                {
+                    "id": "2",
+                    "type": "contacts",
+                    "attributes": {
+                        "first_name": "Jane",
+                        "last_name": "Smith",
+                        "company_id": 1,
+                        "email": "[email protected]",
+                        "phone_number": "123-555-5678",
+                        "notes": "HR contact at Future Designs LLC",
+                        "user_id": 2,
+                        "company": {
+                            "id": 1,
+                            "name": "Future Designs LLC",
+                            "website": "https://futuredesigns.com",
+                            "street_address": "456 Future Blvd",
+                            "city": "Austin",
+                            "state": "TX",
+                            "zip_code": "73301",
+                            "notes": "Submitted application for the UI Designer role."
+                        }
+                    }
+                }
+            ]
+        },
+        headers: {
+          Authorization: "Bearer The token",
+          "Content-Type": "application/json",
+        },
+      }).as("get-contact-details-no-comp");
+
     cy.visit("http://localhost:3000/");
     cy.get('#email').type('[email protected]');
     cy.get('#password').type('Jolene123');
@@ -78,6 +114,7 @@ describe('Create New Job Application page after logging in', () => {
       cy.get('label').contains('Date Applied:').should('exist');
       cy.get('label').contains('Application Status:').should('exist');
       cy.get('label').contains('Job Description:').should('exist');
+      cy.get('label').contains('Contact Information:').should('exist');
       cy.get('label').contains('Application URL:').should('exist');
       cy.get('label').contains('Notes:').should('exist');
     })
@@ -88,6 +125,7 @@ describe('Create New Job Application page after logging in', () => {
       cy.get('#dateApplied').type('2025-01-01').should('have.value', '2025-01-01');
       cy.get('#appStatus').select('Offer').should('have.value', '3');
       cy.get('#jobDescription').type('Test Description').should('have.value', 'Test Description');
+      cy.get('#appContact').select('Jane Smith').should('have.value', '2');
       cy.get('#appURL').type('www.example.com').should('have.value', 'www.example.com');
       cy.get('#notes').type('Test Notes').should('have.value', 'Test Notes');
     })

diff --git a/src/assets/newJobAppPage.png b/src/assets/newJobAppPage.png
diff --git a/src/components/JobApplications/NewJobApplication.tsx b/src/components/JobApplications/NewJobApplication.tsx
@@ -2,12 +2,21 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useUserLoggedContext } from '../../context/UserLoggedContext';
 import { statusMap, statusStyles} from "../JobApplicationUtilities";
+import { fetchContacts } from "../../apiCalls";
+
 
 interface Company {
   id: string;
   name: string;
 }
 
+interface Contact {
+  id: string;
+  first_name: string;
+  last_name: string;
+  company_id: string;
+}
+
 function NewJobApplication() {
   const navigate = useNavigate();
   const { token, userData } = useUserLoggedContext();
@@ -18,11 +27,39 @@ function NewJobApplication() {
   const [notes, setNotes] = useState('');
   const [jobDescription, setJobDescription] = useState('');
   const [applicationURL, setApplicationURL] = useState('');
-  // const [contactInformation, setContactInformation] = useState('');
+  const [contactInformation, setContactInformation] = useState('');
   const [availableCompany, setAvailableCompany] = useState("");
   const [companies, setCompanies] = useState<Company[]>([]);
+  const [contacts, setContacts] = useState<Contact[]>([]);
+
+useEffect(() => {
+  const getContacts = async () => {
+    if (!token || !userData?.user?.data?.id) return;
+
+    try {
+      const contacts = await fetchContacts(userData.user.data.id, token);
+
+      const contactList = contacts.map((contact: any) => ({
+        id: contact.id,
+        first_name: contact.attributes.first_name,
+        last_name: contact.attributes.last_name,
+        company_id: contact.attributes.company_id,
+      }));
+
+      setContacts(contactList);
+    } catch (error) {
+      console.error("Error fetching contacts:", error);
+    }
+  };
+
+  getContacts();
+}, [token, userData?.user?.data?.id]);
+
+const filteredContacts = contacts.filter(contact => {
+
+  return String(contact.company_id) === availableCompany;
+});
 
-  // const selectedCompany = companies.find(company => company.id === availableCompany);
 
   useEffect(() => {
     const fetchCompanies = async () => {
@@ -55,17 +92,18 @@ function NewJobApplication() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
-    const newJobApplication = {
+    const newJobApplication: any = {
         position_title: positionTitle,
         date_applied: dateApplied,
         status: status,
         notes: notes,
         job_description: jobDescription,
         application_url: applicationURL,
-
-        company_id: availableCompany
+        company_id: availableCompany,
+        contact_id: contactInformation || null,
     };
 
+
     try {
       const apiURL = process.env.REACT_APP_BACKEND_API_URL;
       const response = await fetch(`${apiURL}api/v1/users/${userData.user.data.id}/job_applications`, {
@@ -114,7 +152,9 @@ function NewJobApplication() {
               <select
                 value={availableCompany || ""}
                 id="company"
-                onChange={(e) => setAvailableCompany(e.target.value)}
+                onChange={(e) => {
+                  setAvailableCompany(e.target.value);
+                }}
                 className="p-2 border-4 border-slate-800 rounded-lg focus:outline-none focus:ring-2 m-2"
                 required
               >
@@ -180,16 +220,24 @@ function NewJobApplication() {
             </label>
 
             {/* Contact Information */}
-            {/* <label className="text-[1vw] font-[Helvetica Neue] flex flex-col w-[90%]">
+           <label className="text-[1vw] font-[Helvetica Neue] flex flex-col w-[90%]">
               <span className="font-semibold">Contact Information:</span>
-              <input
-                type="text"
+              <select
                 value={contactInformation}
+                id="appContact"
                 onChange={(e) => setContactInformation(e.target.value)}
                 className="p-2 border-4 border-slate-800 rounded-lg focus:outline-none focus:ring-2 m-2"
-                placeholder='Contact info...'
-              />
-            </label> */}
+              >
+               <option value="" className="text-gray-400">
+                  Select a contact
+                </option>
+                {filteredContacts.map((contact) => (
+                  <option key={contact.id} value={contact.id}>
+                    {contact.first_name} {contact.last_name}
+                    </option>
+                ))}
+              </select>
+            </label>
           </div>
 
           <div className='m-2'>