add button for random

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" />
         </>
     )