Skip to content

Commit

Permalink
🧴📇 ↝ Noticing some issues with the rover images
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gizmotronn
Gizmotronn committed Jan 9, 2024
1 parent d65d5c1 commit b5f572f
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 61 deletions.
127 changes: 78 additions & 49 deletions components/Content/Planets/Base/IndividualBasePlanetSector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -74,73 +74,102 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
return <div>Loading...</div>;
}

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<string>, newImageUrl: React.SetStateAction<string>) => {
// setMetadata(newMetadata);
// setImageUrl(newImageUrl);
// };

// I think that sectors will have posts attributed to them via contentPLANETSECTORS -> following the IndividualBasePlanet.tsx fetch functions

return (
<>
<Card noPadding={false}><div className="flex-col justify-center mt-[-80px] bg-cover bg-center rounded-15" style={{ backgroundImage: 'url("https://images.unsplash.com/photo-1545243424-0ce743321e11?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")' }}>
<div className="h-[80vh] flex flex-col items-center justify-center relative">
<h1 className="text-center text-slate-300 text-opacity-100 font-['Inter'] tracking-[3.48px] mt-[-50px] mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-gray-400">
Planet {planetData?.content}, Sector {id}
</h1>
<div className="w-full flex items-center justify-center">
<img
src={coverUrl}
alt="Rover sector image"
className="w-3/12 h-3/12 sm:w-4/11 sm:h-4/11 object-contain z-20 p-10 mb-2"
style={{ zIndex: 20 }}
/>
</div>
<div className="flex items-start gap-8 mt-20">
<div className="flex flex-col items-center justify-start gap-4">
<div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] tracking-[3.48px]">
Planet
</div>
<div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">
{planetData?.content || "Unknown"}, Sector {id}
</div>
<Card noPadding={false}>
<div
className="flex-col justify-center mt-[-80px] bg-cover bg-center rounded-15"
style={{
backgroundImage:
'url("https://images.unsplash.com/photo-1545243424-0ce743321e11?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")',
}}
>
<div className="h-[80vh] flex flex-col items-center justify-center relative">
<h1 className="text-center text-slate-300 text-opacity-100 font-['Inter'] tracking-[3.48px] mt-[-50px] mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-gray-400">
Planet {planetData?.content}, Sector {id}
</h1>
<div className="w-full flex items-center justify-center">
<img
src={coverUrl}
alt="Rover sector image"
className="w-3/12 h-3/12 sm:w-4/11 sm:h-4/11 object-contain z-20 p-10 mb-2"
style={{ zIndex: 20 }}
/>
</div>
<div className="flex items-start gap-8 mt-20">
<div className="flex flex-col items-center justify-start gap-4">
<div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] tracking-[3.48px]">
Planet
</div>
<div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">
{planetData?.content || "Unknown"}, Sector {id}
</div>
</div>

<div className="flex flex-col items-center justify-start gap-4">
<div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] uppercase tracking-[3.48px]">
Mineral deposit
</div>
<div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">
{deposit}
</div>
<div className="flex flex-col items-center justify-start gap-4">
<div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] uppercase tracking-[3.48px]">
Mineral deposit
</div>
<div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">
{deposit}
</div>
</div>

<div className="flex flex-col items-center justify-start gap-4">
<div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] uppercase tracking-[3.48px]">
Exploration status
</div>
<div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">
{explored ? "Explored" : "Not Explored"}
</div>
<div className="flex flex-col items-center justify-start gap-4">
<div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] uppercase tracking-[3.48px]">
Exploration status
</div>
<div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">
{explored ? "Explored" : "Not Explored"}
</div>
</div>

<div className="flex flex-col items-center justify-start gap-4">
<div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] uppercase tracking-[3.48px]">
Init date
</div>
<div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">
{created_at && new Date(created_at).toLocaleDateString('en-GB')}
</div>
<div className="flex flex-col items-center justify-start gap-4">
<div className="text-center text-slate-300 text-opacity-70 text-[21.73px] font-medium font-['Inter'] uppercase tracking-[3.48px]">
Init date
</div>
<div className="text-center text-white text-opacity-90 text-[27.17px] font-medium font-['Inter']">
{created_at &&
new Date(created_at).toLocaleDateString("en-GB")}
</div>
</div>
</div>
{/* {deposit && typeof deposit === "string" ? (
</div>
{/* {deposit && typeof deposit === "string" ? (
<div>{deposit}</div>
) : (
<div>{JSON.stringify(deposit)}</div>
)} */}
</div></Card>
<div>
<RoverImageGallery />
</div>
</div>
</Card>
<div>
<Card noPadding={false}>
{/* <RoverImageGallery /> */}
<RoverImage date='853' rover='opportunity' onImageMetadataChange={null} />
</Card>
</div>
</>
);
};
85 changes: 73 additions & 12 deletions components/Content/Planets/PlanetData/RandomRoverImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,43 +27,100 @@ 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 (
<div>
{/* <h2>Your Rover Photo</h2>
<p>Date: {date}</p>
<p>Rover model: {rover}</p> */}
{imageUrl ? (
<>
<img src={imageUrl} alt="Rover image" />
<RoverContentPostForm metadata={metadata} imageLink={imageUrl} />
{/* <pre>{imageUrl}</pre> */}
</>
) : (
<p>Loading...</p>
)}
</div>
);
};

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}`;

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);
});
}, [date, rover, onImageMetadataChange]);

return (
<div>
<h2>Your Rover Photo</h2>
{/* <h2>Your Rover Photo</h2>
<p>Date: {date}</p>
<p>Rover model: {rover}</p>
<p>Rover model: {rover}</p> */}
{imageUrl ? (
<>
<img src={imageUrl} alt="Rover image" />
<RoverContentPostForm metadata={metadata} imageLink={imageUrl} />
{/* <pre>{imageUrl}</pre> */}
</>
) : (
<p>Loading...</p>
Expand All @@ -87,12 +144,16 @@ export default function RoverImageGallery() {
setImageUrl(newImageUrl);
};

// const imgSrc = metadata && metadata.img_src;

return (
<div className="py-20">
<pre>{imageUrl}</pre>
<RoverImage date='721' rover={selectedRover} onImageMetadataChange={handleMetadataChange} />
<RoverContentPostForm metadata={metadata} imageLink={imageUrl} />
</div>
<Card noPadding={false}>
<div className="">
<pre>{imageUrl}</pre>
<RoverImage date='721' rover={selectedRover} onImageMetadataChange={handleMetadataChange} />
<RoverContentPostForm metadata={metadata} imageLink={imageUrl} />
</div>
</Card>
);
};

Expand Down

0 comments on commit b5f572f

Please sign in to comment.