📊🎖️ ↝ Posts are now being created with sector data

Author: Gizmotronn

components/Content/CreatePostForm.tsx

@@ -126,7 +126,7 @@ export default function CreatePostForm ( { planetId2 } ) { // category_id
 
 // Look into methods to engage resource gathering with the lightcurves, make it a scrollable feed with planet content, show how the curves lead into the rover. 
 
-export function RoverContentPostForm( { metadata, imageLink } ) {
+export function RoverContentPostForm( { metadata, imageLink, sector } ) {
     const supabase = useSupabaseClient();
     const session = useSession();
 
@@ -142,6 +142,7 @@ export function RoverContentPostForm( { metadata, imageLink } ) {
                 imageLink: imageLink,
                 content: postContent,
                 media: media,
+                sector: sector,
             },);
     };
 
@@ -158,6 +159,7 @@ export function RoverContentPostForm( { metadata, imageLink } ) {
                         // basePlanet: '1',
                         content: postContent,
                         media: null, // See slack comms
+                        sector: sector,
                     },
                 ]);
 
@@ -172,9 +174,9 @@ export function RoverContentPostForm( { metadata, imageLink } ) {
 
     return (
         <div className="flex gap-2">
-            <Avatar>
+            {/* <Avatar>
                 <AvatarFallback>{session?.user?.id}</AvatarFallback>
-            </Avatar>
+            </Avatar> */}
             <textarea value={postContent} onChange={e => setPostContent(e.target.value)} className="grow p-3 h-24 rounded-xl" placeholder={"What do you think about this image"} />
             <div className="text-center">
                 <button onClick={handlePostSubmit} className="text-black px-2 py-1 rounded-md">Share</button>

components/Content/Planets/Base/IndividualBasePlanetSector.tsx

@@ -2,7 +2,9 @@ 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, { RoverImage } from "../PlanetData/RandomRoverImage";
+import RoverImageGallery, { RoverImage, RoverImageNoHandle } from "../PlanetData/RandomRoverImage";
+import axios from "axios";
+import { RoverContentPostForm } from "../../CreatePostForm";
 
 export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
   const router = useRouter();
@@ -14,6 +16,33 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
   const [sectorData, setSectorData] = useState(null);
   const [planetData, setPlanetData] = useState(null);
 
+  // Rover image data
+    // useEffect(() => {
+    //     // const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/${rover}/photos?sol=${date}&api_key=${apiKey}`;
+    //     const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/opportunity/photos?sol=181&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)
+    //             } 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);
+    //         });
+    // }, [session]);
+
   const getPlanetData = async () => {
     if (!sectorData) {
       return null;
@@ -166,8 +195,15 @@ export default function BasePlanetSector({ sectorid }: { sectorid: string }) {
       </Card>
       <div>
         <Card noPadding={false}>
-          {/* <RoverImageGallery /> */}
-          <RoverImage date='853' rover='opportunity' onImageMetadataChange={null} />
+          <RoverImageNoHandle date='853' rover='opportunity' sectorNo={id} />
+          {/* {imageUrl ? (
+            <>
+                <img src={imageUrl} alt="Rover image" />
+                <RoverContentPostForm metadata={metadata} imageLink={imageUrl} sector={id} />
+            </>
+          ) : (
+            <p>Loading...</p>
+          )} */}
         </Card>
       </div>
     </>

components/Content/Planets/PlanetData/RandomRoverImage.tsx

@@ -68,7 +68,7 @@ export const RoverImage = ({ date, rover, onImageMetadataChange }) => {
             {imageUrl ? (
                 <>
                     <img src={imageUrl} alt="Rover image" />
-                    <RoverContentPostForm metadata={metadata} imageLink={imageUrl} />
+                    {/* <RoverContentPostForm metadata={metadata} imageLink={imageUrl} /> */}
                     {/* <pre>{imageUrl}</pre> */}
                 </>
             ) : (
@@ -78,7 +78,7 @@ export const RoverImage = ({ date, rover, onImageMetadataChange }) => {
     );
 };
 
-export const RoverImageNoHandle = ({ date, rover, onImageMetadataChange }) => {
+export const RoverImageNoHandle = ({ date, rover, sectorNo }) => {
     const [imageUrl, setImageUrl] = useState('');
     const apiKey = 'iT0FQTZKpvadCGPzerqXdO5F4b62arNBOP0dtkXE';
 
@@ -98,7 +98,6 @@ export const RoverImageNoHandle = ({ date, rover, onImageMetadataChange }) => {
                     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));
@@ -109,18 +108,14 @@ export const RoverImageNoHandle = ({ date, rover, onImageMetadataChange }) => {
                 setImageMetadata('Error fetching image');
                 console.error(error);
             });
-    }, [date, rover, onImageMetadataChange]);
+    }, [date, rover]);
 
     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> */}
+                    <RoverContentPostForm metadata={metadata} imageLink={imageUrl} sector={sectorNo}/>
                 </>
             ) : (
                 <p>Loading...</p> 
@@ -151,7 +146,7 @@ export default function RoverImageGallery() {
             <div className="">
                 <pre>{imageUrl}</pre>
                 <RoverImage date='721' rover={selectedRover} onImageMetadataChange={handleMetadataChange} />
-                <RoverContentPostForm metadata={metadata} imageLink={imageUrl} />               
+                {/* <RoverContentPostForm metadata={metadata} imageLink={imageUrl} />                */}
             </div>
         </Card>
     );