🦦🎋 ↝ [SSG-102]: Exploration & Quest Milestones

app/account/page.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
+import ProfileSetupForm from "@/components/Account/ProfileSetup";
+import Navbar from "@/components/Layout/Navbar";
+import { useState } from "react";
+
+export default function AccountPage() {
+  const [refresh, setRefresh] = useState(false);
+
+  return (
+    <EarthViewLayout>
+      <Navbar />
+      <ProfileSetupForm onProfileUpdate={() => setRefresh((prev) => !prev)} />
+    </EarthViewLayout>
+  );
+};

app/page.tsx

@@ -15,6 +15,7 @@ import { EarthViewLayout } from "@/components/(scenes)/planetScene/layout";
 import Onboarding from "./scenes/onboarding/page";
 import VerticalToolbar from "@/components/Layout/Toolbar";
 import SimpleeMissionGuide from "./tests/singleMissionGuide";
+import Navbar from "@/components/Layout/Navbar";
 
 export default function Home() {
   const session = useSession();
@@ -39,6 +40,7 @@ export default function Home() {
     // />,
     30: <EarthViewLayout>
       <div className="w-full">
+        <Navbar />
         <div className="flex flex-row space-y-4"></div>
         <div className="py-3">
           <div className="py-1">

app/posts/[id]/page.tsx

@@ -5,6 +5,7 @@ import { useSupabaseClient } from "@supabase/auth-helpers-react";
 import { SimplePostSingle } from "@/content/Posts/SimplePostSingle";
 import StructuresOnPlanet from "@/components/Structures/Structures";
 import PlanetGenerator from "@/components/Data/Generator/Astronomers/PlanetHunters/PlanetGenerator";
+import Navbar from "@/components/Layout/Navbar";
 
 interface Classification {
   id: number;
@@ -83,6 +84,7 @@ export default function SinglePostPage({ params }: { params: { id: string } }) {
 
   return (
     <div className="min-h-screen w-full flex flex-col">
+      <Navbar />
       <img
         className="absolute inset-0 w-full h-full object-cover"
         src="/assets/Backdrops/Earth.png"

app/tests/page.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import JournalPage from "@/components/Structures/Missions/Stardust/Journal";
+import { BasicPopupModal } from "@/components/Layout/Modal";
 
 export default function TestPage() {
     return (
         // <StarnetLayout>
           <>
-            <JournalPage />
+            <BasicPopupModal />
           </>
         // {/* </StarnetLayout> */}
     );

components/(scenes)/planetScene/layout.tsx

@@ -144,13 +144,17 @@ const PlanetViewLayout: React.FC<PlanetViewLayoutProps> = ({ children }) => {
 
 export default PlanetViewLayout;
 
-export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
-  children,
-}) => {
+interface EarthViewLayoutProps {
+  children: React.ReactNode;
+};
+
+export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({ children }) => {
+  const childrenArray = React.Children.toArray(children);
+
   const sectionStyles: CSSProperties[] = [
     {
       flex: 8,
-    }, 
+    },
     {
       flex: 6,
     },
@@ -170,10 +174,9 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
       />
 
       <div className="relative flex flex-1 z-10">
-        {/* <VerticalToolbar /> */}
-
         <div className="relative flex flex-col flex-1">
-          {children.slice(0, 2).map((child, index) => (
+          {/* <VerticalToolbar /> goes somewhere here */}
+          {childrenArray.slice(0, 2).map((child, index) => (
             <div
               key={index}
               className="relative flex-1"
@@ -187,16 +190,14 @@ export const EarthViewLayout: React.FC<PlanetViewLayoutProps> = ({
             style={sectionStyles[2]}
           >
             <div className="flex flex-1 flex-col">
-              <div className="flex-1">{children[2]}</div>
-              {children[3] && (
+              <div className="flex-1">{childrenArray[2]}</div>
+              {childrenArray[3] && (
                 <div className="flex-1 border-t border-dotted border-gray-100">
-                  {children[3]}
+                  {childrenArray[3]}
                 </div>
               )}
             </div>
-            <div className="flex-shrink-0 mx-7">
-              {children[4]}
-            </div>
+            <div className="flex-shrink-0 mx-7">{childrenArray[4]}</div>
           </div>
         </div>
       </div>

components/Account/Avatar.tsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useState } from "react";
+import Image from "next/image";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 
 interface Props {
     author: string;
@@ -25,4 +27,143 @@ export const AvatarGenerator: React.FC<Props> = ({ author }) => {
         )}
       </div>
     );
+};
+
+export function Avatar() {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let ignore = false;
+
+    async function fetchAvatar() {
+      if (!session?.user?.id) return;
+
+      const { data, error } = await supabase
+        .from("profiles")
+        .select("avatar_url")
+        .eq("id", session.user.id)
+        .single();
+
+      if (!ignore) {
+        if (error) {
+          console.warn("Error fetching avatar: ", error.message);
+        } else if (data) {
+          setAvatarUrl(data.avatar_url || null);
+        };
+
+        setLoading(false);
+      };
+    };
+
+    fetchAvatar();
+
+    return () => {
+      ignore = true;
+    };
+  }, [session, supabase]);
+
+  if (loading) {
+    return (
+      <div className="w-16 h-16 rounded-full bg-gray-300 animate-pulse" />
+    );
+  };
+
+  return (
+    <div className="w-16 h-16 rounded-full overflow-hidden bg-gray-300 border-2 border-gray-400 shadow-md">
+      {avatarUrl ? (
+        <Image
+          src={`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/avatars/${avatarUrl}`}
+          alt="User Avatar"
+          layout="fill"
+          objectFit="cover"
+          className="w-full h-full object-cover"
+        />
+      ) : (
+        <div className="flex items-center justify-center h-full text-gray-500">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-8 w-8"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+            />
+          </svg>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface PostAvatarProps {
+  author: string;
+};
+
+export function PostAvatar({ author }: PostAvatarProps) {
+  const supabase = useSupabaseClient();
+  const session = useSession();
+
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    let ignore = false;
+
+    async function fetchAvatar() {
+      if (!session) {
+        return;
+      };
+
+      const { data, error } = await supabase
+        .from("profiles")
+        .select("avatar_url")
+        .eq("id", session.user.id)
+        .single();
+
+      if (!ignore) {
+        if (error) {
+          console.warn("Error fetching avatar: ", error.message);
+        } else if (data) {
+          setAvatarUrl(data.avatar_url || null);
+        };
+
+        setLoading(false);
+      };
+    };
+
+    fetchAvatar();
+
+    return () => {
+      ignore = true;
+    };
+  }, [session]);
+
+  if (loading) {
+    return (
+      <div className="w-16 h-16 rounded-full bg-gray-300 animate-pulse" />
+    );
+  };
+
+  return (
+    <div className="w-16 h-16 rounded-full overflow-hidden bg-gray-300 border-2 border-gray-400 shadow-md">
+      {avatarUrl && (
+        <Image
+          src={`${process.env.NEXT_PUBLIC_SUPABASE_URL}/storage/v1/object/public/avatars/${avatarUrl}`}
+          alt="User avatar for post"
+          layout="fill"
+          objectFit="cover"
+          className="w-full h-full object-cover"
+        />
+      )}
+    </div>
+  );
 };