From 6579adaf6a2b1a9ba940d893e397772c356f1fda Mon Sep 17 00:00:00 2001
From: vivek kasture <vivek_kasture@techjoomla.com>
Date: Fri, 27 Sep 2024 13:56:42 +0530
Subject: [PATCH] Issue #PS-000 fix: Fixed reload issue on network
 reestablishment

---
 next.config.mjs             |  1 +
 src/components/Schedule.tsx | 98 +++++++++++++++++--------------------
 2 files changed, 46 insertions(+), 53 deletions(-)

diff --git a/next.config.mjs b/next.config.mjs
index aeea5020..38831a19 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -13,6 +13,7 @@ const nextConfig = {
 
 const pwaConfig = withPWA({
   dest: 'public',
+  reloadOnOnline: false,
 });
 
 export default pwaConfig(nextConfig);
diff --git a/src/components/Schedule.tsx b/src/components/Schedule.tsx
index 9fa54ce0..35faa03f 100644
--- a/src/components/Schedule.tsx
+++ b/src/components/Schedule.tsx
@@ -1,64 +1,56 @@
-import React, { useState } from 'react';
-
+import React from 'react';
 import { Box } from '@mui/material';
-import { ScheduleModalProps } from '../utils/Interfaces';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import { ScheduleModalProps } from '../utils/Interfaces';
+
+const sessionData = [
+  {
+    key: 'PLANNED_SESSION',
+    title: 'CENTER_SESSION.PLANNED_SESSION',
+    description: 'CENTER_SESSION.FIXES_SUBJECTS',
+  },
+  {
+    key: 'EXTRA_SESSION',
+    title: 'CENTER_SESSION.EXTRA_SESSION',
+    description: 'CENTER_SESSION.DOUBT_CLEARING',
+  },
+];
 
-const Schedule: React.FC<ScheduleModalProps> = ({
-  handleClick,
-  clickedBox,
-}) => {
+const Schedule: React.FC<ScheduleModalProps> = ({ handleClick, clickedBox }) => {
   const theme = useTheme<any>();
   const { t } = useTranslation();
+  const { primary, warning } = theme.palette;
 
-  return (
-    <>
-      <Box sx={{ padding: '10px 16px' }}>
-        <Box
-          sx={{
-            border: `2px solid ${clickedBox === 'PLANNED_SESSION' ? theme.palette.primary.main : theme.palette.action.active}`,
-            borderRadius: '8px',
-            padding: '15px',
-            mb: 2,
-            cursor: 'pointer',
-          }}
-          onClick={() => handleClick?.('PLANNED_SESSION')}
-        >
-          <Box
-            sx={{
-              fontSize: '16px',
-              fontWeight: '400',
-              color: theme?.palette?.warning['300'],
-            }}
-          >
-            {t('CENTER_SESSION.PLANNED_SESSION')}
-          </Box>
-          <Box>{t('CENTER_SESSION.FIXES_SUBJECTS')}</Box>
-        </Box>
-        <Box
-          sx={{
-            border: `2px solid ${clickedBox === 'EXTRA_SESSION' ? theme.palette.primary.main : theme.palette.action.active}`,
-            borderRadius: '8px',
-            padding: '15px',
-            mb: 2,
-            cursor: 'pointer',
-          }}
-          onClick={() => handleClick?.('EXTRA_SESSION')}
-        >
-          <Box
-            sx={{
-              fontSize: '16px',
-              fontWeight: '400',
-              color: theme?.palette?.warning['300'],
-            }}
-          >
-            {t('CENTER_SESSION.EXTRA_SESSION')}
-          </Box>
-          <Box>{t('CENTER_SESSION.DOUBT_CLEARING')}</Box>
-        </Box>
+  const renderSessionBox = (key: string, title: string, description: string) => (
+    <Box
+      key={key}
+      sx={{
+        border: `${clickedBox === key ? '2px' : '1px'} solid ${clickedBox === key ? primary.main : warning['700']}`,
+        borderRadius: '8px',
+        padding: '15px',
+        mb: 2,
+        cursor: 'pointer',
+      }}
+      onClick={() => handleClick?.(key)}
+    >
+      <Box
+        sx={{
+          fontSize: '16px',
+          fontWeight: '400',
+          color: warning['300'],
+        }}
+      >
+        {t(title)}
       </Box>
-    </>
+      <Box>{t(description)}</Box>
+    </Box>
+  );
+
+  return (
+    <Box sx={{ padding: '10px 16px' }}>
+      {sessionData.map(({ key, title, description }) => renderSessionBox(key, title, description))}
+    </Box>
   );
 };