created button functionality and desktop styling

Author: Hannah Dunsmore

src/App.tsx

@@ -1,14 +1,9 @@
 import React from "react";
 import "./App.scss";
-import { useState } from "react";
-import MissionManifest, {
-  rovers,
-} from "./Components/MissionManifest/MissionManifest";
+import RoverDetails from "./Components/RoverDetails/RoverDetails";
 
 function App() {
-  const [rover, setRover] = useState<rovers>(rovers.SPIRIT);
-
-  return <MissionManifest roverType={rover} />;
+  return <RoverDetails />;
 }
 
 export default App;

src/Assets/Images/Opportunity_button.png

@@ -1,4 +1,3 @@
-@use "../../App.scss" as AppCSS;
 @import "../../Styles/GlobalStyles.scss";
 
 body{
@@ -20,7 +19,6 @@ body{
     display: grid;
     grid-template-columns: 3fr 5fr;
     grid-auto-rows: auto;
-    // border: 1px solid black;
     p {
         font-size: 0.8rem;
         border: 1px solid black;

src/Assets/Images/curiosity_button.png

@@ -1,6 +1,5 @@
 import React from "react";
-import { getByText, render, screen, waitFor } from "@testing-library/react";
-import App from "../../App";
+import { render, screen } from "@testing-library/react";
 import MissionManifest, { rovers } from "./MissionManifest";
 
 const mockManifestResponse = {
@@ -21,14 +20,13 @@ beforeEach(() => {
   });
 });
 
-// Ensures component renders a loading state before data arrives
 test("renders loading message on initial render", () => {
   render(<MissionManifest roverType={rovers.SPIRIT} />);
   expect(screen.getByText("Loading...")).toBeInTheDocument();
 });
 
 test("opportunity rover renders correct p elements", async () => {
-  render(<MissionManifest roverType={rovers.OPP} />);
+  render(<MissionManifest roverType={rovers.OPPORTUNIY} />);
   const expectedTexts = [
     "Rover Name: ",
     mockManifestResponse.photo_manifest.name,
@@ -59,12 +57,9 @@ test("opportunity rover renders correct p elements", async () => {
 });
 
 test("opportunity rover renders correct Heading", async () => {
-  render(<MissionManifest roverType={rovers.OPP} />);
+  render(<MissionManifest roverType={rovers.OPPORTUNIY} />);
 
-  const missionManifestContainer = await screen.findByTestId(
-    "mission-manifest-container",
-  );
-  const heading = screen.getByText("MISSION MANIFEST");
+  const heading = await screen.findByText("MISSION MANIFEST");
 
   expect(heading).toBeInTheDocument();
 });
@@ -85,7 +80,7 @@ test("invalid rover renders correct p elements", async () => {
     json: jest.fn().mockResolvedValue(mockInvalidFetchResponse),
   });
 
-  render(<MissionManifest roverType={rovers.OPP} />);
+  render(<MissionManifest roverType={rovers.OPPORTUNIY} />);
 
   const missionManifestContainer = await screen.findByTestId(
     "mission-manifest-container",

src/Assets/Images/spirit_button.png

@@ -1,12 +1,11 @@
+import React from "react";
 import { useState } from "react";
 import { useEffect } from "react";
-import { config } from "dotenv";
-import { json } from "stream/consumers";
 import "./MissionManifest.scss";
 
 export enum rovers {
   CURIOSITY = "curiosity",
-  OPP = "opportunity",
+  OPPORTUNIY = "opportunity",
   SPIRIT = "spirit",
 }
 

src/Components/MissionManifest/MissionManifest.scss

@@ -0,0 +1,42 @@
+@import "../../Styles/GlobalStyles.scss";
+
+#rover-information-container {
+
+  #rover-header { 
+  color: whitesmoke;
+  display: flex;
+  justify-content: center;
+  margin: 40px auto;
+  font-family: $MartianMono;
+  }
+}
+
+#rover-button-container {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 auto;
+    width: 30vw;
+    font-family: $PublicSans;
+    button {
+        all: unset;
+        background: none;
+        padding:0;
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+        font-family: $PublicSans;
+        cursor: pointer;
+        span {
+            margin: 10px 0;
+            color: whitesmoke;
+        }
+        .selected-rover {
+            span {
+                text-decoration: underline;
+            }
+        } 
+    }
+    img {
+        width: 150px;
+    }
+}

src/Components/MissionManifest/MissionManifest.spec.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { useState } from "react";
+import MissionManifest from "../MissionManifest/MissionManifest";
+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";
+
+export enum rovers {
+  CURIOSITY = "curiosity",
+  OPPORTUNIY = "opportunity",
+  SPIRIT = "spirit",
+}
+
+export interface MissionManifestProps {
+  roverType: rovers;
+}
+
+function RoverDetails() {
+  const [rover, setRover] = useState<rovers>(rovers.SPIRIT);
+  const [selectedRover, setSelectedRover] = useState<rovers>(rovers.SPIRIT);
+
+  const handleClick = (id: string) => {
+    if (id === "spirit-button") {
+      setRover(rovers.SPIRIT);
+      setSelectedRover(rovers.SPIRIT);
+    } else if (id === "curiosity-button") {
+      setRover(rovers.CURIOSITY);
+      setSelectedRover(rovers.CURIOSITY);
+    } else if (id === "opportunity-button") {
+      setRover(rovers.OPPORTUNIY);
+      setSelectedRover(rovers.OPPORTUNIY);
+    }
+  };
+
+  return (
+    <div id="rover-information-container">
+      <h2 id="rover-header">CHOOSE A ROVER</h2>
+      <div id="rover-button-container" className="button-carousel">
+        <button
+          className={rover === "spirit" ? "selected-rover" : "not-selected"}
+          id="spirit-button"
+          key="spirit-button"
+          onClick={() => handleClick("spirit-button")}
+        >
+          <img src={spiritButton} />
+          <span>SPIRIT</span>
+        </button>
+        <button
+          className={rover === "curiosity" ? "selected-rover" : "not-selected"}
+          id="curiosity-button"
+          key="curiosity-button"
+        >
+          <img
+            src={curiosityButton}
+            onClick={() => handleClick("curiosity-button")}
+          />
+          <span>CURIOSITY</span>
+        </button>
+        <button
+          className={
+            rover === "opportunity" ? "selected-rover" : "not-selected"
+          }
+          id="opportunity-button"
+          key="opportunity-button"
+        >
+          <img
+            src={opportunityButton}
+            onClick={() => handleClick("opportunity-button")}
+          />
+          <span>OPPORTUNITY</span>
+        </button>
+      </div>
+      <MissionManifest roverType={rover} />
+    </div>
+  );
+}
+
+export default RoverDetails;

src/Components/MissionManifest/MissionManifest.tsx

@@ -0,0 +1,4 @@
+declare module "*.png" {
+  const value: string;
+  export default value;
+}