Mm102 homepage background image

src/App.scss

@@ -39,4 +39,10 @@ $default-font: "Segoe UI";
 
 a {
   text-decoration: none;
+}
+
+.home-content {
+  color: $text-color;
+  width: 100vw;
+  height: 100vh;
 }

src/App.tsx

@@ -15,11 +15,11 @@ function App() {
         <Header/>
         <Routes>
           <Route path='/'
-          element={<Home/>}/>
+            element={<Home />} />
           <Route path='/quiz'
-          element={<Quiz/>}/>
+            element={<Quiz />} />
         </Routes>
-        <Footer/>
+        <Footer />
       </Router>
     </div>
   );

src/Home/Home.tsx

@@ -1,27 +1,35 @@
-import { useState } from "react";
+import React, { useState } from "react";
+import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
 
 function Home() {
 
-    const [username, setUsername] = useState(""); 
-    const [submitStatus, setSubmitStatus] = useState(false);  
+    const [username, setUsername] = useState("");
+    const [submitStatus, setSubmitStatus] = useState(false);
 
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         setSubmitStatus(true);
     }
 
+    const homeBackgroundImage = DisplayBackgroundImage();
+
     return (
         <>
-            <form onSubmit={handleSubmit}>
-                <label>Enter name: 
-                    <input type="text"
-                    value={username}
-                    onChange={username => setUsername(username.target.value)} 
-                    />
-                </label>
-                <button type="submit">Submit</button>
-                {submitStatus ? <p>Welcome {username}!</p> : null }
-            </form>
+            <main className="home-content" style={{ backgroundImage: `url(${homeBackgroundImage})` }}>
+
+                {/* Other components and content */}
+                <form onSubmit={handleSubmit}>
+                    <label>Enter name:
+                        <input type="text"
+                            value={username}
+                            onChange={username => setUsername(username.target.value)}
+                        />
+                    </label>
+                    <button type="submit">Submit</button>
+                    {submitStatus ? <p>Welcome {username}!</p> : null}
+                </form>
+
+            </main>
         </>
     )
 }

src/images/DisplayBackgroundImage.tsx

@@ -0,0 +1,50 @@
+import React, { useState, useEffect } from 'react';
+import { fetchAPI } from '../utils/fetchData';
+
+interface PictureOfDay {
+    date: string,
+    explanation: string,
+    hdurl: string,
+    title: string,
+    url: string
+}
+
+const DisplayBackgroundImage = () => {
+    const [myPictureData, setMyPictureData] = useState<PictureOfDay | null>(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState<Error | null>(null);
+
+    const FetchPicture = async () => {
+
+        try {
+            setIsLoading(true);
+
+            const pictureData = await fetchAPI("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.hdurl; 
+
+};
+
+export default DisplayBackgroundImage;

src/images/DisplayPicture.tsx

@@ -43,4 +43,5 @@ export const DisplayPictureOfDay = () => {
     if (!myPictureData) return (<div>EMPTY</div>);
 
     return myPictureData;
+
 };