bugfix

vivekss1998 · Aug 25, 2023 · 04a2c49 · 04a2c49
1 parent b164a9e
commit 04a2c49
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/src/ViewJobDetails.css b/src/ViewJobDetails.css
@@ -91,4 +91,24 @@ body {
   }
 
 
+  /* Styles for the ads section */
+.ads-section {
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 5px;
+    margin-top: 20px;
+  }
+
+  .ad-job {
+    margin-bottom: 15px;
+  }
+
+  .ad-job-title {
+    font-weight: bold;
+    text-decoration: none;
+  }
+
+  .ad-job-location {
+    color: #777;
+  }
 
diff --git a/src/ViewJobDetails.js b/src/ViewJobDetails.js
@@ -5,6 +5,7 @@ import './ViewJobDetails.css';
 const ViewJobDetails = () => {
   const { jobId } = useParams();
   const [jobDetails, setJobDetails] = useState(null);
+  const [otherJobs, setOtherJobs] = useState([]);
 
   useEffect(() => {
     fetch(`https://demo.jobsoid.com/api/v1/jobs/${jobId}`)
@@ -15,7 +16,16 @@ const ViewJobDetails = () => {
       .catch(error => {
         console.error('Error fetching job details:', error);
       });
-  }, [jobId]);
+     // Fetch other jobs for ads
+     fetch('https://demo.jobsoid.com/api/v1/jobs')
+     .then(response => response.json())
+     .then(data => {
+       setOtherJobs(data);
+     })
+     .catch(error => {
+       console.error('Error fetching other jobs:', error);
+     });
+ }, [jobId]);
 
   if (!jobDetails) {
     return <p>Loading...</p>;
@@ -63,6 +73,25 @@ const ViewJobDetails = () => {
               </a>
             </div>
 
+                  {/* Ads Section */}
+      <div className="ads-section">
+        <h3>Other Job Openings</h3>
+        {otherJobs.map(adJob => (
+          <div key={adJob.id} className="ad-job">
+            <a href={`/view/${adJob.id}`} className="ad-job-title">
+              {adJob.title}
+            </a>
+            <p className="ad-job-location">
+            <i className="pi pi-map-marker location-icon" />
+              {adJob.location && adJob.location.city},{' '}
+              {adJob.location && adJob.location.state}
+            </p>
+          </div>
+        ))}
+      </div>
+
+
+
             {/* Social Media Share */}
             <div className="share-section align justify-content-between">
               <h3>Share this job:</h3>
@@ -82,6 +111,7 @@ const ViewJobDetails = () => {
         </div>
       </div>
     </div>
+
   );
 };