added styling to saved jobs

umarbek98 · Apr 13, 2023 · 765c106 · 765c106
1 parent a31b3bc
commit 765c106
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 15 deletions.
diff --git a/src/components/CardInfo.js b/src/components/CardInfo.js
@@ -34,6 +34,7 @@ function CardInfo({ job, data }) {
 
   return (
     <div className={styles.cardInfo}>
+      <SaveButton onClick={handleSave} job={job} saved={saved} />
       <h1 className={styles.title}>{job.title}</h1>
       <h3 className={styles.title}>{job.company.display_name}</h3>
       <p className={styles.info}>
@@ -56,7 +57,6 @@ function CardInfo({ job, data }) {
           More Details
         </a>
         <br />
-        <SaveButton onClick={handleSave} job={job} saved={saved} />
       </div>
       <br></br>
       <p className={styles.info}>

diff --git a/src/components/CardInfo.module.css b/src/components/CardInfo.module.css
@@ -1,6 +1,6 @@
 .cardInfo {
     position: fixed;
-    top: 65px;
+    top: 25vh;
     height: auto;
     right: 50px;
     border: 1px solid rgba(255, 255, 255, 0.25);

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import LoginModal from './LoginModal';
 import RegisterModal from './RegisterModal';
 import { auth } from "../firebase";
-import { onAuthStateChanged, signOut } from "firebase/auth";
+import { signOut } from "firebase/auth";
 
 function NavBar({ what, where, setWhat, setWhere, setCurrJob, setAuthUser, authUser}) {
   const [showLogin, setShowLogin] = useState(false);
@@ -51,7 +51,7 @@ function NavBar({ what, where, setWhat, setWhere, setCurrJob, setAuthUser, authU
         <Nav className="mr-auto">
           <Link to="/" className="ms-2 text-primary" href="#home">Home</Link>
           <Link onClick={handleClick} to="/tips" className="ms-4 text-primary" href="#link">Tips</Link>
-          <Link onClick={handleClick} className="ms-4 text-primary" to="/saved-jobs">Saved Jobs</Link>
+          {authUser ? <Link onClick={handleClick} className="ms-4 text-primary" to="/saved-jobs">Saved Jobs</Link> : null}
         </Nav>
         <Form inline onSubmit={handleSearch}>
             <div className='d-flex'>

diff --git a/src/components/SaveButton.js b/src/components/SaveButton.js
@@ -15,7 +15,12 @@ function SaveButton({ job }) {
         userId: auth.currentUser.uid,
         title: job.title,
         url: job.redirect_url,
-        description: job.description
+        description: job.description,
+        location: job.location.display_name,
+        company: job.company.display_name,
+        created: job.created,
+        sal_min: job.salary_min,
+        sal_max: job.salary_max
 
       });
       setIsSaved(true);
@@ -26,7 +31,7 @@ function SaveButton({ job }) {
   };
 
   return (
-    <button onClick={handleSaveJob} disabled={isSaved}>
+    <button className="btn btn-primary btn-lg active" style={{float: "right", marginRight: '10px', marginTop: '10px'}} onClick={handleSaveJob} disabled={isSaved}>
       {isSaved ? "Saved!" : "Save Job"}
     </button>
   );

diff --git a/src/components/SavedJobs.js b/src/components/SavedJobs.js
@@ -1,9 +1,25 @@
 import { useState, useEffect } from "react";
 import { db } from "../firebase";
+import styles from "./SavedJobs.module.css"
 import { collection, query, where, getDocs } from "firebase/firestore";
+import moment from "moment";
+import { Modal, ModalBody } from "react-bootstrap";
+
 
 function SavedJobs({ currentUser }) {
   const [savedJobs, setSavedJobs] = useState([]);
+  const [showJob, setShowJob] = useState(false);
+  const [currJob, setCurrJob] = useState([])
+
+  function handleShowJob(job){
+    setCurrJob(job)
+    setShowJob(true)
+    console.log(currJob)
+  }
+
+  function handleCloseJob(){
+    setShowJob(false)
+  }
 
   useEffect(() => {
     const fetchData = async () => {
@@ -21,17 +37,45 @@ function SavedJobs({ currentUser }) {
   }, [currentUser]);
 
   return (
-    <div>
-      <h2>Saved Jobs</h2>
-      <ul>
+    <div style={{display: 'flex', flexWrap: "wrap"}}>
         {savedJobs.map((job) => (
-          <li key={job.id}>
-            <a href={job.url} target="_blank" rel="noopener noreferrer">
-              {job.title} @ {job.company}
-            </a>
-          </li>
+          <div >
+            <div onClick={() => handleShowJob(job)} id={styles.card} key={job.id}>
+                  <h1 className={styles.title}>{job.title}</h1>
+                  <h3 className={styles.title}>{job.company}</h3>
+                  <p>{job.location} | {moment(job.created).utc().format('MM/DD/YYYY')}</p>
+                  <p>Salary: Estimated ${job.sal_min} to ${job.sal_max}</p>
+            </div>
+          </div>
         ))}
-      </ul>
+        <Modal show={showJob} onHide={handleCloseJob}>
+          <ModalBody>
+          <div >
+            <h1 className={styles.titleModal}>{currJob.title}</h1>
+            <h3 className={styles.titleModal}>{currJob.company}</h3>
+            <p className={styles.info}>
+              {currJob.location} |{" "}
+              {moment(currJob.created).utc().format("MM/DD/YYYY")}
+            </p>
+            <p className={styles.info}>
+              Salary: from ${currJob.sal_min} to ${currJob.sal_max}
+            </p>
+            <h1 className={styles.titleModal}>Short Description</h1>
+            <p className={styles.description}>{currJob.description}</p>
+            <div style={{ textAlign: "center" }}>
+              <a
+                href={currJob.url}
+                className="btn btn-primary btn-lg active"
+                role="button"
+                aria-pressed="true"
+              >
+                More Details
+              </a>
+              <br />
+            </div>
+          </div>
+          </ModalBody>
+        </Modal>
     </div>
   );
 }

diff --git a/src/components/SavedJobs.module.css b/src/components/SavedJobs.module.css
@@ -0,0 +1,38 @@
+#card {
+    margin: 10px;
+    margin-left: 45px;
+    height: 200px;
+    width: 550px;
+    padding: 35px;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 20px;
+    background-color: rgb(255, 255, 255);
+    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
+    backdrop-filter: blur(15px);
+    transition: all 0.3s ease;
+}
+
+
+.title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.titleModal {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 10px;
+    text-align: center;
+}
+
+.info{
+    margin-top: 20px;
+    text-align: center;
+}