(nextjs) fixed flow loading, anchors and styles

next.config.js

@@ -2,4 +2,12 @@ const withTM = require('next-transpile-modules')(['ramda']);
 
 module.exports = withTM({
   /* Your Next.js config */
+  async rewrites() {
+    return [
+      {
+        source: '/post:id',
+        destination: '/node/:id',
+      },
+    ];
+  },
 });

src/components/common/Anchor/index.tsx

@@ -8,7 +8,9 @@ interface AnchorProps extends LinkProps {}
 
 const Anchor: VFC<AnchorProps> = ({ ref, href, ...rest }) =>
   CONFIG.isNextEnvironment ? (
-    <NextLink {...rest} href={href ?? ''} />
+    <NextLink href={href ?? ''} passHref>
+      <a {...rest} />
+    </NextLink>
   ) : (
     <Link {...rest} to={href ?? ''} />
   );

src/components/flow/FlowCell/index.tsx

@@ -10,6 +10,7 @@ import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
 import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus';
 import { MenuDots } from '~/components/common/MenuDots';
 import { FlowCellImage } from '~/components/flow/FlowCellImage';
+import { Anchor } from '~/components/common/Anchor';
 
 interface Props {
   id: INode['id'];
@@ -71,7 +72,7 @@ const FlowCell: FC<Props> = ({
         </div>
       )}
 
-      <NavLink className={styles.link} to={to}>
+      <Anchor className={styles.link} href={to}>
         {withText && (
           <FlowCellText className={styles.text} heading={<h4 className={styles.title}>{title}</h4>}>
             {text!}
@@ -94,7 +95,7 @@ const FlowCell: FC<Props> = ({
             <h4 className={styles.title}>{title}</h4>
           </div>
         )}
-      </NavLink>
+      </Anchor>
     </div>
   );
 };

src/components/node/NodeRelatedItem/index.tsx

@@ -3,13 +3,13 @@ import styles from './styles.module.scss';
 import classNames from 'classnames';
 import { INode } from '~/types';
 import { PRESETS, URLS } from '~/constants/urls';
-import { RouteComponentProps, withRouter } from 'react-router';
+import { RouteComponentProps } from 'react-router';
 import { getURL, getURLFromString } from '~/utils/dom';
 import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString';
 import { Square } from '~/components/common/Square';
-import { useNavigation } from '~/hooks/navigation/useNavigation';
+import { useGotoNode } from '~/hooks/node/useGotoNode';
 
-type IProps = RouteComponentProps & {
+type IProps = {
   item: Partial<INode>;
 };
 
@@ -29,12 +29,11 @@ const getTitleLetters = (title?: string): string => {
     : words[0].substr(0, 2).toUpperCase();
 };
 
-const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item }) => {
-  const { push } = useNavigation();
+const NodeRelatedItem: FC<IProps> = memo(({ item }) => {
+  const onClick = useGotoNode(item.id);
   const [is_loaded, setIsLoaded] = useState(false);
   const [width, setWidth] = useState(0);
   const ref = useRef<HTMLDivElement>(null);
-  const onClick = useCallback(() => push(URLS.NODE_URL(item.id)), [item, push]);
 
   const thumb = useMemo(
     () => (item.thumbnail ? getURL({ url: item.thumbnail }, PRESETS.avatar) : ''),
@@ -95,6 +94,4 @@ const NodeRelatedItemUnconnected: FC<IProps> = memo(({ item }) => {
   );
 });
 
-const NodeRelatedItem = withRouter(NodeRelatedItemUnconnected);
-
 export { NodeRelatedItem };

src/hooks/flow/useFlowLoader.ts

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { getNodeDiff } from '~/api/node';
 import { uniq } from 'ramda';
 import { useFlowStore } from '~/store/flow/useFlowStore';
-import { runInAction } from 'mobx';
+import { runInAction, toJS } from 'mobx';
 import { showErrorToast } from '~/utils/errors/showToast';
 
 export const useFlowLoader = () => {
@@ -81,5 +81,7 @@ export const useFlowLoader = () => {
     }
   }, [flow]);
 
+  console.log(toJS(flow.nodes));
+
   return { getInitialNodes, isSyncing, loadMore };
 };

src/hooks/node/useNodePageParams.ts

@@ -0,0 +1,9 @@
+import { useRouteMatch } from 'react-router';
+import { useRouter } from 'next/router';
+import { CONFIG } from '~/utils/config';
+
+export const useNodePageParams = () => {
+  return CONFIG.isNextEnvironment
+    ? (useRouter().query.id as string)
+    : useRouteMatch<{ id: string }>().params.id;
+};

src/pages/_app.tsx

@@ -20,8 +20,6 @@ import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
 const mobxStore = getMOBXStore();
 
 export default function MyApp({ Component, pageProps }) {
-  useGlobalLoader();
-
   return (
     <StoreContextProvider store={mobxStore}>
       <SWRConfigProvider>

src/pages/index.tsx

@@ -3,10 +3,13 @@ import { FlowLayout } from '~/layouts/FlowLayout';
 import { useFlow } from '~/hooks/flow/useFlow';
 import { FlowContextProvider } from '~/utils/context/FlowContextProvider';
 import { observer } from 'mobx-react-lite';
+import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
 
 interface Props {}
 
 const FlowPage: FC<Props> = observer(() => {
+  useGlobalLoader();
+
   const {
     updates,
     nodes,

src/pages/node/[id].tsx

@@ -12,67 +12,63 @@ import { useNodePermissions } from '~/hooks/node/useNodePermissions';
 import { NodeRelatedProvider } from '~/utils/providers/NodeRelatedProvider';
 import { useLoadNode } from '~/hooks/node/useLoadNode';
 import { observer } from 'mobx-react-lite';
+import { useNodePageParams } from '~/hooks/node/useNodePageParams';
 
 type Props = RouteComponentProps<{ id: string }> & {};
 
-const NodePage: FC<Props> = observer(
-  ({
-    match: {
-      params: { id },
-    },
-  }) => {
-    const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10));
+const NodePage: FC<Props> = observer(() => {
+  const id = useNodePageParams();
+  const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10));
 
-    const onShowImageModal = useImageModal();
-    const {
-      onLoadMoreComments,
-      onDelete: onDeleteComment,
-      onEdit: onSaveComment,
-      comments,
-      hasMore,
-      isLoading: isLoadingComments,
-    } = useNodeComments(parseInt(id, 10));
-    const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags(
-      parseInt(id, 10)
-    );
-    const [canEdit] = useNodePermissions(node);
+  const onShowImageModal = useImageModal();
+  const {
+    onLoadMoreComments,
+    onDelete: onDeleteComment,
+    onEdit: onSaveComment,
+    comments,
+    hasMore,
+    isLoading: isLoadingComments,
+  } = useNodeComments(parseInt(id, 10));
+  const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags(
+    parseInt(id, 10)
+  );
+  const [canEdit] = useNodePermissions(node);
 
-    useScrollToTop([id, isLoadingComments]);
+  useScrollToTop([id, isLoadingComments]);
 
-    if (!node) {
-      // TODO: do something here
-      return null;
-    }
-
-    return (
-      <NodeContextProvider node={node} isLoading={isLoading} update={update}>
-        <NodeRelatedProvider id={parseInt(id, 10)} tags={node.tags}>
-          <CommentContextProvider
-            onSaveComment={onSaveComment}
-            comments={comments}
-            hasMore={hasMore}
-            lastSeenCurrent={lastSeen}
-            isLoading={isLoadingComments}
-            onShowImageModal={onShowImageModal}
-            onLoadMoreComments={onLoadMoreComments}
-            onDeleteComment={onDeleteComment}
-          >
-            <TagsContextProvider
-              tags={node.tags}
-              canAppend={canEdit}
-              canDelete={canEdit}
-              isLoading={isLoading}
-              onChange={onTagsChange}
-              onTagClick={onTagClick}
-              onTagDelete={onTagDelete}
-            >
-              <NodeLayout />
-            </TagsContextProvider>
-          </CommentContextProvider>
-        </NodeRelatedProvider>
-      </NodeContextProvider>
-    );
+  if (!node) {
+    // TODO: do something here
+    return null;
   }
-);
+
+  return (
+    <NodeContextProvider node={node} isLoading={isLoading} update={update}>
+      <NodeRelatedProvider id={parseInt(id, 10)} tags={node.tags}>
+        <CommentContextProvider
+          onSaveComment={onSaveComment}
+          comments={comments}
+          hasMore={hasMore}
+          lastSeenCurrent={lastSeen}
+          isLoading={isLoadingComments}
+          onShowImageModal={onShowImageModal}
+          onLoadMoreComments={onLoadMoreComments}
+          onDeleteComment={onDeleteComment}
+        >
+          <TagsContextProvider
+            tags={node.tags}
+            canAppend={canEdit}
+            canDelete={canEdit}
+            isLoading={isLoading}
+            onChange={onTagsChange}
+            onTagClick={onTagClick}
+            onTagDelete={onTagDelete}
+          >
+            <NodeLayout />
+          </TagsContextProvider>
+        </CommentContextProvider>
+      </NodeRelatedProvider>
+    </NodeContextProvider>
+  );
+});
 
 export default NodePage;

src/store/index.ts

@@ -3,6 +3,7 @@ import { FlowStore } from '~/store/flow/FlowStore';
 import { ModalStore } from '~/store/modal/ModalStore';
 import { LabStore } from '~/store/lab/LabStore';
 import { AuthStore } from '~/store/auth/AuthStore';
+import { useStaticRendering } from 'mobx-react-lite';
 
 export class Store {
   flow = new FlowStore();
@@ -22,3 +23,6 @@ export class Store {
 const defaultStore = new Store();
 
 export const getMOBXStore = () => defaultStore;
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+useStaticRendering(typeof window === 'undefined');

src/utils/config/index.ts

@@ -3,5 +3,5 @@ export const CONFIG = {
   remoteCurrent:
     process.env.REACT_APP_REMOTE_CURRENT || process.env.NEXT_PUBLIC_REMOTE_CURRENT || '',
   // transitional prop, marks migration to nextjs
-  isNextEnvironment: false,
+  isNextEnvironment: !!process.env.NEXT_PUBLIC_REMOTE_CURRENT || typeof window === 'undefined',
 };