fixes after pr review

cph-cachet · Nov 1, 2024 · 121692a · 121692a
1 parent 222d4db
commit 121692a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 33 deletions.
diff --git a/src/components/SendReminderModal/index.tsx b/src/components/SendReminderModal/index.tsx
@@ -2,17 +2,17 @@ import {Modal, TextField, Typography} from "@mui/material";
 import {useFormik} from "formik";
 import {useEffect} from "react";
 import {
-    CancelButton,
+    CancelButton, TypographyVariant,
     Content,
     DoneButton,
-    HorizontalInputContainer,
+    HorizontalInputContainer, HorizontalInputContainerWithAutoHeight,
     ModalActions,
     ModalBox,
     Title,
     VerticalInputContainer,
 } from "./styles";
 import * as yup from "yup";
-import {GenericEmailRequest} from "../../../../carp-client-ts/src/models/Email";
+import {GenericEmailRequest} from "@carp-dk/client/models/Email";
 import {usePostEmailSendGeneric} from "@Utils/queries/participants";
 
 type Props = {
@@ -25,19 +25,6 @@ type Props = {
     studyName: string
 };
 
-const ccLabelStyling = {
-    marginTop: "10px",
-    marginBottom: "auto"
-}
-
-const subjectLabelStyling = ccLabelStyling;
-
-const ccHorizontalInputContainerStyling = {
-    height: "auto",
-}
-
-const subjectHorizontalInputContainerStyling = ccHorizontalInputContainerStyling;
-
 const SendReminderModal = ({open, onClose, to, initials, researcherEmail, researcherName, studyName}: Props) => {
     const postEmailSendGeneric = usePostEmailSendGeneric();
 
@@ -139,10 +126,10 @@ ${researcherName}`,
                         </Typography>
                         <Typography variant="h5">{to}</Typography>
                     </HorizontalInputContainer>
-                    <HorizontalInputContainer sx={ccHorizontalInputContainerStyling}>
-                        <Typography variant="h5" width="56px" sx={ccLabelStyling}>
+                    <HorizontalInputContainerWithAutoHeight>
+                        <TypographyVariant variant="h5">
                             CC:
-                        </Typography>
+                        </TypographyVariant>
                         <TextField
                             type="text"
                             fullWidth
@@ -154,11 +141,11 @@ ${researcherName}`,
                             value={reminderFormik.values.cc}
                             onChange={reminderFormik.handleChange}
                         />
-                    </HorizontalInputContainer>
-                    <HorizontalInputContainer sx={subjectHorizontalInputContainerStyling}>
-                        <Typography variant="h5" width="56px" sx={subjectLabelStyling}>
+                    </HorizontalInputContainerWithAutoHeight>
+                    <HorizontalInputContainerWithAutoHeight>
+                        <TypographyVariant variant="h5">
                             Subject:
-                        </Typography>
+                        </TypographyVariant>
                         <TextField
                             type="text"
                             fullWidth
@@ -169,7 +156,7 @@ ${researcherName}`,
                             value={reminderFormik.values.subject}
                             onChange={reminderFormik.handleChange}
                         />
-                    </HorizontalInputContainer>
+                    </HorizontalInputContainerWithAutoHeight>
                     <VerticalInputContainer>
                         <Typography variant="h5">Message:</Typography>
                         <TextField

diff --git a/src/components/SendReminderModal/styles.ts b/src/components/SendReminderModal/styles.ts
@@ -27,6 +27,10 @@ export const HorizontalInputContainer = styled("div")({
   alignItems: "center",
 });
 
+export const HorizontalInputContainerWithAutoHeight = styled(HorizontalInputContainer)({
+    height: "auto",
+});
+
 export const VerticalInputContainer = styled("div")({
   display: "flex",
   gap: 10,
@@ -64,3 +68,9 @@ export const DoneButton = styled(Button)(({ theme }) => ({
   padding: "8px 24px",
   borderRadius: 16,
 }));
+
+export const TypographyVariant = styled(Typography)(() => ({
+  marginTop: "10px",
+  marginBottom: "auto",
+  width: "56px",
+}));
diff --git a/src/pages/Participant/BasicInfo/index.tsx b/src/pages/Participant/BasicInfo/index.tsx
@@ -40,7 +40,6 @@ const BasicInfo = () => {
   } = useStudyDetails(studyId);
 
   const [participant, setParticipant] = useState<ParticipantData | null>(null);
-  const [studyDetails, setStudyDetails] = useState<any>(null);
 
   useEffect(() => {
     if (!participantDataLoading && participantData && participantData.groups) {
@@ -52,12 +51,6 @@ const BasicInfo = () => {
     }
   }, [participantData, participantDataLoading, participantId, deploymentId]);
 
-  useEffect(() => {
-    if (!studyDetailsLoading && studyDetailsData) {
-      setStudyDetails(studyDetailsData);
-    }
-  }, [studyDetailsData, studyDetailsLoading, studyId]);
-
   const initials = useMemo(() => {
     if (participant && (participant.firstName || participant.lastName)) {
       return participant.firstName[0] + participant.lastName[0];
@@ -79,7 +72,7 @@ const BasicInfo = () => {
     );
   }, [participant]);
 
-  if (participantDataLoading || !participant || studyDetailsLoading || !studyDetails) return <LoadingSkeleton />;
+  if (participantDataLoading || !participant || studyDetailsLoading || !studyDetailsData) return <LoadingSkeleton />;
 
   if (participantError)
     return (
@@ -122,7 +115,7 @@ const BasicInfo = () => {
         initials={initials}
         researcherEmail={getUser()?.profile?.email || ''}
         researcherName={getUser()?.profile?.name || ''}
-        studyName={studyDetails?.name || ''}
+        studyName={studyDetailsData?.name || ''}
       />
     </StyledCard>
   );