🧝🏻🦁 ↝ [ SGV2-10 SGV2-9 SGV2-2 FCDB-24 ] Updating components inside onboarding/index accordion

Gizmotronn · Gizmotronn · commit 8d818c57d853 · 2024-04-06T10:28:31.000+01:00
diff --git a/components/Content/Inventory/UserOwnedItems.tsx b/components/Content/Inventory/UserOwnedItems.tsx
@@ -81,10 +81,80 @@ const OwnedItemsList: React.FC = () => {
         })}
       </div>
     );    
-  };
+};
 
 export default OwnedItemsList;
 
+interface InventoryItem {
+  id: number;
+  name: string;
+  icon_url: string;
+  quantity: number;
+}
+
+export const ItemsVerticalList: React.FC = () => {
+  const session = useSession();
+  const [itemDetails, setItemDetails] = useState<InventoryItem[]>([]);
+  const supabase = useSupabaseClient();
+
+  useEffect(() => {
+    const fetchOwnedItems = async () => {
+      try {
+        if (!session) return;
+
+        const user = session.user.id;
+        // Fetch owned items from the database
+        const { data: ownedItemsData, error: ownedItemsError } = await supabase
+          .from('inventoryUSERS')
+          .select('*')
+          .eq('owner', user)
+          .gt('id', 20);
+
+        if (ownedItemsError) {
+          throw ownedItemsError;
+        }
+
+        if (ownedItemsData) {
+          const itemIds = ownedItemsData.map(item => item.item);
+          // Fetch details of owned items
+          const { data: itemDetailsData, error: itemDetailsError } = await supabase
+            .from('inventoryITEMS')
+            .select('*')
+            .in('id', itemIds);
+
+          if (itemDetailsError) {
+            throw itemDetailsError;
+          }
+
+          if (itemDetailsData) {
+            setItemDetails(itemDetailsData);
+          }
+        }
+      } catch (error) {
+        console.error('Error fetching owned items:', error.message);
+      }
+    };
+
+    fetchOwnedItems();
+  }, [session]);
+
+  return (
+    <div className="w-full">
+      {itemDetails.map(item => (
+        <div key={item.id} className="flex items-center justify-between mb-2">
+          <div className="flex items-center space-x-2">
+            <div className="w-10 h-10 rounded-full overflow-hidden">
+              <img src={item.icon_url} alt={item.name} className="w-full h-full object-cover" />
+            </div>
+            <p className="text-sm">{item.name}</p>
+          </div>
+          <p className="text-sm">x{item.quantity}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
 export const SectorStructureOwned: React.FC<{ sectorid: string }> = ({ sectorid }) => {
     const supabase = useSupabaseClient();
     const session = useSession();
diff --git a/components/Gameplay/onboarding.tsx b/components/Gameplay/onboarding.tsx
@@ -2,14 +2,16 @@ import { useState } from "react";
 import { useSession } from "@supabase/auth-helpers-react";
 import Link from "next/link";
 import { InventoryBlock } from "../dashboard-logs";
+import { ItemsVerticalList } from "../Content/Inventory/UserOwnedItems";
+import { UserOwnedSectorGrid } from "../Content/Planets/Sectors/SectorSetup";
 
 export function OnboardingWindows() {
   const session = useSession();
 
   return (
     <div className="w-full">
       <div className="container px-4 md:px-6">
-        <div className="grid max-w-6xl grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start min-h-[calc(100vh-1px)] py-6 mx-auto">
+        <div className="grid max-w-6xl grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-4 items-start min-h-[calc(10vh-1px)] py-6 mx-auto">
           {Array.from({ length: 6 }, (_, index) => (
             <div key={index} className="collapse bg-base-200">
               <input type="radio" name="my-accordion-1" id={`accordion-${index}`} />
@@ -23,10 +25,15 @@ export function OnboardingWindows() {
             </div>
           ))}
         </div>
+        <style jsx>{`
+          .grid-cols-3 > *:nth-child(n+4) {
+            margin-top: calc(-1.5 * var(--accordion-collapsed-height));
+          }
+        `}</style>
       </div>
     </div>
-  );
-}
+  );  
+};
 
 function getAccordionIcon(index) {
   switch (index) {
@@ -50,17 +57,17 @@ function getAccordionIcon(index) {
 function getAccordionTitle(index) {
   switch (index) {
     case 0:
-      return "Section 1 Title";
+      return "Home";
     case 1:
-      return "Section 2 Title";
+      return "Missions";
     case 2:
       return "Inventory";
     case 3:
-      return "Section 4 Title";
+      return "Automations";
     case 4:
-      return "Section 5 Title";
+      return "Sectors";
     case 5:
-      return "Section 6 Title";
+      return "Structures";
     default:
       return null;
   }
@@ -74,14 +81,16 @@ function getAccordionContent(index) {
       return <p>Content for Section 2</p>;
     case 2:
       return (
-        <InventoryBlock />
+        <ItemsVerticalList />
       );
     case 3:
       return <p>Content for Section 4</p>;
     case 4:
-      return <p>Content for Section 5</p>;
+      return (
+        <UserOwnedSectorGrid />
+      );
     case 5:
-      return <p>Content for Section 6</p>;
+      return <p>A component that will show all the structures the user has created (along with a popup to use them)</p>;
     default:
       return null;
   }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -68,11 +68,11 @@ export function PublicLanding() {
   const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 1224px)' });
   const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
 
-  if (session && !profile?.location) {
-    return (
-      <p>Location</p>
-    );
-  };
+  // if (session && !profile?.location) {
+  //   return (
+  //     <p>Location</p>
+  //   );
+  // };
 
   // if (session?.user?.id === 'cebdc7a2-d8af-45b3-b37f-80f328ff54d6' && isTabletOrMobile) {
   //   return (
@@ -83,7 +83,8 @@ export function PublicLanding() {
   //   );
   // };
 
-  if (session && profile?.location) {
+  // if (session && profile?.location) {
+    if (session) {
     return (
       <LayoutNoNav>
          <Navigation />
@@ -158,33 +159,17 @@ export function PublicLanding() {
          </div>
          {/* Menu Button */}
          {!showFeedOverlay && (
-           <button
-             onClick={handleOpenFeedOverlay}
-             className="fixed bottom-2 left-1/2 transform -translate-x-1/2 mt-4 px-4 py-2 text-white rounded"
-           >
-             <a
-               href="#_"
-               className="inline-flex overflow-hidden text-white bg-gray-900 rounded group"
-             >
-               <span className="px-3.5 py-2 text-white bg-purple-500 group-hover:bg-purple-600 flex items-center justify-center">
-                 <svg
-                   className="w-5 h-5"
-                   fill="none"
-                   stroke="currentColor"
-                   viewBox="0 0 24 24"
-                   xmlns="http://www.w3.org/2000/svg"
-                 >
-                   <path
-                     strokeLinecap="round"
-                     strokeLinejoin="round"
-                     strokeWidth="2"
-                     d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
-                   ></path>
-                 </svg>
-               </span>
-               <span className="pl-4 pr-5 py-2.5">Menu</span>
-             </a>
-           </button>
+          <button
+  onClick={handleOpenFeedOverlay}
+  className="fixed bottom-2 left-1/2 transform -translate-x-1/2 mt-4 px-4 py-2 text-white rounded"
+>
+  <a
+    href="#_"
+    className="inline-flex overflow-hidden text-white rounded group"
+  >
+<img src='/Galaxy/Kepler-22.png' height='100' width='100' />
+  </a>
+</button>
          )}
       </LayoutNoNav>
      );
