fix: Enhance Overlay State Management and Prevent Duplicate Entries (#53

)

* fix: Ensure unique overlay ID and maintain overlay state on close/reopen

- Added check to prevent adding an overlay with a duplicate ID if it already exists and is open.
- Modified `overLayOrderList` to filter out existing overlay ID before adding it to ensure proper state management when closing and reopening overlays.
- Improved error handling to throw an error if the same overlay ID is attempted to be added.

Co-authored-by: jgjgill <[email protected]>
Co-authored-by: Jeongjin Oh <[email protected]>

* fix: Enhance overlay state management and prevent duplicate entries

- Added `current` state to track the current overlay in `OverlayProvider` and `ContentOverlayController`.
- Implemented logic to maintain overlay state correctly when an overlay is closed and reopened without unmounting.

* Create tall-flowers-trade.md

* Update packages/src/context/reducer.ts

Co-authored-by: Jeongjin Oh <[email protected]>

---------

Co-authored-by: jgjgill <[email protected]>
Co-authored-by: Jeongjin Oh <[email protected]>
Co-authored-by: Jeongjin Oh <[email protected]>

.changeset/tall-flowers-trade.md

@@ -0,0 +1,10 @@
+---
+"overlay-kit": patch
+---
+
+fix: Enhance Overlay State Management and Prevent Duplicate Entries
+
+This change enhances the overlay state management to ensure overlays maintain the correct state when closed and reopened, and prevents duplicate overlay entries.
+It addresses issues with the overlay's `current` state not updating correctly in certain scenarios.
+
+**Related Issue:** Fixes # 46

packages/src/context/provider.tsx

@@ -17,6 +17,7 @@ export function OverlayProvider({ children }: PropsWithChildren) {
           <ContentOverlayController
             key={currentOverlayId}
             isOpen={isOpen}
+            current={overlayState.current}
             overlayId={currentOverlayId}
             onMounted={() => {
               requestAnimationFrame(() => {
@@ -44,6 +45,7 @@ export type OverlayControllerComponent = FC<OverlayControllerProps>;
 
 type ContentOverlayControllerProps = {
   isOpen: boolean;
+  current: string | null;
   overlayId: string;
   onMounted: () => void;
   onCloseModal: () => void;
@@ -53,14 +55,27 @@ type ContentOverlayControllerProps = {
 
 function ContentOverlayController({
   isOpen,
+  current,
   overlayId,
   onMounted,
   onCloseModal,
   onExitModal,
   controller: Controller,
 }: ContentOverlayControllerProps) {
+  const prevCurrent = useRef(current);
   const onMountedRef = useRef(onMounted);
 
+  /**
+   * @description Executes when closing and reopening an overlay without unmounting.
+   */
+  if (prevCurrent.current !== current) {
+    prevCurrent.current = current;
+
+    if (current === overlayId) {
+      onMountedRef.current();
+    }
+  }
+
   useEffect(() => {
     onMountedRef.current();
   }, []);

packages/src/context/reducer.ts

@@ -11,9 +11,18 @@ export type OverlayReducerAction =
 export function overlayReducer(state: OverlayData, action: OverlayReducerAction): OverlayData {
   switch (action.type) {
     case 'ADD': {
+      const isExisted = state.overlayOrderList.includes(action.overlay.id);
+
+      if (isExisted && state.overlayData[action.overlay.id].isOpen === true) {
+        throw new Error("You can't open the multiple overlays with the same overlayId. Please set a different id.");
+      }
+
       return {
         current: action.overlay.id,
-        overlayOrderList: [...state.overlayOrderList, action.overlay.id],
+        /**
+         * @description Brings the overlay to the front when reopened after closing without unmounting.
+         */
+        overlayOrderList: [...state.overlayOrderList.filter((item) => item !== action.overlay.id), action.overlay.id],
         overlayData: {
           ...state.overlayData,
           [action.overlay.id]: action.overlay,