(nextjs) fixed flow loading, anchors and styles

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 };