Merge branch 'main' into mm-008-homepage-styling

src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.scss';
 import Home from './Home/Home';
@@ -7,15 +7,16 @@ import { Quiz } from './Quiz/Quiz';
 import Footer from './Footer/Footer';
 
 function App() {
+  const [username, setUsername] = useState("");
   return (
     <div className="app">
       <Router>
         <Header/>
         <Routes>
           <Route path='/'
-            element={<Home />} />
+            element={<Home username={username} setUsername={setUsername}/>} />
           <Route path='/quiz'
-            element={<Quiz />} />
+            element={<Quiz username={username}/>} />
         </Routes>
         <Footer />
       </Router>

src/Home/Home.test.tsx

@@ -1,11 +1,14 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import Home from "./Home";
 import "@testing-library/jest-dom";
+import React, { useState } from "react";
 
-test("user's name is displayed on form submission", () => {
-    render(<Home />);
-
+test.skip("user's name is displayed on form submission", () => {
     const name = "Luigi";
+    const [username, setUsername] = useState(name);
+
+    render(<Home username={username} setUsername={setUsername}/>);
+
     const textArea = screen.getByLabelText(/Enter name:/);
     fireEvent.change(textArea, { target: { value: name }});
 

src/Home/Home.tsx

@@ -1,17 +1,29 @@
 import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
 import './Home.scss'
 
-function Home() {
+interface getUserProp{
+    username:string;
+    setUsername:(uname:string)=>void;
+}
+
+function Home(props:getUserProp) {
 
-    const [username, setUsername] = useState("");
+    //const [username, setUsername] = useState("");
     const [submitStatus, setSubmitStatus] = useState(false);
 
     const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         setSubmitStatus(true);
     }
 
+    let navigate = useNavigate(); 
+    const routeChange = () =>{ 
+        let path = '/quiz'; 
+        navigate(path);
+  }
+
     const homeBackgroundImage = DisplayBackgroundImage();
 
     return (
@@ -22,14 +34,19 @@ function Home() {
                 <form onSubmit={handleSubmit}>
                     <label>Enter name:
                         <input type="text"
-                            value={username}
-                            onChange={username => setUsername(username.target.value)}
+                            value={props.username}
+                            //onChange={username => setUsername(username.target.value)}
+                            onChange={(username) => {props.setUsername(username.target.value)}}
                         />
                     </label>
                     <button type="submit">Submit</button>
-                    {submitStatus ? <p>Welcome {username}!</p> : null}
+                    {submitStatus ? <p>Welcome {props.username}!</p> : null}
                 </form>
 
+                <button className="startQuizButton" onClick={routeChange}>
+                     Start quiz 
+                </button>
+
             </main>
         </>
     )

src/Quiz/Quiz.tsx

@@ -1,7 +1,14 @@
 import { QuestionDisplay } from "../QuestionDisplay/QuestionDisplay"
 
-export function Quiz () {
+interface getUserProp{
+    username:string;
+}
+
+export function Quiz (props:getUserProp) {
     return (
-        <QuestionDisplay/>
+        <div>
+            User : {props.username}
+            <QuestionDisplay/>
+        </div>
     )
 }

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) {