Merge pull request #93 from turingschool/feat/company-info-linking

Feat/company info linking

README.md

@@ -490,7 +490,7 @@ Key Functionalities Include:
 - View All Contacts:
 Browse a comprehensive list of contacts with info like their name, company, and notes. Includes a search bar and ability to create a new contact.
 - View a Contact:
-Click on  a contact to see detail info on a dedicated page, such as their name, company, email address, phone number, notes and any other contacts associated with the company. Click on the other contacts to view their contact page. Click the contact's email address to open their mail client with an email to the contact.
+Click on  a contact to see detail info on a dedicated page, such as their name, company, email address, phone number, notes and any other contacts associated with the company. Click on the other contacts to view their contact page. Click the contact's email address to open their mail client with an email to the contact. Click on the company name to view company name details.
 - Add a new Contact
 Click on the Add New + button to navigate to a form where a user inputs a new contact and their associated information.
 - Search for a Contact

cypress/e2e/LoginSpec.cy.js

@@ -5,7 +5,7 @@ describe('testing for Login page', () => {
   });
 
   it('checks for the elements on the page', () => {
-     cy.get('.turing-logo').should('be.visible')
+    cy.get('.turing-logo').should('be.visible')
     .get('.login-form-wrap > .form-inputs > form > h1').should('be.visible')
     .get('.login-form-wrap > .form-inputs > form > h1').should('contain', 'Please login')
 

cypress/e2e/ShowContactSpec.cy.js

@@ -68,6 +68,19 @@ describe("Show a single contact page", () => {
       {
         statusCode: 200,
         body: {
+          company: {
+            data: {
+              attributes: {
+                name: "Google",
+                website: "https://google.com",
+                street_address: "1600 Amphitheatre Parkway",
+                city: "Mountain View",
+                state: "CA",
+                zip_code: "94043",
+                notes: "Innovative tech company.",
+              },
+            },
+          },
           contacts: {
             data: [
               {
@@ -115,9 +128,13 @@ describe("Show a single contact page", () => {
     cy.get('[data-testid="contact-name"]').should("have.text", "John Smith");
   });
 
-  it("Should display the company's name", () => {
+  it("Should display the company's name and navigate to the company on click", () => {
     cy.wait("@get-contact-details");
-    cy.get('[data-testid="company-name"]').should("have.text", "Future Designs LLC");
+    cy.get('[data-testid="company-name"]').should('have.text', 'Future Designs LLC');
+    cy.get('[data-testid="company-link"]').click();
+    cy.get("h2").contains("Company Name:")
+      .next().should("have.text", "Google");
+    cy.url().should('include', '/companies/1/contacts');
   });
 
   it("Should display the contact's email and phone number", () => {

src/components/contacts/ShowContact.tsx

@@ -135,10 +135,11 @@ function ShowContact() {
             </h1>
             <h2
               data-testid="company-name"
-              className="text-[3.5vh] font-bold text-cyan-500 p-0"
+              className="text-[3.5vh] font-bold text-cyan-500 hover:text-cyan-700 p-0 hover:underline"
             >
               {contact.attributes.company
-                ? contact.attributes.company.name
+                ? 
+                <Link data-testid="company-link" to={`/companies/${contact.attributes.company_id}/contacts`}>{contact.attributes.company.name}</Link>
                 : "No Affiliated Companies" }
             </h2>
             <div className="m-5">