diff --git a/.gitignore b/.gitignore index 8b182cf..43a6ed3 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,9 @@ # testing /coverage +# api key +.env + # production /build diff --git a/package-lock.json b/package-lock.json index a19ea54..db52a0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,6 @@ "@types/node": "^16.18.126", "@types/react-dom": "^19.1.5", "dayjs": "^1.11.13", - "history": "^5.3.0", "react": "^19.1.0", "react-datepicker": "^8.3.0", "react-dom": "^19.1.0", @@ -2985,246 +2984,6 @@ "@parcel/watcher-win32-x64": "2.5.1" } }, - "node_modules/@parcel/watcher-android-arm64": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz", - "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "android" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-darwin-arm64": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz", - "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-darwin-x64": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz", - "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-freebsd-x64": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz", - "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "freebsd" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm-glibc": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz", - "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm-musl": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz", - "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==", - "cpu": [ - "arm" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm64-glibc": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz", - "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-arm64-musl": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz", - "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-x64-glibc": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz", - "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-linux-x64-musl": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz", - "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==", - "cpu": [ - "x64" - ], - "dev": true, - "optional": true, - "os": [ - "linux" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-win32-arm64": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz", - "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==", - "cpu": [ - "arm64" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, - "node_modules/@parcel/watcher-win32-ia32": { - "version": "2.5.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz", - "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==", - "cpu": [ - "ia32" - ], - "dev": true, - "optional": true, - "os": [ - "win32" - ], - "engines": { - "node": ">= 10.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/parcel" - } - }, "node_modules/@parcel/watcher-win32-x64": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz", @@ -4189,6 +3948,7 @@ "version": "19.1.5", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.5.tgz", "integrity": "sha512-CMCjrWucUBZvohgZxkjd6S9h0nZxXjzus6yDfUb+xLxYM7VvjKNH1tQrE9GWLql1XoOP4/Ds3bwFqShHUYraGg==", + "license": "MIT", "peerDependencies": { "@types/react": "^19.0.0" } @@ -6963,14 +6723,6 @@ "tslib": "^2.0.3" } }, - "node_modules/dotenv": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", - "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", - "engines": { - "node": ">=10" - } - }, "node_modules/dotenv-expand": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", @@ -8556,19 +8308,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -8945,15 +8684,6 @@ "he": "bin/he" } }, - "node_modules/history": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", - "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.7.6" - } - }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -13555,6 +13285,7 @@ "version": "19.1.0", "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -13766,7 +13497,6 @@ "version": "7.6.0", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.0.tgz", "integrity": "sha512-DYgm6RDEuKdopSyGOWZGtDfSm7Aofb8CCzgkliTjtu/eDuB0gcsv6qdFhhi8HdtmA+KHkt5MfZ5K2PdzjugYsA==", - "license": "MIT", "dependencies": { "react-router": "7.6.0" }, @@ -13858,6 +13588,15 @@ } } }, + "node_modules/react-scripts/node_modules/dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "license": "BSD-2-Clause", + "engines": { + "node": ">=10" + } + }, "node_modules/react-slick": { "version": "0.30.3", "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.3.tgz", @@ -16148,7 +15887,6 @@ "version": "4.9.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", - "license": "Apache-2.0", "peer": true, "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index f4d4640..1afb0c2 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,6 @@ "eslint-plugin-prettier": "^5.2.1", "globals": "^15.14.0", "jest": "^27.5.1", - "prettier": "3.4.2", "sass": "^1.85.0", "typescript-eslint": "^8.20.0" diff --git a/src/App.test.tsx b/src/App.test.tsx deleted file mode 100644 index 38fbf4a..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import { render } from "@testing-library/react"; -import PhotoOfTheDay from "./Components/photoOfTheDay/photoOfTheDay"; - -test("renders photo of the day", () => { - render(); - const imageElement = document.querySelector("img") as HTMLImageElement; - expect(imageElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx index 1b8982f..c5e49ab 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import { Link, Route, BrowserRouter as Router, Routes } from "react-router"; import PhotoOfTheDay from "./Components/photoOfTheDay/photoOfTheDay"; import ProfilePage from "./pages/Profile/ProfilePage"; import NavBar from "./Components/AddNavBar/NavBar"; +import RoverDetails from "./Components/RoverDetails/RoverDetails"; function App() { return ( @@ -11,7 +12,15 @@ function App() { - } /> + + {" "} + {" "} + + } + /> } /> { + global.fetch = jest.fn().mockResolvedValue({ + json: jest.fn().mockResolvedValue(mockManifestResponse), + }); +}); + +test("renders loading message on initial render", () => { + render(); + expect(screen.getByText("Loading...")).toBeInTheDocument(); +}); + +test("opportunity rover renders correct p elements", async () => { + render(); + const expectedTexts = [ + "Rover Name: ", + mockManifestResponse.photo_manifest.name, + "Landing Date: ", + mockManifestResponse.photo_manifest.landing_date, + "Launch Date: ", + mockManifestResponse.photo_manifest.launch_date, + "Status: ", + mockManifestResponse.photo_manifest.status, + "Max Sol: ", + mockManifestResponse.photo_manifest.max_sol.toString(), + "Max Date: ", + mockManifestResponse.photo_manifest.max_date, + "Total photos: ", + mockManifestResponse.photo_manifest.total_photos.toString(), + ]; + + const missionManifestContainer = await screen.findByTestId( + "mission-manifest-container", + ); + const pElements = missionManifestContainer.querySelectorAll("p"); + + expect(pElements.length).toBe(14); + pElements.forEach((p, index) => { + expect(p.textContent).toBe(expectedTexts[index]); + console.log(p.textContent); + }); +}); + +test("opportunity rover renders correct Heading", async () => { + render(); + + const heading = await screen.findByText("MISSION MANIFEST"); + + expect(heading).toBeInTheDocument(); +}); + +test("invalid rover renders correct p elements", async () => { + const mockInvalidFetchResponse = { + photo_manifest: { + name: undefined, + landing_date: undefined, + launch_date: undefined, + status: undefined, + max_sol: undefined, + max_date: undefined, + total_photos: undefined, + }, + }; + global.fetch = jest.fn().mockResolvedValue({ + json: jest.fn().mockResolvedValue(mockInvalidFetchResponse), + }); + + render(); + + const missionManifestContainer = await screen.findByTestId( + "mission-manifest-container", + ); + const pElements = missionManifestContainer.querySelectorAll("p"); + let NaCounter = 0; + + pElements.forEach((p) => { + if (p.textContent === "N/A") NaCounter++; + }); + + expect(NaCounter).toBe(7); +}); diff --git a/src/Components/MissionManifest/MissionManifest.tsx b/src/Components/MissionManifest/MissionManifest.tsx new file mode 100644 index 0000000..ed3b88f --- /dev/null +++ b/src/Components/MissionManifest/MissionManifest.tsx @@ -0,0 +1,79 @@ +import React from "react"; +import { useState } from "react"; +import { useEffect } from "react"; +import "./MissionManifest.scss"; + +export enum Rovers { + CURIOSITY = "curiosity", + OPPORTUNIY = "opportunity", + SPIRIT = "spirit", +} + +export interface MissionManifestProps { + roverType: Rovers; +} + +type manifestData = { + name: string; + landingDate: string; + launchDate: string; + status: string; + maxSol: number; + maxDate: string; + totalPhotos: number; +}; + +function MissionManifest(props: MissionManifestProps) { + const apiKey = process.env.REACT_APP_API_KEY; + const [manifestData, setManifestData] = useState(null); + + useEffect(() => { + fetch( + `https://api.nasa.gov/mars-photos/api/v1/manifests/${props.roverType}?api_key=${apiKey}`, + ) + .then((response) => response.json()) + .then((response) => { + const data = response.photo_manifest; + setManifestData({ + name: data.name, + landingDate: data.landing_date, + launchDate: data.launch_date, + status: data.status, + maxSol: data.max_sol, + maxDate: data.max_date, + totalPhotos: data.total_photos, + }); + }); + }, [props.roverType]); + + if (!manifestData) { + return

Loading...

; + } else { + return ( +
+

MISSION MANIFEST

+
+

Rover Name:

+

{manifestData.name ?? "N/A"}

+

Landing Date:

+

{manifestData.landingDate ?? "N/A"}

+

Launch Date:

+

{manifestData.launchDate ?? "N/A"}

+

Status:

+

{manifestData.status ?? "N/A"}

+

Max Sol:

+

{manifestData.maxSol ?? "N/A"}

+

Max Date:

+

{manifestData.maxDate ?? "N/A"}

+

Total photos:

+

{manifestData.totalPhotos ?? "N/A"}

+
+
+ ); + } +} + +export default MissionManifest; diff --git a/src/Components/RoverDetails/RoverDetails.scss b/src/Components/RoverDetails/RoverDetails.scss new file mode 100644 index 0000000..3117929 --- /dev/null +++ b/src/Components/RoverDetails/RoverDetails.scss @@ -0,0 +1,142 @@ +@import "../../Styles/GlobalStyles.scss"; + +#rover-information-container { +margin-top: 60px; + + #rover-header { + color: whitesmoke; + display: flex; + justify-content: center; + margin: 40px auto; + font-family: $MartianMono; + } + #scroll-message{ + display: none; + } +} + +#rover-button-container { + display: flex; + justify-content: space-between; + margin: 0 auto; + width: 50vw; + 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; + } +} + +// Media Queries + +@media(min-width: 1440px) { + #rover-button-container { + width: 40vw; + } +} + +@media(max-width: 898px) { + #rover-button-container { + width: 65vw; + } +} + +@media(max-width: 766px) { + #rover-information-container { + #rover-header { + margin: 40px auto 15px auto; + } + #scroll-message{ + display: block; + color: whitesmoke; + font-family: $MartianMono; + font-size: 12px; + text-align: center; + } + } + #rover-button-container { + width:20vw; + } + + .button-carousel { + display: flex; + overflow-x: auto; + gap: 1rem; + padding: 1rem; + scroll-snap-type: x mandatory; + -webkit-overflow-scrolling: touch; + white-space: nowrap; + + &::-webkit-scrollbar { + height: 10px; + } + + &::-webkit-scrollbar-track { + background: transparent; + } + + &::-webkit-scrollbar-thumb { + background: #999; + } + + button { + flex: 0 0 auto; + scroll-snap-align: start; + + } + } +} + +@media(max-width: 425px) { + + #rover-header { + margin: 15px auto; + } + #rover-button-container { + width: 35vw; + } + + .button-carousel { + display: flex; + overflow-x: auto; + gap: 1rem; + padding: 1rem; + scroll-snap-type: x mandatory; + + button { + flex: 0 0 auto; + scroll-snap-align: start; + + } + } +} + +@media(max-width: 376px) { + #rover-button-container { + width: 40vw; + } +} + +@media(max-width: 320px) { + #rover-button-container { + width: 47vw; + } +} diff --git a/src/Components/RoverDetails/RoverDetails.tsx b/src/Components/RoverDetails/RoverDetails.tsx new file mode 100644 index 0000000..0d4a8c3 --- /dev/null +++ b/src/Components/RoverDetails/RoverDetails.tsx @@ -0,0 +1,86 @@ +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"; +import RoverImages from "../RoverImages/RoverImages"; + +export enum Rovers { + CURIOSITY = "curiosity", + OPPORTUNIY = "opportunity", + SPIRIT = "spirit", +} + +export interface MissionManifestProps { + roverType: Rovers; +} + +function RoverDetails() { + const [rover, setRover] = useState(Rovers.SPIRIT); + const [selectedRover, setSelectedRover] = useState(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 ( +
+

CHOOSE A ROVER

+ Scroll to pick! +
+ + + +
+ + +
+ ); +} + +export default RoverDetails; diff --git a/src/Components/RoverImages/RoverImage.spec.tsx b/src/Components/RoverImages/RoverImage.spec.tsx index 0ff1feb..7fae6ef 100644 --- a/src/Components/RoverImages/RoverImage.spec.tsx +++ b/src/Components/RoverImages/RoverImage.spec.tsx @@ -1,6 +1,7 @@ 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 +38,7 @@ describe("Testing the rover image displayed on page load", () => { }); }); test("Testing the rover image displayed on page load", async () => { - render(); + render(); await waitFor(() => { const testImage = document.querySelector("img") as HTMLImageElement; @@ -49,7 +50,7 @@ describe("Testing the rover image displayed on page load", () => { }); test("Testing the rover image is displayed when next is clicked", async () => { - render(); + render(); await waitFor(() => { const firstTestImage = document.querySelector("img") as HTMLImageElement; const firstTestImageDiv = firstTestImage.parentElement?.parentElement; diff --git a/src/Components/RoverImages/RoverImages.scss b/src/Components/RoverImages/RoverImages.scss index c284118..31272b0 100644 --- a/src/Components/RoverImages/RoverImages.scss +++ b/src/Components/RoverImages/RoverImages.scss @@ -1,12 +1,15 @@ +@import "../../Styles/GlobalStyles.scss"; + + body { background: #062356; color: #fffff2; } .sliderContainer { - max-width: 30%; + width: 42.5vw; margin: auto; - padding: 40px; + padding: 20px 40px 30px 40px; } .error { @@ -14,15 +17,28 @@ body { font-size: 50px; } +h2 { + font-family: $PublicSans; + text-align: center; + padding: 100px auto; + font-size: 0.8rem; +} + + +@media (max-width: 898px) { + .sliderContainer { + width: 55vw; + } +} -@media screen and (max-width: 1000px) { +@media (max-width: 656px) { .sliderContainer { - max-width: 60%; + width: 65vw; } } -@media screen and (max-width: 600px) { +@media (max-width: 320px) { .sliderContainer { - max-width: 80%; + width: 70vw; } } diff --git a/src/Components/RoverImages/RoverImages.tsx b/src/Components/RoverImages/RoverImages.tsx index 6b84ba3..91958ab 100644 --- a/src/Components/RoverImages/RoverImages.tsx +++ b/src/Components/RoverImages/RoverImages.tsx @@ -4,20 +4,21 @@ import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import "./RoverImages.scss"; import { ClipLoader } from "react-spinners"; +import { MissionManifestProps, Rovers } from "../RoverDetails/RoverDetails"; type RoverResponse = { id: number; img_src: string; }; -const api = "fCp5fNsscdDmov0Vw4lpU4bOkdMTCuCA9tnoKgYH"; +const apiKey = process.env.REACT_APP_API_KEY; -function RoverImages(props: { name: string }) { +function RoverImages(props: MissionManifestProps) { const [roverResponse, setRoverResponse] = useState(); const [error, setError] = useState(""); const [isLoading, setLoading] = useState(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=${apiKey}`, ); 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=${apiKey}`, ); const photoData = await photoResponse.json(); @@ -58,7 +59,7 @@ function RoverImages(props: { name: string }) { }; fetchData(); - }, [props.name]); + }, [props.roverType]); if (error) { return ( @@ -82,7 +83,7 @@ function RoverImages(props: { name: string }) { /> ); - } else { + } else if (props.roverType === Rovers.CURIOSITY) { return (
@@ -92,6 +93,13 @@ function RoverImages(props: { name: string }) {
); + } else { + return ( +

+ Sorry no images taken by the rover today.
The rover's + mission has been completed! +

+ ); } } diff --git a/src/pages/Profile/ProfilePage.scss b/src/pages/Profile/ProfilePage.scss index 55be7f3..bf184e6 100644 --- a/src/pages/Profile/ProfilePage.scss +++ b/src/pages/Profile/ProfilePage.scss @@ -5,9 +5,11 @@ body { background-color: $blueBackground; color: $whiteFontColor; font-family: $PublicSans; + text-align: center; } + .input-field{ display: flex; justify-content: center;