[CLOSES #553] Yes we talked and conversationRating not working.

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();
 
@@ -87,16 +88,13 @@ function ConversationCard({ conversationId, userBName, conversationState, onDele
         <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} />}
-        {conversationState > 3 && <ConversationRating />}
+        {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)} />

src/features/conversations/components/ConversationRating.tsx

@@ -1,17 +1,46 @@
-import { CmButton, CmTypography } from "shared/components";
+import { useState } from 'react';
 
-function ConversationRating() {
+import { TConversationState } from 'types/Conversation';
+import { CmButton, CmTypography } from 'shared/components';
+import useApiClient from 'shared/hooks/useApiClient';
+import { useUpdateConversation } from '../hooks';
+
+interface Props {
+  conversationId: string;
+  initialRating: number;
+  conversationState: number;
+}
+
+function ConversationRating({ conversationId, conversationState, initialRating }: Props) {
+  const apiClient = useApiClient();
+  const { updateConversation } = useUpdateConversation();
+  const [rating, setRating] = useState(initialRating);
+
+  function submitRating(newRating: number) {
+    setRating(newRating);
+
+    if (conversationState === TConversationState.TopicsViewed) {
+      updateConversation(conversationId, { state: TConversationState.RatingDone });
+    }
+
+    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>
 
       <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>
     </>
   );

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,7 +53,7 @@ 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)}
@@ -97,4 +97,4 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
 };
 
-export default BottomToTopDrawer;
+export default ConversationsDrawer;

src/features/conversations/components/YesWeTalkedButton.tsx

@@ -1,13 +1,27 @@
-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 {
+  conversationId: string;
   conversationState: TConversationState;
 }
 
-function YesWeTalkedButton({ conversationState }: 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!' />
+    <CmButton
+      disabled={conversationState !== TConversationState.TopicsViewed}
+      text="Yes, we talked!"
+      onClick={handleClick}
+    />
   );
 }