From 062e213ed4c741a0c60bcd2084d30fcf0ab4e1ba Mon Sep 17 00:00:00 2001
From: Dang Nguyen Nguyen <93059380+NwinNwin@users.noreply.github.com>
Date: Mon, 6 May 2024 15:17:06 -0700
Subject: [PATCH] finished fixing bugs with sideview and open tab button

---
 src/components/Events/FeaturedDashboard.jsx |  5 +++--
 src/components/VolunteerSideView.jsx        | 17 +++++++++--------
 src/pages/VolunteerEventPage.jsx            | 16 +++++++++++-----
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/components/Events/FeaturedDashboard.jsx b/src/components/Events/FeaturedDashboard.jsx
index 4da069f..540c75e 100644
--- a/src/components/Events/FeaturedDashboard.jsx
+++ b/src/components/Events/FeaturedDashboard.jsx
@@ -5,7 +5,7 @@ import EventCard from './EventCard';
 import { RxCaretLeft } from 'react-icons/rx';
 import PropTypes from 'prop-types';
 
-const FeaturedDashboard = ({ onOpen, showOpenDrawerButton }) => {
+const FeaturedDashboard = ({ onOpen, showOpenDrawerButton, isOpen }) => {
   const [featuredEvents, setFeaturedEvents] = useState([]);
   const numEvents = useBreakpointValue({ base: 1, md: 2, xl: 2 });
 
@@ -66,7 +66,7 @@ const FeaturedDashboard = ({ onOpen, showOpenDrawerButton }) => {
             w="40px"
             icon={<RxCaretLeft size={22} />}
             onClick={onOpen}
-            display={showOpenDrawerButton ? { base: 'none', xl: 'flex' } : 'none'}
+            display={showOpenDrawerButton && !isOpen ? { base: 'none', xl: 'flex' } : 'none'}
           ></IconButton>
         </Flex>
       </Flex>
@@ -103,6 +103,7 @@ const FeaturedDashboard = ({ onOpen, showOpenDrawerButton }) => {
 };
 
 FeaturedDashboard.propTypes = {
+  isOpen: PropTypes.bool,
   onOpen: PropTypes.func,
   showOpenDrawerButton: PropTypes.bool,
 };
diff --git a/src/components/VolunteerSideView.jsx b/src/components/VolunteerSideView.jsx
index 389417a..ee98991 100644
--- a/src/components/VolunteerSideView.jsx
+++ b/src/components/VolunteerSideView.jsx
@@ -42,12 +42,10 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => {
     // setDateObj(new Date(Date.parse(eventData.date)))
   }, [eventId]);
 
-  const handleClose = () => {
-    if (setShowOpenDrawerButton) {
-      setShowOpenDrawerButton(false);
-    }
-    onClose();  // Ensure onClose is always called to close the view
-  };
+  // const handleClose = () => {
+  //   onClose(); // Ensure onClose is always called to close the view
+  //   setShowOpenDrawerButton(true);
+  // };
 
   // console.log('e', eventData);
   // console.log('d', dateObj)
@@ -93,7 +91,10 @@ const VolunteerSideView = ({ eventId, onClose, setShowOpenDrawerButton }) => {
           h="40px"
           w="40px"
           icon={<RxCaretRight size={22} />}
-          onClick={handleClose}
+          onClick={() => {
+            onClose();
+            setShowOpenDrawerButton(true);
+          }}
         ></IconButton>
         <Flex
           bg="#EFEFEF"
@@ -291,4 +292,4 @@ VolunteerSideView.propTypes = {
   setShowOpenDrawerButton: PropTypes.func.isRequired,
 };
 
-export default VolunteerSideView;
\ No newline at end of file
+export default VolunteerSideView;
diff --git a/src/pages/VolunteerEventPage.jsx b/src/pages/VolunteerEventPage.jsx
index 9849e8d..b75b527 100644
--- a/src/pages/VolunteerEventPage.jsx
+++ b/src/pages/VolunteerEventPage.jsx
@@ -19,12 +19,12 @@ const VolunteerEventPage = () => {
 
   const openEventDrawer = eventId => {
     setCurrentEventId(eventId); // Set the current event ID, which triggers the side view to display
+    setShowOpenDrawerButton(false);
     onOpen();
   };
 
   const handleClose = () => {
     onClose();
-    setCurrentEventId(null); // Clear the current event ID on close
   };
   console.log('test' + currentEventId);
   // const {
@@ -82,7 +82,7 @@ const VolunteerEventPage = () => {
             flex-shrink="0"
             borderRadius={'xl'}
             flexDir={'column'}
-            display={showOpenDrawerButton ? { base: 'flex', xl: 'none' } : 'none'}
+            display={showOpenDrawerButton && !isOpen ? { base: 'flex', xl: 'none' } : 'none'}
           >
             <IconButton
               borderRadius="md"
@@ -93,11 +93,18 @@ const VolunteerEventPage = () => {
               h="64px"
               w="64px"
               icon={<RxCaretLeft size={40} />}
-              onClick={onOpen}
+              onClick={() => {
+                onOpen();
+              }}
             ></IconButton>
           </Flex>
         </Flex>
-        <FeaturedDashboard width={{ base: '90%' }} onOpen={onOpen} />
+        <FeaturedDashboard
+          width={{ base: '90%' }}
+          onOpen={onOpen}
+          showOpenDrawerButton={showOpenDrawerButton}
+          isOpen={isOpen}
+        />
         <EventFilteredGrid
           width={{ base: '90%' }}
           setCurrentEventId={openEventDrawer} // Adjusted to call `openEventDrawer`
@@ -123,7 +130,6 @@ const VolunteerEventPage = () => {
           />
         )
       )}
-      {/* { : null} */}
     </Flex>
   );
 };