Implement active id changes

Author: 000-ooo-000

src/Layout/PanelSideBarLayout/PanelSideBar/Context/PanelSideBarContext.tsx

@@ -9,7 +9,6 @@ export interface PanelLinkRendererProps<T> {
 export type MenuItemToggleFn<TMenuItem> = (menuItem: PanelMenuItem<TMenuItem>) => void;
 
 export interface PanelSideBarContextProps<TPanelItem, TMenuItem> {
-  activePanelId: string;
   /**
    * The global panel items.
    */
@@ -18,7 +17,6 @@ export interface PanelSideBarContextProps<TPanelItem, TMenuItem> {
    * The component used to render the menu item links.
    */
   LinkRenderer: ComponentType<PanelLinkRendererProps<TMenuItem>>;
-  setActivePanel: (panelId: string) => void;
   toggledMenuItemIds: string[];
   toggleMenuItem: MenuItemToggleFn<TMenuItem>;
 }
@@ -36,8 +34,6 @@ export interface PanelSideBarMenuProviderProps<TPanelItem, TMenuItem>
 export const PanelSideBarProvider = <TPanelItem, TMenuItem>(props: PanelSideBarMenuProviderProps<TPanelItem, TMenuItem>) => {
   const { children, globalItems, LinkRenderer } = props;
 
-  const getFirstPanelId = () => globalItems.find((x) => x.id)?.id ?? "";
-  const [activePanelId, setActivePanelId] = useState(getFirstPanelId());
   const [toggledMenuItemIds, setToggledMenuItemIds] = useState<string[]>([]);
 
   const toggleMenuItem: MenuItemToggleFn<TMenuItem> = (menuItem) => {
@@ -52,15 +48,11 @@ export const PanelSideBarProvider = <TPanelItem, TMenuItem>(props: PanelSideBarM
     });
   };
 
-  const setActivePanel = (panelId: string) => setActivePanelId(panelId);
-
   return (
     <PanelSideBarContext.Provider
       value={{
-        activePanelId,
         globalItems,
         LinkRenderer,
-        setActivePanel,
         toggledMenuItemIds,
         toggleMenuItem,
       }}

src/Layout/PanelSideBarLayout/PanelSideBar/PanelSidebar.tsx

@@ -4,15 +4,25 @@ import { Button } from "reactstrap";
 import { usePanelSideBarContext } from "./Context/PanelSideBarContext";
 import { PanelItem } from "./Definitions/PanelSideBarMenuItem";
 import { PanelSideBarItem } from "./PanelSideBarItem";
-
+import { useState } from "react";
 interface PanelSideBarProps {
   localItems?: PanelItem[];
 }
 
 export const PanelSideBar = (props: PanelSideBarProps) => {
   const { localItems = [] } = props;
 
-  const { activePanelId, globalItems, LinkRenderer, setActivePanel, toggledMenuItemIds, toggleMenuItem } = usePanelSideBarContext();
+  const { globalItems, LinkRenderer, toggledMenuItemIds, toggleMenuItem } = usePanelSideBarContext();
+
+  let initialActivePanel: string;
+  if (localItems.length > 0) {
+    const [firstLocalItem] = localItems;
+    initialActivePanel = firstLocalItem.id;
+  } else {
+    initialActivePanel = globalItems.find((x) => x.id)?.id ?? "";
+  }
+
+  const [activePanelId, setActivePanelId] = useState<string>(initialActivePanel);
 
   const activePanel: PanelItem = globalItems.find((x) => x.id === activePanelId);
   const localActivePanel: PanelItem | undefined = localItems?.find((x) => x.id === activePanelId);
@@ -24,7 +34,7 @@ export const PanelSideBar = (props: PanelSideBarProps) => {
         color="primary"
         outline
         className={classNames("tile", { active: activePanelId === id })}
-        onClick={() => setActivePanel(id)}
+        onClick={() => setActivePanelId(id)}
         title={title}
         disabled={disabled}
       >