Rover camera filter

src/App.tsx

@@ -1,15 +1,13 @@
 import React from "react";
 import "./App.scss";
 import { Link, Route, BrowserRouter as Router, Routes } from "react-router";
-import ProfilePage from "./components/ProfilePage";
-import PhotoOfTheDay from "./Components/photoOfTheDay/photoOfTheDay";
+import RoverImages from "./Components/RoverImages/RoverImages";
 
 function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<PhotoOfTheDay />} />
-        <Route path="/profile" element={<ProfilePage />} />
+       <Route path="/" element={<RoverImages name="curiosity" />} />
         <Route
           path="*"
           element={

src/Components/RoverImages/RoverImage.spec.tsx

@@ -15,17 +15,32 @@ const photo_mock_data = {
   ],
 };
 
+const photo_mock_data_cameras = {
+  photos: [
+    {
+      id: 1,
+      camera: {
+        id: 51,
+        name: "CHEMCAM_RMI",
+        rover_id: 5,
+        full_name: "CHEMCAM_RMI",
+      },
+      img_src: "https://mars.nasa.gov/3",
+    },
+  ],
+};
+
 const manifest_mock_data = {
   photo_manifest: {
     photos: [
       {
-        cameras: ["HAZ"],
+        cameras: ["HAZ", "CHEM"],
       },
     ],
   },
 };
 
-describe("Testing the rover image displayed on page load", () => {
+describe("Rover Image Tests", () => {
   beforeEach(() => {
     global.fetch = jest
       .fn()
@@ -34,6 +49,9 @@ describe("Testing the rover image displayed on page load", () => {
       })
       .mockResolvedValueOnce({
         json: jest.fn().mockResolvedValue(photo_mock_data),
+      })
+      .mockResolvedValueOnce({
+        json: jest.fn().mockResolvedValue(photo_mock_data_cameras),
       });
   });
   test("Testing the rover image displayed on page load", async () => {
@@ -60,4 +78,20 @@ describe("Testing the rover image displayed on page load", () => {
       expect(firstTestImageDiv).toHaveAttribute("aria-hidden", "true");
     });
   });
+
+  test("Test the drop down values are updated when selected", async () => {
+    render(<RoverImages name="curiosity" />);
+    await waitFor(() => {
+      const dropdown = document.querySelector(
+        "#cameraDropdown",
+      ) as HTMLSelectElement;
+      fireEvent.click(dropdown);
+      const dropdownOptions = document.querySelectorAll("option");
+      console.log(dropdownOptions[0].value);
+      fireEvent.change(dropdown, {
+        target: { value: dropdownOptions[1].value },
+      });
+      expect(dropdown.value).toEqual(dropdownOptions[1].value);
+    });
+  });
 });

src/Components/RoverImages/RoverImages.tsx

@@ -10,12 +10,16 @@ type RoverResponse = {
   img_src: string;
 };
 
+type Cameras = string[];
+
 const api = "fCp5fNsscdDmov0Vw4lpU4bOkdMTCuCA9tnoKgYH";
 
 function RoverImages(props: { name: string }) {
   const [roverResponse, setRoverResponse] = useState<RoverResponse[]>();
   const [error, setError] = useState<string>("");
   const [isLoading, setLoading] = useState<boolean>(false);
+  const [latestCameras, setLatestCameras] = useState<Cameras>();
+  const [selectedValue, setSelectedValue] = useState<string>("");
 
   const altText = `Photo taken by the Mars Rover ${props.name}`;
 
@@ -41,14 +45,29 @@ function RoverImages(props: { name: string }) {
           `https://api.nasa.gov/mars-photos/api/v1/manifests/${props.name}?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}`,
+        setLatestCameras(
+          manifestData.photo_manifest.photos[
+            manifestData.photo_manifest.photos.length - 1
+          ].cameras,
         );
-        const photoData = await photoResponse.json();
 
-        setRoverResponse(photoData.photos);
-        setLoading(false);
+        if (!selectedValue) {
+          setLoading(true);
+          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}`,
+          );
+          const photoData = await photoResponse.json();
+          setRoverResponse(photoData.photos);
+          setLoading(false);
+        } else {
+          setLoading(true);
+          const photoResponse = await fetch(
+            `https://api.nasa.gov/mars-photos/api/v1/rovers/${props.name}/photos?earth_date=${manifestData.photo_manifest.max_date}&camera=${selectedValue}&api_key=${api}`,
+          );
+          const photoData = await photoResponse.json();
+          setRoverResponse(photoData.photos);
+          setLoading(false);
+        }
       } catch (error) {
         setLoading(false);
         setError(
@@ -58,7 +77,11 @@ function RoverImages(props: { name: string }) {
     };
 
     fetchData();
-  }, [props.name]);
+  }, [props.name, selectedValue]);
+
+  const handleChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {
+    setSelectedValue(e.target.value);
+  };
 
   if (error) {
     return (
@@ -90,6 +113,17 @@ function RoverImages(props: { name: string }) {
             <img key={image.id} src={image.img_src} alt={altText} />
           ))}
         </Slider>
+        <select
+          id="cameraDropdown"
+          value={selectedValue}
+          onChange={handleChange}
+        >
+          {latestCameras?.map((camera, index) => (
+            <option key={index} value={camera}>
+              {camera}
+            </option>
+          ))}
+        </select>
       </div>
     );
   }