merged

Author: the-duckchild

.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.env

package.json

@@ -56,6 +56,7 @@
     "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"

src/App.test.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
-import App from "./App";
+import { render } from "@testing-library/react";
+import PhotoOfTheDay from "./Components/photoOfTheDay/photoOfTheDay";
 
-test("renders learn react link", () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test("renders photo of the day", () => {
+  render(<PhotoOfTheDay />);
+  const imageElement = document.querySelector("img") as HTMLImageElement;
+  expect(imageElement).toBeInTheDocument();
 });

src/App.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import NavBar from "./Components/AddNavBar/NavBar";
+import "./App.scss";
+import PhotoOfTheDay from "./Components/photoOfTheDay/photoOfTheDay";
 
 function App() {
   return (

src/Components/AddNavBar/NavBar.scss

@@ -27,24 +27,20 @@
 
 #astroButton {
     width: 5vw;
-    min-width: 40px;
+    min-width: 50px;
 
 }
 
 #earthButton {
     width: 5vw;
-    min-width: 40px;
+    min-width: 50px;
+    
 }
 
 a {
     margin: 15px 10px 10px 10px;
-    // background: $greyBackground;
     color: $orangeBackground;
-    // background-color: $greyBackground;  
     padding: 2.5px 20px;
-    // text-align: center;
-    // text-decoration: none;
-    // display: inline-block;
     border: solid 2px $orangeBackground;
     text-decoration: none;
     border-radius: 25px;

src/Components/AddNavBar/NavBar.spec.tsx

@@ -1,18 +1,18 @@
 import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import NavBar from "./NavBar";
-import {BrowserRouter} from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
 import { createBrowserHistory } from "history";
 
 describe(NavBar, () => {
   it("Should change current location to profile when link is clicked", () => {
-    const history = createBrowserHistory({ window });
+    //const history = createBrowserHistory({ window });
     render(
       <BrowserRouter>
         <NavBar />
-      </BrowserRouter>,
+      </BrowserRouter>
     );
     const linkProfile = screen.getByText("Profile");
     userEvent.click(linkProfile);

src/Components/photoOfTheDay/photoOfTheDay.scss

@@ -0,0 +1,42 @@
+@import "../../Styles/GlobalStyles.scss";
+ 
+
+ body {
+    background-color: $blueBackground;
+    font-family: $PublicSans;
+ }
+
+ .photoOfTheDayContainer{
+     display: flex;
+     justify-content: center; 
+     background-color: $blueBackground;
+     
+ }
+
+.photo-of-the-day {
+    display: flex;
+    justify-content: center;
+    width: auto;
+    margin: auto;
+    height: 50vh;
+    object-fit: contain;
+    margin: 2vw;
+
+}
+
+.explanation {
+    width: 70%;
+    margin: auto;
+    color: $whiteFontColor;
+    padding: 5px;
+    text-align: center;
+    display: none;
+}
+
+.photoTitle {
+    width: 70%;
+    margin: auto;
+    color: $whiteFontColor;
+    padding: 5px;
+    text-align: center;
+}

src/Components/photoOfTheDay/photoOfTheDay.spec.tsx

@@ -0,0 +1,49 @@
+import "@testing-library/jest-dom";
+import PhotoOfTheDay from "./photoOfTheDay";
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+
+describe(PhotoOfTheDay, () => {
+  it("Should render today's image", async () => {
+    global.fetch = jest.fn(() =>
+      Promise.resolve(
+        new Response(
+          JSON.stringify({
+            hdurl:
+              "https://apod.nasa.gov/apod/image/2505/IssTransit_Sanz_2569.jpg",
+            title: "Astronomy Picture of the Day",
+            explanation:
+              "An amazing view of the International Space Station transiting the Sun.",
+          }),
+        ),
+      ),
+    );
+    render(<PhotoOfTheDay />);
+    const testImage = document.querySelector("img") as HTMLImageElement;
+    await waitFor(() => {
+      expect(testImage).toHaveAttribute(
+        "src",
+        "https://apod.nasa.gov/apod/image/2505/IssTransit_Sanz_2569.jpg",
+      );
+    });
+  });
+
+  it("Should render fallback image", async () => {
+    global.fetch = jest.fn(() =>
+      Promise.resolve(
+        new Response(
+          JSON.stringify({
+            title: "Astronomy Picture of the Day",
+            explanation:
+              "An amazing view of the International Space Station transiting the Sun.",
+          }),
+        ),
+      ),
+    );
+    render(<PhotoOfTheDay />);
+    const testImage = document.querySelector("img") as HTMLImageElement;
+    await waitFor(() => {
+      expect(testImage).toBeInTheDocument();
+    });
+  });
+});

src/Components/photoOfTheDay/photoOfTheDay.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import "./photoOfTheDay.scss";
+
+export default function PhotoOfTheDay() {
+  const [photo, setPhoto] = useState<string>();
+  const [title, setTitle] = useState<string>();
+  const [explanation, setExplanation] = useState<string>();
+
+  useEffect(() => {
+    const photoAddress =
+      "https://api.nasa.gov/planetary/apod?api_key=5s0C1UhCZLh3WVVN2kGzF1kEw76CImpsBBf3AvEy";
+    const fallBackImageDates = [
+      "2025-05-08",
+      "2025-05-13",
+      "2025-04-24",
+      "2025-03-26",
+      "2025-04-13",
+      "2025-03-23",
+      "2025-01-15",
+      "2024-11-10",
+      "2024-03-22",
+      "2023-08-10",
+    ];
+
+    fetch(photoAddress)
+      .then((response) => response.json())
+      .then((data) => {
+        if (data.hdurl) {
+          setPhoto(data.hdurl);
+          setTitle(data.title);
+          setExplanation(data.explanation);
+        } else {
+          const randomFromZeroToNine = Math.floor(Math.random() * 10);
+          const altPhotoAddress = `https://api.nasa.gov/planetary/apod?date=${fallBackImageDates[randomFromZeroToNine]}&api_key=5s0C1UhCZLh3WVVN2kGzF1kEw76CImpsBBf3AvEy`;
+
+          fetch(altPhotoAddress)
+            .then((response) => response.json())
+            .then((data) => {
+              setPhoto(data.hdurl);
+              setTitle(data.title);
+              setExplanation(data.explanation);
+            })
+            .catch((error) => console.error("Error fetching api", error));
+        }
+      })
+      .catch((error) => console.error("Error fetching api", error));
+  }, []);
+
+  return (
+    <div>
+      <div className="photoOfTheDayContainer">
+        <img
+          src={photo}
+          className="photo-of-the-day"
+          width="100%"
+          alt={title}
+        />
+      </div>
+      <div className="photoTitle">Astronomy Photo of the Day</div>
+      <div className="explanation">{explanation}</div>
+    </div>
+  );
+}

src/index.scss

@@ -1,8 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }