From 5a96f7f0cd301077054674445cbd996f1bf723dc Mon Sep 17 00:00:00 2001 From: ruksan_emirali Date: Thu, 1 Aug 2024 12:28:48 +0100 Subject: [PATCH 1/6] Creates new function in fetchData to fetch a random image from the API, implements that function in DisplayRandomPicture --- src/images/DisplayRandomPicture.tsx | 46 +++++++++++++++++++++++++++++ src/utils/fetchData.ts | 19 +++++++++++- 2 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 src/images/DisplayRandomPicture.tsx diff --git a/src/images/DisplayRandomPicture.tsx b/src/images/DisplayRandomPicture.tsx new file mode 100644 index 0000000..97a5837 --- /dev/null +++ b/src/images/DisplayRandomPicture.tsx @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from 'react'; +import { fetchRandomAPI } from '../utils/fetchData'; + +interface RandomPicture { + date: string, + explanation: string, + hdurl: string, + title: string, + url: string +} + +export const DisplayRandomPicture = () => { + const [myPictureData, setMyPictureData] = useState | null>(null); + const [isLoading, setIsLoading] = useState(false); + const [error, setError] = useState(null); + + const FetchPicture = async () => { + + try { + setIsLoading(true); + + const pictureData = await fetchRandomAPI("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 (
Is Loading...
); + if (error) return (
{error.message}
); + if (!myPictureData) return (
EMPTY
); + + return myPictureData; +}; \ No newline at end of file diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts index 9b6b0ac..cda5b80 100644 --- a/src/utils/fetchData.ts +++ b/src/utils/fetchData.ts @@ -1,7 +1,6 @@ // 1. .env has to be created in root // 2. inside .env, it should be REACT_APP_NASA_API_KEY="" - const year = new Date().getFullYear() const month = (new Date().getMonth()) + 1 const date = new Date().getDate() @@ -11,6 +10,24 @@ export async function fetchAPI(apiUrl: string, date = todaysDate) { const apiKey = process.env.REACT_APP_NASA_API_KEY; const link = `${apiUrl}${apiKey}&date=${date}`; + 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; + } +} + +export async function fetchRandomAPI(apiUrl: string) { + const apiKey = process.env.REACT_APP_NASA_API_KEY; + const link = `${apiUrl}${apiKey}&count=1`; + try { const response = await fetch(link); if (!response.ok) { From a7d1e214d78845421615caa82ded6b4873bfd224 Mon Sep 17 00:00:00 2001 From: ruksan_emirali Date: Thu, 1 Aug 2024 14:48:12 +0100 Subject: [PATCH 2/6] CSS added for background image of homepage Co-authored-by: Natasha Buckham --- src/Home/Home.scss | 5 +++++ src/Home/Home.tsx | 1 + 2 files changed, 6 insertions(+) create mode 100644 src/Home/Home.scss diff --git a/src/Home/Home.scss b/src/Home/Home.scss new file mode 100644 index 0000000..190044f --- /dev/null +++ b/src/Home/Home.scss @@ -0,0 +1,5 @@ +.home-content { + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx index aa598b1..ebc186c 100644 --- a/src/Home/Home.tsx +++ b/src/Home/Home.tsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import DisplayBackgroundImage from '../images/DisplayBackgroundImage'; +import './Home.scss' function Home() { From e0c4b62d5d5d3f38d18a027aefea00fee2c6ba75 Mon Sep 17 00:00:00 2001 From: ruksan_emirali Date: Thu, 1 Aug 2024 15:03:40 +0100 Subject: [PATCH 3/6] Adds style to the logo in header --- src/Header/Header.scss | 19 +++++++++++++++++++ src/Header/Header.tsx | 3 ++- 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 src/Header/Header.scss diff --git a/src/Header/Header.scss b/src/Header/Header.scss new file mode 100644 index 0000000..33bc7da --- /dev/null +++ b/src/Header/Header.scss @@ -0,0 +1,19 @@ +.header { + display: flex; + flex-direction: column; + background-color: #2D3047; +} + +@media only screen and (min-width: 480px) { + img { + width: 70vw; + align-self: center; + } +} + +@media only screen and (min-width: 1024px) { + img { + width: 40vw; + align-self: center; + } +} \ No newline at end of file diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx index d19c730..760c4df 100644 --- a/src/Header/Header.tsx +++ b/src/Header/Header.tsx @@ -1,5 +1,6 @@ import React from 'react'; import Hamburger from '../Hamburgerbutton/Hamburgerbutton'; +import './Header.scss' const logo = require('../ImageAssets/marsiokartlogo.jpg') @@ -9,7 +10,7 @@ const Header: React.FC = () => { }; return ( -
+
Marsio Kart Logo
From 3d7c178131a28a57bd30071318bb867b59a26aa1 Mon Sep 17 00:00:00 2001 From: ruksan_emirali Date: Thu, 1 Aug 2024 14:48:12 +0100 Subject: [PATCH 4/6] CSS added for background image of homepage Co-authored-by: Natasha Buckham --- src/Home/Home.scss | 5 +++++ src/Home/Home.tsx | 1 + 2 files changed, 6 insertions(+) create mode 100644 src/Home/Home.scss diff --git a/src/Home/Home.scss b/src/Home/Home.scss new file mode 100644 index 0000000..190044f --- /dev/null +++ b/src/Home/Home.scss @@ -0,0 +1,5 @@ +.home-content { + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} \ No newline at end of file diff --git a/src/Home/Home.tsx b/src/Home/Home.tsx index aa598b1..ebc186c 100644 --- a/src/Home/Home.tsx +++ b/src/Home/Home.tsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import DisplayBackgroundImage from '../images/DisplayBackgroundImage'; +import './Home.scss' function Home() { From 420ab18cb94e3bb6f426eb3a96f2c06748b336a8 Mon Sep 17 00:00:00 2001 From: ruksan_emirali Date: Thu, 1 Aug 2024 15:08:35 +0100 Subject: [PATCH 5/6] Resolves merge conflicts --- src/Header/Header.scss | 19 +++++++++++++++++++ src/Header/Header.tsx | 3 ++- 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 src/Header/Header.scss diff --git a/src/Header/Header.scss b/src/Header/Header.scss new file mode 100644 index 0000000..33bc7da --- /dev/null +++ b/src/Header/Header.scss @@ -0,0 +1,19 @@ +.header { + display: flex; + flex-direction: column; + background-color: #2D3047; +} + +@media only screen and (min-width: 480px) { + img { + width: 70vw; + align-self: center; + } +} + +@media only screen and (min-width: 1024px) { + img { + width: 40vw; + align-self: center; + } +} \ No newline at end of file diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx index 0558966..f745c21 100644 --- a/src/Header/Header.tsx +++ b/src/Header/Header.tsx @@ -1,12 +1,13 @@ import React from 'react'; import Hamburger from '../Hamburgerbutton/Hamburgerbutton'; +import './Header.scss' const logo = require('../ImageAssets/marsiokartlogo.jpg') const Header: React.FC = () => { return ( -
+
Marsio Kart Logo
From 027a519a4bcec6d57ef2bbf3a4b1d85cf3e99e6f Mon Sep 17 00:00:00 2001 From: ruksan_emirali Date: Thu, 1 Aug 2024 15:16:54 +0100 Subject: [PATCH 6/6] all homepage elements fit the view without scrolling --- src/App.scss | 6 ++++++ src/App.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/App.scss b/src/App.scss index c1e1e98..9211e61 100644 --- a/src/App.scss +++ b/src/App.scss @@ -45,4 +45,10 @@ a { color: $text-color; width: 100vw; height: 100vh; +} + +.app { + display: flex; + flex-direction: column; + height: 100vh; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index c02a630..54da0d9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,7 +8,7 @@ import Footer from './Footer/Footer'; function App() { return ( -
+