[Closes #491] - Fix UserbSharedSummary component being unable to display card details

src/features/userB/components/UserBShareSummaryCard.tsx

@@ -1,6 +1,7 @@
-import { Collapse } from "@mui/material";
-import { useState } from "react";
-import { CmButton, CmCard, CmTypography } from "shared/components";
+import { useState } from 'react';
+import { Collapse } from '@mui/material';
+
+import { CmButton, CmCard, CmTypography } from 'shared/components';
 
 interface Props {
   topMatchValue: string;
@@ -13,19 +14,28 @@ function UserBShareSummaryCard({ topMatchValue, topMatchPercent, userAName, desc
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <CmCard style={{ padding: 20, border: '1px solid #A347FF' }}>
-      <CmTypography variant='h3' style={{ textAlign: 'left', margin: 0 }}>{topMatchValue}</CmTypography>
+    <CmCard style={{ padding: 20, border: '1px solid #A347FF', marginBottom: 10 }}>
+      <CmTypography variant="h3" style={{ textAlign: 'left', margin: 0 }}>
+        {topMatchValue}
+      </CmTypography>
 
       <div style={{ display: 'flex', alignItems: 'baseline' }}>
-        <CmTypography variant='h1' style={{ textAlign: 'left', margin: 0, padding: 0 }}>{topMatchPercent}%</CmTypography>
-        <CmTypography variant='h4' style={{ textAlign: 'left', margin: 0, paddingLeft: 10 }}>match with {userAName}</CmTypography>
+        <CmTypography variant="h1" style={{ textAlign: 'left', margin: 0, padding: 0 }}>
+          {topMatchPercent}%
+        </CmTypography>
+
+        <CmTypography variant="h4" style={{ textAlign: 'left', margin: 0, paddingLeft: 10 }}>
+          match with {userAName}
+        </CmTypography>
       </div>
 
-      <Collapse in={expanded} timeout='auto' unmountOnExit>
-        <CmTypography variant='body' style={{ marginTop: 20 }}>{description}</CmTypography>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CmTypography variant="body" style={{ marginTop: 20 }}>
+          {description}
+        </CmTypography>
       </Collapse>
 
-      <CmButton variant='text' text={expanded ? 'Less' : 'More'} onClick={() => setExpanded(!expanded)} style={{ alignSelf: 'flex-start', marginTop: 20 }} />
+      <CmButton variant="text" text={expanded ? 'Less' : 'More'} onClick={() => setExpanded(!expanded)} style={{ alignSelf: 'flex-start', marginTop: 20 }} />
     </CmCard>
   );
 }

src/features/userB/components/UserBShareSummaryImpactCard.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 
-import { CmButton, CmCard, CmTypography } from "shared/components";
-import { TSharedImpactDetails } from "types/SharedImpactDetails";
-import UserBSharedImpactDetailsModal from "./UserBSharedImpactDetailsModal";
-import { capitalizeFirstLetter } from "helpers/capitalizeFirstLetter";
-import { useApiClient } from "shared/hooks";
+import { CmButton, CmCard, CmTypography } from 'shared/components';
+import { useApiClient } from 'shared/hooks';
+import { TSharedImpactDetails } from 'types/SharedImpactDetails';
+import { capitalizeFirstLetter } from 'helpers/capitalizeFirstLetter';
+import UserBSharedImpactDetailsModal from './UserBSharedImpactDetailsModal';
 
 interface Props {
   effectId: string;
@@ -30,20 +30,16 @@ function UserBShareSummaryImpactCard({ effectId }: Props) {
   }
 
   return (
-    <CmCard style={{ padding: 20, border: '1px solid #A347FF' }}>
-      <CmTypography variant='overline' style={{ margin: 0 }}>CLIMATE EFFECT</CmTypography>
-      <CmTypography variant='h2' style={{ textAlign: 'left', margin: 0 }}>{capitalizeFirstLetter(effectDetails.effectTitle)}</CmTypography>
-
-      <CmButton variant='text' text="Learn More" style={{ alignSelf: 'flex-start', marginTop: 20 }} onClick={() => setShowDetails(true)} />
-
-      {showDetails && (
-        <UserBSharedImpactDetailsModal
-          effectId={effectId}
-          showDetails
-          {...effectDetails}
-          onClose={() => setShowDetails(false)}
-        />
-      )}
+    <CmCard style={{ padding: 20, border: '1px solid #A347FF', marginBottom: 10 }}>
+      <CmTypography variant="overline" style={{ margin: 0 }}>CLIMATE EFFECT</CmTypography>
+
+      <CmTypography variant="h2" style={{ textAlign: 'left', margin: 0 }}>
+        {capitalizeFirstLetter(effectDetails.effectTitle)}
+      </CmTypography>
+
+      <CmButton variant="text" text="Learn More" style={{ alignSelf: 'flex-start', marginTop: 20 }} onClick={() => setShowDetails(true)} />
+
+      {showDetails && <UserBSharedImpactDetailsModal effectId={effectId} showDetails {...effectDetails} onClose={() => setShowDetails(false)} />}
     </CmCard>
   );
 }

src/features/userB/components/UserBShareSummarySolutionCard.tsx

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 
-import { CmButton, CmCard, CmTypography } from "shared/components";
-import { TSharedSolutionDetails } from "types/SharedSolutionDetails";
-import UserBSharedSolutionDetailsModal from "./UserBSharedSolutionDetailsModal";
-import { capitalizeFirstLetter } from "helpers/capitalizeFirstLetter";
-import { useApiClient } from "shared/hooks";
+import { CmButton, CmCard, CmTypography } from 'shared/components';
+import { useApiClient } from 'shared/hooks';
+import { TSharedSolutionDetails } from 'types/SharedSolutionDetails';
+import { capitalizeFirstLetter } from 'helpers/capitalizeFirstLetter';
+import UserBSharedSolutionDetailsModal from './UserBSharedSolutionDetailsModal';
 
 interface Props {
   solutionId: string;
@@ -30,20 +30,16 @@ function UserBShareSummarySolutionCard({ solutionId }: Props) {
   }
 
   return (
-    <CmCard style={{ padding: 20, border: '1px solid #A347FF' }}>
-      <CmTypography variant='overline' style={{ margin: 0 }}>CLIMATE EFFECT</CmTypography>
-      <CmTypography variant='h2' style={{ textAlign: 'left', margin: 0 }}>{capitalizeFirstLetter(solutionDetails.solutionTitle)}</CmTypography>
-
-      <CmButton variant='text' text="Learn More" style={{ alignSelf: 'flex-start', marginTop: 20 }} onClick={() => setShowDetails(true)} />
-
-      {showDetails && (
-        <UserBSharedSolutionDetailsModal
-          showDetails
-          solutionId={solutionId}
-          {...solutionDetails}
-          onClose={() => setShowDetails(false)}
-        />
-      )}
+    <CmCard style={{ padding: 20, border: '1px solid #A347FF', marginBottom: 10 }}>
+      <CmTypography variant="overline" style={{ margin: 0 }}>{solutionDetails.solutionType} Solution</CmTypography>
+
+      <CmTypography variant="h2" style={{ textAlign: 'left', margin: 0 }}>
+        {capitalizeFirstLetter(solutionDetails.solutionTitle)}
+      </CmTypography>
+
+      <CmButton variant="text" text="Learn More" style={{ alignSelf: 'flex-start', marginTop: 20 }} onClick={() => setShowDetails(true)} />
+
+      {showDetails && <UserBSharedSolutionDetailsModal showDetails solutionId={solutionId} {...solutionDetails} onClose={() => setShowDetails(false)} />}
     </CmCard>
   );
 }

src/features/userB/components/UserBSharedSolutionCard.tsx

@@ -1,6 +1,7 @@
-import { Checkbox } from "@mui/material";
-import { capitalizeFirstLetter } from "helpers/capitalizeFirstLetter";
-import { CmButton, CmCard, CmTypography } from "shared/components";
+import { Checkbox } from '@mui/material';
+
+import { capitalizeFirstLetter } from 'helpers/capitalizeFirstLetter';
+import { CmButton, CmCard, CmTypography } from 'shared/components';
 
 interface Props {
   solutionId: string;
@@ -16,18 +17,22 @@ interface Props {
 
 function UserBSharedSolutionCard({ solutionId, solutionTitle, solutionShortDescription, imageUrl, onLearnMore, isSelected, onSelected, disabled, style }: Props) {
   return (
-    <CmCard style={{...style, outline: isSelected ? '4px solid #A347FF' : 'none', filter: disabled ? 'grayscale(100%)' : 'none', background: disabled ? 'lightgray' : 'white' }}>
-      <CmTypography variant='h3' style={styles.title}>{capitalizeFirstLetter(solutionTitle)}</CmTypography>
+    <CmCard style={{ ...style, outline: isSelected ? '4px solid #A347FF' : 'none', filter: disabled ? 'grayscale(100%)' : 'none', background: disabled ? 'lightgray' : 'white' }}>
+      <CmTypography variant="h3" style={styles.title}>
+        {capitalizeFirstLetter(solutionTitle)}
+      </CmTypography>
 
       {imageUrl && <img src={imageUrl} alt={solutionTitle} style={styles.image} />}
 
-      <CmTypography variant='body' style={styles.description}>{solutionShortDescription}</CmTypography>
+      <CmTypography variant="body" style={styles.description}>
+        {solutionShortDescription}
+      </CmTypography>
 
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-      <CmButton variant='text' text='Learn more' style={styles.learnMore} onClick={() => onLearnMore(solutionId)} />
+        <CmButton variant="text" text="Learn more" style={styles.learnMore} onClick={() => onLearnMore(solutionId)} />
 
         <div onClick={() => onSelected(solutionId)} style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
-          <CmTypography variant='label'>SELECT TOPIC</CmTypography>
+          <CmTypography variant="label">SELECT TOPIC</CmTypography>
           <Checkbox disabled={disabled} checked={isSelected} style={{ marginRight: 15, color: isSelected ? '#39F5AD' : '#07373B' }} />
         </div>
       </div>

src/features/userB/hooks/index.ts

@@ -1,7 +1,6 @@
 export { default as useRecordUserBVisit } from './useRecordUserBVisit';
-
 export { default as useAlignment } from './useAlignment';
 export { default as useSharedImpacts } from './useSharedImpacts';
 export { default as useSharedSolutions } from './useSharedSolutions';
-
+export { default as useSelectedTopics } from './useSelectedTopics';
 export { default as useShare } from './useShare';

src/features/userB/hooks/useSelectedTopics.tsx

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import { useApiClient } from 'shared/hooks';
+
+function useSelectedTopics(conversationId: string) {
+  const apiClient = useApiClient();
+
+  const selectedTopics = useQuery({
+    queryKey: ['selectedTopics', conversationId],
+    queryFn: () => apiClient.getSelectedTopics(conversationId),
+    enabled: !!conversationId,
+  });
+
+  return { selectedTopics };
+}
+
+export default useSelectedTopics;