refactor: update ConversationCard and CurrentConversation to use the …

…dispatch logic

Co-authored-by: Alphonso <camelPhonso@users.noreply.github.com>
Relates enBloc-org#236

components/messaging/ConversationCard.tsx

@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import ConversationCardModal from './ConversationCardModal';
-import { useConversationContext } from '../../context/conversationContext';
 import defaultProfileImage from '../../public/default-profile.png';
 import useMediaQuery from '../hooks/useMediaQuery';
 
@@ -13,6 +12,7 @@ export type ConversationCardProps = {
   itemName: string;
   clickHandler: () => void;
   notificationList: number[];
+  currentConversationId: number;
 };
 
 const formatString = (input: string | null): string => {
@@ -36,14 +36,14 @@ const ConversationCard: React.FC<ConversationCardProps> = ({
   itemName,
   clickHandler,
   notificationList,
+  currentConversationId,
 }) => {
-  const { currentConversation } = useConversationContext();
   const isBreakpoint = useMediaQuery(1000);
 
   return (
     <div
       className={`relative flex items-center bg-gray-300 p-4 lg:max-w-[500px] lg:rounded-lg lg:shadow-md lg:hover:bg-secondaryGray
-          ${currentConversation?.conversation_id === conversationId ? 'lg: border-2 lg:border-primaryGreen' : ''}`}
+          ${currentConversationId === conversationId ? 'lg: border-2 lg:border-primaryGreen' : ''}`}
       tabIndex={0}
       aria-label='button'
       onClick={clickHandler}

components/messaging/ConversationsList.tsx

@@ -12,7 +12,7 @@ import updateConversationReadStatus from '@/supabase/models/messaging/updateConv
 
 const ConversationsList: React.FC = () => {
   const {
-    conversationState: { allConversations, currentUserId },
+    conversationState: { allConversations, currentConversation, currentUserId },
     dispatch,
   } = useConversationContext();
 
@@ -120,6 +120,9 @@ const ConversationsList: React.FC = () => {
                 updateOpenConversation(conversation.conversation_id)
               }
               notificationList={notificationList}
+              currentConversationId={
+                currentConversation?.conversation_id as number
+              }
             />
           </div>
         ))

components/messaging/CurrentConversation.tsx

@@ -15,8 +15,10 @@ import newClient from '@/supabase/utils/newClient';
 import SystemMessageCard from './SystemMessageCard';
 
 const CurrentConversation: React.FC = () => {
-  const { allConversations, currentConversation, setCurrentConversation } =
-    useConversationContext();
+  const {
+    conversationState: { allConversations, currentConversation },
+    dispatch,
+  } = useConversationContext();
   const [currentMessages, setCurrentMessages] = useState<MessageType[]>([]);
   const [isScrolling, setIsScrolling] = useState<boolean>(false);
   const [systemUser, setSystemUser] = useState<string | undefined>(undefined);
@@ -33,8 +35,11 @@ const CurrentConversation: React.FC = () => {
   }, []);
 
   useEffect(() => {
-    setCurrentConversation && setCurrentConversation(allConversations[0]);
-  }, [allConversations, setCurrentConversation]);
+    dispatch({
+      type: 'SET_CURRENT_CONVERSATION',
+      payload: allConversations[0],
+    });
+  }, [allConversations]);
 
   useEffect(() => {
     const setMessagesForCurrentConversation = async () => {