From 1b09648085b4a06078f4c7d22948d355889f4a85 Mon Sep 17 00:00:00 2001
From: Kirstie <39728053+epixieme@users.noreply.github.com>
Date: Mon, 13 May 2024 11:49:20 +0100
Subject: [PATCH 1/9] fixed yes we talk button by adding onclick and state

---
 .../components/ConversationCard.tsx           | 33 ++++++++++++++-----
 .../components/YesWeTalkedButton.tsx          | 18 ++++++----
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/features/conversations/components/ConversationCard.tsx b/src/features/conversations/components/ConversationCard.tsx
index 2b8eb29d..38614a8d 100644
--- a/src/features/conversations/components/ConversationCard.tsx
+++ b/src/features/conversations/components/ConversationCard.tsx
@@ -60,14 +60,22 @@ function ConversationCard({ conversationId, userBName, conversationState, onDele
   return (
     <CmCard ref={cardRef} style={{ padding: 20, scrollMarginTop: 100 }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
-        <CmTypography variant="caption" style={{ flexShrink: 1, fontSize: 14 }}>{headerText[conversationState]}</CmTypography>
+        <CmTypography variant="caption" style={{ flexShrink: 1, fontSize: 14 }}>
+          {headerText[conversationState]}
+        </CmTypography>
         <CmButton variant="text" text="Copy Link" style={{ visibility: expanded ? 'visible' : 'hidden' }} onClick={handleCopyLink} />
         {!expanded && conversationState > 0 && conversationState < 5 && <NotifyIcon state={conversationState} />}
       </div>
 
       <div style={{ display: 'flex', alignItems: 'center' }}>
-        <CmTypography variant="h2" style={{ textAlign: 'left', margin: 0, marginRight: 10 }}>{USER_B_NAME}</CmTypography>
-        {expanded && <IconButton style={{ color: 'black', padding: 0, top: -2 }}><EditIcon /></IconButton>}
+        <CmTypography variant="h2" style={{ textAlign: 'left', margin: 0, marginRight: 10 }}>
+          {USER_B_NAME}
+        </CmTypography>
+        {expanded && (
+          <IconButton style={{ color: 'black', padding: 0, top: -2 }}>
+            <EditIcon />
+          </IconButton>
+        )}
       </div>
 
       {/* For state 0, display a text that the userB has to take the quiz */}
@@ -80,23 +88,30 @@ function ConversationCard({ conversationId, userBName, conversationState, onDele
 
       {/* For every other state, show the text and buttons the userA needs */}
       <Collapse in={expanded && conversationState > 0}>
-        <CmTypography variant="h4" style={styles.subTitles}>1. {USER_B_NAME} took the values quiz</CmTypography>
+        <CmTypography variant="h4" style={styles.subTitles}>
+          1. {USER_B_NAME} took the values quiz
+        </CmTypography>
         <HowYouAlignButton conversationState={conversationState} conversationId={conversationId} />
 
-        <CmTypography variant="h4" style={styles.subTitles}>2. See what you can discuss with {USER_B_NAME}</CmTypography>
+        <CmTypography variant="h4" style={styles.subTitles}>
+          2. See what you can discuss with {USER_B_NAME}
+        </CmTypography>
         <ViewSelectedTopics conversationState={conversationState} conversationId={conversationId} />
 
-        <CmTypography variant="h4" style={styles.subTitles}>3. Have you had your conversation with {USER_B_NAME}?</CmTypography>
-        {conversationState <= 3 && <YesWeTalkedButton conversationState={conversationState} />}
+        <CmTypography variant="h4" style={styles.subTitles}>
+          3. Have you had your conversation with {USER_B_NAME}?
+        </CmTypography>
+        {conversationState <= 3 && <YesWeTalkedButton conversationState={conversationState} conversationId={conversationId} />}
         {conversationState > 3 && <ConversationRating />}
       </Collapse>
 
       {/* Button to delete a conversation and expand / collapse the card */}
       <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: expanded ? 30 : 0 }}>
-        {expanded && <IconButton onClick={() => onDeleteConversation(conversationId)}>
+        {expanded && (
+          <IconButton onClick={() => onDeleteConversation(conversationId)}>
             <DeleteIcon style={{ color: '#77AAAF' }} />
           </IconButton>
-        }
+        )}
 
         {!expanded && <div></div>}
         <CmButton variant="text" text={expanded ? 'Less' : 'More'} onClick={() => setExpanded(!expanded)} />
diff --git a/src/features/conversations/components/YesWeTalkedButton.tsx b/src/features/conversations/components/YesWeTalkedButton.tsx
index 9218cee3..cc185ff0 100644
--- a/src/features/conversations/components/YesWeTalkedButton.tsx
+++ b/src/features/conversations/components/YesWeTalkedButton.tsx
@@ -1,14 +1,20 @@
-import { CmButton } from "shared/components";
-import { TConversationState } from "types/Conversation";
+import { CmButton } from 'shared/components';
+import { TConversationState } from 'types/Conversation';
+import { useUpdateConversation } from '../hooks';
 
 interface Props {
   conversationState: TConversationState;
+  conversationId: string;
 }
 
-function YesWeTalkedButton({ conversationState }: Props) {
-  return (
-    <CmButton disabled={conversationState !== TConversationState.TopicsViewed} text='Yes, we talked!' />
-  );
+function YesWeTalkedButton({ conversationState, conversationId }: Props) {
+  const { updateConversation } = useUpdateConversation();
+  function handleClick() {
+    if (conversationState === TConversationState.TopicsViewed) {
+      updateConversation(conversationId, { state: 4 });
+    }
+  }
+  return <CmButton disabled={conversationState !== TConversationState.TopicsViewed} text="Yes, we talked!" onClick={handleClick} />;
 }
 
 export default YesWeTalkedButton;

From 0ef04b0926c78a628ab1a78c9730ff13d98e1e67 Mon Sep 17 00:00:00 2001
From: Kirstie <39728053+epixieme@users.noreply.github.com>
Date: Mon, 13 May 2024 15:58:08 +0100
Subject: [PATCH 2/9] adding code for conversation rating

---
 .../components/ConversationCard.tsx           |  2 +-
 .../components/ConversationRating.tsx         | 48 +++++++++++++++----
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/features/conversations/components/ConversationCard.tsx b/src/features/conversations/components/ConversationCard.tsx
index 38614a8d..d0662085 100644
--- a/src/features/conversations/components/ConversationCard.tsx
+++ b/src/features/conversations/components/ConversationCard.tsx
@@ -102,7 +102,7 @@ function ConversationCard({ conversationId, userBName, conversationState, onDele
           3. Have you had your conversation with {USER_B_NAME}?
         </CmTypography>
         {conversationState <= 3 && <YesWeTalkedButton conversationState={conversationState} conversationId={conversationId} />}
-        {conversationState > 3 && <ConversationRating />}
+        {conversationState > 3 && <ConversationRating conversationId={conversationId} conversationState={conversationState} />}
       </Collapse>
 
       {/* Button to delete a conversation and expand / collapse the card */}
diff --git a/src/features/conversations/components/ConversationRating.tsx b/src/features/conversations/components/ConversationRating.tsx
index 2b18b04c..6a5beda3 100644
--- a/src/features/conversations/components/ConversationRating.tsx
+++ b/src/features/conversations/components/ConversationRating.tsx
@@ -1,17 +1,47 @@
-import { CmButton, CmTypography } from "shared/components";
+// import { useState } from 'react';
+import { CmButton, CmTypography } from 'shared/components';
+import useApiClient from 'shared/hooks/useApiClient';
+import { useUpdateConversation } from '../hooks';
+import { useState } from 'react';
 
-function ConversationRating() {
+interface Props {
+  conversationId: string;
+  // initialRating: number;
+  // onRated: () => void;
+  conversationState: number;
+}
+
+function ConversationRating({ conversationId, conversationState }: Props) {
+  const apiClient = useApiClient();
+  const { updateConversation } = useUpdateConversation();
+  const [rating, setRating] = useState(0);
+
+  function submitRating(newRating: number) {
+    setRating(newRating);
+    if (conversationState === 4) updateConversation(conversationId, { state: 5 });
+
+    apiClient.putSingleConversation({
+      conversationId,
+      updatedConversation: {
+        userARating: newRating,
+      },
+    });
+  }
   return (
     <>
-      <CmTypography variant="h1" style={{ textAlign: 'left' }}>Yay! Go you!</CmTypography>
-      <CmTypography variant="h3" style={{ textAlign: 'left' }}>How Did it go?</CmTypography>
+      <CmTypography variant="h1" style={{ textAlign: 'left' }}>
+        Yay! Go you!
+      </CmTypography>
+      <CmTypography variant="h3" style={{ textAlign: 'left' }}>
+        How Did it go?
+      </CmTypography>
 
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-        <CmButton text='😡' />
-        <CmButton text='😐' />
-        <CmButton text='🤔' />
-        <CmButton text='😊' />
-        <CmButton text='🥳' />
+        <CmButton text="😡" onClick={() => submitRating(1)} style={{ backgroundColor: rating === 1 ? 'lightgray' : 'white' }} />
+        <CmButton text="😐" onClick={() => submitRating(2)} style={{ backgroundColor: rating === 2 ? 'lightgray' : 'white' }} />
+        <CmButton text="🤔" onClick={() => submitRating(3)} style={{ backgroundColor: rating === 3 ? 'lightgray' : 'white' }} />
+        <CmButton text="😊" onClick={() => submitRating(4)} style={{ backgroundColor: rating === 4 ? 'lightgray' : 'white' }} />
+        <CmButton text="🥳" onClick={() => submitRating(5)} style={{ backgroundColor: rating === 5 ? 'lightgray' : 'white' }} />
       </div>
     </>
   );

From 80d51830dc27d92392e112379f0aae2b12b376dd Mon Sep 17 00:00:00 2001
From: Kirstie <39728053+epixieme@users.noreply.github.com>
Date: Mon, 13 May 2024 16:25:08 +0100
Subject: [PATCH 3/9] fixed the conversation rating

---
 src/features/conversations/components/ConversationCard.tsx  | 5 +++--
 .../conversations/components/ConversationRating.tsx         | 6 +++---
 .../conversations/components/ConversationsDrawer.tsx        | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/features/conversations/components/ConversationCard.tsx b/src/features/conversations/components/ConversationCard.tsx
index d0662085..03040430 100644
--- a/src/features/conversations/components/ConversationCard.tsx
+++ b/src/features/conversations/components/ConversationCard.tsx
@@ -18,9 +18,10 @@ interface Props {
   userBName: string;
   conversationState: number;
   onDeleteConversation: (conversationId: string) => void;
+  userARating: number;
 }
 
-function ConversationCard({ conversationId, userBName, conversationState, onDeleteConversation }: Props) {
+function ConversationCard({ conversationId, userBName, conversationState, onDeleteConversation, userARating }: Props) {
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -102,7 +103,7 @@ function ConversationCard({ conversationId, userBName, conversationState, onDele
           3. Have you had your conversation with {USER_B_NAME}?
         </CmTypography>
         {conversationState <= 3 && <YesWeTalkedButton conversationState={conversationState} conversationId={conversationId} />}
-        {conversationState > 3 && <ConversationRating conversationId={conversationId} conversationState={conversationState} />}
+        {conversationState > 3 && <ConversationRating conversationId={conversationId} conversationState={conversationState} initialRating={userARating} />}
       </Collapse>
 
       {/* Button to delete a conversation and expand / collapse the card */}
diff --git a/src/features/conversations/components/ConversationRating.tsx b/src/features/conversations/components/ConversationRating.tsx
index 6a5beda3..f7911930 100644
--- a/src/features/conversations/components/ConversationRating.tsx
+++ b/src/features/conversations/components/ConversationRating.tsx
@@ -6,15 +6,15 @@ import { useState } from 'react';
 
 interface Props {
   conversationId: string;
-  // initialRating: number;
+  initialRating: number;
   // onRated: () => void;
   conversationState: number;
 }
 
-function ConversationRating({ conversationId, conversationState }: Props) {
+function ConversationRating({ conversationId, conversationState, initialRating }: Props) {
   const apiClient = useApiClient();
   const { updateConversation } = useUpdateConversation();
-  const [rating, setRating] = useState(0);
+  const [rating, setRating] = useState(initialRating);
 
   function submitRating(newRating: number) {
     setRating(newRating);
diff --git a/src/features/conversations/components/ConversationsDrawer.tsx b/src/features/conversations/components/ConversationsDrawer.tsx
index 1920cf48..9934db44 100644
--- a/src/features/conversations/components/ConversationsDrawer.tsx
+++ b/src/features/conversations/components/ConversationsDrawer.tsx
@@ -57,6 +57,7 @@ function BottomToTopDrawer({ open, onClose }: Props) {
               userBName={conversation?.userB?.name!}
               conversationState={conversation.state!}
               onDeleteConversation={(conversationId) => setShowDeleteConversationModal(conversationId)}
+              userARating={conversation.userARating}
             />
           </div>
         ))}

From 9d5ea9ad4851fc21a86a5dc4b56b855bda96f329 Mon Sep 17 00:00:00 2001
From: Kirstie <39728053+epixieme@users.noreply.github.com>
Date: Mon, 13 May 2024 16:32:58 +0100
Subject: [PATCH 4/9] clean up

---
 src/features/conversations/components/ConversationRating.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/features/conversations/components/ConversationRating.tsx b/src/features/conversations/components/ConversationRating.tsx
index f7911930..09023e9b 100644
--- a/src/features/conversations/components/ConversationRating.tsx
+++ b/src/features/conversations/components/ConversationRating.tsx
@@ -1,4 +1,3 @@
-// import { useState } from 'react';
 import { CmButton, CmTypography } from 'shared/components';
 import useApiClient from 'shared/hooks/useApiClient';
 import { useUpdateConversation } from '../hooks';
@@ -7,7 +6,6 @@ import { useState } from 'react';
 interface Props {
   conversationId: string;
   initialRating: number;
-  // onRated: () => void;
   conversationState: number;
 }
 

From 9633bf1430bbb1c68faf2cdd765e6bb69ce62be9 Mon Sep 17 00:00:00 2001
From: Kirstie <39728053+epixieme@users.noreply.github.com>
Date: Mon, 13 May 2024 18:01:22 +0100
Subject: [PATCH 5/9] pushing change to use TConversationState rather than hard
 coding

---
 src/features/conversations/components/ConversationRating.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/features/conversations/components/ConversationRating.tsx b/src/features/conversations/components/ConversationRating.tsx
index 09023e9b..e1e6bf29 100644
--- a/src/features/conversations/components/ConversationRating.tsx
+++ b/src/features/conversations/components/ConversationRating.tsx
@@ -2,6 +2,7 @@ import { CmButton, CmTypography } from 'shared/components';
 import useApiClient from 'shared/hooks/useApiClient';
 import { useUpdateConversation } from '../hooks';
 import { useState } from 'react';
+import { TConversationState } from 'types/Conversation';
 
 interface Props {
   conversationId: string;
@@ -16,7 +17,7 @@ function ConversationRating({ conversationId, conversationState, initialRating }
 
   function submitRating(newRating: number) {
     setRating(newRating);
-    if (conversationState === 4) updateConversation(conversationId, { state: 5 });
+    if (conversationState === TConversationState.Talked) updateConversation(conversationId, { state: 5 });
 
     apiClient.putSingleConversation({
       conversationId,

From 0466ecef5842735a5cbd2d37c9b9c9d1e5b83481 Mon Sep 17 00:00:00 2001
From: Kirstie <39728053+epixieme@users.noreply.github.com>
Date: Mon, 13 May 2024 18:10:27 +0100
Subject: [PATCH 6/9] reverting change to hard code as getting an error when
 redoing the quiz when using Typescript enum values.

---
 src/features/conversations/components/ConversationRating.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/features/conversations/components/ConversationRating.tsx b/src/features/conversations/components/ConversationRating.tsx
index e1e6bf29..09023e9b 100644
--- a/src/features/conversations/components/ConversationRating.tsx
+++ b/src/features/conversations/components/ConversationRating.tsx
@@ -2,7 +2,6 @@ import { CmButton, CmTypography } from 'shared/components';
 import useApiClient from 'shared/hooks/useApiClient';
 import { useUpdateConversation } from '../hooks';
 import { useState } from 'react';
-import { TConversationState } from 'types/Conversation';
 
 interface Props {
   conversationId: string;
@@ -17,7 +16,7 @@ function ConversationRating({ conversationId, conversationState, initialRating }
 
   function submitRating(newRating: number) {
     setRating(newRating);
-    if (conversationState === TConversationState.Talked) updateConversation(conversationId, { state: 5 });
+    if (conversationState === 4) updateConversation(conversationId, { state: 5 });
 
     apiClient.putSingleConversation({
       conversationId,

From 0e468904df74f06b0b270f0943bc610b9b5b7ef1 Mon Sep 17 00:00:00 2001
From: Kirstie <39728053+epixieme@users.noreply.github.com>
Date: Mon, 13 May 2024 18:20:14 +0100
Subject: [PATCH 7/9] fixed issue with hard coding

---
 .../conversations/components/ConversationRating.tsx        | 7 ++++++-
 .../conversations/components/YesWeTalkedButton.tsx         | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/features/conversations/components/ConversationRating.tsx b/src/features/conversations/components/ConversationRating.tsx
index 09023e9b..3a4caa6a 100644
--- a/src/features/conversations/components/ConversationRating.tsx
+++ b/src/features/conversations/components/ConversationRating.tsx
@@ -2,6 +2,7 @@ import { CmButton, CmTypography } from 'shared/components';
 import useApiClient from 'shared/hooks/useApiClient';
 import { useUpdateConversation } from '../hooks';
 import { useState } from 'react';
+import { TConversationState } from 'types/Conversation';
 
 interface Props {
   conversationId: string;
@@ -16,7 +17,11 @@ function ConversationRating({ conversationId, conversationState, initialRating }
 
   function submitRating(newRating: number) {
     setRating(newRating);
-    if (conversationState === 4) updateConversation(conversationId, { state: 5 });
+    // useEffect(() => {
+    if (conversationState === TConversationState.TopicsViewed) {
+      updateConversation(conversationId, { state: TConversationState.RatingDone });
+    }
+    // }, [conversationState]);
 
     apiClient.putSingleConversation({
       conversationId,
diff --git a/src/features/conversations/components/YesWeTalkedButton.tsx b/src/features/conversations/components/YesWeTalkedButton.tsx
index cc185ff0..67b9f27d 100644
--- a/src/features/conversations/components/YesWeTalkedButton.tsx
+++ b/src/features/conversations/components/YesWeTalkedButton.tsx
@@ -11,7 +11,7 @@ function YesWeTalkedButton({ conversationState, conversationId }: Props) {
   const { updateConversation } = useUpdateConversation();
   function handleClick() {
     if (conversationState === TConversationState.TopicsViewed) {
-      updateConversation(conversationId, { state: 4 });
+      updateConversation(conversationId, { state: TConversationState.Talked });
     }
   }
   return <CmButton disabled={conversationState !== TConversationState.TopicsViewed} text="Yes, we talked!" onClick={handleClick} />;

From 9d48d1ec19e86cde7c3a6c1b46fee86801f7fb6f Mon Sep 17 00:00:00 2001
From: Kirstie <39728053+epixieme@users.noreply.github.com>
Date: Mon, 13 May 2024 18:21:17 +0100
Subject: [PATCH 8/9] clean up

---
 src/features/conversations/components/ConversationRating.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/features/conversations/components/ConversationRating.tsx b/src/features/conversations/components/ConversationRating.tsx
index 3a4caa6a..ea534809 100644
--- a/src/features/conversations/components/ConversationRating.tsx
+++ b/src/features/conversations/components/ConversationRating.tsx
@@ -17,11 +17,10 @@ function ConversationRating({ conversationId, conversationState, initialRating }
 
   function submitRating(newRating: number) {
     setRating(newRating);
-    // useEffect(() => {
+
     if (conversationState === TConversationState.TopicsViewed) {
       updateConversation(conversationId, { state: TConversationState.RatingDone });
     }
-    // }, [conversationState]);
 
     apiClient.putSingleConversation({
       conversationId,

From 5fd82f766cb99f2b3303f116dd581aefb2cfd789 Mon Sep 17 00:00:00 2001
From: Svenstar74 <sven.firmbach@gmx.de>
Date: Mon, 13 May 2024 21:17:08 +0200
Subject: [PATCH 9/9] update formatting

---
 .../components/ConversationCard.tsx           | 32 ++++---------------
 .../components/ConversationRating.tsx         | 13 +++-----
 .../components/ConversationsDrawer.tsx        |  7 ++--
 .../components/YesWeTalkedButton.tsx          | 14 ++++++--
 4 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/src/features/conversations/components/ConversationCard.tsx b/src/features/conversations/components/ConversationCard.tsx
index 03040430..45ce4b5a 100644
--- a/src/features/conversations/components/ConversationCard.tsx
+++ b/src/features/conversations/components/ConversationCard.tsx
@@ -61,22 +61,14 @@ function ConversationCard({ conversationId, userBName, conversationState, onDele
   return (
     <CmCard ref={cardRef} style={{ padding: 20, scrollMarginTop: 100 }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
-        <CmTypography variant="caption" style={{ flexShrink: 1, fontSize: 14 }}>
-          {headerText[conversationState]}
-        </CmTypography>
+        <CmTypography variant="caption" style={{ flexShrink: 1, fontSize: 14 }}>{headerText[conversationState]}</CmTypography>
         <CmButton variant="text" text="Copy Link" style={{ visibility: expanded ? 'visible' : 'hidden' }} onClick={handleCopyLink} />
         {!expanded && conversationState > 0 && conversationState < 5 && <NotifyIcon state={conversationState} />}
       </div>
 
       <div style={{ display: 'flex', alignItems: 'center' }}>
-        <CmTypography variant="h2" style={{ textAlign: 'left', margin: 0, marginRight: 10 }}>
-          {USER_B_NAME}
-        </CmTypography>
-        {expanded && (
-          <IconButton style={{ color: 'black', padding: 0, top: -2 }}>
-            <EditIcon />
-          </IconButton>
-        )}
+        <CmTypography variant="h2" style={{ textAlign: 'left', margin: 0, marginRight: 10 }}>{USER_B_NAME}</CmTypography>
+        {expanded && <IconButton style={{ color: 'black', padding: 0, top: -2 }}><EditIcon /></IconButton>}
       </div>
 
       {/* For state 0, display a text that the userB has to take the quiz */}
@@ -89,30 +81,20 @@ function ConversationCard({ conversationId, userBName, conversationState, onDele
 
       {/* For every other state, show the text and buttons the userA needs */}
       <Collapse in={expanded && conversationState > 0}>
-        <CmTypography variant="h4" style={styles.subTitles}>
-          1. {USER_B_NAME} took the values quiz
-        </CmTypography>
+        <CmTypography variant="h4" style={styles.subTitles}>1. {USER_B_NAME} took the values quiz</CmTypography>
         <HowYouAlignButton conversationState={conversationState} conversationId={conversationId} />
 
-        <CmTypography variant="h4" style={styles.subTitles}>
-          2. See what you can discuss with {USER_B_NAME}
-        </CmTypography>
+        <CmTypography variant="h4" style={styles.subTitles}>2. See what you can discuss with {USER_B_NAME}</CmTypography>
         <ViewSelectedTopics conversationState={conversationState} conversationId={conversationId} />
 
-        <CmTypography variant="h4" style={styles.subTitles}>
-          3. Have you had your conversation with {USER_B_NAME}?
-        </CmTypography>
+        <CmTypography variant="h4" style={styles.subTitles}>3. Have you had your conversation with {USER_B_NAME}?</CmTypography>
         {conversationState <= 3 && <YesWeTalkedButton conversationState={conversationState} conversationId={conversationId} />}
         {conversationState > 3 && <ConversationRating conversationId={conversationId} conversationState={conversationState} initialRating={userARating} />}
       </Collapse>
 
       {/* Button to delete a conversation and expand / collapse the card */}
       <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: expanded ? 30 : 0 }}>
-        {expanded && (
-          <IconButton onClick={() => onDeleteConversation(conversationId)}>
-            <DeleteIcon style={{ color: '#77AAAF' }} />
-          </IconButton>
-        )}
+        {expanded && <IconButton onClick={() => onDeleteConversation(conversationId)}><DeleteIcon style={{ color: '#77AAAF' }} /></IconButton>}
 
         {!expanded && <div></div>}
         <CmButton variant="text" text={expanded ? 'Less' : 'More'} onClick={() => setExpanded(!expanded)} />
diff --git a/src/features/conversations/components/ConversationRating.tsx b/src/features/conversations/components/ConversationRating.tsx
index ea534809..7f6a125c 100644
--- a/src/features/conversations/components/ConversationRating.tsx
+++ b/src/features/conversations/components/ConversationRating.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
+
+import { TConversationState } from 'types/Conversation';
 import { CmButton, CmTypography } from 'shared/components';
 import useApiClient from 'shared/hooks/useApiClient';
 import { useUpdateConversation } from '../hooks';
-import { useState } from 'react';
-import { TConversationState } from 'types/Conversation';
 
 interface Props {
   conversationId: string;
@@ -31,12 +32,8 @@ function ConversationRating({ conversationId, conversationState, initialRating }
   }
   return (
     <>
-      <CmTypography variant="h1" style={{ textAlign: 'left' }}>
-        Yay! Go you!
-      </CmTypography>
-      <CmTypography variant="h3" style={{ textAlign: 'left' }}>
-        How Did it go?
-      </CmTypography>
+      <CmTypography variant="h1" style={{ textAlign: 'left' }}>Yay! Go you!</CmTypography>
+      <CmTypography variant="h3" style={{ textAlign: 'left' }}>How Did it go?</CmTypography>
 
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         <CmButton text="😡" onClick={() => submitRating(1)} style={{ backgroundColor: rating === 1 ? 'lightgray' : 'white' }} />
diff --git a/src/features/conversations/components/ConversationsDrawer.tsx b/src/features/conversations/components/ConversationsDrawer.tsx
index 9934db44..6532c959 100644
--- a/src/features/conversations/components/ConversationsDrawer.tsx
+++ b/src/features/conversations/components/ConversationsDrawer.tsx
@@ -12,7 +12,7 @@ interface Props {
   onClose: () => void;
 }
 
-function BottomToTopDrawer({ open, onClose }: Props) {
+function ConversationsDrawer({ open, onClose }: Props) {
   const { isLoading: isLoadingConversations, conversations } = useConversations();
   const { deleteConversation } = useDeleteConversation();
 
@@ -53,11 +53,10 @@ function BottomToTopDrawer({ open, onClose }: Props) {
         {conversations?.map((conversation) => (
           <div key={conversation.conversationId} style={{ marginBottom: 20 }}>
             <ConversationCard
-              conversationId={conversation.conversationId}
+              {...conversation}
               userBName={conversation?.userB?.name!}
               conversationState={conversation.state!}
               onDeleteConversation={(conversationId) => setShowDeleteConversationModal(conversationId)}
-              userARating={conversation.userARating}
             />
           </div>
         ))}
@@ -98,4 +97,4 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
 };
 
-export default BottomToTopDrawer;
+export default ConversationsDrawer;
diff --git a/src/features/conversations/components/YesWeTalkedButton.tsx b/src/features/conversations/components/YesWeTalkedButton.tsx
index 67b9f27d..e0bedc80 100644
--- a/src/features/conversations/components/YesWeTalkedButton.tsx
+++ b/src/features/conversations/components/YesWeTalkedButton.tsx
@@ -3,18 +3,26 @@ import { TConversationState } from 'types/Conversation';
 import { useUpdateConversation } from '../hooks';
 
 interface Props {
-  conversationState: TConversationState;
   conversationId: string;
+  conversationState: TConversationState;
 }
 
-function YesWeTalkedButton({ conversationState, conversationId }: Props) {
+function YesWeTalkedButton({ conversationId, conversationState }: Props) {
   const { updateConversation } = useUpdateConversation();
+
   function handleClick() {
     if (conversationState === TConversationState.TopicsViewed) {
       updateConversation(conversationId, { state: TConversationState.Talked });
     }
   }
-  return <CmButton disabled={conversationState !== TConversationState.TopicsViewed} text="Yes, we talked!" onClick={handleClick} />;
+
+  return (
+    <CmButton
+      disabled={conversationState !== TConversationState.TopicsViewed}
+      text="Yes, we talked!"
+      onClick={handleClick}
+    />
+  );
 }
 
 export default YesWeTalkedButton;