From b5f572f9593b2d42d79bac6b30a68de54d8f0fbb Mon Sep 17 00:00:00 2001 From: Liam Arbuckle Date: Sun, 3 Dec 2023 00:33:50 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B4=F0=9F=93=87=20=E2=86=9D=20Noticing?= =?UTF-8?q?=20some=20issues=20with=20the=20rover=20images?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Base/IndividualBasePlanetSector.tsx | 127 +++++++++++------- .../Planets/PlanetData/RandomRoverImage.tsx | 85 ++++++++++-- 2 files changed, 151 insertions(+), 61 deletions(-) diff --git a/components/Content/Planets/Base/IndividualBasePlanetSector.tsx b/components/Content/Planets/Base/IndividualBasePlanetSector.tsx index bb683ce9..e6cbb81d 100644 --- a/components/Content/Planets/Base/IndividualBasePlanetSector.tsx +++ b/components/Content/Planets/Base/IndividualBasePlanetSector.tsx @@ -2,7 +2,7 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; import Card from "../../../Card"; -import RoverImageGallery from "../PlanetData/RandomRoverImage"; +import RoverImageGallery, { RoverImage } from "../PlanetData/RandomRoverImage"; export default function BasePlanetSector({ sectorid }: { sectorid: string }) { const router = useRouter(); @@ -74,73 +74,102 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) { return
Loading...
; } - const { id, created_at, anomaly, owner, deposit, coverUrl, exploration_start_data, explored } = sectorData; + const { + id, + created_at, + anomaly, + owner, + deposit, + coverUrl, + exploration_start_data, + explored, + } = sectorData; const { content } = planetData || {}; + // const [imageUrl, setImageUrl] = useState(''); + // const [metadata, setMetadata] = useState(''); + + // const handleMetadataChange = (newMetadata: React.SetStateAction, newImageUrl: React.SetStateAction) => { + // setMetadata(newMetadata); + // setImageUrl(newImageUrl); + // }; + // I think that sectors will have posts attributed to them via contentPLANETSECTORS -> following the IndividualBasePlanet.tsx fetch functions return ( <> -
-
-

- Planet {planetData?.content}, Sector {id} -

-
- Rover sector image -
-
-
-
- Planet -
-
- {planetData?.content || "Unknown"}, Sector {id} -
+ +
+
+

+ Planet {planetData?.content}, Sector {id} +

+
+ Rover sector image +
+
+
+
+ Planet
+
+ {planetData?.content || "Unknown"}, Sector {id} +
+
-
-
- Mineral deposit -
-
- {deposit} -
+
+
+ Mineral deposit +
+
+ {deposit}
+
-
-
- Exploration status -
-
- {explored ? "Explored" : "Not Explored"} -
+
+
+ Exploration status
+
+ {explored ? "Explored" : "Not Explored"} +
+
-
-
- Init date -
-
- {created_at && new Date(created_at).toLocaleDateString('en-GB')} -
+
+
+ Init date
+
+ {created_at && + new Date(created_at).toLocaleDateString("en-GB")}
+
- {/* {deposit && typeof deposit === "string" ? ( +
+ {/* {deposit && typeof deposit === "string" ? (
{deposit}
) : (
{JSON.stringify(deposit)}
)} */} -
-
- -
+
+ +
+ + {/* */} + + +
); }; \ No newline at end of file diff --git a/components/Content/Planets/PlanetData/RandomRoverImage.tsx b/components/Content/Planets/PlanetData/RandomRoverImage.tsx index 49cfcd29..cc1cde1e 100644 --- a/components/Content/Planets/PlanetData/RandomRoverImage.tsx +++ b/components/Content/Planets/PlanetData/RandomRoverImage.tsx @@ -27,11 +27,63 @@ function RoverImageCard({ roverImage }: RoverImageCardProps) { ); }; -const RoverImage = ({ date, rover, onImageMetadataChange }) => { +export const RoverImage = ({ date, rover, onImageMetadataChange }) => { const [imageUrl, setImageUrl] = useState(''); const apiKey = 'iT0FQTZKpvadCGPzerqXdO5F4b62arNBOP0dtkXE'; const [imageMetadata, setImageMetadata] = useState(''); + const [metadata, setMetadata] = useState(''); + + useEffect(() => { + const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/${rover}/photos?sol=${date}&api_key=${apiKey}`; + + axios.get(apiUrl) + .then((response) => { + if (response.data.photos && response.data.photos.length > 0) { + const firstImageMetadata = response.data.photos[0]; + // setImageUrl(firstImageMetadata.img_src || ''); + const firstImage = response.data.photos[0].img_src; + setImageUrl(firstImage); + const metadataText = JSON.stringify(firstImageMetadata, null, 2); + setImageMetadata(metadataText); + setMetadata(metadataText) + onImageMetadataChange(metadataText); + } else { + setImageUrl('No images found for the given date & rover.'); + setImageMetadata('No images found for the given date & rover' + JSON.stringify(response)); + } + }) + .catch((error) => { + setImageUrl('An error occurred while fetching the image'); + setImageMetadata('Error fetching image'); + console.error(error); + }); + }, [date, rover, onImageMetadataChange]); + + return ( +
+ {/*

Your Rover Photo

+

Date: {date}

+

Rover model: {rover}

*/} + {imageUrl ? ( + <> + Rover image + + {/* 
{imageUrl}
*/} + + ) : ( +

Loading...

+ )} +
+ ); +}; + +export const RoverImageNoHandle = ({ date, rover, onImageMetadataChange }) => { + const [imageUrl, setImageUrl] = useState(''); + const apiKey = 'iT0FQTZKpvadCGPzerqXdO5F4b62arNBOP0dtkXE'; + + const [imageMetadata, setImageMetadata] = useState(''); + const [metadata, setMetadata] = useState(''); useEffect(() => { const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/${rover}/photos?sol=${date}&api_key=${apiKey}`; @@ -39,18 +91,21 @@ const RoverImage = ({ date, rover, onImageMetadataChange }) => { axios.get(apiUrl) .then((response) => { if (response.data.photos && response.data.photos.length > 0) { + const firstImageMetadata = response.data.photos[0]; + // setImageUrl(firstImageMetadata.img_src || ''); const firstImage = response.data.photos[0].img_src; setImageUrl(firstImage); - const metadataText = JSON.stringify(response.data.photos[0], null, 2); + const metadataText = JSON.stringify(firstImageMetadata, null, 2); setImageMetadata(metadataText); - onImageMetadataChange(imageMetadata); + setMetadata(metadataText) + onImageMetadataChange(metadataText); } else { setImageUrl('No images found for the given date & rover.'); - setImageMetadata('No images found for the given date & rover' + response); + setImageMetadata('No images found for the given date & rover' + JSON.stringify(response)); } }) .catch((error) => { - setImageUrl('An error occured while fetching the image'); + setImageUrl('An error occurred while fetching the image'); setImageMetadata('Error fetching image'); console.error(error); }); @@ -58,12 +113,14 @@ const RoverImage = ({ date, rover, onImageMetadataChange }) => { return (
-

Your Rover Photo

+ {/*

Your Rover Photo

Date: {date}

-

Rover model: {rover}

+

Rover model: {rover}

*/} {imageUrl ? ( <> Rover image + + {/* 
{imageUrl}
*/} ) : (

Loading...

@@ -87,12 +144,16 @@ export default function RoverImageGallery() { setImageUrl(newImageUrl); }; + // const imgSrc = metadata && metadata.img_src; + return ( -
- 
{imageUrl}
- - -
+ +
+ 
{imageUrl}
+ + +
+ ); };