One last bug to fix, rerendering

Author: multimokia

components/forms/MiniProfile.tsx

@@ -1,6 +1,6 @@
 import { useSideBarOptionSetter } from '@/context/SideBarOptionCtx';
 import { getOrCreateDMChannel } from '@/lib/DMChannelHelper';
-import { useAddMessage, useDMChannels, useSetChannel } from '@/lib/store';
+import { useAddDMChannel, useDMChannels, useSetChannel } from '@/lib/store';
 import { createMessage } from '@/services/message.service';
 import { Role, ServerUser, User } from '@/types/dbtypes';
 import { useSupabaseClient, useUser } from '@supabase/auth-helpers-react';
@@ -23,6 +23,7 @@ function WrappedComponent({
   const dmChannels = useDMChannels();
   const setChannel = useSetChannel();
   const setSideBarOption = useSideBarOptionSetter();
+  const addDMChannel = useAddDMChannel();
 
   return (
     <div className="flex flex-col space-y-2 items-center p-3">
@@ -64,8 +65,6 @@ function WrappedComponent({
                 dmChannels
               );
 
-              console.table(dmChannel);
-
               if (dmChannel) {
                 await createMessage(
                   supabase,

components/home/DMessageList.tsx

@@ -1,7 +1,4 @@
-import { getAllDMChannels } from '@/services/directmessage.service';
 import { Channel, DMChannelWithRecipient } from '@/types/dbtypes';
-import { useSupabaseClient } from '@supabase/auth-helpers-react';
-import { useEffect, useState } from 'react';
 import UserIcon from '../icons/UserIcon';
 import styles from '@/styles/Chat.module.css';
 import { useDMChannels, useSetChannel } from '@/lib/store';
@@ -38,7 +35,7 @@ function mapToComponentArray(
 }
 export default function DMessageList() {
   const setChannel = useSetChannel();
-  const dmChannels = useDMChannels();
+  const dmChannels = Array.from(useDMChannels().values());
 
   return (
     <>
@@ -50,7 +47,25 @@ export default function DMessageList() {
         </div>
       </div>
       <div className="border-t-2 mx-5 border-grey-700 flex flex-col pt-3">
-        { mapToComponentArray(dmChannels, setChannel) }
+        { dmChannels.map((value) => (
+          <div
+            key={value.channel_id}
+            className="flex items-center p-2 w-full hover:bg-grey-700 rounded-md transition-colors"
+            onClick={() => {
+              setChannel({
+                channel_id: value.channel_id,
+                server_id: value.server_id,
+                name: value.recipient.username,
+                is_media: false,
+                description: null,
+                created_at: null
+              });
+            }}
+          >
+            <UserIcon user={value.recipient} className="!w-6 !h-6"/>
+            <div>{value.recipient.username}</div>
+          </div>
+        ))}
       </div>
     </>
   );

lib/DMChannelHelper.ts

@@ -2,7 +2,6 @@ import { Database } from '@/types/database.supabase';
 import { DMChannelWithRecipient } from '@/types/dbtypes';
 import { User } from '@/types/dbtypes';
 import { SupabaseClient } from '@supabase/supabase-js';
-import { Channel } from '@/types/dbtypes';
 import { createDM } from '@/services/directmessage.service';
 
 export async function getOrCreateDMChannel(