Fix linter errors

src/App.css

@@ -2,15 +2,15 @@
 @import url('./styles/css/NavBar.css');
 
 .App {
-  text-align: center;}
+  text-align: center;
+}
 
 .navbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0.5rem 1rem;
   border-bottom: 1px solid gray;
-
 }
 
 .navbar .logoInfo {

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 // import Missions from './components/Missions';
-import MissionsContainer from "./Redux/Missions/MissionsContainer";
+import MissionsContainer from './Redux/Missions/MissionsContainer';
 import './App.css';
 import NavBar from './components/NavBar';
 import Rocket from './components/rocket';

src/Redux/Missions/MissionSlice.js

@@ -1,6 +1,5 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
 import axios from 'axios';
-import MissionsData from './missionsData';
 
 const apiUrl = 'https://api.spacexdata.com/v3/missions';
 
@@ -13,12 +12,8 @@ export const getMissions = createAsyncThunk('missions/getMissions', async (thunk
   try {
     const resp = await axios.get(apiUrl);
 
-console.log(resp.data);
-
     const transformedmissions = Object.keys(resp.data).map((key) => {
       const MissionData = resp.data[key];
-      console.log(resp.data[key]);
-      console.log(MissionData.missions);
       return {
         mission_id: key,
         mission_name: MissionData.mission_name,
@@ -53,5 +48,3 @@ const MissionSlice = createSlice({
 });
 
 export default MissionSlice.reducer;
-
-

src/Redux/Missions/MissionsContainer.js

@@ -7,13 +7,13 @@ const MissionsContainer = () => {
 
   const Missions = useSelector((state) => state.missions.missions);
 
-  console.log(Missions);
+  //   console.log(Missions);
 
   const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(getMissions());
-  }, []);
+  }, [dispatch]);
 
   if (isLoading) {
     return (

src/index.js

@@ -4,7 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import './styles/css/index.css';
 import App from './App';
-import  store  from './Redux/store';
+import store from './Redux/store';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -14,5 +14,5 @@ root.render(
         <App />
       </Provider>
     </BrowserRouter>
-  </React.StrictMode>
+  </React.StrictMode>,
 );

src/styles/css/App.css

@@ -1,12 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:wght@200;300;400;500;600;700;800&family=Roboto+Slab:wght@100&family=Roboto:wght@700&display=swap");
+
 * {
   margin: 0;
   padding: 0;
   text-decoration: none;
   outline: none;
 }
 
-.navBar, .navbuttons, .navImg {
+.navBar,
+.navbuttons,
+.navImg {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -27,6 +30,7 @@
   align-items: flex-start;
   flex: 0.5;
 }
+
 .navImg img {
   align-self: flex-start;
   height: 26px;
@@ -43,23 +47,27 @@
   color: #121212;
   font-size: 0.7em;
 }
+
 .link:active {
   opacity: 0.5;
 }
+
 .link:active:focus {
   opacity: 0.5;
 }
 
 .Missions {
   margin: 6rem auto;
 }
+
 .Missions h1 {
   font-size: 1em;
 }
 
 .App {
   text-align: center;
 }
+
 .App-header {
   background-color: #282c34;
   display: flex;
@@ -68,5 +76,3 @@
   justify-content: center;
   color: #121212;
 }
-
-/*# sourceMappingURL=App.css.map */

src/styles/css/NavBar.css

@@ -1,12 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:wght@200;300;400;500;600;700;800&family=Roboto+Slab:wght@100&family=Roboto:wght@700&display=swap");
+
 * {
   margin: 0;
   padding: 0;
   text-decoration: none;
   outline: none;
 }
 
-.navBar, .navbuttons, .navImg {
+.navBar,
+.navbuttons,
+.navImg {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -27,6 +30,7 @@
   align-items: flex-start;
   flex: 0.5;
 }
+
 .navImg img {
   align-self: flex-start;
   height: 26px;
@@ -43,11 +47,11 @@
   color: #121212;
   font-size: 0.7em;
 }
+
 .link:active {
   opacity: 0.5;
 }
+
 .link:active:focus {
   opacity: 0.5;
 }
-
-/*# sourceMappingURL=NavBar.css.map */

src/styles/css/index.css

@@ -1,12 +1,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:wght@200;300;400;500;600;700;800&family=Roboto+Slab:wght@100&family=Roboto:wght@700&display=swap");
+
 * {
   margin: 0;
   padding: 0;
   text-decoration: none;
   outline: none;
 }
 
-.navBar, .navbuttons, .navImg {
+.navBar,
+.navbuttons,
+.navImg {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -27,6 +30,7 @@
   align-items: flex-start;
   flex: 0.5;
 }
+
 .navImg img {
   align-self: flex-start;
   height: 26px;
@@ -43,23 +47,27 @@
   color: #121212;
   font-size: 0.7em;
 }
+
 .link:active {
   opacity: 0.5;
 }
+
 .link:active:focus {
   opacity: 0.5;
 }
 
 .Missions {
   margin: 6rem auto;
 }
+
 .Missions h1 {
   font-size: 1em;
 }
 
 .App {
   text-align: center;
 }
+
 .App-header {
   background-color: #282c34;
   display: flex;
@@ -78,25 +86,28 @@ body {
   body {
     font-size: 18px;
   }
+
   .accountPic img {
     width: 40px;
   }
+
   .navBar {
     padding: 0.7rem 1.5rem;
   }
 }
+
 @media (min-width: 999px) {
   body {
     font-size: 25px;
   }
+
   .accountPic img {
     width: 50px;
   }
 }
+
 @media (min-width: 1200px) {
   body {
     font-size: 30px;
   }
 }
-
-/*# sourceMappingURL=index.css.map */