pl-fe: router migration

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

packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx

@@ -7,6 +7,8 @@ import Icon from 'pl-fe/components/ui/icon';
 import Toggle from 'pl-fe/components/ui/toggle';
 import { userTouching } from 'pl-fe/is-mobile';
 
+type Menu = Array<MenuItem | null>;
+
 type MenuItem = {
   action?: React.EventHandler<React.KeyboardEvent | React.MouseEvent>;
   active?: boolean;
@@ -21,7 +23,7 @@ type MenuItem = {
   target?: React.HTMLAttributeAnchorTarget;
   text: string;
   type?: 'toggle' | 'radio';
-  items?: Array<Omit<MenuItem, 'items'>>;
+  items?: Menu;
   onSelectFile?: (files: FileList) => void;
   accept?: string;
 } & ({
@@ -180,4 +182,4 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
   );
 };
 
-export { type MenuItem, DropdownMenuItem as default };
+export { type Menu, type MenuItem, DropdownMenuItem as default };

packages/pl-fe/src/components/dropdown-menu/dropdown-menu.tsx

@@ -12,14 +12,12 @@ import { userTouching } from 'pl-fe/is-mobile';
 import { useModalsActions } from 'pl-fe/stores/modals';
 import { useUiStoreActions } from 'pl-fe/stores/ui';
 
-import DropdownMenuItem, { MenuItem } from './dropdown-menu-item';
+import DropdownMenuItem, { Menu } from './dropdown-menu-item';
 
 const messages = defineMessages({
   back: { id: 'card.back.label', defaultMessage: 'Back' },
 });
 
-type Menu = Array<MenuItem | null>;
-
 interface IDropdownMenuContent {
   handleClose: () => any;
   items?: Menu;

packages/pl-fe/src/components/hashtag-link.tsx

@@ -7,7 +7,7 @@ interface IHashtagLink {
 }
 
 const HashtagLink: React.FC<IHashtagLink> = ({ hashtag }) => (
-  <Link to='/tags/$id' params={{ id: hashtag }} onClick={(e) => e.stopPropagation()}>
+  <Link to='/tags/$id' params={{ id: hashtag }} /* onClick={(e) => e.stopPropagation()} */>
     #{hashtag}
   </Link>
 );

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

@@ -1,7 +1,7 @@
 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 { useHistory } from 'react-router-dom';
 
 import { cancelReplyCompose } from 'pl-fe/actions/compose';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
@@ -35,7 +35,7 @@ interface IModalRoot {
 
 const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type }) => {
   const intl = useIntl();
-  const history = useHistory();
+  // const history = useHistory();
   const dispatch = useAppDispatch();
 
   const persistDraftStatus = usePersistDraftStatus();
@@ -45,8 +45,8 @@ 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 modalHistoryKey = useRef<number>();
+  // const unlistenHistory = useRef<ReturnType<typeof history.listen>>();
 
   const prevChildren = usePrevious(children);
 
@@ -121,33 +121,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();
+    // modalHistoryKey.current = Date.now();
+    // unlistenHistory.current = history.listen(({ state }, action) => {
+    //   if (!(state as any)?.plFeModalKey) {
+    //     onClose();
+    //   } else if (action === 'POP') {
+    //     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();
+    // }
+    // const { state } = history.location;
+    // if (state && (state as any).plFeModalKey === modalHistoryKey.current) {
+    //   history.goBack();
+    // }
   };
 
   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 } });
-    }
+    // const { state } = history.location;
+    // if (!state || (state as any).plFeModalKey !== modalHistoryKey.current) {
+    //   history.push({ ...history.location, state: { ...(state as any), plFeModalKey: modalHistoryKey.current } });
+    // }
   };
 
   const getSiblings = () => Array(...(ref.current!.parentElement!.childNodes as any as ChildNode[]))

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

@@ -536,9 +536,9 @@ const UI: React.FC = React.memo(() => {
           </Suspense>
         </div>
       </div>
-      {/* <Suspense>
+      <Suspense>
         <ModalRoot />
-      </Suspense> */}
+      </Suspense>
 
       <Toaster
         position='top-right'