setuped route and made navbar divided launches screen into 3 parts

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/.vscode
 
 # misc
 .DS_Store

debug.log

@@ -0,0 +1 @@
+[1025/142440.801:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

package.json

@@ -6,8 +6,15 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "leaflet": "^1.7.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-icons": "^3.11.0",
+
+    "react-leaflet": "^2.8.0",
+    "react-particles-js": "^3.4.0",
+    "react-query": "^2.23.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3"
   },
   "scripts": {

public/index.html

@@ -12,6 +12,12 @@
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#5dbcd2">
   <meta name="description" content="Your personal SpaceX console" />
+  <link
+  rel="stylesheet"
+  href="https://unpkg.com/[email protected]/dist/leaflet.css"
+  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+  crossorigin=""
+/>
   <title>My SpaceX Console</title>
 </head>
 

src/App.js

@@ -1,20 +1,44 @@
 import React from 'react';
-import logo from './assets/logo.svg';
-import './App.css';
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import './css/App.css';
+import Home from './screens/home'
+import Navbar from './components/navbar'
+import Launches from './screens/launches';
+import LaunchDetails from './screens/launch-detail';
+import LaunchpadMap from './screens/launchpad-map';
+import Particles from 'react-particles-js';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <div className="App-logo-container">
-          <img src={logo} className="App-logo" alt="logo" />
-        </div>
-        <h3>WELCOME TO SPACEX CONSOLE</h3>
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-      </header>
-    </div>
+    <React.StrictMode>
+    <Router>
+      <Navbar />
+      <Switch>
+        <Route  exact path="/" component={Home} />
+        <Route exact path="/launches" component={Launches} />
+
+        <Route exact path="/launchpad-map" component={LaunchpadMap} />
+        <Route path='/launches/:id' component={LaunchDetails}/>
+
+      </Switch>
+
+    </Router>
+    <div className="par-background"><Particles 
+        height={window.outerHeight}
+        params={{
+          particles: {
+            number: {
+              value: 50
+            },
+            size: {
+              value: 3
+            }
+          },
+      }}
+      /> 
+       </div>
+
+  </React.StrictMode>
   );
 }
 

src/api/LatestLaunches.js

@@ -0,0 +1,5 @@
+export const getLatestLaunches= async ()=>{
+    const latestLaunches=  await (await fetch('https://api.spacexdata.com/v3/launches/latest')).json();
+    console.log(latestLaunches);
+    return latestLaunches;
+}

src/api/LatestNextLaunch.js

@@ -0,0 +1,5 @@
+export const getlatestNextLaunches= async ()=>{
+    const latestNextLaunches=  await (await fetch('https://api.spacexdata.com/v3/launches/next')).json();
+    console.log(latestNextLaunches);
+    return latestNextLaunches;
+}

src/api/LaunchDetails.js

@@ -0,0 +1,6 @@
+
+export const getlatestNextLaunches= async flight_number=>{
+    const latestNextLaunches=  await (await fetch(`https://api.spacexdata.com/v3/launches/${flight_number}`)).json();
+    console.log(latestNextLaunches);
+    return latestNextLaunches;
+}

src/api/LaunchPadMap.js

@@ -0,0 +1,5 @@
+export const getLaunchPadMap= async ()=>{
+    const latestLaunches=  await (await fetch('https://api.spacexdata.com/v4/launchpads')).json();
+    console.log(latestLaunches);
+    return latestLaunches;
+}

src/api/PastLaunchesAPI.js

@@ -0,0 +1,6 @@
+export const getPastLaunches= async page=>{
+    const pastLaunches=  await (await fetch(`https://api.spacexdata.com/v4/launches/past`)).json();
+    console.log(pastLaunches);
+    return pastLaunches;
+}
+//?limit=30&offset=${10*(page-1)}`

src/api/UpcomingLaunches.js

@@ -0,0 +1,5 @@
+export const getUpcomingLaunches= async ()=>{
+    const upcomingLaunches=  await (await fetch('https://api.spacexdata.com/v4/launches/upcoming')).json();
+
+    return upcomingLaunches;
+}

src/components/latest-launches.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import { getLatestLaunches } from '../api/LatestLaunches'
+import { useQuery } from 'react-query';
+import '../css/latestLaunches.css'
+export default function LatestLaunches() {
+
+    const { isLoading, isError, data, }=useQuery('LatestLaunches',getLatestLaunches);
+    console.log(data);
+    return (
+        <div className="launches latest-launches card">
+            {isLoading && 
+                    <div className="loading-box">
+                        <div className="loading-conponents loading1"></div>
+                        <div className="loading-conponents loading2"></div>
+                        <div className="loading-conponents loading3"></div>
+
+
+                    </div>
+                 }
+                 {!isLoading&& !isError && <>
+                <h1>latest launches</h1>
+                <p className='latest-launches-title'>{data.mission_name} <span className="new">NEW</span> </p>
+                <img className='latest-launches-image' src={data.links.mission_patch_small} alt=""/>
+                 <p className="details">{data.details}</p>
+                </>
+                 }
+        </div>
+    )
+}

src/components/navbar.js

@@ -0,0 +1,36 @@
+import React, {useState} from 'react'
+import { NavLink,Link } from 'react-router-dom';
+import Logo from '../assets/spacexconsole_logo.svg';
+import logo from '../assets/logo.svg';
+import {FaStream,FaTimesCircle} from 'react-icons/fa'
+import '../css/navbar.css'
+
+function Navbar() {
+
+    const [clicked, setClicked] = useState(false);
+
+    return (
+        <>
+        <nav className="navbar ">
+            <Link to="/" className="logo"><img src={logo} alt=""/><img src={Logo} alt=""/>   </Link>
+            <ul className="nav-links hide-on-phone" id="nav-links">
+                <li><NavLink exact to="/" className='nav-links'>Home</NavLink></li>
+                <li><NavLink to="/launches" className='nav-links'>Launches</NavLink></li>     
+                <li><NavLink to="/launchpad-map" className='nav-links'>Launchpad map</NavLink></li>
+            </ul>
+            <li className="mob-menue show-on-phone hide" onClick={()=>setClicked(!clicked)}> {clicked?<FaTimesCircle />:<FaStream   />}</li>
+        </nav>
+        <nav className={clicked ? 'nav-menu active' : 'nav-menu'}>
+        <ul className='nav-menu-items' onClick={()=>setClicked(!clicked)}>
+
+          <li><NavLink exact to="/" className='nav-links'>Home</NavLink></li>
+          <li><NavLink to="/launches" className='nav-links'>Launches</NavLink></li>     
+          <li><NavLink to="/launchpad-map" className='nav-links'>Launchpad map</NavLink></li>
+
+        </ul>
+      </nav>
+      </>
+    )
+}
+
+export default Navbar