😹🫥 ↝ Merge pull request #86 from Signal-K/FCDB-20

🔖😹 ↝ Complete read-access for Star Sailors data

android/app/src/main/res/values/styles.xml

@@ -7,6 +7,8 @@
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:windowLightStatusBar">true</item>
     </style>
 
     <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">

components/Content/CreatePostForm.tsx

@@ -8,7 +8,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { VenetianMask } from "lucide-react";
 import React, { useContext, useEffect, useState} from "react";
 import { useForm } from "react-hook-form";
-import { z } from "zod";
 import { UserContext } from "../../context/UserContext";
 import { useRouter } from "next/router";
 import { Avatar, AvatarFallback } from "../ui/Avatar";

components/Content/Inventory/Vehicles/MySpaceships.tsx

@@ -0,0 +1,85 @@
+import React, { useState, useEffect } from "react";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+
+interface Spaceship {
+    id: number;
+    name: string;
+    image: string;
+    hp: number;
+    speed: number;
+    attack: number;
+    state: string;
+    current_planet: string;
+};
+
+const MySpaceships: React.FC = () => {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [userSpaceships, setUserSpaceships] = useState<any[]>([]);
+
+    useEffect(() => {
+        const fetchUserSpaceships = async () => {
+            if (session?.user) {
+              const { data: userSpaceshipsData, error: userSpaceshipsError } = await supabase
+                .from("inventorySPACESHIPS")
+                .select("*")
+                .eq("owner", session.user.id);
+
+              if (userSpaceshipsError) {
+                console.error("Error fetching user's spaceships:", userSpaceshipsError);
+              } else {
+                const spaceshipIds = userSpaceshipsData.map((userSpaceship) => userSpaceship.spaceship_id);
+
+                const { data: spaceshipsData, error: spaceshipsError } = await supabase
+                  .from("spaceships")
+                  .select("*")
+                  .in("id", spaceshipIds);
+
+                if (spaceshipsError) {
+                  console.error("Error fetching spaceship details:", spaceshipsError);
+                } else {
+                  const combinedData = userSpaceshipsData.map((userSpaceship) => {
+                    const matchingSpaceship = spaceshipsData.find((spaceship) => spaceship.id === userSpaceship.spaceship_id);
+                    return {
+                      ...userSpaceship,
+                      spaceship: matchingSpaceship,
+                    };
+                  });
+
+                  setUserSpaceships(combinedData);
+                }
+              }
+            }
+          };
+
+          fetchUserSpaceships();
+    }, [session, supabase]);
+
+    return (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {userSpaceships.map((userSpaceship) => (
+            <div key={userSpaceship.id} className="bg-white p-4 rounded-lg shadow-md">
+              <h2 className="text-lg font-semibold">
+                {userSpaceship.spaceship?.name || "N/A"} {/* Handle potential null/undefined */}
+              </h2>
+              <img
+                src={userSpaceship.spaceship?.image || ""}
+                alt={userSpaceship.spaceship?.name || ""}
+                className="mt-2 w-full h-40 object-cover"
+              />
+              <p className="text-sm mt-2">
+                HP: {userSpaceship.spaceship?.hp || 0}, Speed: {userSpaceship.spaceship?.speed || 0}, Attack:{" "}
+                {userSpaceship.spaceship?.attack || 0}
+              </p>
+              <p className="text-sm mt-2">
+                State: {userSpaceship.spaceship?.state || "N/A"}, Current Planet:{" "}
+                {userSpaceship.spaceship?.current_planet || "N/A"}
+              </p>
+            </div>
+          ))}
+        </div>
+      );
+};
+
+export default MySpaceships;

components/Content/Planets/IndividualPlanet.tsx

@@ -4,6 +4,8 @@ import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { UserContext } from "../../../context/UserContext";
 import { LayoutNoNav } from "../../Section/Layout";
 import CardForum from "../DiscussCard";
+import { RoverGallerySingle } from "../RoverData/RandomImage";
+import PlanetSector from "./PlanetSector";
 
 enum SidebarLink {
   Feed,
@@ -21,6 +23,9 @@ export default function IndividualPlanet({ id }: { id: string }) {
   const [planetData, setPlanetData] = useState(null);
   const [planetPosts, setPlanetPosts] = useState([]);
   const { id: planetId } = router.query;
+  const [hasPlanetInInventory, setHasPlanetInInventory] = useState(false);
+  const [inventoryPlanetId, setInventoryPlanetId] = useState<string | null>(null);
+  const [sectors, setSectors] = useState([]);
 
   const [activeLink, setActiveLink] = useState(SidebarLink.Data);
   const [screenWidth, setScreenWidth] = useState<number>(0);
@@ -45,6 +50,9 @@ export default function IndividualPlanet({ id }: { id: string }) {
     if (planetId) {
       getPlanetData();
       fetchPostsForPlanet(id);
+      // fetchSectorsForPlanet(inventoryPlanetId);
+      fetchSectorsForPlanetTest();
+      checkUserInventory();
     }
   });
 
@@ -95,6 +103,65 @@ export default function IndividualPlanet({ id }: { id: string }) {
   }
 
   const { content, avatar_url, cover } = planetData;
+
+  async function checkUserInventory() {
+    if (!session || !planetId) {
+      return;
+    };
+
+    const { data, error } = await supabase
+      .from("inventoryPLANETS")
+      .select()
+      .eq("planet_id", planetId)
+      .eq("owner_id", session?.user?.id);
+
+    if (error) {
+      console.error("Error checking user inventory:", error);
+      return;
+    };
+
+    if (data.length > 0) {
+      setHasPlanetInInventory(true);
+      setInventoryPlanetId(data[0].id);
+    };
+  };
+
+  async function fetchSectorsForPlanet(planetId: string) {
+    try {
+      const { data, error } = await supabase
+      .from('planetsssSECTORS')
+      .select('*')
+      .eq('planetId', inventoryPlanetId);
+
+    if (error) {
+      console.error('Error fetching sectors data:', error.message);
+      return;
+    };
+
+    setSectors(data);
+    } catch (error) {
+      console.error(error);
+    };
+  };
+
+  async function fetchSectorsForPlanetTest() {
+    try {
+      const { data, error } = await supabase
+      .from('planetsssSECTORS')
+      .select('*')
+
+    if (error) {
+      console.error('Error fetching sectors data:', error.message);
+      return;
+    };
+
+    setSectors(data);
+    console.log(data);
+    } catch (error) {
+      console.error(error);
+    };
+  };
+
   const rings = [2, 3, 4];
   const planetSizeMobile = 8; // 8% of the screen size
   const planetSizeDesktop = 14; // 14% of the screen size
@@ -169,6 +236,11 @@ export default function IndividualPlanet({ id }: { id: string }) {
             }}
           />
         </div>
+        {hasPlanetInInventory && (<>
+            <p>{inventoryPlanetId}</p>
+            <RoverGallerySingle inventoryPlanetId={inventoryPlanetId} />
+             {/* <PlanetSector sectors={sectors} />  */}
+          </>)}
       </div>
     </LayoutNoNav>
   );

components/Content/Planets/PlanetSector.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+interface Sector {
+    id: number;
+    metadata: string;
+};
+
+interface PlanetSectorsProps {
+    sectors: Sector[];
+}
+
+const PlanetSector: React.FC<PlanetSectorsProps> = ({ sectors }) => {
+    return (
+        <div className="sector-container">
+            {sectors.map((sector, index) => (
+                <div key={index} className="sector">
+                    <div className="sector-number">{index + 1}</div>
+                    <div className="sector-metadata">{sector.metadata}</div>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default PlanetSector;

components/Content/RoverData/RandomImage.tsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from "react";
+import axios from 'axios';
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+import RoverImageCard from "./RoverImageCard";
+import { Form } from "react-hook-form";
+
+const RoverImage = ({ date, rover }) => {
+    const [imageUrl, setImageUrl] = useState('');
+    const apiKey = "iT0FQTZKpvadCGPzerqXdO5F4b62arNBOP0dtkXE"
+
+    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 firstImage = response.data.photos[0].img_src;
+                    setImageUrl(firstImage);
+                } else {
+                    setImageUrl("No images found for the given date and rover");
+                }
+            })
+            .catch((error) => {
+                setImageUrl('');
+                console.error(error);
+            });
+    }, [date, rover]);
+
+    return (
+        <div>
+            <h2>Mars Rover Photo</h2>
+            <p>Date: {date}</p>
+            <p>Rover: {rover}</p>
+            <img src={imageUrl} alt="Mars Rover" />
+        </div>
+    );
+};
+
+const RoverImagePage = () => {
+    const randomDate = Math.floor(Math.random() * 1000);
+    const selectedRover = 'perseverance';
+
+    return (
+        <div>
+            <h1>Mars Rover Image</h1>
+            <RoverImage date={randomDate} rover={selectedRover} />
+        </div>
+    );
+};
+
+export function RoverGallerySingle({ inventoryPlanetId }) {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [roverImage, setRoverImage] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [metadata, setMetadata] = useState('');
+    const [imageMetadata, setImageMetadata] = useState('');
+    const [content, setContent] = useState('');
+
+    const fetchImage = async () => {
+        const randomDate = Math.floor(Math.random() * 1000) + 1;
+        const selectedRover = 'perseverance'; // You can change this to 'curiosity' or 'opportunity' as needed
+        const apiUrl = `https://api.nasa.gov/mars-photos/api/v1/rovers/${selectedRover}/photos?sol=${randomDate}&api_key=iT0FQTZKpvadCGPzerqXdO5F4b62arNBOP0dtkXE`;
+
+        try {
+            const response = await axios.get(apiUrl);
+            if (response.data.photos && response.data.photos.length > 0) {
+                const firstImage = response.data.photos[0].img_src;
+                setRoverImage(firstImage);
+
+                // Set metadata from the fetched image
+                const metadataText = JSON.stringify(response.data.photos[0], null, 2);
+                setImageMetadata(metadataText);
+                setMetadata('Metadata for the current image:');
+            } else {
+                setRoverImage('No images found for the given date and rover.');
+                setMetadata('No image available.');
+                setImageMetadata('');
+            }
+        } catch (error) {
+            console.error(error);
+            setRoverImage('An error occurred while fetching the image.');
+            setMetadata('Error fetching the image.');
+            setImageMetadata('');
+        }
+
+    setLoading(false); // Set loading to false when the image is loaded
+    };
+
+    const generateNewImage = () => {
+        setLoading(true); 
+        fetchImage();
+    };
+
+    useEffect(() => {
+        fetchImage();
+    }, []);
+
+    const handlePostSubmit = async () => {
+        if (content) {
+          const user = session?.user?.id;
+          if (user) {
+            const response = await supabase.from('contentROVERIMAGES').upsert([
+              {
+                author: user,
+                metadata: imageMetadata,
+                imageLink: roverImage,
+                planet: inventoryPlanetId,
+                content,
+                media: null,
+              },
+            ]);
+
+            if (response.error) {
+              console.error(response.error);
+            } else {
+              setContent('');
+            }
+          }
+        }
+    };
+
+    return (
+        <RoverImageCard roverImage={{ id: '1', content: '', image: roverImage, planets2: '' }} /> // Form components to be placed in
+    )
+}

components/Content/RoverData/RoverImageCard.tsx

@@ -0,0 +1,25 @@
+import React, { useState, useEffect } from "react";
+
+interface Props {
+    roverImage: {
+        id: string;
+        content: string;
+        image: string;
+        planets2: string;
+    };
+};
+
+export default function RoverImageCard({ roverImage }: Props) {
+    const { id, content, image, planets2 } = roverImage;
+    return (
+        <div className="col-md-4 mb-4">
+            <div style={{ width: '100%', height: "200px", overflow: "hidden" }}>
+                <img
+                    src={image}
+                    alt="Rover Image"
+                    className="w-100 h-auto"
+                />                    
+            </div>
+        </div>
+    )
+}