removed all router-modals

src/components/bars/SubmitBar/index.tsx

@@ -1,26 +1,26 @@
 import React, { FC, useCallback, useState } from 'react';
 import { Icon } from '~/components/input/Icon';
-import { Link } from 'react-router-dom';
 import classNames from 'classnames';
-import { useRouteMatch } from 'react-router';
 import styles from './styles.module.scss';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+import { Dialog } from '~/constants/modal';
 
 interface Props {
   isLab?: boolean;
 }
 
 const SubmitBar: FC<Props> = ({ isLab }) => {
-  const { url } = useRouteMatch();
+  const showModal = useShowModal(Dialog.CreateNode);
   const [focused, setFocused] = useState(false);
 
   const onFocus = useCallback(() => setFocused(true), [setFocused]);
   const onBlur = useCallback(() => setFocused(false), [setFocused]);
 
   const createUrl = useCallback(
-    (type: string) => {
-      return [url.replace(/\/$/, ''), 'create', type].join('/');
+    (type: string) => () => {
+      showModal({ type, isInLab: !!isLab });
     },
-    [url]
+    [isLab, showModal]
   );
 
   const icon = isLab ? 'lab' : 'plus';
@@ -28,21 +28,21 @@ const SubmitBar: FC<Props> = ({ isLab }) => {
   return (
     <div className={classNames(styles.wrap, { [styles.lab]: isLab })}>
       <div className={classNames(styles.panel, { [styles.active]: focused })}>
-        <Link to={createUrl('image')} className={styles.link}>
+        <button onClick={createUrl('image')} className={styles.link}>
           <Icon icon="image" size={32} />
-        </Link>
+        </button>
 
-        <Link to={createUrl('text')} className={styles.link}>
+        <button onClick={createUrl('text')} className={styles.link}>
           <Icon icon="text" size={32} />
-        </Link>
+        </button>
 
-        <Link to={createUrl('video')} className={styles.link}>
+        <button onClick={createUrl('video')} className={styles.link}>
           <Icon icon="video" size={32} />
-        </Link>
+        </button>
 
-        <Link to={createUrl('audio')} className={styles.link}>
+        <button onClick={createUrl('audio')} className={styles.link}>
           <Icon icon="audio" size={32} />
-        </Link>
+        </button>
       </div>
 
       <button className={styles.button} onFocus={onFocus} onBlur={onBlur} type="button">

src/components/node/NodeTitle/index.tsx

@@ -27,6 +27,7 @@ interface IProps {
   onLike: () => void;
   onStar: () => void;
   onLock: () => void;
+  onEdit: () => void;
 }
 
 const NodeTitle: VFC<IProps> = memo(
@@ -50,6 +51,7 @@ const NodeTitle: VFC<IProps> = memo(
     onStar,
     onLike,
     onLock,
+    onEdit,
   }) => {
     return (
       <div className={classNames(styles.wrap)}>
@@ -91,11 +93,7 @@ const NodeTitle: VFC<IProps> = memo(
                   <Icon icon={isLocked ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
                 </div>
 
-                {!!id && (
-                  <Link to={URLS.NODE_EDIT_URL(id)}>
-                    <Icon icon="edit" size={24} />
-                  </Link>
-                )}
+                {!!id && <Icon icon="edit" size={24} onClick={onEdit} />}
               </div>
             </div>
           )}

src/constants/modal/index.ts

@@ -6,6 +6,9 @@ import { ProfileDialog } from '~/containers/dialogs/ProfileDialog';
 import { RestoreRequestDialog } from '~/containers/dialogs/RestoreRequestDialog';
 import { RestorePasswordDialog } from '~/containers/dialogs/RestorePasswordDialog';
 import { PhotoSwipe } from '~/containers/dialogs/PhotoSwipe';
+import { EditorCreateDialog } from '~/containers/dialogs/EditorCreateDialog';
+import { EditorEditDialog } from '~/containers/dialogs/EditorEditDialog';
+import { TagSidebar } from '~/containers/sidebars/TagSidebar';
 
 export enum Dialog {
   Login = 'Login',
@@ -16,6 +19,9 @@ export enum Dialog {
   RestorePassword = 'RestorePassword',
   Test = 'Test',
   Photoswipe = 'Photoswipe',
+  CreateNode = 'CreateNode',
+  EditNode = 'EditNode',
+  TagSidebar = 'TagNodes',
 }
 
 export const DIALOG_CONTENT = {
@@ -27,4 +33,7 @@ export const DIALOG_CONTENT = {
   [Dialog.RestoreRequest]: RestoreRequestDialog,
   [Dialog.RestorePassword]: RestorePasswordDialog,
   [Dialog.Photoswipe]: PhotoSwipe,
+  [Dialog.CreateNode]: EditorCreateDialog,
+  [Dialog.EditNode]: EditorEditDialog,
+  [Dialog.TagSidebar]: TagSidebar,
 } as const;

src/containers/dialogs/EditorCreateDialog/index.tsx

@@ -1,30 +1,19 @@
 import React, { FC, useCallback, useMemo, useRef } from 'react';
 import { EMPTY_NODE, NODE_TYPES } from '~/constants/node';
 import { EditorDialog } from '~/containers/dialogs/EditorDialog';
-import { useHistory, useRouteMatch } from 'react-router';
 import { values } from 'ramda';
 import { INode } from '~/types';
 import { useCreateNode } from '~/hooks/node/useCreateNode';
+import { DialogComponentProps } from '~/types/modal';
 
-const EditorCreateDialog: FC = () => {
-  const history = useHistory();
-  const {
-    params: { type },
-    url,
-  } = useRouteMatch<{ type: string }>();
-
-  const backUrl = useMemo(() => {
-    return (url && url.replace(/\/create\/(.*)$/, '')) || '/';
-  }, [url]);
-
-  const goBack = useCallback(() => {
-    history.replace(backUrl);
-  }, [backUrl, history]);
+export interface EditorCreateDialogProps extends DialogComponentProps {
+  type: typeof NODE_TYPES[keyof typeof NODE_TYPES];
+  isInLab: boolean;
+}
 
+const EditorCreateDialog: FC<EditorCreateDialogProps> = ({ type, isInLab, onRequestClose }) => {
   const isExist = useMemo(() => values(NODE_TYPES).some(el => el === type), [type]);
 
-  const isInLab = useMemo(() => !!url.match(/^\/lab/), [url]);
-
   const data = useRef({ ...EMPTY_NODE, type, is_promoted: !isInLab });
 
   const createNode = useCreateNode();
@@ -32,16 +21,16 @@ const EditorCreateDialog: FC = () => {
   const onSubmit = useCallback(
     async (node: INode) => {
       await createNode(node);
-      goBack();
+      onRequestClose();
     },
-    [goBack, createNode]
+    [onRequestClose, createNode]
   );
 
   if (!type || !isExist) {
     return null;
   }
 
-  return <EditorDialog node={data.current} onRequestClose={goBack} onSubmit={onSubmit} />;
+  return <EditorDialog node={data.current} onRequestClose={onRequestClose} onSubmit={onSubmit} />;
 };
 
 export { EditorCreateDialog };

src/containers/dialogs/EditorDialog/index.tsx

@@ -1,7 +1,7 @@
 import React, { createElement, FC, useCallback, useMemo, useState } from 'react';
 import styles from './styles.module.scss';
 import { NODE_EDITORS } from '~/constants/node';
-import { BetterScrollDialog } from '../../../components/dialogs/BetterScrollDialog';
+import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog';
 import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
 import { prop } from 'ramda';
 import { useNodeFormFormik } from '~/hooks/node/useNodeFormFormik';
@@ -9,8 +9,6 @@ import { EditorButtons } from '~/components/editors/EditorButtons';
 import { UploadSubject, UploadTarget } from '~/constants/uploads';
 import { FormikProvider } from 'formik';
 import { INode } from '~/types';
-import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
-import { useTranslatedError } from '~/hooks/data/useTranslatedError';
 import { useCloseOnEscape } from '~/hooks';
 import { EditorConfirmClose } from '~/components/editors/EditorConfirmClose';
 import { DialogComponentProps } from '~/types/modal';
@@ -50,8 +48,6 @@ const EditorDialog: FC<Props> = observer(({ node, onRequestClose, onSubmit }) =>
     setConfirmModalShown(true);
   }, [dirty, isConfirmModalShown, onRequestClose, closeConfirmModal]);
 
-  const error = useTranslatedError(status);
-
   useCloseOnEscape(onClose);
 
   if (!component) {
@@ -59,7 +55,6 @@ const EditorDialog: FC<Props> = observer(({ node, onRequestClose, onSubmit }) =>
   }
 
   return (
-    <ModalWrapper onOverlayClick={onClose}>
     <UploaderContextProvider value={uploader}>
       <FormikProvider value={formik}>
         <form onSubmit={handleSubmit} className={styles.form}>
@@ -67,7 +62,6 @@ const EditorDialog: FC<Props> = observer(({ node, onRequestClose, onSubmit }) =>
             footer={<EditorButtons />}
             backdrop={<CoverBackdrop cover={values.cover} />}
             width={860}
-              error={error}
             onClose={onClose}
           >
             <>
@@ -81,7 +75,6 @@ const EditorDialog: FC<Props> = observer(({ node, onRequestClose, onSubmit }) =>
         </form>
       </FormikProvider>
     </UploaderContextProvider>
-    </ModalWrapper>
   );
 });
 

src/containers/dialogs/EditorEditDialog/index.tsx

@@ -1,6 +1,5 @@
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { FC, useCallback } from 'react';
 import { EditorDialog } from '~/containers/dialogs/EditorDialog';
-import { useHistory, useRouteMatch } from 'react-router';
 import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
 import styles from './styles.module.scss';
@@ -8,37 +7,27 @@ import { useLoadNode } from '~/hooks/node/useLoadNode';
 import { useUpdateNode } from '~/hooks/node/useUpdateNode';
 import { INode } from '~/types';
 import { observer } from 'mobx-react-lite';
+import { DialogComponentProps } from '~/types/modal';
 
-const EditorEditDialog: FC = observer(() => {
-  const history = useHistory();
+export interface EditorEditDialogProps extends DialogComponentProps {
+  nodeId: number;
+}
 
-  const {
-    params: { id },
-    url,
-  } = useRouteMatch<{ id: string }>();
-
-  const backUrl = useMemo(() => {
-    return url.replace(/\/edit$/, '');
-  }, [url]);
-
-  const goBack = useCallback(() => {
-    history.replace(backUrl);
-  }, [backUrl, history]);
-
-  const { node, isLoading } = useLoadNode(parseInt(id, 10));
-  const updateNode = useUpdateNode(parseInt(id, 10));
+const EditorEditDialog: FC<EditorEditDialogProps> = observer(({ nodeId, onRequestClose }) => {
+  const { node, isLoading } = useLoadNode(nodeId);
+  const updateNode = useUpdateNode(nodeId);
 
   const onSubmit = useCallback(
     async (node: INode) => {
       await updateNode(node);
-      goBack();
+      onRequestClose();
     },
-    [updateNode, goBack]
+    [updateNode, onRequestClose]
   );
 
   if (isLoading || !node) {
     return (
-      <ModalWrapper onOverlayClick={goBack}>
+      <ModalWrapper onOverlayClick={onRequestClose}>
         <div className={styles.loader}>
           <LoaderCircle size={64} />
         </div>
@@ -46,7 +35,7 @@ const EditorEditDialog: FC = observer(() => {
     );
   }
 
-  return <EditorDialog node={node} onRequestClose={goBack} onSubmit={onSubmit} />;
+  return <EditorDialog node={node} onRequestClose={onRequestClose} onSubmit={onSubmit} />;
 });
 
 export { EditorEditDialog };

src/containers/main/SidebarRouter/index.tsx

@@ -4,7 +4,6 @@ import { Route, Switch } from 'react-router';
 import { TagSidebar } from '~/containers/sidebars/TagSidebar';
 import { Authorized } from '~/components/containers/Authorized';
 import { SubmitBar } from '~/components/bars/SubmitBar';
-import { EditorCreateDialog } from '~/containers/dialogs/EditorCreateDialog';
 
 interface IProps {
   prefix?: string;
@@ -13,16 +12,9 @@ interface IProps {
 
 const SidebarRouter: FC<IProps> = ({ prefix = '', isLab }) => {
   return createPortal(
-    <>
-      <Switch>
-        <Route path={`${prefix}/create/:type`} component={EditorCreateDialog} />
-        <Route path={`${prefix}/tag/:tag`} component={TagSidebar} />
-      </Switch>
-
     <Authorized>
       <SubmitBar isLab={isLab} />
-      </Authorized>
-    </>,
+    </Authorized>,
     document.body
   );
 };

src/containers/sidebars/SidebarWrapper/index.tsx

@@ -20,13 +20,10 @@ const SidebarWrapper: FC<IProps> = ({ children, onClose }) => {
     return () => clearAllBodyScrollLocks();
   }, []);
 
-  return createPortal(
+  return (
     <div className={styles.wrapper} ref={ref}>
-      <div className={styles.clicker} onClick={onClose} />
-
       {children}
-    </div>,
-    document.body
+    </div>
   );
 };
 

src/containers/sidebars/SidebarWrapper/styles.module.scss

@@ -10,9 +10,6 @@
 }
 
 .wrapper {
-  position: fixed;
-  top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   display: flex;
@@ -22,19 +19,7 @@
   overflow: hidden;
   animation: appear 0.25s forwards;
 
-  @include sidebar;
-
   & > * {
     z-index: 4;
   }
 }
-
-.clicker {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  cursor: pointer;
-}

src/containers/sidebars/TagSidebar/index.tsx

@@ -1,7 +1,6 @@
-import React, { useCallback, useMemo, VFC } from 'react';
+import React, { useMemo, VFC } from 'react';
 import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
 import styles from './styles.module.scss';
-import { useHistory, useRouteMatch } from 'react-router';
 import { Icon } from '~/components/input/Icon';
 import { Link } from 'react-router-dom';
 import { TagSidebarList } from '~/components/sidebar/TagSidebarList';
@@ -9,21 +8,18 @@ import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
 import { Tag } from '~/components/tags/Tag';
 import { useTagNodes } from '~/hooks/tag/useTagNodes';
+import { DialogComponentProps } from '~/types/modal';
 
-const TagSidebar: VFC = () => {
-  const {
-    params: { tag },
-    url,
-  } = useRouteMatch<{ tag: string }>();
-  const history = useHistory();
+interface TagSidebarProps extends DialogComponentProps {
+  tag: string;
+}
 
-  const basePath = url.replace(new RegExp(`/tag/${tag}$`), '');
-  const onClose = useCallback(() => history.push(basePath), [basePath, history]);
+const TagSidebar: VFC<TagSidebarProps> = ({ tag, onRequestClose }) => {
   const { nodes, hasMore, isLoading, loadMore } = useTagNodes(tag);
   const title = useMemo(() => decodeURIComponent(tag), [tag]);
 
   return (
-    <SidebarWrapper onClose={onClose}>
+    <SidebarWrapper onClose={onRequestClose}>
       <div className={styles.wrap}>
         <div className={styles.content}>
           <div className={styles.head}>
@@ -38,9 +34,9 @@ const TagSidebar: VFC = () => {
             )}
 
             <div className={styles.close}>
-              <Link to={basePath}>
+              <button onClick={onRequestClose}>
                 <Icon icon="close" size={32} />
-              </Link>
+              </button>
             </div>
           </div>
 

src/hooks/node/useNodeActions.ts

@@ -2,8 +2,12 @@ import { INode } from '~/types';
 import { useCallback } from 'react';
 import { apiLockNode, apiPostNodeHeroic, apiPostNodeLike } from '~/api/node';
 import { showErrorToast } from '~/utils/errors/showToast';
+import { useModal } from '~/hooks/modal/useModal';
+import { Dialog } from '~/constants/modal';
 
 export const useNodeActions = (node: INode, update: (node: Partial<INode>) => Promise<unknown>) => {
+  const { showModal } = useModal();
+
   const onLike = useCallback(async () => {
     try {
       const result = await apiPostNodeLike({ id: node.id });
@@ -37,5 +41,7 @@ export const useNodeActions = (node: INode, update: (node: Partial<INode>) => Pr
     }
   }, [node.deleted_at, node.id, update]);
 
-  return { onLike, onStar, onLock };
+  const onEdit = useCallback(() => showModal(Dialog.EditNode, { nodeId: node.id! }), [node]);
+
+  return { onLike, onStar, onLock, onEdit };
 };

src/hooks/node/useNodeTags.ts

@@ -1,15 +1,15 @@
-import { useHistory } from 'react-router';
 import { useCallback } from 'react';
 import { ITag } from '~/types';
-import { URLS } from '~/constants/urls';
 import { useLoadNode } from '~/hooks/node/useLoadNode';
 import { apiDeleteNodeTag, apiPostNodeTags } from '~/api/node';
 import { useGetNodeRelated } from '~/hooks/node/useGetNodeRelated';
+import { useShowModal } from '~/hooks/modal/useShowModal';
+import { Dialog } from '~/constants/modal';
 
 export const useNodeTags = (id: number) => {
+  const showModal = useShowModal(Dialog.TagSidebar);
   const { refresh: refreshRelated } = useGetNodeRelated(id);
   const { update } = useLoadNode(id);
-  const history = useHistory();
 
   const onChange = useCallback(
     async (tags: string[]) => {
@@ -30,9 +30,9 @@ export const useNodeTags = (id: number) => {
         return;
       }
 
-      history.push(URLS.NODE_TAG_URL(id, encodeURIComponent(tag.title)));
+      showModal({ tag: tag.title });
     },
-    [history, id]
+    [showModal, id]
   );
 
   const onDelete = useCallback(

src/layouts/NodeLayout/index.tsx

@@ -24,7 +24,7 @@ const NodeLayout: FC<IProps> = () => {
   const { node, isLoading, update } = useNodeContext();
   const { head, block } = useNodeBlocks(node, isLoading);
   const [canEdit, canLike, canStar] = useNodePermissions(node);
-  const { onLike, onStar, onLock } = useNodeActions(node, update);
+  const { onLike, onStar, onLock, onEdit } = useNodeActions(node, update);
 
   useNodeCoverImage(node);
 
@@ -53,6 +53,7 @@ const NodeLayout: FC<IProps> = () => {
               onLike={onLike}
               onStar={onStar}
               onLock={onLock}
+              onEdit={onEdit}
             />
           </div>
 

src/store/auth/AuthStore.ts

@@ -6,14 +6,14 @@ import { makePersistable, isHydrated } from 'mobx-persist-store';
 export class AuthStore {
   token: string = '';
   user: IUser = EMPTY_USER;
-  private isTesterInternal: boolean = false;
+  isTesterInternal: boolean = false;
 
   constructor() {
     makeAutoObservable(this);
 
     void makePersistable(this, {
       name: `vault48_auth_${process.env.REACT_APP_API_URL}`,
-      properties: ['token', 'user'],
+      properties: ['token', 'user', 'isTesterInternal'],
       storage: window.localStorage,
     });
   }

src/styles/_mixins.scss

@@ -164,8 +164,9 @@
   flex: 0 1 $width;
   max-width: 100vw;
   position: relative;
-  background: transparentize($content_bg, 0.4);
+  background: transparentize($content_bg, 0.1);
   box-shadow: transparentize(white, 0.95) -1px 0;
+  border-radius: $radius 0 0 $radius;
 }
 
 @mixin editor_round_button {