Merge pull request #32 from MozamelJawad/profile-reserved

Display reserved rockets in Profile

src/App.css

@@ -30,8 +30,13 @@ nav ul li {
 
 nav ul li a {
   text-decoration: none;
+  color: blue;
 }
 
 nav ul li a:hover {
   text-decoration: underline;
 }
+
+.navbar {
+  font-size: 1.5rem;
+}

src/App.js

@@ -1,11 +1,20 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import Navigation from './components/Navigation';
 import Rockets from './components/Rockets';
 import Missions from './components/Missions';
 import Profile from './components/Profile';
+import { fetchRockets } from './redux/rockets/rocketsSlice';
+import { fetchMissions } from './redux/missions/missionsSlice';
 
 function App() {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    dispatch(fetchRockets());
+    dispatch(fetchMissions());
+  }, [dispatch]);
+
   return (
     <Router>
       <Navigation />

src/components/Missions.jsx

@@ -1,16 +1,12 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchMissions, joinMission } from '../redux/missions/missionsSlice';
+import { joinMission } from '../redux/missions/missionsSlice';
 import '../redux/missions/missions.css';
 
 function Missions() {
   const { missions, isLoading, error } = useSelector((state) => state.missions);
   const dispatch = useDispatch();
 
-  useEffect(() => {
-    dispatch(fetchMissions());
-  }, [dispatch]);
-
   if (isLoading) {
     return (
       <div className="loading">

src/components/Navigation.jsx

@@ -6,7 +6,7 @@ const Navigation = () => (
   <header>
     <div className="logo">
       <img src={logo} alt="Logo" />
-      <span>Space Travelers&apos; Hub</span>
+      <span className="navbar">Space Travelers&apos; Hub</span>
     </div>
     <nav>
       <ul>

src/components/Profile.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import '../redux/profiles/profile.css';
+import { useSelector } from 'react-redux';
+
+function Profile() {
+  const { rockets } = useSelector((state) => state.rockets);
+  const reservedRockets = rockets.filter((rocket) => rocket.reserved);
+
+  return (
+    <div className="profile">
+      <div className="mission">
+        <h2>My Missions</h2>
+
+      </div>
+
+      <div className="rockets">
+        <h2>My Rockets</h2>
+        { reservedRockets.length > 0 ? (
+          <div className="mission-list">
+            {
+                    reservedRockets.map((rocket) => <p key={rocket.id} className="profile-list">{rocket.name}</p>)
+                }
+          </div>
+        ) : <p className="notExist">There is no reserved rocket.</p>}
+      </div>
+    </div>
+  );
+}
+
+export default Profile;

src/components/Rockets.jsx

@@ -1,16 +1,12 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { fetchRockets, rocketsReserved } from '../redux/rockets/rocketsSlice';
+import { rocketsReserved } from '../redux/rockets/rocketsSlice';
 import '../redux/rockets/rockets.css';
 
 function Rockets() {
-  const { rockets, isLoading, error } = useSelector((store) => store.rockets);
+  const { rockets, isLoading, error } = useSelector((state) => state.rockets);
   const dispatch = useDispatch();
 
-  useEffect(() => {
-    dispatch(fetchRockets());
-  }, [dispatch]);
-
   if (isLoading) {
     return <div className="loading">Loading ... </div>;
   }

src/redux/missions/missions.css

@@ -14,7 +14,8 @@
 }
 
 .mission-table td,
-.mission-table th {
+.mission-table th,
+.mission-table {
   border: 1px solid #ddd;
   padding: 8px;
 }
@@ -25,6 +26,11 @@
   text-align: left;
 }
 
+tbody tr:nth-child(odd) {
+  background-color: #efefef;
+  border: 1px solid red;
+}
+
 .status {
   width: 13%;
   text-align: center;

src/redux/missions/missionsSlice.js

@@ -32,7 +32,6 @@ const missionsSlice = createSlice({
         mission_id: mission.mission_id,
         mission_name: mission.mission_name,
         description: mission.description,
-        // reserved: false,
       }));
     });
     builder.addCase(fetchMissions.pending, (state) => {

src/redux/profiles/profile.css

@@ -0,0 +1,32 @@
+.profile {
+  display: flex;
+  gap: 2rem;
+  margin-top: 1rem;
+  padding: 2%;
+}
+
+.rockets,
+.mission {
+  width: 50%;
+  height: 50vh;
+}
+
+.rockets-list,
+.mission-list {
+  margin-top: 2%;
+  border: 1px solid #888;
+}
+
+.profile-list {
+  padding: 2%;
+  border-bottom: 1px solid #888;
+}
+
+.profile-list:last-child {
+  border-bottom: none;
+}
+
+.notExist {
+  margin-top: 1rem;
+  font-size: 1.2rem;
+}