Merge branch 'main' into mm-010-menu-links

src/App.scss

@@ -45,4 +45,10 @@ a {
   color: $text-color;
   width: 100vw;
   height: 100vh;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }

src/App.tsx

@@ -9,7 +9,7 @@ import Footer from './Footer/Footer';
 function App() {
   const [username, setUsername] = useState("");
   return (
-    <div className="App">
+    <div className="app">
       <Router>
         <Header/>
         <Routes>

src/Header/Header.scss

@@ -0,0 +1,19 @@
+.header {
+    display: flex;
+    flex-direction: column;
+    background-color: #2D3047;
+}
+
+@media only screen and (min-width: 480px) {
+    img {
+        width: 70vw;
+        align-self: center;
+    }
+}
+
+@media only screen and (min-width: 1024px) {
+    img {
+        width: 40vw;
+        align-self: center;
+    }
+}

src/Header/Header.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import Hamburger from '../Hamburgerbutton/Hamburgerbutton';
+import './Header.scss'
 
 const logo = require('../ImageAssets/marsiokartlogo.jpg')
 
 const Header: React.FC = () => {
 
   return (
-    <div className="App">
+    <div className="header">
       <Hamburger/>
       <img src={logo} alt="Marsio Kart Logo" />
     </div>

src/Home/Home.scss

@@ -0,0 +1,5 @@
+.home-content {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}

src/Home/Home.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
+import './Home.scss'
 
 interface getUserProp{
     username:string;

src/images/DisplayRandomPicture.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import { fetchRandomAPI } from '../utils/fetchData';
+
+interface RandomPicture {
+    date: string,
+    explanation: string,
+    hdurl: string,
+    title: string,
+    url: string
+}
+
+export const DisplayRandomPicture = () => {
+    const [myPictureData, setMyPictureData] = useState<Array<RandomPicture> | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<Error | null>(null);
+
+    const FetchPicture = async () => {
+
+        try {
+            setIsLoading(true);
+
+           const pictureData = await fetchRandomAPI("https://api.nasa.gov/planetary/apod?api_key=");
+
+            setMyPictureData(pictureData);
+            setIsLoading(false);
+
+        } catch (err: unknown) {
+            if (err instanceof Error) {
+                setError(err); // Set the actual Error object
+            } else {
+                setError(new Error('An unknown error occurred')); // Provide a default Error object
+            }
+
+            setIsLoading(false);
+        }
+    }
+    useEffect(() => {
+        FetchPicture();
+    }, [])
+
+    if (isLoading) return (<div>Is Loading...</div>);
+    if (error) return (<div>{error.message}</div>);
+    if (!myPictureData) return (<div>EMPTY</div>);
+
+    return myPictureData;
+};

src/utils/fetchData.ts

@@ -1,7 +1,6 @@
 // 1. .env has to be created in root
 // 2. inside .env, it should be REACT_APP_NASA_API_KEY="<your api key>"
 
-
 const year = new Date().getFullYear()
 const month = (new Date().getMonth()) + 1
 const date = new Date().getDate()
@@ -11,6 +10,24 @@ export async function fetchAPI(apiUrl: string, date = todaysDate) {
     const apiKey = process.env.REACT_APP_NASA_API_KEY;
     const link = `${apiUrl}${apiKey}&date=${date}`;
 
+    try {
+        const response = await fetch(link);
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+
+        const pictureData = await response.json();
+        console.log(pictureData);
+        return pictureData;
+    } catch (err) {
+        throw err;
+    }
+}
+
+export async function fetchRandomAPI(apiUrl: string) {
+    const apiKey = process.env.REACT_APP_NASA_API_KEY;
+    const link = `${apiUrl}${apiKey}&count=1`;
+
     try {
         const response = await fetch(link);
         if (!response.ok) {