🍖🎄 ↝ First part of the new (test) user config created for #26

components/Planets/PlanetCard.tsx

@@ -4,6 +4,7 @@ import Card from "../Card";
 import { useSupabaseClient } from "@supabase/auth-helpers-react";
 import PlanetEditor, { PlanetEditorFromData } from "../../pages/generator/planet-editor";
 import StakePlay from "../../pages/stake/play";
+import UtterancesComments from "../Lens/Utterances";
 
 export function PlanetCard ({ activeTab, planetId }) {
     const supabase = useSupabaseClient();
@@ -26,7 +27,7 @@ export function PlanetCard ({ activeTab, planetId }) {
             {activeTab === 'refs' && (
                 <div><Card noPadding={false}>
                     Planet Name
-                </Card></div>
+                </Card><Card noPadding={false}><UtterancesComments /></Card></div>
             )};
             {activeTab === 'sandbox' && (
                 <div><Card noPadding={false}>

components/PostCard.tsx

@@ -7,7 +7,7 @@ import AccountAvatar, { PostCardAvatar } from "./AccountAvatar";
 import { Database } from "../utils/database.types";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { UserContext } from "../context/UserContext";
-import UtterancesComments from "./Lens/Utterances";
+// import UtterancesComments from "./Lens/Utterances";
 
 import en from 'javascript-time-ago/locale/en.json';
 import TimeAgo from "javascript-time-ago";

components/Posts/ProfileCard.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react"
-import UtterancesComments from "../Lens/Utterances"
 import Card from "../Card"
 import FriendInfo from "../FriendInfo"
 import PostCard from "../PostCard"
@@ -59,7 +58,6 @@ export function ProfileContent ({ activeTab, userId }) {
                     <p className="mb-2 text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque harum maxime mollitia perferendis praesentium quaerat. Adipisci, delectus eum fugiat incidunt iusto molestiae nesciunt odio porro quae quaerat, reprehenderit, sed.</p>
                     <p className="mb-2 text-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda error necessitatibus nesciunt quas quidem quisquam reiciendis, similique. Amet consequuntur facilis iste iure minima nisi non praesentium ratione voluptas voluptatem?</p>
                     </Card>
-                    <UtterancesComments />
                 </div>
             )}
             {activeTab === 'friends' && (

components/Posts/ProfileNavigation.tsx

@@ -6,7 +6,7 @@ export default function ProfileTabs ({ userId, activeTab }) {
 
     return (
         <div className="mt-6 md:mt-10 flex gap-0">
-            <Link href={`/posts/profile/${userId}/posts`} className={activeTab === 'posts' ? activeTabClasses : tabClasses}>
+            <Link href={`/posts/profile/${userId}/`} className={activeTab === 'posts' ? activeTabClasses : tabClasses}>
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
                 </svg>

context/AnomalyContext.js

@@ -0,0 +1,26 @@
+import { createContext, useEffect, useState } from "react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+
+export const AnomalyContext = createContext ( { } );
+
+export default function AnomalyContextProvider ( { children, planetId } ) {
+    const session = useSession();
+    const supabase = useSupabaseClient();
+    const [planet, setAnomaly] = useState(null);
+
+    useEffect(() => {
+        if (!session?.user?.id) { return; };
+        supabase.from('planets') // Change to specific anomaly table
+            .select()
+            .eq('id', planetId )
+            .then( result => {
+                setAnomaly ( result.data?.[0] );
+            });
+    }, [planetId]);
+
+    return (
+        <AnomalyContext.Provider value={{ planet }}>
+            { children }
+        </AnomalyContext.Provider>
+    );
+};

context/UserContext.js

@@ -1,16 +1,15 @@
-import {createContext, useEffect, useState} from "react";
-import {useSession, useSupabaseClient} from "@supabase/auth-helpers-react";
+import { createContext, useEffect, useState } from "react";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 
 export const UserContext = createContext({});
 
-export function UserContextProvider({children}) {
+export function UserContextProvider ( { children } ) {
   const session = useSession();
   const supabase = useSupabaseClient();
   const [profile,setProfile] = useState(null);
+
   useEffect(() => {
-    if (!session?.user?.id) {
-      return;
-    }
+    if (!session?.user?.id) { return; };
     supabase.from('profiles')
       .select()
       .eq('id', session.user.id)
@@ -20,8 +19,8 @@ export function UserContextProvider({children}) {
   }, [session?.user?.id]);
 
   return (
-    <UserContext.Provider value={{profile}}>
-      {children}
+    <UserContext.Provider value={{ profile }}>
+      { children }
     </UserContext.Provider>
   );
 }

pages/posts/Profile.tsx

@@ -29,9 +29,7 @@ export default function ProfilePage () {
   const planetId = 'cebdc7a2-d8af-45b3-b37f-80f328ff54d6';
 
   useEffect(() => {
-    if (!userId) {
-      return;
-    }
+    if (!userId) { return; };
     fetchProfile();
     fetchPlanet();
   }, [userId]);

pages/posts/User.tsx

@@ -0,0 +1,71 @@
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+
+import Layout from "../../components/Layout";
+import Card from "../../components/Card";
+
+import { Database } from "../../utils/database.types";
+import { useSupabaseClient, useSession } from "@supabase/auth-helpers-react";
+//import AnomalyContextProvider from '../../context/AnomalyContext';
+import { UserContext, UserContextProvider } from "../../context/UserContext";
+import { ProfileContent } from "../../components/Posts/ProfileCard";
+
+import ProfileTabs from "../../components/Posts/ProfileNavigation";
+import UserCoverImage from "../../components/Cover";
+import { PostCardAvatar } from "../../components/AccountAvatar";
+
+type Profiles = Database['public']['Tables']['profiles']['Row'];
+
+export default function UserPage () {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+    const [user, setUser] = useState(null);
+
+    const router = useRouter();
+    const tab = router?.query?.tab?.[0] || 'posts';
+    const userId = router.query.id;
+
+    useEffect(() => {
+        if ( !userId ) { return; };
+        fetchUser();
+    }, [userId]);
+
+    function fetchUser () {
+        supabase.from('profiles')
+        .select()
+        .eq("id", userId)
+        .then( result => {
+            if ( result.error ) { throw result.error; };
+            if ( result.data ) { setUser ( result.data[0] ); };
+        })
+    }
+
+    return (
+        <UserContextProvider>
+            <Layout hideNavigation={false}>{/* Should be <ProfileLayout></> */}
+                <Card noPadding={true}>
+                <div className="relative overflow-hidden rounded-md">
+                    <UserCoverImage url={user?.cover} editable={true} onChange={fetchUser()} />
+                    <div className="absolute top-40 mt-12 left-4 w-full z-20">
+                    {user && (<PostCardAvatar // Add upload handler from AccountAvatarV1
+                        url={user?.avatar_url}
+                        size={120} /> )}
+                    </div>
+                    <div className="p-4 pt-0 md:pt-4 pb-0">
+                    <div className="ml-24 md:ml-40 mt-1">
+                        <div className="flex ml-0"> {/* Profile Name - Set up styling rule to remove the ml-10 on mobile */}<h1 className="text-3xl font-bold">{user?.full_name}</h1>{/* Only show userma,e on mouseover, along with the address (like a metamask profile view) <p className="@apply text-blue-200 leading-4 mb-2 mt-2">{profile?.username}</p>*/}</div>
+                        <div className="text-gray-500 leading-4 mt-1 ml-0">{user?.location}</div><div className="items-center cursor-pointer absolute right-0 bottom-0 m-2"><label className="flex items-center gap-2 bg-white py-1 px-2 rounded-md shadow-md shadow-black cursor-pointer">
+                            <input type='file' className='hidden' /> {/* Use this to update location, address (will later be handled by Thirdweb), username, profile pic. Maybe just have a blanket button to include the cover as well */}
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z" /><path strokeLinecap="round" strokeLinejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z" /></svg>Update profile</label>
+                        </div>
+                        {/*<div className="@apply text-blue-200 leading-4 mb-2 mt-2 ml-10">{profile?.address}{/* | Only show this on mouseover {profile?.username}*/}{/*</div> {/* Profile Location (from styles css) */}
+                    </div>
+                    <ProfileTabs activeTab={tab} userId={user?.id} />
+                    </div>
+                </div>
+                </Card>
+                <ProfileContent activeTab={tab} userId={userId} />
+            </Layout>
+        </UserContextProvider>
+    )
+}

pages/posts/profile/[id].tsx

@@ -1,6 +1,5 @@
 import ProfilePage from "../Profile";
 import React from "react";
-import { useRouter } from "next/router";
 
 export default function Profile () {
   return <ProfilePage />

pages/posts/profile/[id]/[...tab].tsx

@@ -1,4 +1,4 @@
-import ProfilePage from "../../profile";
+import ProfilePage from "../../Profile";
 
 export default function ProfileTab () {
     return <ProfilePage />;

pages/posts/user/[id].tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import UserPage from "../User";
+
+export default function User () {
+    return <UserPage />
+}