update formatting

ClimateMind · May 13, 2024 · 5fd82f7 · 5fd82f7
1 parent 9d48d1e
commit 5fd82f7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 40 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;