diff --git a/next.config.js b/next.config.js index e49faa13..ee56eaaa 100644 --- a/next.config.js +++ b/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', + }, + ]; + }, }); diff --git a/src/components/common/Anchor/index.tsx b/src/components/common/Anchor/index.tsx index 7b5a87c3..3f5a9c53 100644 --- a/src/components/common/Anchor/index.tsx +++ b/src/components/common/Anchor/index.tsx @@ -8,7 +8,9 @@ interface AnchorProps extends LinkProps {} const Anchor: VFC = ({ ref, href, ...rest }) => CONFIG.isNextEnvironment ? ( - + + + ) : ( ); diff --git a/src/components/flow/FlowCell/index.tsx b/src/components/flow/FlowCell/index.tsx index 0d9e83a7..350625ac 100644 --- a/src/components/flow/FlowCell/index.tsx +++ b/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 = ({ )} - + {withText && ( {title}}> {text!} @@ -94,7 +95,7 @@ const FlowCell: FC = ({

{title}

)} -
+ ); }; diff --git a/src/components/node/NodeRelatedItem/index.tsx b/src/components/node/NodeRelatedItem/index.tsx index a3194033..0cde320a 100644 --- a/src/components/node/NodeRelatedItem/index.tsx +++ b/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; }; @@ -29,12 +29,11 @@ const getTitleLetters = (title?: string): string => { : words[0].substr(0, 2).toUpperCase(); }; -const NodeRelatedItemUnconnected: FC = memo(({ item }) => { - const { push } = useNavigation(); +const NodeRelatedItem: FC = memo(({ item }) => { + const onClick = useGotoNode(item.id); const [is_loaded, setIsLoaded] = useState(false); const [width, setWidth] = useState(0); const ref = useRef(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 = memo(({ item }) => { ); }); -const NodeRelatedItem = withRouter(NodeRelatedItemUnconnected); - export { NodeRelatedItem }; diff --git a/src/hooks/flow/useFlowLoader.ts b/src/hooks/flow/useFlowLoader.ts index 2232739d..cc08f1fb 100644 --- a/src/hooks/flow/useFlowLoader.ts +++ b/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 }; }; diff --git a/src/hooks/node/useNodePageParams.ts b/src/hooks/node/useNodePageParams.ts new file mode 100644 index 00000000..28479222 --- /dev/null +++ b/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; +}; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 1397b5ed..7389a15a 100644 --- a/src/pages/_app.tsx +++ b/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 ( diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c0ff290e..11da7987 100644 --- a/src/pages/index.tsx +++ b/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 = observer(() => { + useGlobalLoader(); + const { updates, nodes, diff --git a/src/pages/node/[id].tsx b/src/pages/node/[id].tsx index 79006b25..5cb26eed 100644 --- a/src/pages/node/[id].tsx +++ b/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 = observer( - ({ - match: { - params: { id }, - }, - }) => { - const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10)); +const NodePage: FC = 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 ( - - - - - - - - - - ); + if (!node) { + // TODO: do something here + return null; } -); + + return ( + + + + + + + + + + ); +}); export default NodePage; diff --git a/src/store/index.ts b/src/store/index.ts index aac65654..bb4d5feb 100644 --- a/src/store/index.ts +++ b/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'); diff --git a/src/utils/config/index.ts b/src/utils/config/index.ts index 52f4e9bb..6b868a97 100644 --- a/src/utils/config/index.ts +++ b/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', };