fixed images not rendering issue

TechTitansGeaux · Jul 22, 2023 · 4f3dab7 · 4f3dab7
1 parent 7c6eea9
commit 4f3dab7
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 17 deletions.
diff --git a/client/components/MessageComponents/ContinueConversation.jsx b/client/components/MessageComponents/ContinueConversation.jsx
@@ -2,8 +2,8 @@ import { React, useState } from 'react';
 import axios from 'axios';
 import Conversation from './Conversation.jsx';
 
-const StartConversation = (props) => {
-  const { convo, loggedIn, otherUser, updateView } = props;
+const ContinueConversation = (props) => {
+  const { convoId, loggedIn, otherUser, updateView } = props;
 
   const [ topText, updateTopText ] = useState('');
 
@@ -15,11 +15,16 @@ const StartConversation = (props) => {
     axios.post('/messagesHandling/message', {
       senderId: loggedIn.id,
       recipientId: otherUser.id,
-      conversationId: convo.id,
+      conversationId: convoId,
       img: `https://apimeme.com/meme?meme=${meme}&top=${topText}&bottom=${bottomText}`.replaceAll(' ', '+')
     })
       .then((res) => {
-        updateView(<Conversation convo={convo} loggedIn={loggedIn} otherUser={otherUser} updateView={updateView}/>);
+        updateView(<Conversation
+          convoId={convoId}
+          loggedIn={loggedIn}
+          otherUser={otherUser}
+          updateView={updateView}
+        />);
       })
       .catch((err) => {
         console.log(err);
@@ -63,4 +68,4 @@ const StartConversation = (props) => {
   );
 };
 
-export default StartConversation;
+export default ContinueConversation;
diff --git a/client/components/MessageComponents/Conversation.jsx b/client/components/MessageComponents/Conversation.jsx
@@ -4,20 +4,17 @@ import MessageItem from './ConvoMessageItem.jsx';
 import ContinueConversation from './ContinueConversation.jsx';
 
 const Conversation = (props) => {
-  const { convo, loggedIn, otherUser, updateView } = props;
-
+  const { convoId, loggedIn, otherUser, updateView } = props;
   const [ conversations, setConversations ] = useState([]);
 
-
-
   useEffect(() => {
     const fetchAllConvoMessages = async () => {
-      const request = await axios.get(`/messagesHandling/messages${convo.id}`);
+      const request = await axios.get(`/messagesHandling/messages${convoId}`);
       setConversations(request.data);
       return request;
     };
     fetchAllConvoMessages();
-  }, [convo]);
+  }, [convoId]);
 
   return (
     <div>
@@ -26,7 +23,7 @@ const Conversation = (props) => {
           className='btn btn-primary'
           onClick={ () => {
             updateView(<ContinueConversation
-              convo={convo}
+              convoId={convoId}
               loggedIn={loggedIn}
               otherUser={otherUser}
               updateView={updateView}/>);

diff --git a/client/components/MessageComponents/ConversationListItem.jsx b/client/components/MessageComponents/ConversationListItem.jsx
@@ -25,7 +25,7 @@ const ConversationListItem = (props) => {
   }, [loggedIn]);
 
   return (
-    <div onClick={ () => { updateView(<Conversation loggedIn={loggedIn} convo={convo} otherUser={otherUser} updateView={updateView}/>); }}>
+    <div onClick={ () => { updateView(<Conversation loggedIn={loggedIn} convoId={convo.id} otherUser={otherUser} updateView={updateView}/>); }}>
       <p className="scream modal-content  text-white pt-3">
         <span className="scream modal-content  text-sm-left">
           between you and { `${otherUser.username}` }

diff --git a/client/components/MessageComponents/StartConversation.jsx b/client/components/MessageComponents/StartConversation.jsx
@@ -41,9 +41,13 @@ const StartConversation = (props) => {
         recipientId: recipient.id,
         img: `https://apimeme.com/meme?meme=${meme}&top=${topText}&bottom=${bottomText}`.replaceAll(' ', '+')
       })
-        .then((res) => {
-          console.log(res.data);
-          updateView(<Conversation convo={res.data} loggedIn={props.loggedIn} />);
+        .then((message) => {
+          updateView(<Conversation
+            convoId={message.data.conversationId}
+            loggedIn={loggedIn}
+            otherUser={recipient}
+            updateView={updateView}
+          />);
         })
         .catch((err) => {
           console.log(err);

diff --git a/server/routes/messagesHandling.js b/server/routes/messagesHandling.js
@@ -46,7 +46,6 @@ messageRouter.get('/messages:convoId', (req, res) => {
   const {convoId} = req.params;
   Messages.findAll({ where: { conversationId: convoId } })
     .then((data) => {
-      console.log(data);
       res.send(data.reverse());
     })
     .catch((err) => {