Merge branch 'main' into mm-103-homepage-name-input

.env.template

@@ -1,4 +1,5 @@
-# A template for the file that would store secrets (e.g. environment variables)
-# copy this to your .env file and add your own API key etc
+# copy this file and rename it as .env
+# this needs to be in youre root directory
+# replace <YOUR API KEY> with your api key
 
-NASA-API-KEY=add-your-key-here
+REACT_APP_NASA_API_KEY="<YOUR API KEY>"

src/App.test.tsx

@@ -1,10 +1,24 @@
-import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { render, screen, fireEvent  } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import App from './App';
 import "@testing-library/jest-dom";
+import Hamburger from './Hamburgerbutton';
 
 // remove this test when real tests are added
 test('renders header', () => {
     render(<App />);
-    const header = screen.getByText(/MarsioKart/i);
-    expect(header).toBeInTheDocument();
-  });
+    const header = screen.getAllByText(/MarsioKart/i);
+    expect(header[0]).toBeInTheDocument();
+  });
+
+test('calls onClick when Hamburger button is clicked', () => {
+    const handleClick = jest.fn();
+    render(<Hamburger onClick={handleClick} label="Click Me" />);
+
+    const button = screen.getByText('Click Me');
+    fireEvent.click(button);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+

src/App.tsx

@@ -1,17 +1,26 @@
 import React from 'react';
-import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.scss';
 import Home from './Home/Home';
+import Header from './header';
+import { Quiz } from './Quiz/Quiz';
+import Footer from './Footer/Footer';
+
+
 
 function App() {
   return (
     <div className="App">
       <Router>
         <h1>MarsioKart</h1>
+        <Header/>
         <Routes>
           <Route path='/'
           element={<Home/>}/>
+          <Route path='/quiz'
+          element={<Quiz/>}/>
         </Routes>
+        <Footer/>
       </Router>
     </div>
   );

src/Footer/Footer.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import Footer from './Footer';
+import "@testing-library/jest-dom";
+
+test('renders footer', () => {
+    render(<Footer/>);
+    const footer = screen.getByText(/NASA/i);
+    expect(footer).toBeInTheDocument();
+  });

src/Footer/Footer.tsx

@@ -0,0 +1,9 @@
+export default function Footer() {
+
+    return (
+        <footer>
+            MarsioKart &copy; 2024.
+            All images sourced from <a href="https://api.nasa.gov/">NASA</a>.
+        </footer>
+    )
+}

src/Hamburgerbutton.scss

@@ -0,0 +1,18 @@
+.hamburger {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  .line {
+    width: 100%;
+    height: 3px;
+    background-color: black;
+    transition: all 0.3s ease;
+  }
+

src/Hamburgerbutton.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import './Hamburgerbutton.scss'; // styling for the hmauburger button icon
+
+interface HamburgerProps {
+  onClick: () => void;
+  label: string;
+
+}
+
+const Hamburger: React.FC<HamburgerProps> = ({ onClick , label}) => {
+
+  const handleClick = () => {
+    onClick();
+  };
+
+  return (
+    <button onClick={handleClick} className="hamburger">
+         {/* draw the 3 lines which make up the hmburger  */}
+         {label}
+        <div className="line" />
+        <div className="line" />
+        <div className="line" />
+    </button>
+  );
+};
+
+export default Hamburger;

src/Quiz/Quiz.tsx

@@ -0,0 +1,6 @@
+export function Quiz () {
+    return (
+        <>
+        </>
+    )
+}

src/header.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Hamburger from './Hamburgerbutton';
+
+const Header: React.FC = () => {
+  const handleHamburgerClick = () => {
+    console.log('Hamburger menu clicked!');
+  };
+
+  return (
+    <div className="App">
+      <Hamburger onClick={handleHamburgerClick} label={""}/>
+    </div>
+  );
+};
+
+export default Header;

src/images/DisplayPicture.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import { fetchAPI } from '../utils/fetchData';
+
+interface PictureOfDay {
+    date: string,
+    explanation: string,
+    hdurl: string,
+    title: string,
+    url: string
+}
+
+export const DisplayPictureOfDay = () => {
+    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;
+};

src/utils/fetchData.ts

@@ -0,0 +1,20 @@
+// 1. .env has to be created in root
+// 2. inside .env, it should be REACT_APP_NASA_API_KEY="<your api key>"
+
+export async function fetchAPI(apiUrl: string) {
+    const apiKey = process.env.REACT_APP_NASA_API_KEY;
+    const link = `${apiUrl}${apiKey}`;
+
+    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;
+    }
+}