From cc4e037e1a5e577b12662f92681dd8a4fcb87f3b Mon Sep 17 00:00:00 2001
From: AOA19 <aakinyemi19@gmail.com>
Date: Tue, 7 Jan 2025 22:32:54 -0500
Subject: [PATCH] #38 - Removed the hard coded companies list and added a fetch
 request to dynamically render all companies from server. When companies
 clicked should now navigate to specific company based on ID. - Made one small
 change to company controller getCompany function

Co-authored-by: Angel Morris <angel.morris920@gmail.com>
---
 server/controllers/company.js                 |  2 +-
 .../CompanyListing/CompanyListing.jsx         | 51 ++++++++++---------
 src/main.jsx                                  |  3 +-
 src/pages/Company/Company.jsx                 | 29 ++++++++++-
 4 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/server/controllers/company.js b/server/controllers/company.js
index 2ab3fc5..4409b60 100644
--- a/server/controllers/company.js
+++ b/server/controllers/company.js
@@ -16,7 +16,7 @@ const companyController = {
     getCompany: async (req, res, next) => {
         try {
             const { id } = req.params // Get the company ID from the route parameters
-            const company = await Company.findById(id).populate('reviews') // Fetch company and populate reviews
+            const company = await Company.findById(id) // Fetch company and populate reviews
 
             if (!company) {
                 return res.status(404).json({ message: 'Company not found' })
diff --git a/src/components/CompanyListing/CompanyListing.jsx b/src/components/CompanyListing/CompanyListing.jsx
index 45a31b9..b502e20 100644
--- a/src/components/CompanyListing/CompanyListing.jsx
+++ b/src/components/CompanyListing/CompanyListing.jsx
@@ -1,33 +1,36 @@
+import { useState, useEffect } from 'react'
 import './companyListing.css'
+import { Link } from 'react-router'
 
 const CompanyListing = () => {
-    return (
-        <section className="company-grid">
-            <div className="company-card"><a href='/company'>Amazon</a></div>
-            <div className="company-card"><a href='/company'>Microsoft</a></div>
-            <div className="company-card"><a href='/company'>Google</a></div>
-            <div className="company-card"><a href='/company'>Meta</a></div>
-            <div className="company-card"><a href='/company'>Apple</a></div>
-            <div className="company-card"><a href='/company'>Salesforce</a></div>
-            <div className="company-card"><a href='/company'>Intel</a></div>
-            <div className="company-card"><a href='/company'>Uber</a></div>
-            <div className="company-card"><a href='/company'>Capital One</a></div>
-            <div className="company-card"><a href='/company'>LinkedIn</a></div>
-            <div className="company-card"><a href='/company'>JPMorgan Chase</a></div>
-            <div className="company-card"><a href='/company'>Walmart</a></div>
-            <div className="company-card"><a href='/company'>Goldman Sachs</a></div>
-            <div className="company-card"><a href='/company'>Deloitte</a></div>
-            <div className="company-card"><a href='/company'>KPMG</a></div>
-            <div className="company-card"><a href='/company'>Tesla</a></div>
-            <div className="company-card"><a href='/company'>Netflix</a></div>
-            <div className="company-card"><a href='/company'>Bank of America</a></div>
-            <div className="company-card"><a href='/company'>EY</a></div>
-            <div className="company-card"><a href='/company'>Morgan Stanley</a></div>
-        </section>
+    const [companies, setCompanies] = useState([])
 
+    useEffect(() => {
+        const fetchCompanies = async () => {
+            try {
+                const response = await fetch('/api/company')
+                console.log({ response })
+                if (!response.ok) throw new Error('Failed to fetch companies.')
 
+                const data = await response.json()
+                console.log(data.companies)
+                setCompanies(data.companies)
+            } catch (error) {
+                console.error('Error fetching companies:', error)
+            }
+        }
 
+        fetchCompanies()
+    }, [])
+    return (
+        <section className="company-grid">
+            {companies.map((company) => (
+                <div className="company-card" key={company._id}>
+                    <Link to={`/company/${company._id}`}>{company.name}</Link>
+                </div>
+            ))}
+        </section>
     )
 }
 
-export default CompanyListing
\ No newline at end of file
+export default CompanyListing
diff --git a/src/main.jsx b/src/main.jsx
index b15348a..dd818e7 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -39,7 +39,8 @@ const router = createBrowserRouter([
             { path: '/sign-up/*', element: <SignUpPage /> },
             { path: '/profile', element: <Profile /> },
             { path: '/companies', element: <Companies /> },
-            { path: '/company', element: <Company /> },
+            // { path: '/company', element: <Company /> },
+            { path: '/company/:id', element: <Company /> },
             { path: '/review', element: <Review /> },
         ],
     },
diff --git a/src/pages/Company/Company.jsx b/src/pages/Company/Company.jsx
index 4e74918..a376906 100644
--- a/src/pages/Company/Company.jsx
+++ b/src/pages/Company/Company.jsx
@@ -1,10 +1,37 @@
+import { useParams } from 'react-router'
 import './company.css'
 import CompanyBanner from '../../components/CompanyBanner/CompanyBanner.jsx'
 import CompanyOverview from '../../components/CompanyOverview/CompanyOverview.jsx'
 import CompanyReviewSummary from '../../components/CompanyReviewSummary/CompanyReviewSummary.jsx'
 import CompanySalaries from '../../components/CompanySalaries/CompanySalaries.jsx'
+import { useState, useEffect } from 'react'
 
 const Company = () => {
+    const [company, setCompany] = useState([])
+    let params = useParams()
+    console.log({params})
+
+       useEffect(() => {
+            const fetchCompany = async () => {
+                try {
+                    const response = await fetch(`/api/company/${params.id}`);
+                    console.log({response});
+                    if (!response.ok) throw new Error("Failed to fetch company.");
+        
+                    const data = await response.json();
+                    console.log(data)
+                    setCompany(data); 
+                    
+                    
+                } catch (error) {
+                    console.error("Error fetching companies:", error);
+                }
+            };
+        
+            fetchCompany();
+        }, [params.id]);
+
+        console.log(company)
     return (
         <main className="company-container">
             <CompanyBanner />
@@ -17,4 +44,4 @@ const Company = () => {
     )
 }
 
-export default Company
\ No newline at end of file
+export default Company