From 0a1d2cbf9901a30e74a2d94c9e5d29c1272fee96 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Sun, 17 Jul 2022 12:36:09 +0700 Subject: [PATCH] added dynamic routes --- package.json | 4 +- src/components/bars/SubmitBar/index.tsx | 5 +- src/components/bars/SubmitBar/ssr.ts | 7 ++ src/components/node/NodeCommentForm/index.tsx | 2 +- src/components/node/NodeCommentForm/ssr.ts | 8 ++ src/containers/boris/BorisComments/index.tsx | 4 +- .../boris/BorisSuperpowers/index.tsx | 38 +++---- src/containers/boris/BorisSuperpowers/ssr.tsx | 12 +++ src/containers/main/Header/index.tsx | 2 +- src/containers/main/Header/ssr.tsx | 12 +++ src/containers/main/Header/styles.module.scss | 14 ++- src/containers/main/SidebarRouter/index.tsx | 4 +- src/containers/node/NodeBottomBlock/index.tsx | 4 +- src/layouts/BorisLayout/index.tsx | 102 +++++++++--------- src/layouts/MainLayout/index.tsx | 8 +- yarn.lock | 6 +- 16 files changed, 143 insertions(+), 89 deletions(-) create mode 100644 src/components/bars/SubmitBar/ssr.ts create mode 100644 src/components/node/NodeCommentForm/ssr.ts create mode 100644 src/containers/boris/BorisSuperpowers/ssr.tsx create mode 100644 src/containers/main/Header/ssr.tsx diff --git a/package.json b/package.json index ee5a952f..f1a0721a 100644 --- a/package.json +++ b/package.json @@ -79,10 +79,10 @@ "@next/bundle-analyzer": "^12.0.8", "@next/eslint-plugin-next": "^12.0.8", "@types/marked": "^4.0.1", - "@types/react-router-dom": "^5.1.7", - "@types/react": "^17.0.2", "@types/node": "^11.13.22", "@types/ramda": "^0.26.33", + "@types/react": "^17.0.2", + "@types/react-router-dom": "^5.1.7", "@types/throttle-debounce": "^2.1.0", "@types/yup": "^0.29.11", "@typescript-eslint/eslint-plugin": "^5.10.1", diff --git a/src/components/bars/SubmitBar/index.tsx b/src/components/bars/SubmitBar/index.tsx index f54a8d4c..86cd3046 100644 --- a/src/components/bars/SubmitBar/index.tsx +++ b/src/components/bars/SubmitBar/index.tsx @@ -8,12 +8,11 @@ import { useShowModal } from '~/hooks/modal/useShowModal'; import styles from './styles.module.scss'; - -interface Props { +export interface SubmitBarProps { isLab?: boolean; } -const SubmitBar: FC = ({ isLab }) => { +const SubmitBar: FC = ({ isLab }) => { const showModal = useShowModal(Dialog.CreateNode); const [focused, setFocused] = useState(false); diff --git a/src/components/bars/SubmitBar/ssr.ts b/src/components/bars/SubmitBar/ssr.ts new file mode 100644 index 00000000..50a28f1e --- /dev/null +++ b/src/components/bars/SubmitBar/ssr.ts @@ -0,0 +1,7 @@ +import dynamic from 'next/dynamic'; + +import type { SubmitBarProps } from './index'; + +export const SubmitBarSSR = dynamic( + () => import('./index').then(it => it.SubmitBar), + { ssr: false }); diff --git a/src/components/node/NodeCommentForm/index.tsx b/src/components/node/NodeCommentForm/index.tsx index 10f81c1f..bf4e219d 100644 --- a/src/components/node/NodeCommentForm/index.tsx +++ b/src/components/node/NodeCommentForm/index.tsx @@ -5,7 +5,7 @@ import { CommentWrapper } from '~/components/containers/CommentWrapper'; import { IComment } from '~/types'; import { IUser } from '~/types/auth'; -interface NodeCommentFormProps { +export interface NodeCommentFormProps { user: IUser; nodeId?: number; saveComment: (comment: IComment) => Promise; diff --git a/src/components/node/NodeCommentForm/ssr.ts b/src/components/node/NodeCommentForm/ssr.ts new file mode 100644 index 00000000..fb7ae750 --- /dev/null +++ b/src/components/node/NodeCommentForm/ssr.ts @@ -0,0 +1,8 @@ +import dynamic from 'next/dynamic'; + +import type { NodeCommentFormProps } from './index'; + +export const NodeCommentFormSSR = dynamic( + () => import('./index').then(it => it.NodeCommentForm), + { ssr: false } +); diff --git a/src/containers/boris/BorisComments/index.tsx b/src/containers/boris/BorisComments/index.tsx index 8ce618a0..16dcc3d6 100644 --- a/src/containers/boris/BorisComments/index.tsx +++ b/src/containers/boris/BorisComments/index.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react'; import { Group } from '~/components/containers/Group'; import { Footer } from '~/components/main/Footer'; -import { NodeCommentForm } from '~/components/node/NodeCommentForm'; +import { NodeCommentFormSSR } from '~/components/node/NodeCommentForm/ssr'; import { NodeNoComments } from '~/components/node/NodeNoComments'; import { isSSR } from '~/constants/ssr'; import { NodeComments } from '~/containers/node/NodeComments'; @@ -40,7 +40,7 @@ const BorisComments: FC = () => { > {(isUser || isSSR) && ( - + )} {isLoading || !comments?.length ? ( diff --git a/src/containers/boris/BorisSuperpowers/index.tsx b/src/containers/boris/BorisSuperpowers/index.tsx index 8299444c..302d0741 100644 --- a/src/containers/boris/BorisSuperpowers/index.tsx +++ b/src/containers/boris/BorisSuperpowers/index.tsx @@ -10,27 +10,29 @@ import { useShowModal } from '~/hooks/modal/useShowModal'; import styles from './styles.module.scss'; -interface BorisSuperpowersProps { } - - +export interface BorisSuperpowersProps {} const BorisSuperpowers: FC = () => { - const openProfileSidebar = useShowModal(Dialog.ProfileSidebar); - const { push } = useRouter(); + const openProfileSidebar = useShowModal(Dialog.ProfileSidebar); + const { push } = useRouter(); - return ( - -

Штучи, находящиеся в разработке

+ return ( + +

Штучи, находящиеся в разработке

-
- -
Профиль в сайдбаре
+
+ +
Профиль в сайдбаре
- -
Профиль на отдельной странице
-
- - ); -} + +
Профиль на отдельной странице
+
+ + ); +}; -export default BorisSuperpowers; +export { BorisSuperpowers }; diff --git a/src/containers/boris/BorisSuperpowers/ssr.tsx b/src/containers/boris/BorisSuperpowers/ssr.tsx new file mode 100644 index 00000000..c8104207 --- /dev/null +++ b/src/containers/boris/BorisSuperpowers/ssr.tsx @@ -0,0 +1,12 @@ +import dynamic from 'next/dynamic'; + +import type { BorisSuperpowersProps } from './index'; + +export const BorisSuperPowersSSR = dynamic( + () => import('~/containers/boris/BorisSuperpowers/index') + .then(it => it.BorisSuperpowers), + { + ssr: false, + loading: () =>
, + } +); diff --git a/src/containers/main/Header/index.tsx b/src/containers/main/Header/index.tsx index 64529264..2fbd8af2 100644 --- a/src/containers/main/Header/index.tsx +++ b/src/containers/main/Header/index.tsx @@ -21,7 +21,7 @@ import { useUpdates } from '~/hooks/updates/useUpdates'; import styles from './styles.module.scss'; -type HeaderProps = {}; +export interface HeaderProps {} const Header: FC = observer(() => { const labStats = useGetLabStats(); diff --git a/src/containers/main/Header/ssr.tsx b/src/containers/main/Header/ssr.tsx new file mode 100644 index 00000000..5b6e4b6a --- /dev/null +++ b/src/containers/main/Header/ssr.tsx @@ -0,0 +1,12 @@ +import dynamic from 'next/dynamic'; + +import type { HeaderProps } from '~/containers/main/Header/index'; + +import styles from './styles.module.scss'; + +export const HeaderSSR = dynamic(() => import('./index').then(it => it.Header), { + ssr: false, + loading: () =>
, +}); + +export const HeaderSSRPlaceholder = () =>
; diff --git a/src/containers/main/Header/styles.module.scss b/src/containers/main/Header/styles.module.scss index eeab49c8..044075c6 100644 --- a/src/containers/main/Header/styles.module.scss +++ b/src/containers/main/Header/styles.module.scss @@ -1,5 +1,16 @@ @import "../../../styles/variables"; +@keyframes appear { + from { + opacity: 0; + transform: translate(0, -$header_height); + } + to { + opacity: 1; + transform: translate(0, 0); + } +} + .wrap { height: $header_height; z-index: 25; @@ -10,7 +21,8 @@ align-items: stretch; justify-content: center; box-sizing: border-box; - transition: background-color 0.5s; + transition: background-color 0.75s; + animation: appear 500ms forwards; @include desktop { height: 64px; diff --git a/src/containers/main/SidebarRouter/index.tsx b/src/containers/main/SidebarRouter/index.tsx index bbabe11a..b557b5b7 100644 --- a/src/containers/main/SidebarRouter/index.tsx +++ b/src/containers/main/SidebarRouter/index.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; -import { SubmitBar } from '~/components/bars/SubmitBar'; +import { SubmitBarSSR } from '~/components/bars/SubmitBar/ssr'; import { Authorized } from '~/components/containers/Authorized'; interface IProps { @@ -10,7 +10,7 @@ interface IProps { const SidebarRouter: FC = ({ isLab }) => ( - + ); diff --git a/src/containers/node/NodeBottomBlock/index.tsx b/src/containers/node/NodeBottomBlock/index.tsx index a2bbdc94..5532cf44 100644 --- a/src/containers/node/NodeBottomBlock/index.tsx +++ b/src/containers/node/NodeBottomBlock/index.tsx @@ -4,7 +4,7 @@ import { Group } from '~/components/containers/Group'; import { Padder } from '~/components/containers/Padder'; import { Sticky } from '~/components/containers/Sticky'; import { NodeAuthorBlock } from '~/components/node/NodeAuthorBlock'; -import { NodeCommentForm } from '~/components/node/NodeCommentForm'; +import { NodeCommentFormSSR } from '~/components/node/NodeCommentForm/ssr'; import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge'; import { NodeNoComments } from '~/components/node/NodeNoComments'; import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock'; @@ -51,7 +51,7 @@ const NodeBottomBlock: FC = ({ commentsOrder }) => { {isUser && !isLoading && ( - + )} diff --git a/src/layouts/BorisLayout/index.tsx b/src/layouts/BorisLayout/index.tsx index 3d23e24a..75b445d6 100644 --- a/src/layouts/BorisLayout/index.tsx +++ b/src/layouts/BorisLayout/index.tsx @@ -1,7 +1,6 @@ -import { FC, Suspense, useMemo } from 'react'; +import { FC, useMemo } from 'react'; import { observer } from 'mobx-react-lite'; -import dynamic from 'next/dynamic'; import { BorisGraphicStats } from '~/components/boris/BorisGraphicStats'; import { BorisSidebar } from '~/components/boris/BorisSidebar'; @@ -10,6 +9,7 @@ import { Card } from '~/components/containers/Card'; import { Group } from '~/components/containers/Group'; import { Sticky } from '~/components/containers/Sticky'; import { BorisComments } from '~/containers/boris/BorisComments'; +import { BorisSuperPowersSSR } from '~/containers/boris/BorisSuperpowers/ssr'; import { Container } from '~/containers/main/Container'; import { SidebarRouter } from '~/containers/main/SidebarRouter'; import { BorisUsageStats } from '~/types/boris'; @@ -25,65 +25,65 @@ type IProps = { isLoadingStats: boolean; }; -const BorisSuperPowers = dynamic(() => import('~/containers/boris/BorisSuperpowers/index'), { - ssr: false, -}) +const BorisLayout: FC = observer( + ({ title, setIsBetaTester, isTester, stats, isLoadingStats }) => { + const { isUser } = useAuthProvider(); + const commentsByMonth = useMemo(() => stats.backend.comments.by_month?.slice(0, -1), [ + stats.backend.comments.by_month, + ]); + const nodesByMonth = useMemo(() => stats.backend.nodes.by_month?.slice(0, -1), [ + stats.backend.comments.by_month, + ]); -const BorisLayout: FC = observer(({ title, setIsBetaTester, isTester, stats, isLoadingStats }) => { - const { isUser } = useAuthProvider(); - const commentsByMonth = useMemo(() => stats.backend.comments.by_month?.slice(0, -1), [stats.backend.comments.by_month]); - const nodesByMonth = useMemo(() => stats.backend.nodes.by_month?.slice(0, -1), [stats.backend.comments.by_month]); + return ( + +
+
- return ( - -
-
+
+
+
{title}
+
-
-
-
{title}
+ Борис
- Борис -
+
+ + + + + -
- - - - }> - - - + - + + + - + + + + - - - - - - - +
-
- - - ); -}); + + + ); + } +); export { BorisLayout }; diff --git a/src/layouts/MainLayout/index.tsx b/src/layouts/MainLayout/index.tsx index ca08dfaf..596181a8 100644 --- a/src/layouts/MainLayout/index.tsx +++ b/src/layouts/MainLayout/index.tsx @@ -1,7 +1,7 @@ -import * as React from 'react'; +import React from 'react'; import { LoadingProgress } from '~/components/common/LoadingProgress'; -import { Header } from '~/containers/main/Header'; +import { HeaderSSR } from '~/containers/main/Header/ssr'; import { SidebarRouter } from '~/containers/main/SidebarRouter'; import styles from './styles.module.scss'; @@ -9,8 +9,10 @@ import styles from './styles.module.scss'; export const MainLayout = ({ children }) => (
-
+ + {children} +
diff --git a/yarn.lock b/yarn.lock index d683e7c2..a04fbef4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -742,9 +742,9 @@ callsites@^3.0.0: integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== caniuse-lite@^1.0.30001283: - version "1.0.30001303" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001303.tgz#9b168e4f43ccfc372b86f4bc5a551d9b909c95c9" - integrity sha512-/Mqc1oESndUNszJP0kx0UaQU9kEv9nNtJ7Kn8AdA0mNnH8eR1cj0kG+NbNuC1Wq/b21eA8prhKRA3bbkjONegQ== + version "1.0.30001367" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001367.tgz" + integrity sha512-XDgbeOHfifWV3GEES2B8rtsrADx4Jf+juKX2SICJcaUhjYBO3bR96kvEIHa15VU6ohtOhBZuPGGYGbXMRn0NCw== chalk@^2.0.0: version "2.4.2"