Fetch Rockets data from API

README.md

@@ -165,7 +165,7 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 - [x] **Create Missions view**
 - [x] **Create Rockets view**
 - [x] **Use Redux to manage the states of rockets, missions**
-- [ ] **Fetch data using the spaceX API**
+- [x] **Fetch data using the spaceX API**
 - [ ] **Add actions and other functionality to Join/Leave Missions**
 - [ ] **Add actions and other functionality to Reserve Rocket and Cancel Reservation**
 - [ ] **Create the list of My Missions and My Rockets in the My Profile view**

src/assets/styles/Header.css

@@ -35,14 +35,21 @@ header {
   color: #e59011;
 }
 
+#navigation {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
 .nav-item a {
-  color: #20cfe6;
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: #007bff;
   background-color: transparent;
 }
 
 .nav-item a.active,
 .nav-item a:hover {
-  color: #fff;
-  color: #007bff;
   text-decoration: underline;
 }

src/redux/rockets/rocketsSlice.js

@@ -1,4 +1,18 @@
-import { createSlice } from '@reduxjs/toolkit';
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+const apiEndpoint = 'https://api.spacexdata.com/v4/rockets';
+
+const actionName = 'rockets/getAllRockets';
+
+export const getAllRockets = createAsyncThunk(actionName, async (thunkAPI) => {
+  try {
+    const response = await axios.get(apiEndpoint);
+    return response.data;
+  } catch (error) {
+    return thunkAPI.rejectWithValue(error.message);
+  }
+});
 
 const initialState = {
   rockets: [],
@@ -10,6 +24,29 @@ const rocketsSlice = createSlice({
   name: 'rockets',
   initialState,
   reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(getAllRockets.pending, (state) => {
+        state.isLoading = true;
+      })
+      .addCase(getAllRockets.fulfilled, (state, action) => {
+        state.isLoading = false;
+        if (state.rockets.length === 0) {
+          state.rockets = action.payload.map((rocket) => (
+            {
+              id: rocket.id,
+              name: rocket.name,
+              type: rocket.type,
+              image: rocket.flickr_images[0],
+            }
+          ));
+        }
+      })
+      .addCase(getAllRockets.rejected, (state, action) => {
+        state.isLoading = false;
+        state.error = action.payload;
+      });
+  },
 });
 
 export default rocketsSlice.reducer;

src/views/Rockets.jsx

@@ -1,9 +1,20 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { getAllRockets } from '../redux/rockets/rocketsSlice';
 import Layout from './Layout';
 
-const Rockets = () => (
-  <Layout>
-    <section id="rockets" />
-  </Layout>
-);
+const Rockets = () => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getAllRockets());
+  }, []);
+
+  return (
+    <Layout>
+      <section id="rockets" />
+    </Layout>
+  );
+};
 
 export default Rockets;