Merge pull request #307 from Chandu6702/mars-rover

martian rover imagery page
PranavBarthwal · May 31, 2024 · 5036b5c · 5036b5c
2 parents 4720616 + 516f77a
commit 5036b5c
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 47 deletions.
diff --git a/src/App.css b/src/App.css
@@ -13,6 +13,7 @@
   -webkit-text-fill-color: transparent;
   font-size: 4rem;
   font-weight: bold;
+  border-top: 20dvh solid transparent;
 }
 
 .ip {
@@ -28,7 +29,6 @@
   justify-content: center;
   outline:none;
   border: none;
-  /* background-color: red; */
 }
 
 .date_input {
@@ -113,7 +113,7 @@
   border-style: solid;
   border-width: 1px;
   display: flex;
-  justify-content: center;
+  justify-content: space-evenly;
   align-items: center;
 }
 
@@ -466,3 +466,22 @@
   color: inherit;
   cursor: pointer;
 }
+
+#close-btn{
+  position: relative;
+  bottom: 250px;
+}
+#close-btn button{
+  padding: 5px 15px;
+  font-size: 1rem;
+  border-radius: 10px;
+  font-weight: bold;
+  color: #40019a;
+  border: none;
+}
+
+#close-btn button:hover{
+  color: white;
+  background: #40019a;
+  box-shadow: 0 0 10px white;
+}
diff --git a/src/components/DisplayDetails/DisplayDetails.jsx b/src/components/DisplayDetails/DisplayDetails.jsx
@@ -1,15 +1,13 @@
 import React from "react";
 import img from "../../assets/feel the fear and do it anyway.png";
-import '../../App.css'
-
-function DisplayDetails({ roverInfo }) {
+import "../../App.css";
 
+function DisplayDetails({ roverInfo, fun }) {
   return (
     <>
       <div className="rover_display">
         <div className="inner_container">
           <div className="image_div">
-
             <img
               id="roverImg"
               src={roverInfo.url ? roverInfo.url : img}
@@ -23,19 +21,25 @@ function DisplayDetails({ roverInfo }) {
               <div className="row">
                 <div className="card">
                   <h4>Earth Date</h4>
-                  <p className="date">{roverInfo.earthDate ? roverInfo.earthDate : "...."}</p>
+                  <p className="date">
+                    {roverInfo.earthDate ? roverInfo.earthDate : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Rover Name</h4>
-                  <p className="roverName">{roverInfo.roverName ? roverInfo.roverName : "...."}</p>
+                  <p className="roverName">
+                    {roverInfo.roverName ? roverInfo.roverName : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Camera</h4>
-                  <p className="camera">{roverInfo.cameraName ? roverInfo.cameraName : "...."}</p>
+                  <p className="camera">
+                    {roverInfo.cameraName ? roverInfo.cameraName : "...."}
+                  </p>
                 </div>
               </div>
             </div>
@@ -44,26 +48,34 @@ function DisplayDetails({ roverInfo }) {
               <div className="row">
                 <div className="card">
                   <h4>Launch Date</h4>
-                  <p className="launch">{roverInfo.launchDate ? roverInfo.launchDate : "...."}</p>
+                  <p className="launch">
+                    {roverInfo.launchDate ? roverInfo.launchDate : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Land Date</h4>
-                  <p className="land">{roverInfo.landingDate ? roverInfo.landingDate : "...."}</p>
+                  <p className="land">
+                    {roverInfo.landingDate ? roverInfo.landingDate : "...."}
+                  </p>
                 </div>
               </div>
               <div className="row">
                 <div className="card">
                   <h4>Status</h4>
-                  <p className="status">{roverInfo.status ? roverInfo.status : "...."}</p>
+                  <p className="status">
+                    {roverInfo.status ? roverInfo.status : "...."}
+                  </p>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-
 
+          <div id="close-btn">
+            <button onClick={() => fun(false)}>X</button>
+          </div>
+        </div>
       </div>
     </>
   );

diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
@@ -48,7 +48,7 @@ function Navbar() {
             <ul>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="#">Home</a></li>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="#apod">APOD</a></li>
-              <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="#mars">MartianImagery</a></li>
+              <li className="sidebar-list-item rem" onClick={handleMenuClose}><a className="rem-default" href="/mars-rover">MartianImagery</a></li>
               <li className="sidebar-list-item rem" onClick={handleMenuClose}><NavLink className="rem-default" to="/nasa-projects">NASA's Projects</NavLink></li>
             </ul>
             <a href="#contact" className="sidebar-contact rem-default rem">
@@ -68,7 +68,7 @@ function Navbar() {
               <a className="nav-link text-light" href="#apod">APoD</a>
             </li>
             <li className="nav-item">
-              <a className="nav-link text-light" href="#mars">MartianImagery</a>
+              <NavLink className="nav-link text-light" to="/mars-rover">MartianImagery</NavLink>
             </li>
             <li className="nav-item">
               <NavLink className="nav-link text-light" to="/nasa-projects">NASA's Projects</NavLink>

diff --git a/src/main.jsx b/src/main.jsx
@@ -5,12 +5,14 @@ import Home from "./pages/Home/Home.jsx"
 import NasaProjects from "./pages/NasaProjects/NasaProjects.jsx"
 import './index.css'
 import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route } from "react-router-dom"
+import MarsRover from './pages/MarsRover/MarsRover.jsx'
 
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path='/' element={<App />}>
       <Route index element={<Home />} />
       <Route path='nasa-projects' element={<NasaProjects />} />
+      <Route path='mars-rover' element={<MarsRover/>}/>
     </Route>
   )
 )

diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -1,15 +1,15 @@
 import React from 'react'
 import Hero from '../../components/Hero/Hero.jsx'
 import Apod from '../../components/Apod/Apod.jsx'
-import MarsRover from '../../components/MarsRover/MarsRover.jsx'
+// import MarsRover from '../MarsRover/MarsRover.jsx'
 import ContactForm from '../../components/ContactForm/ContactForm.jsx'
 
 function Home() {
     return (
         <>
             <Hero />
             <Apod />
-            <MarsRover />
+            {/* <MarsRover /> */}
             <ContactForm />
         </>
     )

diff --git a/src/components/MarsRover/MarsRover.jsx → src/pages/MarsRover/MarsRover.jsx b/src/components/MarsRover/MarsRover.jsx → src/pages/MarsRover/MarsRover.jsx
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from "react";
 import img from "../../assets/mars.png";
-import DisplayDetails from "../DisplayDetails/DisplayDetails.jsx";
-import { toastify } from "../Toast/Toast.jsx";
+import DisplayDetails from "../../components/DisplayDetails/DisplayDetails.jsx";
+import { toastify } from "../../components/Toast/Toast.jsx";
 import ReadableStreamDecoder from './../../utils/ReadableStreamDecoder';
 
 function MarsRover() {
 
-    const [showDefault, setShowDefault] = useState(true);
+    const [showImages, setShowImages] = useState(false);
     const [userDate, setUserDate] = useState("");
     const [roverInfo, setRoverInfo] = useState({
         url: "",
@@ -26,17 +26,13 @@ function MarsRover() {
     async function displayRover(e) {
         try {
 
+            e.preventDefault();
+
             if (userDate == "") {
                 toastify("Enter Date", false)
                 return
             }
 
-            e.preventDefault();
-
-            setShowDefault((prev) => {
-                return false;
-            })
-
             let url = `https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_date=${userDate}&api_key=${import.meta.env.VITE_API_KEY}`;
 
             let response = await fetch(url);
@@ -45,7 +41,7 @@ function MarsRover() {
 
             if (response.photos.length === 0) {
                 toastify("No images for selected date", false)
-                setShowDefault(true)
+                setShowImages(false)
                 setRoverInfo({
                     url: "",
                     earthDate: "",
@@ -64,6 +60,8 @@ function MarsRover() {
                 return { ...prev, url: image_from_rover.img_src, earthDate: image_from_rover.earth_date, roverName: image_from_rover.rover.name, cameraName: image_from_rover.camera.full_name, launchDate: image_from_rover.rover.launch_date, landingDate: image_from_rover.rover.landing_date, status: image_from_rover.rover.status };
             })
 
+            setShowImages(true)
+
         } catch (error) {
             console.log(error.message);
         }
@@ -78,30 +76,18 @@ function MarsRover() {
             const data = await ReadableStreamDecoder(response.body);
 
             setMaxDate(data.latest_photos[0].rover.max_date);
+            setUserDate(data.latest_photos[0].rover.max_date);
 
         } catch (error) {
             console.log(error.message);
         }
-
-        const today_date = new Date();
-        const temp = new Date();
-
-        temp.setDate((today_date.getDate() - 124))
-
-        var dd = String(temp.getDate()).padStart(2, '0');
-        var mm = String(temp.getMonth() + 1).padStart(2, '0');
-        var yyyy = temp.getFullYear();
-
-        return `${yyyy}-${mm}-${dd}`;
-
     }
 
 
     return (
         <>
             <h1 align="center" className="section_title section_title_mobile" id="mars">Mars Rover Imagery</h1>
             <br />
-            {showDefault ?
 
                 <div className="rover_container">
                     <div className="rover_section_img">
@@ -134,12 +120,6 @@ function MarsRover() {
                     </div>
                 </div>
 
-                :
-
-                <DisplayDetails roverInfo={roverInfo} />
-
-            }
-
             <div className="ip">
                 <div className="input-group mb-4 input_container">
                     <input
@@ -150,6 +130,7 @@ function MarsRover() {
                         aria-describedby="button-addon2"
                         min="2015-06-03"
                         max={maxDate}
+                        value={userDate}
                         onChange={(e) => setUserDate((prev) => e.target.value)}
                     />
                     <button
@@ -163,6 +144,8 @@ function MarsRover() {
                 </div>
             </div>
 
+            {showImages && (<DisplayDetails roverInfo={roverInfo} fun={setShowImages} />)}
+
         </>
     );
 }