#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

@@ -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' })

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
+export default CompanyListing

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 /> },
         ],
     },

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
+export default Company