made transitional Anchor component for next/cra

src/components/common/Anchor/index.tsx

@@ -0,0 +1,16 @@
+import React, { VFC } from 'react';
+import { LinkProps } from '~/utils/types';
+import { CONFIG } from '~/utils/config';
+import NextLink from 'next/link';
+import { Link } from 'react-router-dom';
+
+interface AnchorProps extends LinkProps {}
+
+const Anchor: VFC<AnchorProps> = ({ ref, href, ...rest }) =>
+  CONFIG.isNextEnvironment ? (
+    <NextLink {...rest} href={href ?? ''} />
+  ) : (
+    <Link {...rest} to={href ?? ''} />
+  );
+
+export { Anchor };

src/components/flow/FlowRecentItem/index.tsx

@@ -4,9 +4,9 @@ import styles from './styles.module.scss';
 import { URLS } from '~/constants/urls';
 import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
 import { getPrettyDate } from '~/utils/dom';
-import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 import { Icon } from '~/components/input/Icon';
+import { Anchor } from '~/components/common/Anchor';
 
 interface IProps {
   node: Partial<INode>;
@@ -15,7 +15,7 @@ interface IProps {
 
 const FlowRecentItem: FC<IProps> = ({ node, has_new }) => {
   return (
-    <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+    <Anchor key={node.id} className={styles.item} href={URLS.NODE_URL(node.id)}>
       <div
         className={classNames(styles.thumb, {
           [styles.new]: has_new,
@@ -33,7 +33,7 @@ const FlowRecentItem: FC<IProps> = ({ node, has_new }) => {
           <span>{getPrettyDate(node.created_at)}</span>
         </div>
       </div>
-    </Link>
+    </Anchor>
   );
 };
 

src/components/main/Logo/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import styles from './styles.module.scss';
-import { Link } from 'react-router-dom';
+import { Anchor } from '~/components/common/Anchor';
+import { URLS } from '~/constants/urls';
 
 export const Logo = () => (
-  <Link className={styles.logo} to="/">
+  <Anchor className={styles.logo} href={URLS.BASE}>
     VAULT
-  </Link>
+  </Anchor>
 );

src/components/node/NodeRelatedBlock/index.tsx

@@ -4,7 +4,7 @@ import { NodeRelated } from '~/components/node/NodeRelated';
 import { URLS } from '~/constants/urls';
 import { INode } from '~/types';
 import { INodeRelated } from '~/types/node';
-import { Link } from 'react-router-dom';
+import { Anchor } from '~/components/common/Anchor';
 
 interface IProps {
   isLoading: boolean;
@@ -27,7 +27,9 @@ const NodeRelatedBlock: FC<IProps> = ({ isLoading, node, related }) => {
           .map(album => (
             <NodeRelated
               title={
-                <Link to={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}>{album}</Link>
+                <Anchor href={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}>
+                  {album}
+                </Anchor>
               }
               items={related.albums[album]}
               key={album}

src/components/profile/ProfileSidebarMenu/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
-import { Link } from 'react-router-dom';
+import { Anchor } from '~/components/common/Anchor';
 
 interface IProps {
   path: string;
@@ -12,10 +12,10 @@ const ProfileSidebarMenu: FC<IProps> = ({ path }) => {
 
   return (
     <div className={styles.wrap}>
-      <Link className={styles.row} to={`${cleaned}/settings`}>
+      <Anchor className={styles.row} href={`${cleaned}/settings`}>
         <Icon icon="settings" />
         <span>Настройки</span>
-      </Link>
+      </Anchor>
 
       <div className={styles.row}>
         <Icon icon="messages" />

src/constants/api.ts

@@ -3,10 +3,10 @@ import { OAuthProvider } from '~/types/auth';
 import { CONFIG } from '~/utils/config';
 
 export const API = {
-  BASE: CONFIG.API_HOST,
+  BASE: CONFIG.apiHost,
   USER: {
     LOGIN: '/user/login',
-    OAUTH_WINDOW: (provider: OAuthProvider) => `${CONFIG.API_HOST}oauth/${provider}/redirect`,
+    OAUTH_WINDOW: (provider: OAuthProvider) => `${CONFIG.apiHost}oauth/${provider}/redirect`,
     ME: '/user/',
     PROFILE: (username: string) => `/user/user/${username}/profile`,
     MESSAGES: (username: string) => `/user/user/${username}/messages`,

src/containers/main/Header/index.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useCallback, useMemo } from 'react';
-import { Link } from 'react-router-dom';
 import { Logo } from '~/components/main/Logo';
 
 import { Filler } from '~/components/containers/Filler';
@@ -19,6 +18,7 @@ import { useModal } from '~/hooks/modal/useModal';
 import { useScrollTop } from '~/hooks/dom/useScrollTop';
 import { useFlow } from '~/hooks/flow/useFlow';
 import { useUpdates } from '~/hooks/updates/useUpdates';
+import { Anchor } from '~/components/common/Anchor';
 
 type HeaderProps = {};
 
@@ -62,32 +62,32 @@ const Header: FC<HeaderProps> = observer(() => {
 
         <div className={styles.plugs}>
           <Authorized>
-            <Link
+            <Anchor
               className={classNames(styles.item, {
                 [styles.has_dot]: hasFlowUpdates,
               })}
-              to={URLS.BASE}
+              href={URLS.BASE}
             >
               ФЛОУ
-            </Link>
+            </Anchor>
 
-            <Link
+            <Anchor
               className={classNames(styles.item, styles.lab, {
                 [styles.has_dot]: hasLabUpdates,
               })}
-              to={URLS.LAB}
+              href={URLS.LAB}
             >
               ЛАБ
-            </Link>
+            </Anchor>
 
-            <Link
+            <Anchor
               className={classNames(styles.item, styles.boris, {
                 [styles.has_dot]: hasBorisUpdates,
               })}
-              to={URLS.BORIS}
+              href={URLS.BORIS}
             >
               БОРИС
-            </Link>
+            </Anchor>
           </Authorized>
         </div>
 

src/pages/_app.tsx

@@ -15,10 +15,13 @@ import { AudioPlayerProvider } from '~/utils/providers/AudioPlayerProvider';
 import { MetadataProvider } from '~/utils/providers/MetadataProvider';
 import { AuthProvider } from '~/utils/providers/AuthProvider';
 import { MainLayout } from '~/containers/main/MainLayout';
+import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
 
 const mobxStore = getMOBXStore();
 
 export default function MyApp({ Component, pageProps }) {
+  useGlobalLoader();
+
   return (
     <StoreContextProvider store={mobxStore}>
       <SWRConfigProvider>

src/store/auth/AuthStore.ts

@@ -13,7 +13,7 @@ export class AuthStore {
     makeAutoObservable(this);
 
     void makePersistable(this, {
-      name: `vault48_auth_${CONFIG.API_HOST}`,
+      name: `vault48_auth_${CONFIG.apiHost}`,
       properties: ['token', 'user', 'isTesterInternal'],
       storage: typeof window !== 'undefined' ? window.localStorage : undefined,
     });

src/utils/config/index.ts

@@ -1,5 +1,7 @@
 export const CONFIG = {
-  API_HOST: process.env.REACT_APP_API_HOST || process.env.NEXT_PUBLIC_API_HOST || '',
-  REMOTE_CURRENT:
+  apiHost: process.env.REACT_APP_API_HOST || process.env.NEXT_PUBLIC_API_HOST || '',
+  remoteCurrent:
     process.env.REACT_APP_REMOTE_CURRENT || process.env.NEXT_PUBLIC_REMOTE_CURRENT || '',
+  // transitional prop, marks migration to nextjs
+  isNextEnvironment: false,
 };

src/utils/dom.ts

@@ -68,10 +68,10 @@ export const getURLFromString = (
   size?: typeof PRESETS[keyof typeof PRESETS]
 ): string => {
   if (size) {
-    return (url || '').replace('REMOTE_CURRENT://', `${CONFIG.REMOTE_CURRENT}cache/${size}/`);
+    return (url || '').replace('REMOTE_CURRENT://', `${CONFIG.remoteCurrent}cache/${size}/`);
   }
 
-  return (url || '').replace('REMOTE_CURRENT://', CONFIG.REMOTE_CURRENT);
+  return (url || '').replace('REMOTE_CURRENT://', CONFIG.remoteCurrent);
 };
 
 export const getURL = (

src/utils/types.ts

@@ -16,3 +16,8 @@ export type ButtonProps = React.DetailedHTMLProps<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 >;
+
+export type LinkProps = React.DetailedHTMLProps<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  HTMLAnchorElement
+>;