Merge pull request #30 from HENRYKC24/missions-branch

Display Rockets

.eslintrc.json

@@ -20,6 +20,7 @@
         "react"
     ],
     "rules": {
+        "react/prop-types": 0,
         "react/jsx-filename-extension": [
             "warn",
             {

src/pages/MyProfile.js

@@ -1,5 +1,6 @@
 import React from 'react';
+import ReservedRockets from './ReservedRockets';
 
-const MyProfile = () => <div>Welcome to the profile page!</div>;
+const MyProfile = () => <div><ReservedRockets /></div>;
 
 export default MyProfile;

src/pages/ReservedRockets.js

@@ -0,0 +1,17 @@
+import { useSelector } from 'react-redux';
+
+const ReservedRockets = () => {
+  const rockets = useSelector((state) => state.rockets.filter((rocket) => rocket.reserved));
+
+  return (
+    <div>
+      <ul className="profile-rockets">
+        {rockets.length > 0 ? rockets.map((rocket) => (
+          <li key={rocket.id} rocket={rocket}><b>{rocket.rocketName}</b></li>
+        )) : 'No Rockets Reserved'}
+      </ul>
+    </div>
+  );
+};
+
+export default ReservedRockets;

src/pages/Rockets.js

@@ -1,5 +1,18 @@
-import React from 'react';
+import { useSelector } from 'react-redux';
+import SingleRocket from './SingleRocket';
 
-const Rockets = () => <div>Welcome to the rockets page!</div>;
+const Rockets = () => {
+  const rockets = useSelector((state) => state.rockets);
+
+  return (
+    <div>
+      <ul>
+        {rockets.length > 0 ? rockets.map((rocket) => (
+          <SingleRocket key={rocket.id} rocket={rocket} />
+        )) : 'No Rockets'}
+      </ul>
+    </div>
+  );
+};
 
 export default Rockets;

src/pages/SingleRocket.js

@@ -0,0 +1,35 @@
+import { useDispatch } from 'react-redux';
+import { addRevervation } from '../redux/rockets/rockets';
+
+const SingleRocket = ({ rocket }) => {
+  const dispatch = useDispatch();
+  const {
+    rocketImage, rocketName, reserved, description,
+  } = rocket;
+
+  return (
+    <li className="single-rocket">
+      <div className="rocket-image-section">
+        <img src={rocketImage} alt={rocket.rocketName} className="rocket-image" />
+      </div>
+      <div className="rocket-desc">
+        <span><b>{rocketName}</b></span>
+        <span>
+          {reserved && <small className="rocket-reserved">Reserved</small>}
+          {description}
+        </span>
+        <span>
+          <button
+            onClick={() => dispatch(addRevervation(rocket.id))}
+            type="button"
+            className={reserved ? 'rocket-btn-reserved' : 'rocket-btn'}
+          >
+            {reserved ? 'Cancel Reservation' : 'Reserve Rocket'}
+          </button>
+        </span>
+      </div>
+    </li>
+  );
+};
+
+export default SingleRocket;

src/redux/rockets/rockets.js

@@ -2,7 +2,6 @@ import initialState from '../initialState';
 
 // Constants
 const ADD_RESERVATION = 'space_travellers/rockets/ADD_RESERVATION';
-const REMOVE_RESERVATION = 'space_travellers/rockets/REMOVE_RESERVATION';
 const FETCH_DATA = 'space_travellers/rockets/FETCH_DATA';
 
 // Action Creators
@@ -16,11 +15,6 @@ export const addRevervation = (id) => ({
   payload: id,
 });
 
-export const removeReservation = () => ({
-  type: REMOVE_RESERVATION,
-  payload: false,
-});
-
 // Reducers
 const rocketReducer = (state = initialState, action) => {
   const { type, payload } = action;
@@ -30,14 +24,9 @@ const rocketReducer = (state = initialState, action) => {
     case ADD_RESERVATION:
       return state.map((rocket) => {
         if (rocket.id !== payload) return rocket;
-        return { ...rocket, reserved: true };
+        return { ...rocket, reserved: !rocket.reserved };
       });
 
-    case REMOVE_RESERVATION:
-      return state.map((rocket) => {
-        if (rocket.id !== payload) return rocket;
-        return { ...rocket, reserved: false };
-      });
     default:
       return state;
   }

src/styles.css

@@ -19,7 +19,7 @@ body {
 }
 
 .active {
-  color: teal;
+  color: #2eaabe;
 }
 
 .nav li a {
@@ -34,6 +34,123 @@ body {
   justify-content: space-between;
 }
 
+/* Start of Missions Module */
+.missions-table {
+  border-collapse: collapse;
+  margin: 2%;
+}
+
+.missions-table,
+td,
+th {
+  border: 1px solid #d6d6d6;
+  padding: 5px;
+}
+
+.btn {
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  width: 100%;
+}
+
+.unjoined-mission {
+  background-color: #2eaabe;
+}
+
+.joined-mission {
+  background-color: red;
+}
+
+tbody > tr:nth-child(odd) { background: #f2f2f2; }
+tbody > tr:nth-child(even) { background: #fff; }
+
+/* End of Missions Module */
+
+/* Start of rockets module */
+.single-rocket {
+  display: flex;
+}
+
+.rocket-image-section {
+  margin: 0.5%;
+}
+
+.rocket-image {
+  width: 300px;
+  height: 200px;
+}
+
+.rocket-desc {
+  margin: 0.5%;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.rocket-btn {
+  background-color: #2eaabe;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 1%;
+  cursor: pointer;
+}
+
+.rocket-reserved {
+  background-color: #2eaabe;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  padding: 2px;
+  margin-right: 8px;
+}
+
+.rocket-btn-reserved {
+  background-color: rgb(228, 228, 228);
+  color: #000;
+  border: 1px solid;
+  border-radius: 5px;
+  padding: 1%;
+  cursor: pointer;
+}
+
+@media only screen and (max-width: 768px) {
+  .single-rocket {
+    margin: 0.5%;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-bottom: 20px;
+  }
+
+  .rocket-image {
+    width: 100%;
+    height: 300px;
+  }
+}
+
+/* End of rockets module */
+
+/* Start of profile rockets */
+.profile-rockets {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  list-style: none;
+  padding: 0;
+  margin: 2%;
+  list-style-position: inside;
+}
+
+.profile-rockets li {
+  border-bottom: 1px solid #ccc;
+  padding: 1%;
+}
+
+.profile-rockets li:last-child { border-bottom: none; }
+
+/* End of profile rockets */
 .mission-table {
   border: 0.5px solid grey;
   border-collapse: collapse;