integrated RoverImages Element

Author: Hannah Dunsmore

src/Components/RoverDetails/RoverDetails.tsx

@@ -5,6 +5,7 @@ import spiritButton from "../../Assets/Images/spirit_button.png";
 import curiosityButton from "../../Assets/Images/curiosity_button.png";
 import opportunityButton from "../../Assets/Images/Opportunity_button.png";
 import "./RoverDetails.scss";
+import RoverImages from "../RoverImages/RoverImages";
 
 export enum rovers {
   CURIOSITY = "curiosity",
@@ -77,6 +78,7 @@ function RoverDetails() {
         </button>
       </div>
       <MissionManifest roverType={rover} />
+      <RoverImages roverType={rover}/>
     </div>
   );
 }

src/Components/RoverImages/RoverImage.spec.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import RoverImages from "./RoverImages";
+import { rovers } from "../RoverDetails/RoverDetails";
+
 
 const photo_mock_data = {
   photos: [
@@ -37,7 +39,7 @@ describe("Testing the rover image displayed on page load", () => {
       });
   });
   test("Testing the rover image displayed on page load", async () => {
-    render(<RoverImages name="curiosity" />);
+    render(<RoverImages roverType={rovers.CURIOSITY} />);
 
     await waitFor(() => {
       const testImage = document.querySelector("img") as HTMLImageElement;
@@ -49,7 +51,7 @@ describe("Testing the rover image displayed on page load", () => {
   });
 
   test("Testing the rover image is displayed when next is clicked", async () => {
-    render(<RoverImages name="curiosity" />);
+    render(<RoverImages roverType={rovers.CURIOSITY} />);
     await waitFor(() => {
       const firstTestImage = document.querySelector("img") as HTMLImageElement;
       const firstTestImageDiv = firstTestImage.parentElement?.parentElement;

src/Components/RoverImages/RoverImages.scss

@@ -4,9 +4,9 @@ body {
 }
 
 .sliderContainer {
-  max-width: 30%;
+  width: 42.5vw;
   margin: auto;
-  padding: 40px;
+  padding: 20px 40px 30px 40px;
 }
 
 .error {
@@ -15,14 +15,20 @@ body {
 }
 
 
-@media screen and (max-width: 1000px) {
+@media (max-width: 898px) {
   .sliderContainer {
-    max-width: 60%;
+    width: 55vw;
   }
 }
 
-@media screen and (max-width: 600px) {
+@media (max-width: 656px) {
   .sliderContainer {
-    max-width: 80%;
+    width: 65vw;
+  }
+}
+
+@media (max-width: 320px) {
+  .sliderContainer {
+    width: 70vw;
   }
 }

src/Components/RoverImages/RoverImages.tsx

@@ -4,6 +4,7 @@ import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import "./RoverImages.scss";
 import { ClipLoader } from "react-spinners";
+import { rovers, MissionManifestProps } from "../RoverDetails/RoverDetails";
 
 type RoverResponse = {
   id: number;
@@ -12,12 +13,12 @@ type RoverResponse = {
 
 const api = "fCp5fNsscdDmov0Vw4lpU4bOkdMTCuCA9tnoKgYH";
 
-function RoverImages(props: { name: string }) {
+function RoverImages(props: MissionManifestProps) {
   const [roverResponse, setRoverResponse] = useState<RoverResponse[]>();
   const [error, setError] = useState<string>("");
   const [isLoading, setLoading] = useState<boolean>(false);
 
-  const altText = `Photo taken by the Mars Rover ${props.name}`;
+  const altText = `Photo taken by the Mars Rover ${props.roverType}`;
 
   const sliderSettings = {
     dots: false,
@@ -38,12 +39,12 @@ function RoverImages(props: { name: string }) {
       try {
         setLoading(true);
         const manifestResponse = await fetch(
-          `https://api.nasa.gov/mars-photos/api/v1/manifests/${props.name}?api_key=${api}`,
+          `https://api.nasa.gov/mars-photos/api/v1/manifests/${props.roverType}?api_key=${api}`,
         );
         const manifestData = await manifestResponse.json();
 
         const photoResponse = await fetch(
-          `https://api.nasa.gov/mars-photos/api/v1/rovers/${props.name}/photos?earth_date=${manifestData.photo_manifest.max_date}&api_key=${api}`,
+          `https://api.nasa.gov/mars-photos/api/v1/rovers/${props.roverType}/photos?earth_date=${manifestData.photo_manifest.max_date}&api_key=${api}`,
         );
         const photoData = await photoResponse.json();
 
@@ -58,7 +59,7 @@ function RoverImages(props: { name: string }) {
     };
 
     fetchData();
-  }, [props.name]);
+  }, [props.roverType]);
 
   if (error) {
     return (