changes for camera filter

src/App.tsx

@@ -1,15 +1,17 @@
 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 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={<PhotoOfTheDay />} />
+        <Route path="/profile" element={<ProfilePage />} /> */}
+        <Route path="/" element={<RoverImages name="curiosity" />} />
         <Route
           path="*"
           element={

src/Components/RoverImages/RoverImage.spec.tsx

@@ -15,17 +15,28 @@ const photo_mock_data = {
   ],
 };
 
+const photo_mock_data_cameras = {
+  photos: [
+    {
+      id: 1,
+      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", () => {
+// const mock_cameras = ["HAZ", "CHEM"];
+
+describe("Rover Image Tests", () => {
   beforeEach(() => {
     global.fetch = jest
       .fn()
@@ -34,6 +45,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 +74,41 @@ 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("select") as HTMLSelectElement;
+  //         //fireEvent.change(dropdown, { target: { value: mock_cameras[1] } });
+  //         fireEvent.click(dropdown);
+  //         const dropdownOptions = document.querySelectorAll('option');
+  //         console.log('options: ' + dropdownOptions[1].value);
+
+  //         fireEvent.click(dropdownOptions[1]);
+  //         expect(dropdown.value).toEqual(dropdownOptions[1].value);
+
+  //     });
+  //   });
+
+  // test("Test the images are updated when different values are selected from the dropdown", async () => {
+  //   render(<RoverImages name="curiosity" />);
+  //   await waitFor(() => {
+  //      const testImage = document.querySelector("img") as HTMLImageElement;
+  //      console.log(testImage);
+  //      const firstImageSourceUrl = testImage.src;
+  //      console.log(firstImageSourceUrl)
+  //      const dropdown = document.querySelector("select") as HTMLSelectElement;
+  //       //fireEvent.change(dropdown, { target: { value: mock_cameras[1] } });
+  //       fireEvent.click(dropdown);
+  //       const dropdownOptions = document.querySelectorAll('option');
+  //       console.log('options: ' + dropdownOptions[1].value);
+  //       fireEvent.click(dropdownOptions[1]);
+
+  //     // expect(dropdown.value).toBe(mock_cameras[1])
+  //     const updatedImage = document.querySelector("img") as HTMLImageElement;
+  //     const secondImageSourceUrl = updatedImage.src;
+  //     console.log(secondImageSourceUrl)
+  //     expect(firstImageSourceUrl).not.toEqual(secondImageSourceUrl);
+  //   });
+  // });
 });

src/Components/RoverImages/RoverImages.tsx

@@ -10,12 +10,16 @@ type RoverResponse = {
   img_src: string;
 };
 
+type Cameras = Array<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,13 @@ function RoverImages(props: { name: string }) {
             <img key={image.id} src={image.img_src} alt={altText} />
           ))}
         </Slider>
+        <select id="dropdown" value={selectedValue} onChange={handleChange}>
+          {latestCameras?.map((camera, index) => (
+            <option key={index} value={camera}>
+              {camera}
+            </option>
+          ))}
+        </select>
       </div>
     );
   }