X2-8303 | X2-8266 | X2-8421 | refactor sidebar to control drawers fro…

src/components/Sidebar/Sidebar.jsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import PropTypes from "prop-types";
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { AnnounceIcon } from "../../icons/AnnounceIcon";
 import { BellIcon } from "../../icons/BellIcon";
 import { XolaLogoSimple } from "../../images/XolaLogoSimple";
@@ -29,52 +29,12 @@ export const Sidebar = ({
     onLogoClick,
     isStickyHeader = true,
     isStickyFooter = true,
+    isLeftDrawerOpen,
+    isRightDrawerOpen,
+    handleDrawerStateChange,
 }) => {
-    const [isLeftDrawerOpen, setIsLeftDrawerOpen] = useState(false);
-    const [isRightDrawerOpen, setIsRightDrawerOpen] = useState(false);
-
-    useEffect(() => {
-        setIsLeftDrawerOpen(false); // Close the drawer if notifications changes
-        setIsRightDrawerOpen(false);
-    }, [notifications]);
-
-    const toggleLeftDrawer = () => {
-        if (!isLeftDrawerOpen) {
-            // Close the right drawer when you open the left
-            setIsRightDrawerOpen(false);
-        }
-
-        setIsLeftDrawerOpen(!isLeftDrawerOpen);
-    };
-
-    const toggleRightDrawer = () => {
-        if (!isRightDrawerOpen) {
-            // Close the left drawer when you open the right
-            setIsLeftDrawerOpen(false);
-        }
-
-        setIsRightDrawerOpen(!isRightDrawerOpen);
-    };
-
     const { announcements: leftDrawer, notices: rightDrawer } = notifications ?? {};
     const hideRightDrawer = rightDrawer?.count <= 0 || !rightDrawer;
-
-    const handleOnClose = (direction, closeDrawer) => {
-        if (direction === "left") {
-            if (closeDrawer) {
-                setIsLeftDrawerOpen(false);
-            }
-
-            leftDrawer.onClose?.();
-        } else {
-            if (closeDrawer) {
-                setIsRightDrawerOpen(false);
-            }
-
-            rightDrawer.onClose?.();
-        }
-    };
-
     const isStickyHeaderFooter = isStickyHeader && isStickyFooter;
 
     return (
@@ -97,7 +57,7 @@ export const Sidebar = ({
                 >
                     {leftDrawer && (
                         <div className={clsx("cursor-pointer sm:text-center", leftDrawer.hide && "hidden")}>
-                            <Counter style={LeftDrawerCountStyle} onClick={toggleLeftDrawer}>
+                            <Counter style={LeftDrawerCountStyle} onClick={() => handleDrawerStateChange("left")}>
                                 <AnnounceIcon className="mr-1 sm:hidden xl:block" />
                                 {leftDrawer.count}
                             </Counter>
@@ -106,7 +66,7 @@ export const Sidebar = ({
 
                     {rightDrawer && (
                         <div className={clsx("ml-auto cursor-pointer sm:text-center", hideRightDrawer && "hidden")}>
-                            <Counter className="text-sm" onClick={toggleRightDrawer}>
+                            <Counter className="text-sm" onClick={() => handleDrawerStateChange("right")}>
                                 <BellIcon className="sm:hidden xl:block" />
                                 {rightDrawer.count}
                             </Counter>
@@ -123,7 +83,7 @@ export const Sidebar = ({
                     title={leftDrawer.title}
                     content={leftDrawer.content}
                     isOpen={isLeftDrawerOpen}
-                    onClose={(e) => handleOnClose("left", !!e)}
+                    onClose={(e) => !!e && handleDrawerStateChange("left")}
                 />
             )}
 
@@ -135,7 +95,7 @@ export const Sidebar = ({
                     title={rightDrawer.title}
                     content={rightDrawer.content}
                     isOpen={isRightDrawerOpen}
-                    onClose={(e) => handleOnClose("right", !!e)}
+                    onClose={(e) => !!e && handleDrawerStateChange("right")}
                 />
             )}
 
@@ -169,6 +129,9 @@ Sidebar.propTypes = {
     isStickyHeader: PropTypes.bool,
     isStickyFooter: PropTypes.bool,
     onLogoClick: PropTypes.func.isRequired,
+    isLeftDrawerOpen: PropTypes.bool,
+    isRightDrawerOpen: PropTypes.bool,
+    handleDrawerStateChange: PropTypes.func,
     notifications: PropTypes.shape({
         announcements: PropTypes.shape({
             count: PropTypes.number,

src/stories/Navigation/Sidebar.stories.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { AnnounceIcon, CheckIcon, HelpCenterIcon, LogoutIcon, PolicyIcon, Sidebar, StarIcon, UserIcon } from "../..";
 
 const SidebarStories = {
@@ -103,6 +103,9 @@ export const CustomLogo = () => {
 };
 
 export const SidebarWithNotifications = () => {
+    const [isLeftDrawerOpen, setIsLeftDrawerOpen] = useState(false);
+    const [isRightDrawerOpen, setIsRightDrawerOpen] = useState(false);
+
     const notifications = {
         announcements: {
             count: 1,
@@ -114,11 +117,41 @@ export const SidebarWithNotifications = () => {
             count: 32,
             content: <div>Some content</div>,
             title: "Notifications & Pending items",
+            onClose: () => console.log("Notifications closed"),
         },
     };
+
+    const handleDrawerStateChange = (drawer?: "left" | "right") => {
+        if (drawer === "left") {
+            if (isRightDrawerOpen) {
+                setIsRightDrawerOpen(false);
+                notifications.notices.onClose();
+            } else if (isLeftDrawerOpen) {
+                notifications.announcements.onClose();
+            }
+
+            setIsLeftDrawerOpen(!isLeftDrawerOpen);
+        } else if (drawer === "right") {
+            if (isLeftDrawerOpen) {
+                setIsLeftDrawerOpen(false);
+                notifications.announcements.onClose();
+            } else if (isRightDrawerOpen) {
+                notifications.notices.onClose();
+            }
+
+            setIsRightDrawerOpen(!isRightDrawerOpen);
+        }
+    };
     return (
         <div className="h-screen">
-            <Sidebar footer={<SidebarFooter />} notifications={notifications} onLogoClick={handleLogoClick}>
+            <Sidebar
+                footer={<SidebarFooter />}
+                notifications={notifications}
+                isLeftDrawerOpen={isLeftDrawerOpen}
+                isRightDrawerOpen={isRightDrawerOpen}
+                handleDrawerStateChange={handleDrawerStateChange}
+                onLogoClick={handleLogoClick}
+            >
                 <Sidebar.Link isActive icon={UserIcon}>
                     Sellers
                 </Sidebar.Link>