Merge pull request #60 from FindMyProfessors/website-4

Final website update
FindMyProfessors · Jul 23, 2024 · 1d8b2fc · 1d8b2fc
2 parents ee54561 + 676c906
commit 1d8b2fc
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/web/public/index.html b/web/public/index.html
@@ -33,7 +33,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>MDBReact5 Template App</title>
+    <title>Find My Professors</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/web/src/components/Dashboard.jsx b/web/src/components/Dashboard.jsx
@@ -18,6 +18,10 @@ const Dashboard = () => {
   const [professorsData, setProfessorsData] = useState([]);
   const [headersVisible, setHeadersVisible] = useState(true);
   const [showSuggestions, setShowSuggestions] = useState(true);
+  const [courseId, setCourseId] = useState('');
+  const [cartVisible, setCartVisible] = useState(false);
+  const [cartItems, setCartItems] = useState([]);
+  const [addClassMessage, setAddClassMessage] = useState('');
 
   const preventClose = (e) => {
     e.stopPropagation();
@@ -98,6 +102,7 @@ const Dashboard = () => {
 
   const fetchProfessors = async (courseId, year, semester) => {
     const token = localStorage.getItem('token');
+    localStorage.setItem('course_id', courseId);
 
     if (token) {
       try {
@@ -106,6 +111,7 @@ const Dashboard = () => {
             'Authorization': `Bearer ${token}`,
             'Content-Type': 'application/json'
           }
+
         });
 
         if (response.ok) {
@@ -128,6 +134,7 @@ const Dashboard = () => {
     }
   };
 
+
   const fetchCourses = async (schoolId, year, semester, query) => {
     const token = localStorage.getItem('token');
 
@@ -248,14 +255,78 @@ const Dashboard = () => {
     }
   };
 
+  const handleCartClick = async () => {
+    setCartVisible(!cartVisible);
+    if (!cartVisible) {
+      const userId = localStorage.getItem('user_id');
+      if (userId) {
+        try {
+          const response = await fetch(`${API_URL}/users/${userId}/cart`, {
+            headers: {
+              'Authorization': `Bearer ${localStorage.getItem('token')}`,
+              'Content-Type': 'application/json'
+            }
+          });
+
+          if (response.ok) {
+            const data = await response.json();
+            setCartItems(data.entries.map(entry => ({
+              firstName: entry.professor.first_name,
+              lastName: entry.professor.last_name,
+              code: entry.course.code,
+              courseName: entry.course.name,
+              professorId: entry.professor.id,
+              courseId: entry.course.id
+            })));
+          } else {
+            console.error('Failed to fetch cart data:', response.statusText);
+          }
+        } catch (error) {
+          console.error('Error fetching cart data:', error);
+        }
+      } else {
+        console.error('No user ID found');
+      }
+    }
+  };
+
+  const handleDeleteClick = async (professorId, courseId) => {
+    if (window.confirm('Are you sure you want to delete this entry?')) {
+      const userId = localStorage.getItem('user_id');
+      const token = localStorage.getItem('token');
+
+      if (userId && token) {
+        try {
+          const response = await fetch(`${API_URL}/users/${userId}/cart`, {
+            method: 'DELETE',
+            headers: {
+              'Authorization': `Bearer ${token}`,
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ professor_id: professorId, course_id: courseId })
+          });
+
+          if (response.ok) {
+            setCartItems((prevItems) => prevItems.filter(item => !(item.professorId === professorId && item.courseId === courseId)));
+          } else {
+            console.error('Failed to delete item from cart:', response.statusText);
+          }
+        } catch (error) {
+          console.error('Error deleting item from cart:', error);
+        }
+      } else {
+        console.error('No user ID or token found');
+      }
+    }
+  };
+
   return (
     <>
       <Header />
 
       <style>{'body { background-color: #FFFFFF; }'}</style>
 
       <MDBContainer fluid className="d-flex justify-content-center align-items-center">
-
         <div className="text-center">
 
           {headersVisible && (
@@ -289,9 +360,8 @@ const Dashboard = () => {
                       2024 {year === 2024 && <MDBIcon icon="check" />}
                     </MDBDropdownItem>
                     <MDBDropdownItem link onClick={() => handleDropdownClick('year', 2025)}>
-                      2025 {year === 2025 && <MDBIcon icon="check" />}
-                    </MDBDropdownItem>
-                  </MDBDropdownMenu>
+                      2025 {year === 2025 && <MDBIcon icon="check" />}</MDBDropdownItem>
+                    </MDBDropdownMenu>
                 </MDBDropdown>
 
                 <MDBDropdown onClick={preventClose}>
@@ -317,6 +387,9 @@ const Dashboard = () => {
                 <MDBBtn color="primary" onClick={handleSearchClick}>
                   <MDBIcon icon="search" />
                 </MDBBtn>
+                <MDBBtn color="primary" onClick={handleCartClick}>
+                  <MDBIcon icon="shopping-cart" /> Cart
+                </MDBBtn>
               </MDBInputGroup>
 
               {showSuggestions && searchResults.length > 0 && (
@@ -331,19 +404,38 @@ const Dashboard = () => {
             </div>
           </div>
 
-          {!headersVisible && professorsData.length > 0 && (
+          {addClassMessage && (
+            <div className="alert alert-success" role="alert">
+              {addClassMessage}
+            </div>
+          )}
+
+          {cartVisible && (
             <div className="my-4">
-              <ProfessorTable professors={professorsData} fetchProfessorRatings={fetchProfessorRatings} fetchProfessorAnalysis={fetchProfessorAnalysis} />
+              <MDBBtn color="secondary" onClick={() => setCartVisible(false)}>
+                Go Back to Professors
+              </MDBBtn>
+              <CartTable cartItems={cartItems} handleDeleteClick={handleDeleteClick} />
             </div>
           )}
 
+          {!headersVisible && professorsData.length > 0 && !cartVisible && (
+            <div className="my-4">
+              <ProfessorTable
+                professors={professorsData}
+                fetchProfessorRatings={fetchProfessorRatings}
+                fetchProfessorAnalysis={fetchProfessorAnalysis}
+                setAddClassMessage={setAddClassMessage}
+              />
+            </div>
+          )}
         </div>
       </MDBContainer>
     </>
   );
 };
 
-const ProfessorTable = ({ professors, fetchProfessorRatings, fetchProfessorAnalysis }) => {
+const ProfessorTable = ({ professors, fetchProfessorRatings, fetchProfessorAnalysis, setAddClassMessage }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [selectedProfessor, setSelectedProfessor] = useState(null);
@@ -381,24 +473,27 @@ const ProfessorTable = ({ professors, fetchProfessorRatings, fetchProfessorAnaly
     }));
   };
 
-  const handleAddClick = async (event, professorId, courseId) => {
+  const handleAddClick = async (event, professor) => {
     event.stopPropagation(); // Prevent the event from propagating to the row click
     const token = localStorage.getItem('token');
     const userId = localStorage.getItem('user_id');
+    const courseId = localStorage.getItem('course_id');
 
     if (token && userId) {
       try {
-        console.log('Sending request with data:', { professorId, courseId }); // Debugging log
+        console.log('Sending request with data:', { professorId: professor.id, courseId }); // Debugging log
         const response = await fetch(`${API_URL}/users/${userId}/cart`, {
           method: 'POST',
           headers: {
             'Authorization': `Bearer ${token}`,
             'Content-Type': 'application/json'
           },
-          body: JSON.stringify({ professor_id: professorId, course_id: courseId})
+          body: JSON.stringify({ professor_id: professor.id, course_id: courseId })
         });
 
         if (response.ok) {
+          setAddClassMessage(`Class added: ${professor.first_name} ${professor.last_name}`);
+          setTimeout(() => setAddClassMessage(''), 3000);
           console.log('Professor added to cart successfully');
         } else {
           console.error('Failed to add professor to cart:', response.statusText);
@@ -447,7 +542,7 @@ const ProfessorTable = ({ professors, fetchProfessorRatings, fetchProfessorAnaly
                 <td>{ratingsData[professor.id] ? roundToTenth(ratingsData[professor.id].totalQualityAverage) : '-'}</td>
                 <td>{ratingsData[professor.id]?.ratingAmount || '-'}</td>
                 <td>
-                  <MDBBtn style={{ backgroundColor: 'rgb(0, 102, 0)', color: 'white' }} size="sm" onClick={(event) => handleAddClick(event, professor.id)}>Add</MDBBtn>
+                  <MDBBtn style={{ backgroundColor: 'rgb(0, 102, 0)', color: 'white' }} size="sm" onClick={(event) => handleAddClick(event, professor)}>Add</MDBBtn>
                 </td>
               </tr>
               {selectedProfessor === professor && (
@@ -484,13 +579,44 @@ const ProfessorTable = ({ professors, fetchProfessorRatings, fetchProfessorAnaly
   );
 };
 
+const CartTable = ({ cartItems, handleDeleteClick }) => {
+  return (
+    <MDBTable responsive>
+      <MDBTableHead dark>
+        <tr>
+          <th>First Name</th>
+          <th>Last Name</th>
+          <th>Code</th>
+          <th>Course Name</th>
+          <th>Delete</th>
+        </tr>
+      </MDBTableHead>
+      <MDBTableBody>
+        {cartItems.map((item, index) => (
+          <tr key={index}>
+            <td>{item.firstName}</td>
+            <td>{item.lastName}</td>
+            <td>{item.code}</td>
+            <td>{item.courseName}</td>
+            <td>
+              <MDBBtn color="danger" size="sm" onClick={() => handleDeleteClick(item.professorId, item.courseId)}>
+                Delete
+              </MDBBtn>
+            </td>
+          </tr>
+        ))}
+      </MDBTableBody>
+    </MDBTable>
+  );
+};
+
 const ProfessorDetails = ({ professor, analysisData }) => {
   const lineData = {
-    labels: analysisData ? analysisData.averageRatingValues.map(item => `${item.month} ${item.year}`) : [],
+    labels: analysisData ? analysisData.averageRatingValues.map(item => `${item.month} ${item.year}`).reverse() : [],
     datasets: [
       {
         label: 'Rating Over Time',
-        data: analysisData ? analysisData.averageRatingValues.map(item => item.value) : [],
+        data: analysisData ? analysisData.averageRatingValues.map(item => item.value).reverse() : [],
         fill: false,
         backgroundColor: 'rgb(75, 192, 192)',
         borderColor: 'rgba(75, 192, 192, 0.2)',

diff --git a/web/src/components/DashboardHeader.jsx b/web/src/components/DashboardHeader.jsx
@@ -139,7 +139,9 @@ const DashboardHeader = ({ onSearch }) => {
             <MDBNavbarNav>
 
               <MDBNavbarItem>
-                <MDBNavbarLink href='/'>Cart</MDBNavbarLink>
+                <MDBNavbarLink
+                href='/'
+                style={{ color: '#FFFFFF' }}>Cart</MDBNavbarLink>
               </MDBNavbarItem>
 
               <MDBNavbarItem>

diff --git a/web/src/components/EmailConfirmation.jsx b/web/src/components/EmailConfirmation.jsx
@@ -59,10 +59,6 @@ const EmailConfirmation = () => {
                 <h5 className="fw-normal my-4 pb-0" style={{ letterSpacing: '1px', color: 'white' }}>
                   Your email has been confirmed. Redirecting to login ...
                 </h5>
-                <div className='d-flex flex-row justify-content-start'>
-                  <a href="#!" className="small text-muted me-1">Terms of use.</a>
-                  <a href="#!" className="small text-muted">Privacy policy</a>
-                </div>
               </MDBCardBody>
             </MDBCol>
           </MDBRow>

diff --git a/web/src/components/ForgotPassword.jsx b/web/src/components/ForgotPassword.jsx
@@ -97,10 +97,6 @@ const ForgotPassword = () => {
                     Send Reset Link
                   </MDBBtn>
                 </form>
-                <div className='d-flex flex-row justify-content-start'>
-                  <a href="#!" className="small text-muted me-1">Terms of use.</a>
-                  <a href="#!" className="small text-muted">Privacy policy</a>
-                </div>
               </MDBCardBody>
             </MDBCol>
           </MDBRow>

diff --git a/web/src/components/Header.jsx b/web/src/components/Header.jsx
@@ -41,7 +41,11 @@ function Header()
 
     const navigate = useNavigate();
 
+    const userId = localStorage.getItem('user_id');
+
     const handleLogout = () => {
+        localStorage.removeItem('user_id');
+        console.log("userID is now " + userId);
         toggleOpen();
         navigate('/Login');
     };
@@ -108,13 +112,15 @@ function Header()
 
                                 <MDBNavbarItem>
                                     <MDBNavbarLink
-                                    href='./Cart'>
+                                    href='./Cart'
+                                    style={{ color: '#FFFFFF' }}>
                                         Cart
                                     </MDBNavbarLink>
                                 </MDBNavbarItem>
 
                                 <MDBDropdown>
                                     <MDBDropdownToggle
+                                    aria-label="Search Button"
                                     style={{ backgroundColor: '#3d3d3d', boxShadow: '3px 3px 12px rgba(0, 0, 0, 0)'}}>
 
                                         <MDBIcon

diff --git a/web/src/components/Home.jsx b/web/src/components/Home.jsx
@@ -56,7 +56,7 @@ const containerStyle = {
     <>
         <Header />
 
-        <style>{'body { background-color: #FFFFFF; }'}</style>
+        <style>{'body { background-color: #121212; }'}</style>
 
         <MDBContainer
         style={containerStyle}>
@@ -118,7 +118,7 @@ const containerStyle = {
 
                       <MDBBtn
                       outline color ='primary'
-                      style={{ backgroundColor: '#282828', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)' }}
+                      style={{ backgroundColor: '#282828', boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)', color:'white' }}
                       size="lg"
                       className="me-5"
                       href='./About'About>

diff --git a/web/src/components/Login.jsx b/web/src/components/Login.jsx
@@ -77,7 +77,7 @@ const Login = () => {
     <>
       <Header />
 
-      <style>{'body { background-color: #FFFFFF; }'}</style>
+      <style>{'body { background-color: #121212; }'}</style>
 
       <MDBContainer
       style={containerStyle}>
@@ -169,24 +169,12 @@ const Login = () => {
 
                 <p
                 className="mb-5 pb-lg-2"
-                style={{ color: 'primary' }}>
-                  Don't have an account? <Link to="/Register">Register</Link>
+                style={{ color: 'white' }}>
+                  Don't have an account? <Link to="/Register" style={{ color: 'primary' }}>Register</Link>
                 </p>
 
-                <div className='d-flex flex-row justify-content-start'>
-                  <a
-                  href="#!"
-                  className="small text-muted me-1">
-                    Terms of use.
-                  </a>
-
-                  <a
-                  href="#!"
-                  className="small text-muted">
-                    Privacy policy
-                  </a>
 
-                </div>
+
 
               </MDBCardBody>
             </MDBCol>