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

preloading node comments

Browse source
This commit is contained in:
Fedor Katurov 2022-07-16 15:58:20 +07:00
parent 95166a427f
commit 66a32ae3cb
4 changed files with 25 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

8
.env.local
View file

@ -1,6 +1,6 @@
NEXT_PUBLIC_API_HOST=https://pig.staging.vault48.org/ #NEXT_PUBLIC_API_HOST=https://pig.staging.vault48.org/
NEXT_PUBLIC_REMOTE_CURRENT=https://pig.staging.vault48.org/static/ #NEXT_PUBLIC_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
#NEXT_PUBLIC_API_HOST=http://localhost:8888/ #NEXT_PUBLIC_API_HOST=http://localhost:8888/
#NEXT_PUBLIC_REMOTE_CURRENT=http://localhost:8888/static/ #NEXT_PUBLIC_REMOTE_CURRENT=http://localhost:8888/static/
#NEXT_PUBLIC_API_HOST=https://pig.vault48.org/ NEXT_PUBLIC_API_HOST=https://pig.vault48.org/
#NEXT_PUBLIC_REMOTE_CURRENT=https://pig.vault48.org/static/ NEXT_PUBLIC_REMOTE_CURRENT=https://pig.vault48.org/static/

9
src/hooks/comments/useGetComments.ts
View file

@ -27,19 +27,20 @@ const extractKey = (key: string) => {
return parseInt(match[1], 10) || 0; return parseInt(match[1], 10) || 0;
}; };
export const useGetComments = (nodeId: number) => { export const useGetComments = (nodeId: number, fallbackData?: IComment[]) => {
// TODO: const postedCommentsLength = Math.min(0, data[data.length - 1] - COMMENTS_DISPLAY);
const { data, isValidating, setSize, size, mutate } = useSWRInfinite( const { data, isValidating, setSize, size, mutate } = useSWRInfinite(
getKey(nodeId), getKey(nodeId),
async (key: string) => { async (key: string) => {
const result = await apiGetNodeComments({ const result = await apiGetNodeComments({
id: nodeId, id: nodeId,
take: COMMENTS_DISPLAY, take: COMMENTS_DISPLAY,
skip: extractKey(key) * COMMENTS_DISPLAY, // TODO: - postedCommentsLength, skip: extractKey(key) * COMMENTS_DISPLAY,
}); });
return result.comments; return result.comments;
},
{
fallbackData: fallbackData && [fallbackData],
} }
); );

7
src/hooks/comments/useNodeComments.ts
View file

@ -5,8 +5,11 @@ import { useGetComments } from '~/hooks/comments/useGetComments';
import { IComment } from '~/types'; import { IComment } from '~/types';
import { showErrorToast } from '~/utils/errors/showToast'; import { showErrorToast } from '~/utils/errors/showToast';
export const useNodeComments = (nodeId: number) => { export const useNodeComments = (nodeId: number, fallbackData?: IComment[]) => {
const { comments, isLoading, onLoadMoreComments, hasMore, data, mutate } = useGetComments(nodeId); const { comments, isLoading, onLoadMoreComments, hasMore, data, mutate } = useGetComments(
nodeId,
fallbackData
);
const onDelete = useCallback( const onDelete = useCallback(
async (id: IComment['id'], isLocked: boolean) => { async (id: IComment['id'], isLocked: boolean) => {

14
src/pages/node/[id].tsx
View file

@ -4,8 +4,9 @@ import { observer } from 'mobx-react-lite';
import { GetStaticPropsResult, InferGetStaticPropsType } from 'next'; import { GetStaticPropsResult, InferGetStaticPropsType } from 'next';
import { RouteComponentProps } from 'react-router'; import { RouteComponentProps } from 'react-router';
import { apiGetNode, getNodeDiff } from '~/api/node'; import { apiGetNode, apiGetNodeComments, getNodeDiff } from '~/api/node';
import { NodeHeadMetadata } from '~/components/node/NodeHeadMetadata'; import { NodeHeadMetadata } from '~/components/node/NodeHeadMetadata';
import { COMMENTS_DISPLAY } from '~/constants/node';
import { useNodeComments } from '~/hooks/comments/useNodeComments'; import { useNodeComments } from '~/hooks/comments/useNodeComments';
import { useScrollToTop } from '~/hooks/dom/useScrollToTop'; import { useScrollToTop } from '~/hooks/dom/useScrollToTop';
import { useImageModal } from '~/hooks/navigation/useImageModal'; import { useImageModal } from '~/hooks/navigation/useImageModal';
@ -14,6 +15,7 @@ import { useNodePageParams } from '~/hooks/node/useNodePageParams';
import { useNodePermissions } from '~/hooks/node/useNodePermissions'; import { useNodePermissions } from '~/hooks/node/useNodePermissions';
import { useNodeTags } from '~/hooks/node/useNodeTags'; import { useNodeTags } from '~/hooks/node/useNodeTags';
import { NodeLayout } from '~/layouts/NodeLayout'; import { NodeLayout } from '~/layouts/NodeLayout';
import { IComment } from '~/types';
import { ApiGetNodeResponse } from '~/types/node'; import { ApiGetNodeResponse } from '~/types/node';
import { CommentContextProvider } from '~/utils/context/CommentContextProvider'; import { CommentContextProvider } from '~/utils/context/CommentContextProvider';
import { NodeContextProvider } from '~/utils/context/NodeContextProvider'; import { NodeContextProvider } from '~/utils/context/NodeContextProvider';
@ -45,7 +47,7 @@ export const getStaticPaths = async () => {
export const getStaticProps = async ( export const getStaticProps = async (
context context
): Promise<GetStaticPropsResult<{ fallbackData: ApiGetNodeResponse }>> => { ): Promise<GetStaticPropsResult<{ fallbackData: ApiGetNodeResponse; comments?: IComment[] }>> => {
try { try {
if (!context.params?.id) { if (!context.params?.id) {
return { notFound: true }; return { notFound: true };
@ -59,12 +61,18 @@ export const getStaticProps = async (
const fallbackData = await apiGetNode({ id }); const fallbackData = await apiGetNode({ id });
const comments = await apiGetNodeComments({
id,
take: COMMENTS_DISPLAY,
});
return { return {
props: { props: {
fallbackData: { fallbackData: {
...fallbackData, ...fallbackData,
last_seen: fallbackData.last_seen ?? null, last_seen: fallbackData.last_seen ?? null,
}, },
comments: comments.comments,
}, },
revalidate: 7 * 86400, // every week revalidate: 7 * 86400, // every week
}; };
@ -91,7 +99,7 @@ const NodePage: FC<Props> = observer(props => {
comments, comments,
hasMore, hasMore,
isLoading: isLoadingComments, isLoading: isLoadingComments,
} = useNodeComments(parseInt(id, 10)); } = useNodeComments(parseInt(id, 10), props.comments);
const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags( const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags(
parseInt(id, 10) parseInt(id, 10)