From 7395bb6d8988074597f7f87770d99773de7fabf8 Mon Sep 17 00:00:00 2001
From: TTPL-RT-52 <shreyas1434shinde@gmail.com>
Date: Wed, 10 Jul 2024 17:11:12 +0530
Subject: [PATCH] Issue #PS-1344 fix: Center Sessions UI Implementation

---
 public/locales/en/common.json        |  12 +--
 src/components/SessionCard.tsx       |  58 +++++------
 src/components/SessionCardFooter.tsx | 150 ++++++++++++---------------
 3 files changed, 102 insertions(+), 118 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index ca8c7807..2b2e3a5e 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -95,12 +95,12 @@
     "OBSERVATIONS_FORMS": "Observations and Forms",
     "OTHER_REASON": "Other Reason",
     "OTHER_REASON_PLACEHOLDER": "Enter Other Reason",
-    "CENTER_SESSIONS":"Center Sessions",
-    "SCHEDULE_NEW":"Schedule New",
-    "UPCOMING_EXTRA_SESSION":"Upcoming Extra Sessions",
-    "NO_SESSIONS_SCHEDULED" :" No sessions scheduled",
-    "TO_BE_TAUGHT" :"What is going to be taught:",
-    "SELECT_TOPIC":" Select Topic, Sub-topic"
+    "CENTER_SESSIONS": "Center Sessions",
+    "SCHEDULE_NEW": "Schedule New",
+    "UPCOMING_EXTRA_SESSION": "Upcoming Extra Sessions",
+    "NO_SESSIONS_SCHEDULED": "No sessions scheduled",
+    "TO_BE_TAUGHT": "What is going to be taught:",
+    "SELECT_TOPIC": "Select Topic, Sub-topic"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",
diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
index 02ad9058..fac18d37 100644
--- a/src/components/SessionCard.tsx
+++ b/src/components/SessionCard.tsx
@@ -8,43 +8,41 @@ import { useTheme } from '@mui/material/styles';
 const SessionsCard: React.FC<SessionsCardProps> = ({ data, children }) => {
   const theme = useTheme<any>();
   return (
-    <>
+    <Box
+      sx={{
+        border: `1px solid ${theme.palette.warning['A100']}`,
+        borderRadius: '8px',
+        marginBottom: '16px',
+      }}
+    >
       <Box
         sx={{
-          border: `1px solid ${theme.palette.warning['A100']}`,
-          borderRadius: '8px',
-          marginBottom: '16px',
+          display: 'flex',
+          justifyContent: 'space-between',
+          padding: '8px 16px',
         }}
       >
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            padding: '8px 16px',
-          }}
-        >
-          <Box>
-            <Typography
-              color={theme.palette.warning['300']}
-              fontWeight={'400'}
-              textAlign={'left'}
-              fontSize={'16px'}
-            >
-              {data?.subject}
-            </Typography>
+        <Box>
+          <Typography
+            color={theme.palette.warning['300']}
+            fontWeight={'400'}
+            textAlign={'left'}
+            fontSize={'16px'}
+          >
+            {data?.subject}
+          </Typography>
 
-            <Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
-              {data?.time}
-            </Typography>
-            <Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
-              {data?.teacherName}
-            </Typography>
-          </Box>
-          <EditOutlined />
+          <Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
+            {data?.time}
+          </Typography>
+          <Typography fontWeight={'400'} textAlign={'left'} fontSize={'14px'}>
+            {data?.teacherName}
+          </Typography>
         </Box>
-        <Box>{children}</Box>
+        <EditOutlined />
       </Box>
-    </>
+      <Box>{children}</Box>
+    </Box>
   );
 };
 
diff --git a/src/components/SessionCardFooter.tsx b/src/components/SessionCardFooter.tsx
index f564ea4e..05cf3a54 100644
--- a/src/components/SessionCardFooter.tsx
+++ b/src/components/SessionCardFooter.tsx
@@ -17,93 +17,79 @@ const SessionCardFooter: React.FC<SessionCardFooterProps> = ({ item }) => {
   const theme = useTheme();
   const { t } = useTranslation();
 
-  return (
-    <>
-      {!item?.topic && (
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            background: theme.palette.background.default,
-            padding: '8px 16px',
-            borderRadius: '8px',
-          }}
+  return item?.topic ? (
+    <Box
+      sx={{
+        background: theme.palette.background.default,
+        padding: '4px 16px',
+        borderRadius: '8px',
+      }}
+    >
+      <Accordion
+        defaultExpanded
+        sx={{
+          boxShadow: 'none',
+          border: 'none',
+          background: 'none',
+        }}
+      >
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1-content"
+          id="panel1-header"
+          className="accordion-summary"
+          sx={{ px: 0, m: 0 }}
         >
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <PriorityHighIcon sx={{ color: theme.palette.error.main }} />
-            <Box
-              fontSize={'14px'}
-              fontWeight={500}
-              color={theme.palette.secondary.main}
-              ml={1}
-            >
-              {t('COMMON.SELECT_TOPIC')}
-            </Box>
+          <Typography fontWeight="500" fontSize="14px" className="text-7C">
+            {t('COMMON.TO_BE_TAUGHT')}
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails sx={{ padding: '0px' }}>
+          <Box sx={{ display: 'flex', gap: '10px' }}>
+            <MenuBookIcon />
+            <Typography color={theme.palette.secondary.main} variant="h5">
+              {item?.topic}
+            </Typography>
           </Box>
-          <ArrowForwardIcon />
-        </Box>
-      )}
-      {item?.topic && (
+          <Box
+            sx={{
+              display: 'flex',
+              gap: '10px',
+              marginTop: '5px',
+              marginLeft: '10px',
+            }}
+          >
+            <SubdirectoryArrowRightIcon />
+            <Typography color={theme.palette.secondary.main} variant="h5">
+              {item?.subtopic}
+            </Typography>
+          </Box>
+        </AccordionDetails>
+      </Accordion>
+    </Box>
+  ) : (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        background: theme.palette.background.default,
+        padding: '8px 16px',
+        borderRadius: '8px',
+      }}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <PriorityHighIcon sx={{ color: theme.palette.error.main }} />
         <Box
-          sx={{
-            background: theme.palette.background.default,
-            padding: '4px 16px',
-            borderRadius: '8px',
-          }}
+          fontSize={'14px'}
+          fontWeight={500}
+          color={theme.palette.secondary.main}
+          ml={1}
         >
-          <Box>
-            <Accordion
-              defaultExpanded
-              sx={{
-                boxShadow: 'none',
-                border: 'none',
-                background: 'none',
-              }}
-            >
-              <AccordionSummary
-                expandIcon={<ExpandMoreIcon />}
-                aria-controls="panel1-content"
-                id="panel1-header"
-                className="accordion-summary"
-                sx={{
-                  px: 0,
-                  m: 0,
-                }}
-              >
-                <Typography
-                  fontWeight="500"
-                  fontSize="14px"
-                  className="text-7C"
-                >
-                  {t('COMMON.TO_BE_TAUGHT')}
-                </Typography>
-              </AccordionSummary>
-              <AccordionDetails sx={{ padding: '0px' }}>
-                <Box sx={{ display: 'flex', gap: '10px' }}>
-                  <MenuBookIcon />
-                  <Typography color={theme.palette.secondary.main} variant="h5">
-                    {item?.topic}
-                  </Typography>
-                </Box>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    gap: '10px',
-                    marginTop: '5px',
-                    marginLeft: '10px',
-                  }}
-                >
-                  <SubdirectoryArrowRightIcon />
-                  <Typography color={theme.palette.secondary.main} variant="h5">
-                    {item?.subtopic}
-                  </Typography>
-                </Box>
-              </AccordionDetails>
-            </Accordion>
-          </Box>
+          {t('COMMON.SELECT_TOPIC')}
         </Box>
-      )}
-    </>
+      </Box>
+      <ArrowForwardIcon />
+    </Box>
   );
 };