Merge branch 'main' into mm-107-startquizbutton

src/App.test.tsx

@@ -1,24 +1,10 @@
-import React from 'react';
-import { render, screen, fireEvent  } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen  } from '@testing-library/react';
 import App from './App';
 import "@testing-library/jest-dom";
-import Hamburger from './Hamburgerbutton/Hamburgerbutton';
 
 // remove this test when real tests are added
 test('renders header', () => {
     render(<App />);
     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

@@ -2,12 +2,10 @@ import React, { useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.scss';
 import Home from './Home/Home';
-import Header from './Header/Header';
+import Header from './Header/Header'
 import { Quiz } from './Quiz/Quiz';
 import Footer from './Footer/Footer';
 
-
-
 function App() {
   const [username, setUsername] = useState("");
   return (

src/Hamburgerbutton/Hamburgerbutton.tsx

@@ -1,26 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './Hamburgerbutton.scss'; // styling for the hmauburger button icon
+import Menu from '../Menu/Menu';
+import { menuItems } from '../Menu/MenuItems';
 
-interface HamburgerProps {
-  onClick: () => void;
-  label: string;
-
-}
-
-const Hamburger: React.FC<HamburgerProps> = ({ onClick , label}) => {
+const Hamburger: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleClick = () => {
-    onClick();
+    // menu items display/not display on click
+    setIsOpen(!isOpen);
+    console.log('Hamburger menu display options!');
+    <Menu items={menuItems}  />
   };
-
   return (
-    <button onClick={handleClick} className="hamburger">
+    <div>
+    <button onClick={handleClick} className="hamburger" data-testid="toggle-button">
          {/* draw the 3 lines which make up the hmburger  */}
-         {label}
+
         <div className="line" />
         <div className="line" />
         <div className="line" />
     </button>
+{/* display the menu list of clicked/unclicked */}
+    {isOpen && (
+        <div className="menu" data-testid="menu">
+          <Menu items={menuItems} />
+      </div>
+  )}
+  </div>
   );
 };
 

src/Header/Header.tsx

@@ -4,13 +4,10 @@ import Hamburger from '../Hamburgerbutton/Hamburgerbutton';
 const logo = require('../ImageAssets/marsiokartlogo.jpg')
 
 const Header: React.FC = () => {
-  const handleHamburgerClick = () => {
-    console.log('Hamburger menu clicked!');
-  };
 
   return (
     <div className="App">
-      <Hamburger onClick={handleHamburgerClick} label={""}/>
+      <Hamburger/>
       <img src={logo} alt="Marsio Kart Logo" />
     </div>
   );

src/Header/header.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen, fireEvent  } from '@testing-library/react';
+import "@testing-library/jest-dom";
+import Hamburger from '../Hamburgerbutton/Hamburgerbutton';
+
+test('should toggle hamburger menu on button click', () => {
+    render(<Hamburger />);
+
+    const button = screen.getByTestId('toggle-button');
+    const menu = screen.queryByTestId('data-testid');
+
+    // Initially, the menu should not be visible
+    expect(menu).not.toBeInTheDocument();
+
+    // Click the button to open the menu
+    fireEvent.click(button);
+    expect(screen.getByTestId('menu')).toBeInTheDocument();
+
+    // Click the button again to close the menu
+    fireEvent.click(button);
+    expect(screen.queryByTestId('menu')).not.toBeInTheDocument();
+  });
+

src/Menu/Menu.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface MenuItem {
+  label: string;
+  link: string;
+}
+
+interface MenuProps {
+  items: MenuItem[];
+}
+
+const Menu: React.FC<MenuProps> = ({ items }) => {
+  return (
+    <div>
+      <h1>Menu </h1>
+    <nav>
+      <ul>
+        {items.map((item, index) => (
+          <li key={index}>
+            <a href={item.link}>{item.label}</a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+    </div>
+  );
+};
+
+export default Menu;
+

src/Menu/MenuItems.tsx

@@ -0,0 +1,6 @@
+
+// list of the menu options that will be displayed when clicking on hamburger button
+export const menuItems = [
+  { label: 'Home', link: '/' },
+  { label: 'Quiz', link: '' },
+];

src/images/DisplayChosenPicture.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import { fetchAPI } from '../utils/fetchData';
+
+interface ChosenPicture {
+    date: string,
+    explanation: string,
+    hdurl: string,
+    title: string,
+    url: string
+}
+
+export const DisplayChosenPicture = ({date}: {date: string}) => {
+    const [myPictureData, setMyPictureData] = useState<ChosenPicture | 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=", date);
+
+            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,9 +1,15 @@
 // 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 year = new Date().getFullYear()
+const month = (new Date().getMonth()) + 1
+const date = new Date().getDate()
+const todaysDate = `${year}-${month}-${date}`
+
+export async function fetchAPI(apiUrl: string, date = todaysDate) {
     const apiKey = process.env.REACT_APP_NASA_API_KEY;
-    const link = `${apiUrl}${apiKey}`;
+    const link = `${apiUrl}${apiKey}&date=${date}`;
 
     try {
         const response = await fetch(link);