From 6784c741d4701a112ee7df902f68908743e5be50 Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Thu, 1 Aug 2024 16:22:11 +0100
Subject: [PATCH 01/12] add buttons and display preview image

---
 src/App.scss                  |  5 +++
 src/Home/Home.tsx             |  3 ++
 src/images/DisplayPicture.tsx |  2 +-
 src/images/PreviewImage.tsx   | 62 +++++++++++++++++++++++++++++++++++
 4 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 src/images/PreviewImage.tsx

diff --git a/src/App.scss b/src/App.scss
index c1e1e98..6b726f7 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -45,4 +45,9 @@ a {
   color: $text-color;
   width: 100vw;
   height: 100vh;
+}
+
+.preview-chosen-image {
+  margin: 2vw;
+  width: 300px;
 }
\ No newline at end of file
diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index 14640c6..99e8ff2 100644
--- a/src/Home/Home.tsx
+++ b/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 { PreviewImage } from "../images/PreviewImage";
 
 interface getUserProp{
     username:string;
@@ -42,6 +43,8 @@ function Home(props:getUserProp) {
                     {submitStatus ? <p>Welcome {props.username}!</p> : null}
                 </form>
 
+                <PreviewImage />
+
                 <button className="startQuizButton" onClick={routeChange}>
                      Start quiz 
                 </button>
diff --git a/src/images/DisplayPicture.tsx b/src/images/DisplayPicture.tsx
index 5b4f978..c4969c8 100644
--- a/src/images/DisplayPicture.tsx
+++ b/src/images/DisplayPicture.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { fetchAPI } from '../utils/fetchData';
 
-interface PictureOfDay {
+export interface PictureOfDay {
     date: string,
     explanation: string,
     hdurl: string,
diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
new file mode 100644
index 0000000..78b7be3
--- /dev/null
+++ b/src/images/PreviewImage.tsx
@@ -0,0 +1,62 @@
+import { useState, useEffect } from "react";
+import { PictureOfDay } from "./DisplayPicture";
+import { fetchAPI } from "../utils/fetchData";
+
+interface PreviewImageProp {
+    image: PictureOfDay;
+}
+
+interface ImageProps {
+    setMyPreviewImage: React.Dispatch<React.SetStateAction<PictureOfDay | null>>
+}
+
+interface BirthdayProps {
+    event: React.FormEvent<HTMLFormElement>;
+    setMyPreviewImage: React.Dispatch<React.SetStateAction<PictureOfDay | null>>
+}
+
+const getTodaysImage = async (getTodaysImageProps: ImageProps) => {
+    const todaysPicture = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=")
+    getTodaysImageProps.setMyPreviewImage(todaysPicture);
+}
+
+export function PreviewImage() {
+
+    const [myPreviewImage, setMyPreviewImage] = useState<PictureOfDay | null>(null);
+    const [birthday, setBirthday] = useState('');
+
+    const handleSubmit = async (getBirthdayProps: BirthdayProps) => {
+
+        getBirthdayProps.event.preventDefault();
+        const userBirthdayImage = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=", birthday);
+        
+        getBirthdayProps.setMyPreviewImage(userBirthdayImage);
+    }
+
+    return (
+        <>
+            <h4>CHOOSE THE IMAGE YOU WANT TO DISPLAY:</h4>
+
+            {/* <button type="button" id="random-date-button" onClick={getRandomDateImage}>Random</button> */}
+
+            <button type="button"
+                id="todays-date-button"
+                onClick={() => getTodaysImage({ setMyPreviewImage })}>Today</button>
+
+            <form onSubmit={(event) => handleSubmit({ event, setMyPreviewImage })}>
+
+                <label>Birthday</label>
+                <input
+                    type="date"
+                    id="birthday"
+                    value={birthday}
+                    onChange={(e) => setBirthday(e.target.value)}
+                />
+                <button type="submit">Submit</button>
+            </form>
+
+            <img src={myPreviewImage?.url} alt={myPreviewImage?.explanation} className="preview-chosen-image"/>
+        </>
+    )
+
+}
\ No newline at end of file

From eeff76ae906ae3a213035e832a77b4f1cdc4c99f Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Thu, 1 Aug 2024 16:23:21 +0100
Subject: [PATCH 02/12] Revert "add buttons and display preview image"

This reverts commit 6784c741d4701a112ee7df902f68908743e5be50.
---
 src/App.scss                  |  5 ---
 src/Home/Home.tsx             |  3 --
 src/images/DisplayPicture.tsx |  2 +-
 src/images/PreviewImage.tsx   | 62 -----------------------------------
 4 files changed, 1 insertion(+), 71 deletions(-)
 delete mode 100644 src/images/PreviewImage.tsx

diff --git a/src/App.scss b/src/App.scss
index 6b726f7..c1e1e98 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -45,9 +45,4 @@ a {
   color: $text-color;
   width: 100vw;
   height: 100vh;
-}
-
-.preview-chosen-image {
-  margin: 2vw;
-  width: 300px;
 }
\ No newline at end of file
diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index 99e8ff2..14640c6 100644
--- a/src/Home/Home.tsx
+++ b/src/Home/Home.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
-import { PreviewImage } from "../images/PreviewImage";
 
 interface getUserProp{
     username:string;
@@ -43,8 +42,6 @@ function Home(props:getUserProp) {
                     {submitStatus ? <p>Welcome {props.username}!</p> : null}
                 </form>
 
-                <PreviewImage />
-
                 <button className="startQuizButton" onClick={routeChange}>
                      Start quiz 
                 </button>
diff --git a/src/images/DisplayPicture.tsx b/src/images/DisplayPicture.tsx
index c4969c8..5b4f978 100644
--- a/src/images/DisplayPicture.tsx
+++ b/src/images/DisplayPicture.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { fetchAPI } from '../utils/fetchData';
 
-export interface PictureOfDay {
+interface PictureOfDay {
     date: string,
     explanation: string,
     hdurl: string,
diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
deleted file mode 100644
index 78b7be3..0000000
--- a/src/images/PreviewImage.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useState, useEffect } from "react";
-import { PictureOfDay } from "./DisplayPicture";
-import { fetchAPI } from "../utils/fetchData";
-
-interface PreviewImageProp {
-    image: PictureOfDay;
-}
-
-interface ImageProps {
-    setMyPreviewImage: React.Dispatch<React.SetStateAction<PictureOfDay | null>>
-}
-
-interface BirthdayProps {
-    event: React.FormEvent<HTMLFormElement>;
-    setMyPreviewImage: React.Dispatch<React.SetStateAction<PictureOfDay | null>>
-}
-
-const getTodaysImage = async (getTodaysImageProps: ImageProps) => {
-    const todaysPicture = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=")
-    getTodaysImageProps.setMyPreviewImage(todaysPicture);
-}
-
-export function PreviewImage() {
-
-    const [myPreviewImage, setMyPreviewImage] = useState<PictureOfDay | null>(null);
-    const [birthday, setBirthday] = useState('');
-
-    const handleSubmit = async (getBirthdayProps: BirthdayProps) => {
-
-        getBirthdayProps.event.preventDefault();
-        const userBirthdayImage = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=", birthday);
-        
-        getBirthdayProps.setMyPreviewImage(userBirthdayImage);
-    }
-
-    return (
-        <>
-            <h4>CHOOSE THE IMAGE YOU WANT TO DISPLAY:</h4>
-
-            {/* <button type="button" id="random-date-button" onClick={getRandomDateImage}>Random</button> */}
-
-            <button type="button"
-                id="todays-date-button"
-                onClick={() => getTodaysImage({ setMyPreviewImage })}>Today</button>
-
-            <form onSubmit={(event) => handleSubmit({ event, setMyPreviewImage })}>
-
-                <label>Birthday</label>
-                <input
-                    type="date"
-                    id="birthday"
-                    value={birthday}
-                    onChange={(e) => setBirthday(e.target.value)}
-                />
-                <button type="submit">Submit</button>
-            </form>
-
-            <img src={myPreviewImage?.url} alt={myPreviewImage?.explanation} className="preview-chosen-image"/>
-        </>
-    )
-
-}
\ No newline at end of file

From d42329f7cb9114ba175b86f3b6a7f869158e2833 Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Thu, 1 Aug 2024 12:01:11 +0100
Subject: [PATCH 03/12] add BirthdayForm and buttons to Home.tsx

---
 src/Forms/BirthdayForm.tsx | 29 +++++++++++++++++++++++++++++
 src/utils/fetchData.ts     | 12 +++++++++++-
 src/utils/getDates.ts      | 11 +++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/Forms/BirthdayForm.tsx
 create mode 100644 src/utils/getDates.ts

diff --git a/src/Forms/BirthdayForm.tsx b/src/Forms/BirthdayForm.tsx
new file mode 100644
index 0000000..69af3d4
--- /dev/null
+++ b/src/Forms/BirthdayForm.tsx
@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+function BirthdayForm() {
+  const [birthday, setBirthday] = useState('');
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault(); 
+    getBirthday(birthday); 
+  };
+
+  const getBirthday = (date: string) => {
+    console.log("Birthday:", date);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>Birthday</label>
+      <input
+        type="date"
+        id="birthday"
+        value={birthday}
+        onChange={(e) => setBirthday(e.target.value)}
+      />
+      <button type="submit">Submit</button>
+    </form>
+  );
+}
+
+export default BirthdayForm;
diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts
index cda5b80..42efc23 100644
--- a/src/utils/fetchData.ts
+++ b/src/utils/fetchData.ts
@@ -16,7 +16,17 @@ export async function fetchAPI(apiUrl: string, date = todaysDate) {
             throw new Error('Network response was not ok');
         }
 
-        const pictureData = await response.json();
+        //test code
+        // const pictureData = await response.json();
+        const pictureData = {
+            "date": "2024-07-30",
+            "explanation": "To some, it looks like a penguin. But to people who study the universe, it is an interesting example of two big galaxies interacting. Just a few hundred million years ago, the upper NGC 2936 was likely a normal spiral galaxy: spinning, creating stars, and minding its own business.  Then it got too close to the massive elliptical galaxy NGC 2937, below, and took a dive.  Together known as Arp 142, they are featured in this new Webb infrared image, while a visible light Hubble image appears in comparison.  NGC 2936 is not only being deflected, but distorted, by this close gravitational interaction.  When massive galaxies pass near each other, gas is typically condensed from which new stars form.  A young group of stars appears as the nose of the penguin toward the right of the upper galaxy, while in the center of the spiral, bright stars together appear as an eye.  Before a billion years, the two galaxies will likely merge into one larger galaxy.   Explore Your Universe: Random APOD Generator",
+            "hdurl": "https://apod.nasa.gov/apod/image/2407/Arp142_Webb_1487.jpg",
+            "media_type": "image",
+            "service_version": "v1",
+            "title": "Arp 142: Interacting Galaxies from Webb",
+            "url": "https://apod.nasa.gov/apod/image/2407/Arp142_Webb_960.jpg"
+        }
         console.log(pictureData);
         return pictureData;
     } catch (err) {
diff --git a/src/utils/getDates.ts b/src/utils/getDates.ts
new file mode 100644
index 0000000..0b9aef0
--- /dev/null
+++ b/src/utils/getDates.ts
@@ -0,0 +1,11 @@
+export function getBirthday() {
+
+}
+
+export function getTodaysDate() {
+
+}
+
+export function getRandomDate() {
+
+}
\ No newline at end of file

From 8218da3e8bb229a87748c3f52c9b3efc4aecc713 Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Thu, 1 Aug 2024 12:29:43 +0100
Subject: [PATCH 04/12] Add PreviewImage , not working yet

---
 src/Home/Home.tsx             |  2 ++
 src/images/DisplayPicture.tsx |  2 +-
 src/images/PreviewImage.tsx   | 16 ++++++++++++++++
 src/utils/fetchData.ts        |  4 +++-
 4 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 src/images/PreviewImage.tsx

diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index 6cd6766..2de621b 100644
--- a/src/Home/Home.tsx
+++ b/src/Home/Home.tsx
@@ -25,6 +25,8 @@ function Home(props:HomeProps) {
 
     const homeBackgroundImage = DisplayBackgroundImage();
 
+    const UserDisplayImage = fetchAPI("https://api.nasa.gov/planetary/apod?api_key=");
+
     return (
         <>
             <main className="home-content" style={{ backgroundImage: `url(${homeBackgroundImage})` }}>
diff --git a/src/images/DisplayPicture.tsx b/src/images/DisplayPicture.tsx
index 5b4f978..c4969c8 100644
--- a/src/images/DisplayPicture.tsx
+++ b/src/images/DisplayPicture.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { fetchAPI } from '../utils/fetchData';
 
-interface PictureOfDay {
+export interface PictureOfDay {
     date: string,
     explanation: string,
     hdurl: string,
diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
new file mode 100644
index 0000000..89c65b5
--- /dev/null
+++ b/src/images/PreviewImage.tsx
@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+import { PictureOfDay } from "./DisplayPicture";
+
+export function PreviewImage({ imageProp }: { imageProp: PictureOfDay }) {
+
+    const [myPreviewImage, setMyPreviewImage] = useState<PictureOfDay | null>(null);
+
+    useEffect(() => {
+        setMyPreviewImage(imageProp);
+    }, [])
+
+    return (
+        <img src={myPreviewImage?.url} alt={myPreviewImage?.explanation}/>
+    )
+
+}
\ No newline at end of file
diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts
index 42efc23..f9fc9a7 100644
--- a/src/utils/fetchData.ts
+++ b/src/utils/fetchData.ts
@@ -27,7 +27,9 @@ export async function fetchAPI(apiUrl: string, date = todaysDate) {
             "title": "Arp 142: Interacting Galaxies from Webb",
             "url": "https://apod.nasa.gov/apod/image/2407/Arp142_Webb_960.jpg"
         }
-        console.log(pictureData);
+
+        // console.log(pictureData);
+
         return pictureData;
     } catch (err) {
         throw err;

From cc6cf7f8b70253364edf208a6a75d3a15a21390b Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Thu, 1 Aug 2024 13:45:36 +0100
Subject: [PATCH 05/12] Working on PreviewImage, not ready yet

---
 src/Home/Home.tsx           | 2 --
 src/images/PreviewImage.tsx | 8 ++++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index 2de621b..6cd6766 100644
--- a/src/Home/Home.tsx
+++ b/src/Home/Home.tsx
@@ -25,8 +25,6 @@ function Home(props:HomeProps) {
 
     const homeBackgroundImage = DisplayBackgroundImage();
 
-    const UserDisplayImage = fetchAPI("https://api.nasa.gov/planetary/apod?api_key=");
-
     return (
         <>
             <main className="home-content" style={{ backgroundImage: `url(${homeBackgroundImage})` }}>
diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
index 89c65b5..e2c915b 100644
--- a/src/images/PreviewImage.tsx
+++ b/src/images/PreviewImage.tsx
@@ -1,12 +1,16 @@
 import { useState, useEffect } from "react";
 import { PictureOfDay } from "./DisplayPicture";
 
-export function PreviewImage({ imageProp }: { imageProp: PictureOfDay }) {
+interface PreviewImageProp {
+    image: PictureOfDay;
+}
+
+    export function PreviewImage(imageProp: PreviewImageProp) { 
 
     const [myPreviewImage, setMyPreviewImage] = useState<PictureOfDay | null>(null);
 
     useEffect(() => {
-        setMyPreviewImage(imageProp);
+        setMyPreviewImage(imageProp.image); 
     }, [])
 
     return (

From ba9fbfd45f8ba97b72ca1645d03f9ce38726a6af Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Thu, 1 Aug 2024 16:28:55 +0100
Subject: [PATCH 06/12] added buttons and preview image , not working after
 rebase

---
 src/App.scss                |  4 +++
 src/Home/Home.tsx           |  2 ++
 src/images/PreviewImage.tsx | 52 +++++++++++++++++++++++++++++++++----
 3 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 9211e61..5c1d43a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -51,4 +51,8 @@ a {
   display: flex;
   flex-direction: column;
   height: 100vh;
+}
+.preview-chosen-image {
+  margin: 2vw;
+  width: 300px;
 }
\ No newline at end of file
diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx
index 6cd6766..49a1593 100644
--- a/src/Home/Home.tsx
+++ b/src/Home/Home.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import DisplayBackgroundImage from '../images/DisplayBackgroundImage';
 import './Home.scss'
+import { PreviewImage } from "../images/PreviewImage";
 
 interface HomeProps{
     username:string;
@@ -39,6 +40,7 @@ function Home(props:HomeProps) {
                     <button type="submit">Submit</button>
                     {submitStatus ? <p>Welcome {props.username}!</p> : null}
                 </form>
+                <PreviewImage/>
                 <button className="startQuizButton" onClick={routeChange}>
                      Start quiz 
                 </button>
diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
index e2c915b..78b7be3 100644
--- a/src/images/PreviewImage.tsx
+++ b/src/images/PreviewImage.tsx
@@ -1,20 +1,62 @@
 import { useState, useEffect } from "react";
 import { PictureOfDay } from "./DisplayPicture";
+import { fetchAPI } from "../utils/fetchData";
 
 interface PreviewImageProp {
     image: PictureOfDay;
 }
 
-    export function PreviewImage(imageProp: PreviewImageProp) { 
+interface ImageProps {
+    setMyPreviewImage: React.Dispatch<React.SetStateAction<PictureOfDay | null>>
+}
+
+interface BirthdayProps {
+    event: React.FormEvent<HTMLFormElement>;
+    setMyPreviewImage: React.Dispatch<React.SetStateAction<PictureOfDay | null>>
+}
+
+const getTodaysImage = async (getTodaysImageProps: ImageProps) => {
+    const todaysPicture = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=")
+    getTodaysImageProps.setMyPreviewImage(todaysPicture);
+}
+
+export function PreviewImage() {
 
     const [myPreviewImage, setMyPreviewImage] = useState<PictureOfDay | null>(null);
+    const [birthday, setBirthday] = useState('');
 
-    useEffect(() => {
-        setMyPreviewImage(imageProp.image); 
-    }, [])
+    const handleSubmit = async (getBirthdayProps: BirthdayProps) => {
+
+        getBirthdayProps.event.preventDefault();
+        const userBirthdayImage = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=", birthday);
+        
+        getBirthdayProps.setMyPreviewImage(userBirthdayImage);
+    }
 
     return (
-        <img src={myPreviewImage?.url} alt={myPreviewImage?.explanation}/>
+        <>
+            <h4>CHOOSE THE IMAGE YOU WANT TO DISPLAY:</h4>
+
+            {/* <button type="button" id="random-date-button" onClick={getRandomDateImage}>Random</button> */}
+
+            <button type="button"
+                id="todays-date-button"
+                onClick={() => getTodaysImage({ setMyPreviewImage })}>Today</button>
+
+            <form onSubmit={(event) => handleSubmit({ event, setMyPreviewImage })}>
+
+                <label>Birthday</label>
+                <input
+                    type="date"
+                    id="birthday"
+                    value={birthday}
+                    onChange={(e) => setBirthday(e.target.value)}
+                />
+                <button type="submit">Submit</button>
+            </form>
+
+            <img src={myPreviewImage?.url} alt={myPreviewImage?.explanation} className="preview-chosen-image"/>
+        </>
     )
 
 }
\ No newline at end of file

From 1f1fbc458b24eac388cfeecb7a79e38b6d5be024 Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Thu, 1 Aug 2024 18:52:16 +0100
Subject: [PATCH 07/12] remove test code

---
 src/images/PreviewImage.tsx | 45 +++++++++++++++++++++----------------
 src/utils/fetchData.ts      | 16 +------------
 2 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
index 78b7be3..af5ff00 100644
--- a/src/images/PreviewImage.tsx
+++ b/src/images/PreviewImage.tsx
@@ -6,44 +6,51 @@ interface PreviewImageProp {
     image: PictureOfDay;
 }
 
-interface ImageProps {
-    setMyPreviewImage: React.Dispatch<React.SetStateAction<PictureOfDay | null>>
-}
-
 interface BirthdayProps {
-    event: React.FormEvent<HTMLFormElement>;
+    event: React.FormEvent<HTMLFormElement>
     setMyPreviewImage: React.Dispatch<React.SetStateAction<PictureOfDay | null>>
 }
 
-const getTodaysImage = async (getTodaysImageProps: ImageProps) => {
-    const todaysPicture = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=")
-    getTodaysImageProps.setMyPreviewImage(todaysPicture);
-}
 
 export function PreviewImage() {
 
     const [myPreviewImage, setMyPreviewImage] = useState<PictureOfDay | null>(null);
     const [birthday, setBirthday] = useState('');
 
-    const handleSubmit = async (getBirthdayProps: BirthdayProps) => {
+    const handleTodayButtonClick = async () => {
+        try {
+            const todaysPicture = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=");
+            setMyPreviewImage(todaysPicture);
+            console.log(myPreviewImage);
 
-        getBirthdayProps.event.preventDefault();
-        const userBirthdayImage = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=", birthday);
-        
-        getBirthdayProps.setMyPreviewImage(userBirthdayImage);
+        }
+        catch (error) {
+            console.error("Error fetching today's image:", error);
+        }
+
+    }
+
+    const handleBirthdayFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        try {
+            console.log(birthday);
+            const userBirthdayImage = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=", birthday);
+            setMyPreviewImage(userBirthdayImage);
+            console.log(myPreviewImage);
+        } catch (error) {
+            console.error("Error fetching today's image:", error);
+        }
     }
 
     return (
         <>
             <h4>CHOOSE THE IMAGE YOU WANT TO DISPLAY:</h4>
 
-            {/* <button type="button" id="random-date-button" onClick={getRandomDateImage}>Random</button> */}
-
             <button type="button"
                 id="todays-date-button"
-                onClick={() => getTodaysImage({ setMyPreviewImage })}>Today</button>
+                onClick={handleTodayButtonClick}>Today</button>
 
-            <form onSubmit={(event) => handleSubmit({ event, setMyPreviewImage })}>
+            <form onSubmit={handleBirthdayFormSubmit}>
 
                 <label>Birthday</label>
                 <input
@@ -55,7 +62,7 @@ export function PreviewImage() {
                 <button type="submit">Submit</button>
             </form>
 
-            <img src={myPreviewImage?.url} alt={myPreviewImage?.explanation} className="preview-chosen-image"/>
+            <img src={myPreviewImage?.url} alt={myPreviewImage?.explanation} className="preview-chosen-image" />
         </>
     )
 
diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts
index f9fc9a7..f250d40 100644
--- a/src/utils/fetchData.ts
+++ b/src/utils/fetchData.ts
@@ -15,21 +15,7 @@ export async function fetchAPI(apiUrl: string, date = todaysDate) {
         if (!response.ok) {
             throw new Error('Network response was not ok');
         }
-
-        //test code
-        // const pictureData = await response.json();
-        const pictureData = {
-            "date": "2024-07-30",
-            "explanation": "To some, it looks like a penguin. But to people who study the universe, it is an interesting example of two big galaxies interacting. Just a few hundred million years ago, the upper NGC 2936 was likely a normal spiral galaxy: spinning, creating stars, and minding its own business.  Then it got too close to the massive elliptical galaxy NGC 2937, below, and took a dive.  Together known as Arp 142, they are featured in this new Webb infrared image, while a visible light Hubble image appears in comparison.  NGC 2936 is not only being deflected, but distorted, by this close gravitational interaction.  When massive galaxies pass near each other, gas is typically condensed from which new stars form.  A young group of stars appears as the nose of the penguin toward the right of the upper galaxy, while in the center of the spiral, bright stars together appear as an eye.  Before a billion years, the two galaxies will likely merge into one larger galaxy.   Explore Your Universe: Random APOD Generator",
-            "hdurl": "https://apod.nasa.gov/apod/image/2407/Arp142_Webb_1487.jpg",
-            "media_type": "image",
-            "service_version": "v1",
-            "title": "Arp 142: Interacting Galaxies from Webb",
-            "url": "https://apod.nasa.gov/apod/image/2407/Arp142_Webb_960.jpg"
-        }
-
-        // console.log(pictureData);
-
+        const pictureData = await response.json();
         return pictureData;
     } catch (err) {
         throw err;

From 2c42f72be08575ca03a01d2a6464119a1b690c9c Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Fri, 2 Aug 2024 09:58:17 +0100
Subject: [PATCH 08/12] remove console.log test code

---
 src/images/PreviewImage.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
index af5ff00..4d3815c 100644
--- a/src/images/PreviewImage.tsx
+++ b/src/images/PreviewImage.tsx
@@ -21,8 +21,6 @@ export function PreviewImage() {
         try {
             const todaysPicture = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=");
             setMyPreviewImage(todaysPicture);
-            console.log(myPreviewImage);
-
         }
         catch (error) {
             console.error("Error fetching today's image:", error);
@@ -33,10 +31,8 @@ export function PreviewImage() {
     const handleBirthdayFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault();
         try {
-            console.log(birthday);
             const userBirthdayImage = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=", birthday);
             setMyPreviewImage(userBirthdayImage);
-            console.log(myPreviewImage);
         } catch (error) {
             console.error("Error fetching today's image:", error);
         }

From 04441b4439d506f915cfd2ea927aac6a90392183 Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Fri, 2 Aug 2024 10:06:54 +0100
Subject: [PATCH 09/12] remove obsolete lines and code

---
 src/images/PreviewImage.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
index 4d3815c..1db16e4 100644
--- a/src/images/PreviewImage.tsx
+++ b/src/images/PreviewImage.tsx
@@ -6,12 +6,6 @@ interface PreviewImageProp {
     image: PictureOfDay;
 }
 
-interface BirthdayProps {
-    event: React.FormEvent<HTMLFormElement>
-    setMyPreviewImage: React.Dispatch<React.SetStateAction<PictureOfDay | null>>
-}
-
-
 export function PreviewImage() {
 
     const [myPreviewImage, setMyPreviewImage] = useState<PictureOfDay | null>(null);
@@ -25,7 +19,6 @@ export function PreviewImage() {
         catch (error) {
             console.error("Error fetching today's image:", error);
         }
-
     }
 
     const handleBirthdayFormSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -47,7 +40,6 @@ export function PreviewImage() {
                 onClick={handleTodayButtonClick}>Today</button>
 
             <form onSubmit={handleBirthdayFormSubmit}>
-
                 <label>Birthday</label>
                 <input
                     type="date"

From c93ce0e47e9953b3afc4e0b6cf742c5cb03f8721 Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Fri, 2 Aug 2024 10:15:11 +0100
Subject: [PATCH 10/12] add button for random

---
 src/images/PreviewImage.tsx | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
index 1db16e4..0899937 100644
--- a/src/images/PreviewImage.tsx
+++ b/src/images/PreviewImage.tsx
@@ -1,16 +1,24 @@
 import { useState, useEffect } from "react";
 import { PictureOfDay } from "./DisplayPicture";
-import { fetchAPI } from "../utils/fetchData";
-
-interface PreviewImageProp {
-    image: PictureOfDay;
-}
+import { fetchAPI, fetchRandomAPI } from "../utils/fetchData";
 
 export function PreviewImage() {
 
     const [myPreviewImage, setMyPreviewImage] = useState<PictureOfDay | null>(null);
     const [birthday, setBirthday] = useState('');
 
+    const handleRandomButtonClick = async () => {
+        try {
+            const randomPicture = await fetchRandomAPI("https://api.nasa.gov/planetary/apod?api_key=");
+            setMyPreviewImage(randomPicture);
+            console.log(myPreviewImage);
+
+        }
+        catch (error) {
+            console.error("Error fetching today's image:", error);
+        }
+    }
+
     const handleTodayButtonClick = async () => {
         try {
             const todaysPicture = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key=");
@@ -34,11 +42,14 @@ export function PreviewImage() {
     return (
         <>
             <h4>CHOOSE THE IMAGE YOU WANT TO DISPLAY:</h4>
-
             <button type="button"
                 id="todays-date-button"
                 onClick={handleTodayButtonClick}>Today</button>
 
+            <button type="button"
+                id="random-button"
+                onClick={handleRandomButtonClick}>Random</button>
+                
             <form onSubmit={handleBirthdayFormSubmit}>
                 <label>Birthday</label>
                 <input
@@ -49,7 +60,6 @@ export function PreviewImage() {
                 />
                 <button type="submit">Submit</button>
             </form>
-
             <img src={myPreviewImage?.url} alt={myPreviewImage?.explanation} className="preview-chosen-image" />
         </>
     )

From 533e5e5e467a1625d40cb0ab3944451899228f80 Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Fri, 2 Aug 2024 10:27:59 +0100
Subject: [PATCH 11/12] remove useEffect which is never used

---
 src/images/PreviewImage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
index 0899937..229cba2 100644
--- a/src/images/PreviewImage.tsx
+++ b/src/images/PreviewImage.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { PictureOfDay } from "./DisplayPicture";
 import { fetchAPI, fetchRandomAPI } from "../utils/fetchData";
 

From 093c386f6e8787d213e864ce4a77dfe5929598dd Mon Sep 17 00:00:00 2001
From: Dorothy Wong <dorothyynwong@gmail.com>
Date: Fri, 2 Aug 2024 11:05:55 +0100
Subject: [PATCH 12/12] remove getDates.ts, add index number for getting
 randomPicture in PreviewImage.tsx

---
 src/images/PreviewImage.tsx |  2 +-
 src/utils/getDates.ts       | 11 -----------
 2 files changed, 1 insertion(+), 12 deletions(-)
 delete mode 100644 src/utils/getDates.ts

diff --git a/src/images/PreviewImage.tsx b/src/images/PreviewImage.tsx
index 229cba2..f24b9e9 100644
--- a/src/images/PreviewImage.tsx
+++ b/src/images/PreviewImage.tsx
@@ -10,7 +10,7 @@ export function PreviewImage() {
     const handleRandomButtonClick = async () => {
         try {
             const randomPicture = await fetchRandomAPI("https://api.nasa.gov/planetary/apod?api_key=");
-            setMyPreviewImage(randomPicture);
+            setMyPreviewImage(randomPicture[0]);
             console.log(myPreviewImage);
 
         }
diff --git a/src/utils/getDates.ts b/src/utils/getDates.ts
deleted file mode 100644
index 0b9aef0..0000000
--- a/src/utils/getDates.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export function getBirthday() {
-
-}
-
-export function getTodaysDate() {
-
-}
-
-export function getRandomDate() {
-
-}
\ No newline at end of file