wip

src/pages/common/Header/Menu/Profile/Profile.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import Foco from 'react-foco'
 import { useNavigate } from '@remix-run/react'
 import { observer } from 'mobx-react'
@@ -98,7 +98,7 @@ const Profile = observer((props: IProps) => {
       <Flex>
         {state.showProfileModal && (
           <Foco onClickOutside={() => toggleProfileModal()}>
-            <ProfileModal username={user.userName} />
+            <ProfileModal />
           </Foco>
         )}
       </Flex>

src/pages/common/Header/Menu/ProfileModal/ProfileModal.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import { useContext } from 'react'
 import styled from '@emotion/styled'
 import { NavLink } from '@remix-run/react'
 import { observer } from 'mobx-react'
 import { preciousPlasticTheme } from 'oa-themes'
 import { useCommonStores } from 'src/common/hooks/useCommonStores'
+import { SessionContext } from 'src/pages/common/SessionContext'
 import { COMMUNITY_PAGES_PROFILE } from 'src/pages/PageList'
 import { Box, Flex } from 'theme-ui'
 
@@ -12,10 +13,6 @@ import { AuthWrapper } from '../../../../../common/AuthWrapper'
 // TODO: Remove direct usage of Theme
 const theme = preciousPlasticTheme.styles
 
-interface IProps {
-  username: string
-}
-
 const ModalContainer = styled(Box)`
   max-width: 100%;
   max-height: 100%;
@@ -69,20 +66,20 @@ const LogoutButton = styled.button`
   }
 `
 
-export const ProfileModal = observer((props: IProps) => {
+export const ProfileModal = observer(() => {
   const { userStore } = useCommonStores().stores
+  const profile = useContext(SessionContext)
 
   const logout = () => {
     userStore.logout()
   }
 
-  const { username } = props
   return (
     <ModalContainer data-cy="user-menu-list">
       <ModalContainerInner>
         <Flex>
           <ModalLink
-            to={'/u/' + username}
+            to={'/u/' + profile?.username}
             data-cy="menu-Profile"
             className={({ isActive }) => (isActive ? 'current' : '')}
           >

src/pages/common/SessionContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react'
 
-import type { User } from '@supabase/supabase-js'
+import type { DBProfile } from 'src/models/profile.model'
 
-export const SessionContext = createContext<User | null>(null)
+export const SessionContext = createContext<DBProfile | null>(null)

src/pages/common/UserStoreWrapper.ts

@@ -0,0 +1,21 @@
+import { useContext, useEffect } from 'react'
+import { useCommonStores } from 'src/common/hooks/useCommonStores'
+
+import { SessionContext } from './SessionContext'
+
+export const UserStoreWrapper = ({
+  children,
+}: {
+  children: React.ReactNode
+}) => {
+  const profile = useContext(SessionContext)
+  const { userStore } = useCommonStores().stores
+
+  useEffect(() => {
+    if (profile) {
+      userStore.refreshActiveUserDetailsById(profile.username)
+    }
+  }, [profile])
+
+  return children
+}

src/routes/_.tsx

@@ -13,20 +13,28 @@ import GlobalSiteFooter from 'src/pages/common/GlobalSiteFooter/GlobalSiteFooter
 import Header from 'src/pages/common/Header/Header'
 import { SessionContext } from 'src/pages/common/SessionContext'
 import { StickyButton } from 'src/pages/common/StickyButton'
+import { UserStoreWrapper } from 'src/pages/common/UserStoreWrapper'
 import { createSupabaseServerClient } from 'src/repository/supabase.server'
+import { profileServiceServer } from 'src/services/profileService.server'
 import { Flex } from 'theme-ui'
 
 import type { LoaderFunctionArgs } from '@remix-run/node'
+import type { DBProfile } from 'src/models/profile.model'
 
 export async function loader({ request }: LoaderFunctionArgs) {
   const environment = getEnvVariables()
   const { client } = createSupabaseServerClient(request)
 
+  let profile: DBProfile | null = null
   const {
     data: { user },
   } = await client.auth.getUser()
 
-  return Response.json({ environment, user })
+  if (user) {
+    profile = await profileServiceServer.getByAuthId(user.id, client)
+  }
+
+  return Response.json({ environment, profile })
 }
 
 export function HydrateFallback() {
@@ -37,26 +45,28 @@ export function HydrateFallback() {
 
 // This is a Layout file, it will render for all routes that have _. prefix.
 export default function Index() {
-  const { environment, user } = useLoaderData<typeof loader>()
+  const { environment, profile } = useLoaderData<typeof loader>()
 
   return (
     <EnvironmentContext.Provider value={environment}>
-      <SessionContext.Provider value={user}>
-        <Flex
-          sx={{ height: '100vh', flexDirection: 'column' }}
-          data-cy="page-container"
-        >
-          <Analytics />
-          <ScrollToTop />
-          <ClientOnly fallback={<></>}>{() => <DevSiteHeader />}</ClientOnly>
-          <Alerts />
-          <Header />
-
-          <Outlet />
-
-          <GlobalSiteFooter />
-          <ClientOnly fallback={<></>}>{() => <StickyButton />}</ClientOnly>
-        </Flex>
+      <SessionContext.Provider value={profile}>
+        <UserStoreWrapper>
+          <Flex
+            sx={{ height: '100vh', flexDirection: 'column' }}
+            data-cy="page-container"
+          >
+            <Analytics />
+            <ScrollToTop />
+            <ClientOnly fallback={<></>}>{() => <DevSiteHeader />}</ClientOnly>
+            <Alerts />
+            <Header />
+
+            <Outlet />
+
+            <GlobalSiteFooter />
+            <ClientOnly fallback={<></>}>{() => <StickyButton />}</ClientOnly>
+          </Flex>
+        </UserStoreWrapper>
       </SessionContext.Provider>
     </EnvironmentContext.Provider>
   )

src/services/profileService.server.ts

@@ -0,0 +1,23 @@
+import type { SupabaseClient } from '@supabase/supabase-js'
+import type { DBProfile } from 'src/models/profile.model'
+
+const getByAuthId = async (
+  id: string,
+  client: SupabaseClient,
+): Promise<DBProfile | null> => {
+  const { data } = await client
+    .from('profiles')
+    .select('*')
+    .eq('auth_id', id)
+    .single()
+
+  if (!data) {
+    return null
+  }
+
+  return data as DBProfile
+}
+
+export const profileServiceServer = {
+  getByAuthId,
+}

src/stores/User/user.store.ts

@@ -5,7 +5,6 @@ import {
   reauthenticateWithCredential,
   sendEmailVerification,
   sendPasswordResetEmail,
-  signInWithEmailAndPassword,
   updateEmail,
   updatePassword,
   updateProfile,
@@ -117,10 +116,6 @@ export class UserStore extends ModuleStore {
     }
   }
 
-  public async login(email: string, password: string) {
-    return signInWithEmailAndPassword(auth, email, password)
-  }
-
   public async getUserByUsername(username: string): Promise<IUserDB | null> {
     const [user] = await this.db
       .collection<IUser>(COLLECTION_NAME)
@@ -314,6 +309,15 @@ export class UserStore extends ModuleStore {
     this._updateActiveUser(user)
   }
 
+  public async refreshActiveUserDetailsById(id: string) {
+    const user = await this.db
+      .collection<IUser>(COLLECTION_NAME)
+      .doc(id)
+      .get('server')
+
+    this._updateActiveUser(user)
+  }
+
   public async sendEmailVerification() {
     logger.info('sendEmailVerification', { authCurrentUser: auth.currentUser })
     if (auth.currentUser) {

supabase/migrations/20250113184950_profile_auth_columns.sql

@@ -0,0 +1,13 @@
+alter table "public"."profiles" add column "auth_id" uuid;
+
+alter table "public"."profiles" add column "legacy_id" text;
+
+CREATE UNIQUE INDEX profiles_auth_id_key ON public.profiles USING btree (auth_id);
+
+alter table "public"."profiles" add constraint "profiles_auth_id_fkey" FOREIGN KEY (auth_id) REFERENCES auth.users(id) ON UPDATE CASCADE ON DELETE CASCADE not valid;
+
+alter table "public"."profiles" validate constraint "profiles_auth_id_fkey";
+
+alter table "public"."profiles" add constraint "profiles_auth_id_key" UNIQUE using index "profiles_auth_id_key";
+
+