muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

added dynamic routes

Browse source
This commit is contained in:
Fedor Katurov 2022-07-17 12:36:09 +07:00
parent 8c17c02b3e
commit 0a1d2cbf99
16 changed files with 143 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -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",

5
src/components/bars/SubmitBar/index.tsx
View file

@ -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<Props> = ({ isLab }) => {
const SubmitBar: FC<SubmitBarProps> = ({ isLab }) => {
const showModal = useShowModal(Dialog.CreateNode);
const [focused, setFocused] = useState(false);

7
src/components/bars/SubmitBar/ssr.ts Normal file
View file

@ -0,0 +1,7 @@
import dynamic from 'next/dynamic';
import type { SubmitBarProps } from './index';
export const SubmitBarSSR = dynamic<SubmitBarProps>(
() => import('./index').then(it => it.SubmitBar),
{ ssr: false });

2
src/components/node/NodeCommentForm/index.tsx
View file

@ -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<unknown>;

8
src/components/node/NodeCommentForm/ssr.ts Normal file
View file

@ -0,0 +1,8 @@
import dynamic from 'next/dynamic';
import type { NodeCommentFormProps } from './index';
export const NodeCommentFormSSR = dynamic<NodeCommentFormProps>(
() => import('./index').then(it => it.NodeCommentForm),
{ ssr: false }
);

4
src/containers/boris/BorisComments/index.tsx
View file

@ -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<IProps> = () => {
>
<Group>
{(isUser || isSSR) && (
<NodeCommentForm user={user} nodeId={node.id} saveComment={onSaveComment} />
<NodeCommentFormSSR user={user} nodeId={node.id} saveComment={onSaveComment} />
)}
{isLoading || !comments?.length ? (

16
src/containers/boris/BorisSuperpowers/index.tsx
View file

@ -10,9 +10,7 @@ import { useShowModal } from '~/hooks/modal/useShowModal';
import styles from './styles.module.scss';
interface BorisSuperpowersProps { }
export interface BorisSuperpowersProps {}
const BorisSuperpowers: FC<BorisSuperpowersProps> = () => {
const openProfileSidebar = useShowModal(Dialog.ProfileSidebar);
@ -23,14 +21,18 @@ const BorisSuperpowers: FC<BorisSuperpowersProps> = () => {
<h2>Штучи, находящиеся в разработке</h2>
<div className={styles.grid}>
<Button size="mini" onClick={() => openProfileSidebar({})}>Открыть</Button>
<Button size="mini" onClick={() => openProfileSidebar({})}>
Открыть
</Button>
<div className={styles.label}>Профиль в сайдбаре</div>
<Button size="mini" onClick={() => push(URLS.SETTINGS.BASE)}>Открыть</Button>
<Button size="mini" onClick={() => push(URLS.SETTINGS.BASE)}>
Открыть
</Button>
<div className={styles.label}>Профиль на отдельной странице</div>
</div>
</Group>
);
}
};
export default BorisSuperpowers;
export { BorisSuperpowers };

12
src/containers/boris/BorisSuperpowers/ssr.tsx Normal file
View file

@ -0,0 +1,12 @@
import dynamic from 'next/dynamic';
import type { BorisSuperpowersProps } from './index';
export const BorisSuperPowersSSR = dynamic<BorisSuperpowersProps>(
() => import('~/containers/boris/BorisSuperpowers/index')
.then(it => it.BorisSuperpowers),
{
ssr: false,
loading: () => <div />,
}
);

2
src/containers/main/Header/index.tsx
View file

@ -21,7 +21,7 @@ import { useUpdates } from '~/hooks/updates/useUpdates';
import styles from './styles.module.scss';
type HeaderProps = {};
export interface HeaderProps {}
const Header: FC<HeaderProps> = observer(() => {
const labStats = useGetLabStats();

12
src/containers/main/Header/ssr.tsx Normal file
View file

@ -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<HeaderProps>(() => import('./index').then(it => it.Header), {
ssr: false,
loading: () => <div className={styles.wrap} />,
});
export const HeaderSSRPlaceholder = () => <div className={styles.wrap} />;

14
src/containers/main/Header/styles.module.scss
View file

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

4
src/containers/main/SidebarRouter/index.tsx
View file

@ -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<IProps> = ({ isLab }) => (
<Authorized>
<SubmitBar isLab={isLab} />
<SubmitBarSSR isLab={isLab} />
</Authorized>
);

4
src/containers/node/NodeBottomBlock/index.tsx
View file

@ -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<IProps> = ({ commentsOrder }) => {
</article>
{isUser && !isLoading && (
<NodeCommentForm nodeId={node.id} saveComment={onSaveComment} user={user} />
<NodeCommentFormSSR nodeId={node.id} saveComment={onSaveComment} user={user} />
)}
</Group>

26
src/layouts/BorisLayout/index.tsx
View file

@ -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,14 +25,15 @@ type IProps = {
isLoadingStats: boolean;
};
const BorisSuperPowers = dynamic(() => import('~/containers/boris/BorisSuperpowers/index'), {
ssr: false,
})
const BorisLayout: FC<IProps> = observer(({ title, setIsBetaTester, isTester, stats, isLoadingStats }) => {
const BorisLayout: FC<IProps> = 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 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 (
<Container>
@ -51,9 +52,7 @@ const BorisLayout: FC<IProps> = observer(({ title, setIsBetaTester, isTester, st
<Card className={styles.content}>
<Group>
<Superpower>
<Suspense fallback={<div />}>
<BorisSuperPowers />
</Suspense>
<BorisSuperPowersSSR />
</Superpower>
<BorisGraphicStats
@ -84,6 +83,7 @@ const BorisLayout: FC<IProps> = observer(({ title, setIsBetaTester, isTester, st
<SidebarRouter prefix="/" />
</Container>
);
});
}
);
export { BorisLayout };

8
src/layouts/MainLayout/index.tsx
View file

@ -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 }) => (
<div className={styles.wrapper}>
<div className={styles.content}>
<Header />
<HeaderSSR />
{children}
<LoadingProgress />
<SidebarRouter />
</div>

6
yarn.lock
View file

@ -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"