Migrate SidePanel state to Zustand (#799)

Co-authored-by: hardiknai-techm <HN00734461@TechMahindra.com>

src/hooks/useNotificationConsole.ts

@@ -0,0 +1,14 @@
+import create, { UseStore } from "zustand";
+
+export interface NotificationConsoleState {
+  isExpanded: boolean;
+  expandConsole: () => void;
+  // TODO Remove this method. Add a `closeConsole` method instead
+  setIsExpanded: (isExpanded: boolean) => void;
+}
+
+export const useNotificationConsole: UseStore<NotificationConsoleState> = create((set) => ({
+  isExpanded: false,
+  expandConsole: () => set((state) => ({ ...state, isExpanded: true })),
+  setIsExpanded: (isExpanded) => set((state) => ({ ...state, isExpanded })),
+}));

src/hooks/useSidePanel.ts

@@ -1,35 +1,15 @@
-import { useState } from "react";
+import create, { UseStore } from "zustand";
 
-export interface SidePanelHooks {
-  isPanelOpen: boolean;
-  panelContent: JSX.Element;
-  headerText: string;
+export interface SidePanelState {
+  isOpen: boolean;
+  panelContent?: JSX.Element;
+  headerText?: string;
   openSidePanel: (headerText: string, panelContent: JSX.Element, onClose?: () => void) => void;
   closeSidePanel: () => void;
 }
 
-export const useSidePanel = (): SidePanelHooks => {
-  const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false);
-  const [panelContent, setPanelContent] = useState<JSX.Element>();
-  const [headerText, setHeaderText] = useState<string>();
-  const [onCloseCallback, setOnCloseCallback] = useState<{ callback: () => void }>();
-
-  const openSidePanel = (headerText: string, panelContent: JSX.Element, onClose?: () => void): void => {
-    setHeaderText(headerText);
-    setPanelContent(panelContent);
-    setIsPanelOpen(true);
-    !!onClose && setOnCloseCallback({ callback: onClose });
-  };
-
-  const closeSidePanel = (): void => {
-    setHeaderText("");
-    setPanelContent(undefined);
-    setIsPanelOpen(false);
-    if (onCloseCallback) {
-      onCloseCallback.callback();
-      setOnCloseCallback(undefined);
-    }
-  };
-
-  return { isPanelOpen, panelContent, headerText, openSidePanel, closeSidePanel };
-};
+export const useSidePanel: UseStore<SidePanelState> = create((set) => ({
+  isOpen: false,
+  openSidePanel: (headerText, panelContent) => set((state) => ({ ...state, headerText, panelContent, isOpen: true })),
+  closeSidePanel: () => set((state) => ({ ...state, isOpen: false })),
+}));