mini profiles are free now

Author: multimokia

components/forms/MiniProfile.tsx

@@ -1,68 +1,44 @@
 import { getServerProfileForUser } from '@/services/profile.service';
 import { getServerIdFromMessageId } from '@/services/server.service';
-import { ServerUserProfile } from '@/types/dbtypes';
+import { Role, ServerUser, ServerUserProfile, User } from '@/types/dbtypes';
 import { useSupabaseClient } from '@supabase/auth-helpers-react';
 import { memo, useEffect, useState } from 'react';
 import UserIcon from '../icons/UserIcon';
 import { SearchBar } from './Styles';
 
 // TODO: Once DMs are implemented, this component will need to be updated to handle DMs as well.
-function WrappedComponent({ userId, messageId }: { userId: string, messageId: number }) {
-  const supabase = useSupabaseClient();
-  const [user, setUser] = useState<ServerUserProfile | null>(null);
-
-  useEffect(() => {
-    async function handleAsync() {
-      const { data: serverId } = await getServerIdFromMessageId(supabase, messageId);
-      const { data, error } = await getServerProfileForUser(supabase, userId, serverId!);
-
-      if (error) {
-        console.error(error);
-      }
-
-      setUser(data);
-      console.log(data);
-    }
-
-    handleAsync();
-  }, [messageId, userId, supabase]);
-
+function WrappedComponent({ profile, server_user, roles }: { profile: User, server_user: ServerUser, roles: Role[] }) {
   return (
     <div className="flex flex-col space-y-2 items-center p-3">
-      { user ? (
-        <>
-          <UserIcon user={user} className='!w-9 !h-9'/>
-          { user.server_user.nickname && <h2 className='text-lg'>
-            {user.server_user.nickname}
-          </h2> }
-          <h2 className={user.server_user.nickname ? 'text-base' : 'text-lg'}>{user.username}</h2>
-          <hr/>
-          <h2 className='text-sm text-gray-400 text-left w-full'>Roles</h2>
-          <div className='flex flex-col w-full items-center space-y-1'>
-            { user.roles.map(role => (
-              <span
-                key={role.id}
-                className='text-sm text-gray-400 py-1 px-2 border-2 border-solid w-full rounded-sm'
-                style={{
-                  border: `1px solid #${!!role.color ? role.color : 'cacacacc'}`,
-                  color: `#${!!role.color ? role.color : 'cacacacc'}`,
-                }}
-              >
-                {role.name}
-              </span>
-            )) }
-          </div>
-          <hr/>
-          <form>
-            <input
-              type="text"
-              className={`${SearchBar}`}
-              placeholder={`Message @${user.username}`}
-            />
-          </form>
-        </>
-      ): <h2>Loading...</h2>}
-
+      <UserIcon user={profile} className='!w-9 !h-9'/>
+      { server_user.nickname && <h2 className='text-lg'>
+        {server_user.nickname}
+      </h2> }
+      <h2 className={server_user.nickname ? 'text-base' : 'text-lg'}>{profile.username}</h2>
+      <hr/>
+      <h2 className='text-sm text-gray-400 text-left w-full'>Roles</h2>
+      <div className='flex flex-col w-full items-center space-y-1'>
+        { roles.map(role => (
+          <span
+            key={role.id}
+            className='text-sm text-gray-400 py-1 px-2 border-2 border-solid w-full rounded-sm'
+            style={{
+              border: `1px solid #${!!role.color ? role.color : 'cacacacc'}`,
+              color: `#${!!role.color ? role.color : 'cacacacc'}`,
+            }}
+          >
+            {role.name}
+          </span>
+        )) }
+      </div>
+      <hr/>
+      <form>
+        <input
+          type="text"
+          className={`${SearchBar}`}
+          placeholder={`Message @${profile.username}`}
+        />
+      </form>
     </div>
   );
 }

components/home/Chat.tsx

@@ -1,4 +1,3 @@
-import { useOnlinePresenceRef } from '@/context/ChatCtx';
 import ChannelMessageIcon from '../icons/ChannelMessageIcon';
 import { useRef, useEffect } from 'react';
 import styles from '@/styles/Chat.module.css';

components/home/Message.tsx

@@ -8,7 +8,6 @@ import { editMessage } from '@/services/message.service';
 import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react';
 import MessageContent from './MessageContent';
 import DeleteMsgModal from '@/components/home/DeleteMsgModal';
-import { MiniProfile } from '../forms/MiniProfile';
 import { MessageWithServerProfile } from '@/types/dbtypes';
 import { MessageHeader } from './MessageHeader';
 
@@ -73,6 +72,7 @@ export default function Message({
           <MessageHeader
             profile={message.profile}
             server_user={message.author}
+            roles={message.roles}
             message_id={message.id}
             message_color={messageColor}
             display_time={displayTime}

components/home/MessageHeader.tsx

@@ -1,4 +1,4 @@
-import { ServerUser, User } from '@/types/dbtypes';
+import { Role, ServerUser, User } from '@/types/dbtypes';
 import { Tooltip } from 'react-tooltip';
 import { MiniProfile } from '../forms/MiniProfile';
 import UserIcon from '../icons/UserIcon';
@@ -9,19 +9,21 @@ export function MessageHeader({
   message_id,
   message_color,
   display_time,
-  edited
+  edited,
+  roles
 }: {
   profile: User,
   server_user: ServerUser,
   message_id: number,
   message_color: string,
   display_time: string,
-  edited: boolean
+  edited: boolean,
+  roles: Role[],
 }) {
   return (
     <div className="flex-grow flex flex-row">
       <Tooltip id={profile.id} className='z-20 !w-12' clickable noArrow>
-        <MiniProfile userId={profile.id} messageId={message_id} />
+        <MiniProfile profile={profile} server_user={server_user} roles={roles} />
       </Tooltip>
       <UserIcon user={profile} />
       <div className="flex-grow flex items-center">