Merge pull request #36 from rubydevi/f/switch-buttons

Switch buttons and Display reserved rockets in My profile - Filters

Author: rubydevi

src/components/Profile.js

@@ -1,36 +1,59 @@
+import React from 'react';
 import Container from 'react-bootstrap/Container';
-import Row from 'react-bootstrap/Row';
 import JoinedMissions from './JoinedMissions';
 import ReservedRockets from './ReservedRockets';
 import ReservedDragons from './ReservedDragons';
+import '../styles/Profile.css';
 
 const ProfileComponent = () => (
   <Container>
-    <Row>
-      <table>
+    <div className="profile-table-container">
+      <table className="profile-table">
         <thead>
           <tr>
             <th>My Missions</th>
-            <th>My Rockets</th>
-            <th>My Dragons</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>
               <JoinedMissions />
             </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table className="profile-table">
+        <thead>
+          <tr>
+            <th>My Rockets</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
             <td>
               <ReservedRockets />
             </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table className="profile-table">
+        <thead>
+          <tr>
+            <th>My Dragons</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
             <td>
               <ReservedDragons />
             </td>
           </tr>
         </tbody>
       </table>
-    </Row>
-
+    </div>
   </Container>
 );
+
 export default ProfileComponent;

src/components/ReservedRockets.js

@@ -1,7 +1,21 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 
-const ReservedRockets = () => (
-  <div>ReservedRockets</div>
-);
+const ReservedRockets = () => {
+  const rockets = useSelector((state) => state.rockets.rockets);
+  const reservedRockets = rockets.filter((rocket) => rocket.reserved === true);
+
+  if (reservedRockets.length === 0) {
+    return <div>You have no reserved rockets.</div>;
+  }
+
+  return (
+    <ul className="reserved-rockets">
+      {reservedRockets.map((rocket) => (
+        <li className="reserved-rocket" key={rocket.id}>{rocket.name}</li>
+      ))}
+    </ul>
+  );
+};
 
 export default ReservedRockets;

src/components/Rocket.js

@@ -29,12 +29,15 @@ const Rocket = ({ rocket }) => {
             {rocket.description}
           </p>
         </div>
-        <button className="reserve-button" type="submit" onClick={handleReserveRocket}>
-          Reserve Rocket
-        </button>
-        <button className="cancel-button" type="submit" onClick={handleCancelRocket}>
-          Cancel Reservation
-        </button>
+        {!rocket.reserved ? (
+          <button className="reserve-button" type="submit" onClick={handleReserveRocket}>
+            Reserve Rocket
+          </button>
+        ) : (
+          <button className="cancel-button" type="submit" onClick={handleCancelRocket}>
+            Cancel Reservation
+          </button>
+        )}
       </div>
     </li>
   );

src/components/Rockets.js

@@ -11,8 +11,10 @@ const RocketsComponent = () => {
   const error = useSelector((state) => state.rockets.error);
 
   useEffect(() => {
-    dispatch(fetchRockets());
-  }, [dispatch]);
+    if (rockets.length === 0) {
+      dispatch(fetchRockets());
+    }
+  }, [dispatch, rockets.length]);
 
   if (loading) {
     return (

src/styles/Profile.css

@@ -0,0 +1,27 @@
+.profile-table-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.profile-table {
+  border-collapse: collapse;
+  width: 30%; /* Adjust the width as needed */
+}
+
+.profile-table th {
+  padding: 10px;
+}
+
+.profile-row {
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 10px;
+  margin-bottom: 10px;
+}
+
+.profile-table tbody tr:nth-child(odd) {
+  background-color: #f8f8f8;
+}
+
+.profile-table tbody tr:hover {
+  background-color: #f0f0f0;
+}

src/styles/ReservedRockets.css

@@ -0,0 +1,13 @@
+.reserved-rockets {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.reserved-rocket {
+  padding: 3% 5%;
+  border: 1px solid;
+  width: 100%;
+}