From 4f3d3b85aac65fe9a7c6bd74b27993506438a23b Mon Sep 17 00:00:00 2001 From: claudiaGiancola Date: Tue, 30 Jul 2024 14:01:26 +0100 Subject: [PATCH 01/18] fetch and display picture of the day implemented + .env variable in progress Co-authored-by: Dorothy Wong --- .env.template | 4 --- src/App.tsx | 2 ++ src/images/FetchImage.tsx | 56 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 58 insertions(+), 4 deletions(-) delete mode 100644 .env.template create mode 100644 src/images/FetchImage.tsx diff --git a/.env.template b/.env.template deleted file mode 100644 index a3ac516..0000000 --- a/.env.template +++ /dev/null @@ -1,4 +0,0 @@ -# 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 - -NASA-API-KEY=add-your-key-here \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 1e256f3..02eaf7e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,8 @@ function App() {

MarsioKart

+ {/* example of using DisplayPictureOfDay */} + {/* */} }/> diff --git a/src/images/FetchImage.tsx b/src/images/FetchImage.tsx new file mode 100644 index 0000000..a3ff59a --- /dev/null +++ b/src/images/FetchImage.tsx @@ -0,0 +1,56 @@ +import React, { useState, useEffect } from 'react'; + +interface PictureOfDay { + date: string, + explanation: string, + hdurl: string, + title: string, + url: string +} + +export const DisplayPictureOfDay: React.FC = () => { + + const apiKey = process.env.NASA_API_KEY; + + const [myPictureData, setMyPictureData] = useState(null); + + const FetchPictureOfDay = async () => { + + const response = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}`); + const pictureData = await response.json(); + + //test picture data for when the API requests have reached their limit: + // 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); + setMyPictureData(pictureData); + } + + useEffect(() => { + FetchPictureOfDay(); + }, []) + + if (!myPictureData) { + return (
EMPTY
) + } + + + return ( + <> +

{myPictureData.title}

+

{myPictureData.date}

+

{myPictureData.explanation}

+ + + + ) + +}; \ No newline at end of file From 90629db21882ebe03c562170f339918be21b081e Mon Sep 17 00:00:00 2001 From: Dorothy Wong Date: Tue, 30 Jul 2024 14:45:05 +0100 Subject: [PATCH 02/18] use .env value for apikey --- src/images/FetchImage.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/images/FetchImage.tsx b/src/images/FetchImage.tsx index a3ff59a..a8bb21d 100644 --- a/src/images/FetchImage.tsx +++ b/src/images/FetchImage.tsx @@ -10,13 +10,16 @@ interface PictureOfDay { export const DisplayPictureOfDay: React.FC = () => { - const apiKey = process.env.NASA_API_KEY; + const [myPictureData, setMyPictureData] = useState(null); const FetchPictureOfDay = async () => { + const apiKey = process.env.REACT_APP_NASA_API_KEY; + const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` + console.log(apiKey); + const response = await fetch(link); - const response = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${apiKey}`); const pictureData = await response.json(); //test picture data for when the API requests have reached their limit: From d4b779f0b3f262208ee394e4bdfb40b6c39f9d50 Mon Sep 17 00:00:00 2001 From: Dorothy Wong Date: Tue, 30 Jul 2024 16:48:59 +0100 Subject: [PATCH 03/18] remove line 12, 13 blank lines --- src/images/FetchImage.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/images/FetchImage.tsx b/src/images/FetchImage.tsx index a8bb21d..0aae441 100644 --- a/src/images/FetchImage.tsx +++ b/src/images/FetchImage.tsx @@ -10,8 +10,6 @@ interface PictureOfDay { export const DisplayPictureOfDay: React.FC = () => { - - const [myPictureData, setMyPictureData] = useState(null); const FetchPictureOfDay = async () => { From d3ea31c585d21e4cf5db9f53d2be91951f518533 Mon Sep 17 00:00:00 2001 From: claudiaGiancola Date: Tue, 30 Jul 2024 14:01:26 +0100 Subject: [PATCH 04/18] fetch and display picture of the day implemented + .env variable in progress Co-authored-by: Dorothy Wong --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 02eaf7e..398348b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,5 @@ 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 { Quiz } from './Quiz/Quiz'; From 74b449b5bb924db0eac7d0be3f73c4d474b06f6b Mon Sep 17 00:00:00 2001 From: claudiaGiancola Date: Tue, 30 Jul 2024 15:50:31 +0100 Subject: [PATCH 05/18] cleaned up spaces in code lines --- src/images/FetchImage.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/images/FetchImage.tsx b/src/images/FetchImage.tsx index 0aae441..6620f0f 100644 --- a/src/images/FetchImage.tsx +++ b/src/images/FetchImage.tsx @@ -8,14 +8,16 @@ interface PictureOfDay { url: string } -export const DisplayPictureOfDay: React.FC = () => { +export const DisplayPictureOfDay: React.FC = () => { const [myPictureData, setMyPictureData] = useState(null); const FetchPictureOfDay = async () => { + const apiKey = process.env.REACT_APP_NASA_API_KEY; const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` - console.log(apiKey); + // console.log(apiKey); + const response = await fetch(link); const pictureData = await response.json(); From c597d9556f6fc29cbce4ea576fb8ca227bc403fe Mon Sep 17 00:00:00 2001 From: claudiaGiancola Date: Tue, 30 Jul 2024 14:01:26 +0100 Subject: [PATCH 06/18] fetch and display picture of the day implemented + .env variable in progress Co-authored-by: Dorothy Wong --- src/App.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 398348b..e866709 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,8 +10,6 @@ function App() {

MarsioKart

- {/* example of using DisplayPictureOfDay */} - {/* */} }/> From c6c810bfefafb8726ee4a8570b9118a65cb3f9a0 Mon Sep 17 00:00:00 2001 From: Dorothy Wong Date: Tue, 30 Jul 2024 14:45:05 +0100 Subject: [PATCH 07/18] use .env value for apikey --- src/images/FetchImage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/images/FetchImage.tsx b/src/images/FetchImage.tsx index 6620f0f..a8bb21d 100644 --- a/src/images/FetchImage.tsx +++ b/src/images/FetchImage.tsx @@ -8,16 +8,16 @@ interface PictureOfDay { url: string } -export const DisplayPictureOfDay: React.FC = () => { +export const DisplayPictureOfDay: React.FC = () => { + + const [myPictureData, setMyPictureData] = useState(null); const FetchPictureOfDay = async () => { - const apiKey = process.env.REACT_APP_NASA_API_KEY; const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` - // console.log(apiKey); - + console.log(apiKey); const response = await fetch(link); const pictureData = await response.json(); From 05254dbfc2ffd2ff706ed0d731c76e1a6069b752 Mon Sep 17 00:00:00 2001 From: claudiaGiancola Date: Tue, 30 Jul 2024 15:50:31 +0100 Subject: [PATCH 08/18] cleaned up spaces in code lines --- src/images/FetchImage.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/images/FetchImage.tsx b/src/images/FetchImage.tsx index a8bb21d..6620f0f 100644 --- a/src/images/FetchImage.tsx +++ b/src/images/FetchImage.tsx @@ -8,16 +8,16 @@ interface PictureOfDay { url: string } -export const DisplayPictureOfDay: React.FC = () => { - - +export const DisplayPictureOfDay: React.FC = () => { const [myPictureData, setMyPictureData] = useState(null); const FetchPictureOfDay = async () => { + const apiKey = process.env.REACT_APP_NASA_API_KEY; const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` - console.log(apiKey); + // console.log(apiKey); + const response = await fetch(link); const pictureData = await response.json(); From be91182584b1de34d0bab8a9efd6db4d5f7de317 Mon Sep 17 00:00:00 2001 From: claudiaGiancola Date: Tue, 30 Jul 2024 14:01:26 +0100 Subject: [PATCH 09/18] fetch and display picture of the day implemented + .env variable in progress Co-authored-by: Dorothy Wong --- src/App.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index e866709..3ac9c51 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,8 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import './App.scss'; import Home from './Home/Home'; +// line below is just an example of what to import to use the DisplayPictureOfDay function +// import { DisplayPictureOfDay } from './images/Fetch import { Quiz } from './Quiz/Quiz'; import Footer from './Footer/Footer'; @@ -10,6 +12,8 @@ function App() {

MarsioKart

+ {/* line below is just an example of what to import to use the DisplayPictureOfDay function */} + {/* */} }/> From 878cf9dd85f6e1134b521f7e893f5cee0e1eef05 Mon Sep 17 00:00:00 2001 From: Dorothy Wong Date: Tue, 30 Jul 2024 14:45:05 +0100 Subject: [PATCH 10/18] use .env value for apikey --- src/images/FetchImage.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/images/FetchImage.tsx b/src/images/FetchImage.tsx index 6620f0f..1e93416 100644 --- a/src/images/FetchImage.tsx +++ b/src/images/FetchImage.tsx @@ -13,6 +13,10 @@ export const DisplayPictureOfDay: React.FC = () => { const [myPictureData, setMyPictureData] = useState(null); const FetchPictureOfDay = async () => { + const apiKey = process.env.REACT_APP_NASA_API_KEY; + const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` + console.log(apiKey); + const response = await fetch(link); const apiKey = process.env.REACT_APP_NASA_API_KEY; const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` From ae606b26602076d844edd14362fb660a74449ce9 Mon Sep 17 00:00:00 2001 From: claudiaGiancola Date: Tue, 30 Jul 2024 15:50:31 +0100 Subject: [PATCH 11/18] cleaned up spaces in code lines --- src/images/FetchImage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/images/FetchImage.tsx b/src/images/FetchImage.tsx index 1e93416..1bb8b08 100644 --- a/src/images/FetchImage.tsx +++ b/src/images/FetchImage.tsx @@ -13,9 +13,11 @@ export const DisplayPictureOfDay: React.FC = () => { const [myPictureData, setMyPictureData] = useState(null); const FetchPictureOfDay = async () => { + const apiKey = process.env.REACT_APP_NASA_API_KEY; const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` - console.log(apiKey); + // console.log(apiKey); + const response = await fetch(link); const apiKey = process.env.REACT_APP_NASA_API_KEY; From 3ac8e3bb4ac09fdee031d41a1c76e9542ff19b05 Mon Sep 17 00:00:00 2001 From: Dorothy Wong Date: Tue, 30 Jul 2024 14:45:05 +0100 Subject: [PATCH 12/18] use .env value for apikey --- src/images/FetchImage.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/images/FetchImage.tsx b/src/images/FetchImage.tsx index 1bb8b08..3ea6aa3 100644 --- a/src/images/FetchImage.tsx +++ b/src/images/FetchImage.tsx @@ -13,6 +13,10 @@ export const DisplayPictureOfDay: React.FC = () => { const [myPictureData, setMyPictureData] = useState(null); const FetchPictureOfDay = async () => { + const apiKey = process.env.REACT_APP_NASA_API_KEY; + const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` + console.log(apiKey); + const response = await fetch(link); const apiKey = process.env.REACT_APP_NASA_API_KEY; const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` From c8a463ff9a8d26ad46ddcec147ce3628e9c9301c Mon Sep 17 00:00:00 2001 From: claudiaGiancola Date: Tue, 30 Jul 2024 15:50:31 +0100 Subject: [PATCH 13/18] cleaned up spaces in code lines --- src/images/FetchImage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/images/FetchImage.tsx b/src/images/FetchImage.tsx index 3ea6aa3..3851ebe 100644 --- a/src/images/FetchImage.tsx +++ b/src/images/FetchImage.tsx @@ -13,9 +13,11 @@ export const DisplayPictureOfDay: React.FC = () => { const [myPictureData, setMyPictureData] = useState(null); const FetchPictureOfDay = async () => { + const apiKey = process.env.REACT_APP_NASA_API_KEY; const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` - console.log(apiKey); + // console.log(apiKey); + const response = await fetch(link); const apiKey = process.env.REACT_APP_NASA_API_KEY; From 4ff339c9f0ac35540f98fc7afbaf590dcb1421ee Mon Sep 17 00:00:00 2001 From: Dorothy Wong Date: Wed, 31 Jul 2024 10:24:39 +0100 Subject: [PATCH 14/18] rename FetchImage --- src/App.tsx | 4 ++ .../{FetchImage.tsx => DisplayPicture.tsx} | 43 +++++++++++-------- 2 files changed, 30 insertions(+), 17 deletions(-) rename src/images/{FetchImage.tsx => DisplayPicture.tsx} (70%) diff --git a/src/App.tsx b/src/App.tsx index 3ac9c51..02b96de 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -10,6 +10,10 @@ import Footer from './Footer/Footer'; function App() { return (
+ + {/* line below is just an example of what to import to use the DisplayPictureOfDay function */} + +

MarsioKart

{/* line below is just an example of what to import to use the DisplayPictureOfDay function */} diff --git a/src/images/FetchImage.tsx b/src/images/DisplayPicture.tsx similarity index 70% rename from src/images/FetchImage.tsx rename to src/images/DisplayPicture.tsx index 3851ebe..001657d 100644 --- a/src/images/FetchImage.tsx +++ b/src/images/DisplayPicture.tsx @@ -8,31 +8,40 @@ interface PictureOfDay { url: string } -export const DisplayPictureOfDay: React.FC = () => { +export const DisplayPicture: React.FC = () => { const [myPictureData, setMyPictureData] = useState(null); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); const FetchPictureOfDay = async () => { const apiKey = process.env.REACT_APP_NASA_API_KEY; const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` - // console.log(apiKey); - - const response = await fetch(link); - const apiKey = process.env.REACT_APP_NASA_API_KEY; - const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` - // console.log(apiKey); - - const response = await fetch(link); + try { + setIsLoading(true); + const response = await fetch(link); - const apiKey = process.env.REACT_APP_NASA_API_KEY; - const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` - // console.log(apiKey); - - const response = await fetch(link); + if (!response.ok) { + // throw const error: any = new Error('Network response was not ok'); + throw new Error('Network response was not ok'); + } + + const pictureData = await response.json(); + 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); + } - const pictureData = await response.json(); //test picture data for when the API requests have reached their limit: // const pictureData = { @@ -45,8 +54,8 @@ export const DisplayPictureOfDay: React.FC = () => { // "url": "https://apod.nasa.gov/apod/image/2407/Arp142_Webb_960.jpg" // } - console.log(pictureData); - setMyPictureData(pictureData); + // console.log(pictureData); + // setMyPictureData(pictureData); } useEffect(() => { From 127479d57d61cb08d591fa4b8cf971a7507c1592 Mon Sep 17 00:00:00 2001 From: Dorothy Wong Date: Wed, 31 Jul 2024 11:39:02 +0100 Subject: [PATCH 15/18] separate fetching data logic to fetchData.ts --- src/App.tsx | 2 +- src/images/DisplayPicture.tsx | 61 ++++++++++++++++------------------- src/utils/fetchData.ts | 17 ++++++++++ 3 files changed, 45 insertions(+), 35 deletions(-) create mode 100644 src/utils/fetchData.ts diff --git a/src/App.tsx b/src/App.tsx index 02b96de..0bef324 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,7 @@ function App() {
{/* line below is just an example of what to import to use the DisplayPictureOfDay function */} - +

MarsioKart

diff --git a/src/images/DisplayPicture.tsx b/src/images/DisplayPicture.tsx index 001657d..c463c68 100644 --- a/src/images/DisplayPicture.tsx +++ b/src/images/DisplayPicture.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { fetchAPI } from '../utils/fetchData'; interface PictureOfDay { date: string, @@ -8,27 +9,17 @@ interface PictureOfDay { url: string } -export const DisplayPicture: React.FC = () => { - +export const DisplayPictureOfDay = () => { const [myPictureData, setMyPictureData] = useState(null); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); - const FetchPictureOfDay = async () => { - - const apiKey = process.env.REACT_APP_NASA_API_KEY; - const link = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}` + const FetchPicture = async () => { try { setIsLoading(true); - const response = await fetch(link); - if (!response.ok) { - // throw const error: any = new Error('Network response was not ok'); - throw new Error('Network response was not ok'); - } - - const pictureData = await response.json(); + const pictureData = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key="); setMyPictureData(pictureData); setIsLoading(false); @@ -41,32 +32,34 @@ export const DisplayPicture: React.FC = () => { setIsLoading(false); } - - - //test picture data for when the API requests have reached their limit: - // 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); - // setMyPictureData(pictureData); } - useEffect(() => { - FetchPictureOfDay(); + FetchPicture(); }, []) - if (!myPictureData) { - return (
EMPTY
) - } - + //test picture data for when the API requests have reached their limit: + // 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); + // setMyPictureData(pictureData); + + if (isLoading) return (
Is Loading...
); + if (error) return (
{error.message}
); + if (!myPictureData) return (
EMPTY
); + + // return myPictureData; + + + //example of how to pick specific properties return ( <>

{myPictureData.title}

diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts new file mode 100644 index 0000000..8cc2cf2 --- /dev/null +++ b/src/utils/fetchData.ts @@ -0,0 +1,17 @@ +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; + } +} \ No newline at end of file From bf16f1af1a05057a5a4aba750f491b1ee0275595 Mon Sep 17 00:00:00 2001 From: Dorothy Wong Date: Wed, 31 Jul 2024 11:41:08 +0100 Subject: [PATCH 16/18] add comments on how to use fetchData with .env --- src/utils/fetchData.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts index 8cc2cf2..8ce7409 100644 --- a/src/utils/fetchData.ts +++ b/src/utils/fetchData.ts @@ -1,3 +1,6 @@ +// 1. .env has to be created in root +// 2. inside .env, it should be REACT_APP_NASA_API_KEY="" + export async function fetchAPI(apiUrl: string) { const apiKey = process.env.REACT_APP_NASA_API_KEY; const link = `${apiUrl}${apiKey}`; From 8a4f10a705e1d2282b7f4cf73d05855c73053225 Mon Sep 17 00:00:00 2001 From: Dorothy Wong Date: Wed, 31 Jul 2024 11:46:16 +0100 Subject: [PATCH 17/18] tidy up code --- src/App.tsx | 2 +- src/images/DisplayPicture.tsx | 51 ++++++++++++++++------------------- 2 files changed, 24 insertions(+), 29 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0bef324..0c71036 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,7 +12,7 @@ function App() {
{/* line below is just an example of what to import to use the DisplayPictureOfDay function */} - + {/* */}

MarsioKart

diff --git a/src/images/DisplayPicture.tsx b/src/images/DisplayPicture.tsx index c463c68..a44a41d 100644 --- a/src/images/DisplayPicture.tsx +++ b/src/images/DisplayPicture.tsx @@ -19,7 +19,18 @@ export const DisplayPictureOfDay = () => { try { setIsLoading(true); - const pictureData = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key="); + const pictureData = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key="); + + // test picture data for when the API requests have reached their limit: + // 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" + // } setMyPictureData(pictureData); setIsLoading(false); @@ -37,37 +48,21 @@ export const DisplayPictureOfDay = () => { FetchPicture(); }, []) - - //test picture data for when the API requests have reached their limit: - // 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); - // setMyPictureData(pictureData); - if (isLoading) return (
Is Loading...
); if (error) return (
{error.message}
); if (!myPictureData) return (
EMPTY
); - // return myPictureData; + return myPictureData; - - //example of how to pick specific properties - return ( - <> -

{myPictureData.title}

-

{myPictureData.date}

-

{myPictureData.explanation}

- - - - ) + // example of how to pick specific properties + // return ( + // <> + //

{myPictureData.title}

+ //

{myPictureData.date}

+ //

{myPictureData.explanation}

+ // + // + // + // ) }; \ No newline at end of file From af060aaef40202b66b2e35093c0e25156e9e8044 Mon Sep 17 00:00:00 2001 From: Dorothy Wong Date: Wed, 31 Jul 2024 14:01:31 +0100 Subject: [PATCH 18/18] updated according to review 1. remove comments 2. add back .env.template 3.remove test data --- .env.template | 5 +++++ src/App.tsx | 8 -------- src/images/DisplayPicture.tsx | 22 ---------------------- 3 files changed, 5 insertions(+), 30 deletions(-) create mode 100644 .env.template diff --git a/.env.template b/.env.template new file mode 100644 index 0000000..a99265e --- /dev/null +++ b/.env.template @@ -0,0 +1,5 @@ +# copy this file and rename it as .env +# this needs to be in youre root directory +# replace with your api key + +REACT_APP_NASA_API_KEY="" \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 0c71036..e866709 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,22 +2,14 @@ import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import './App.scss'; import Home from './Home/Home'; -// line below is just an example of what to import to use the DisplayPictureOfDay function -// import { DisplayPictureOfDay } from './images/Fetch import { Quiz } from './Quiz/Quiz'; import Footer from './Footer/Footer'; function App() { return (
- - {/* line below is just an example of what to import to use the DisplayPictureOfDay function */} - {/* */} -

MarsioKart

- {/* line below is just an example of what to import to use the DisplayPictureOfDay function */} - {/* */} }/> diff --git a/src/images/DisplayPicture.tsx b/src/images/DisplayPicture.tsx index a44a41d..bc3d4d0 100644 --- a/src/images/DisplayPicture.tsx +++ b/src/images/DisplayPicture.tsx @@ -21,16 +21,6 @@ export const DisplayPictureOfDay = () => { const pictureData = await fetchAPI("https://api.nasa.gov/planetary/apod?api_key="); - // test picture data for when the API requests have reached their limit: - // 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" - // } setMyPictureData(pictureData); setIsLoading(false); @@ -53,16 +43,4 @@ export const DisplayPictureOfDay = () => { if (!myPictureData) return (
EMPTY
); return myPictureData; - - // example of how to pick specific properties - // return ( - // <> - //

{myPictureData.title}

- //

{myPictureData.date}

- //

{myPictureData.explanation}

- // - // - // - // ) - }; \ No newline at end of file