pl-fe: oh fuck it works

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/modal-root.tsx

@@ -1,7 +1,7 @@
+import { useNavigate, useRouter } from '@tanstack/react-router';
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-// import { useHistory } from 'react-router-dom';
 
 import { cancelReplyCompose } from 'pl-fe/actions/compose';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
@@ -31,11 +31,13 @@ interface IModalRoot {
   onClose: (type?: ModalType) => void;
   type: ModalType;
   children: React.ReactNode;
+  modalIndex: number;
 }
 
-const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type }) => {
+const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type, modalIndex }) => {
   const intl = useIntl();
-  // const history = useHistory();
+  const router = useRouter();
+  const navigate = useNavigate();
   const dispatch = useAppDispatch();
 
   const persistDraftStatus = usePersistDraftStatus();
@@ -45,8 +47,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
 
   const ref = useRef<HTMLDivElement>(null);
   const activeElement = useRef<HTMLDivElement | null>(revealed ? document.activeElement as HTMLDivElement | null : null);
-  // const modalHistoryKey = useRef<number>();
-  // const unlistenHistory = useRef<ReturnType<typeof history.listen>>();
+  const unlistenHistory = useRef<() => void>();
 
   const prevChildren = usePrevious(children);
 
@@ -121,33 +122,33 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
   }, []);
 
   const handleModalOpen = () => {
-    // modalHistoryKey.current = Date.now();
-    // unlistenHistory.current = history.listen(({ state }, action) => {
-    //   if (!(state as any)?.plFeModalKey) {
-    //     onClose();
-    //   } else if (action === 'POP') {
-    //     handleOnClose();
+    unlistenHistory.current = router.history.subscribe(({ action, location }) => {
+      if (action.type === 'PUSH' && location.state.modalIndex === undefined) {
+        onClose();
+      }
+      if (action.type === 'BACK') {
+        handleOnClose();
 
-    //     if (onCancel) onCancel();
-    //   }
-    // });
+        if (onCancel) onCancel();
+      }
+    });
   };
 
   const handleModalClose = () => {
-    // if (unlistenHistory.current) {
-    //   unlistenHistory.current();
-    // }
-    // const { state } = history.location;
-    // if (state && (state as any).plFeModalKey === modalHistoryKey.current) {
-    //   history.goBack();
-    // }
+    if (unlistenHistory.current) {
+      unlistenHistory.current();
+    }
+    if (router.state.location.state.modalIndex === modalIndex + 1) {
+      router.history.go(-1);
+    }
   };
 
   const ensureHistoryBuffer = () => {
-    // const { state } = history.location;
-    // if (!state || (state as any).plFeModalKey !== modalHistoryKey.current) {
-    //   history.push({ ...history.location, state: { ...(state as any), plFeModalKey: modalHistoryKey.current } });
-    // }
+    if (router.state.location.state.modalIndex === undefined || (router.state.location.state.modalIndex < modalIndex)) {
+      navigate({ to: router.history.location.pathname, params: (prev) => prev, search: (prev) => prev, state: (prev) => ({ ...prev, modalIndex }) });
+    } else if (router.state.location.state.modalIndex > modalIndex) {
+      router.history.go(-1);
+    }
   };
 
   const getSiblings = () => Array(...(ref.current!.parentElement!.childNodes as any as ChildNode[]))

packages/pl-fe/src/features/ui/components/modal-root.tsx

@@ -64,6 +64,7 @@ const ModalRoot: React.FC = () => {
   const modals = useModals();
   const { closeModal } = useModalsActions();
   const { modalType: type, modalProps: props } = modals.at(-1) || { modalProps: {}, modalType: null };
+  const index = modals.length - 1;
 
   const onClickClose = (type?: ModalType) => {
     switch (type) {
@@ -80,7 +81,7 @@ const ModalRoot: React.FC = () => {
   const Component = type !== null ? (MODAL_COMPONENTS as Record<keyof typeof MODAL_COMPONENTS, React.ExoticComponent<any>>)[type] : null;
 
   return (
-    <Base onClose={onClickClose} type={type}>
+    <Base onClose={onClickClose} type={type} modalIndex={index}>
       {(Component && !!type) && (
         <Suspense fallback={renderLoading(type)}>
           <Component {...props} onClose={onClickClose} />

packages/pl-fe/src/features/ui/router.tsx

@@ -1367,6 +1367,10 @@ declare module '@tanstack/react-router' {
   interface Register {
     router: typeof router;
   }
+
+  interface HistoryState {
+    modalIndex?: number;
+  }
 }
 
 const RouterWithContext = () => {