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_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
#NEXT_PUBLIC_API_HOST=https://pig.staging.vault48.org/
#NEXT_PUBLIC_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
#NEXT_PUBLIC_API_HOST=http://localhost:8888/
#NEXT_PUBLIC_REMOTE_CURRENT=http://localhost:8888/static/
#NEXT_PUBLIC_API_HOST=https://pig.vault48.org/
#NEXT_PUBLIC_REMOTE_CURRENT=https://pig.vault48.org/static/
NEXT_PUBLIC_API_HOST=https://pig.vault48.org/
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;
};
export const useGetComments = (nodeId: number) => {
// TODO: const postedCommentsLength = Math.min(0, data[data.length - 1] - COMMENTS_DISPLAY);
export const useGetComments = (nodeId: number, fallbackData?: IComment[]) => {
const { data, isValidating, setSize, size, mutate } = useSWRInfinite(
getKey(nodeId),
async (key: string) => {
const result = await apiGetNodeComments({
id: nodeId,
take: COMMENTS_DISPLAY,
skip: extractKey(key) * COMMENTS_DISPLAY, // TODO: - postedCommentsLength,
skip: extractKey(key) * COMMENTS_DISPLAY,
});
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 { showErrorToast } from '~/utils/errors/showToast';
export const useNodeComments = (nodeId: number) => {
const { comments, isLoading, onLoadMoreComments, hasMore, data, mutate } = useGetComments(nodeId);
export const useNodeComments = (nodeId: number, fallbackData?: IComment[]) => {
const { comments, isLoading, onLoadMoreComments, hasMore, data, mutate } = useGetComments(
nodeId,
fallbackData
);
const onDelete = useCallback(
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 { RouteComponentProps } from 'react-router';
import { apiGetNode, getNodeDiff } from '~/api/node';
import { apiGetNode, apiGetNodeComments, getNodeDiff } from '~/api/node';
import { NodeHeadMetadata } from '~/components/node/NodeHeadMetadata';
import { COMMENTS_DISPLAY } from '~/constants/node';
import { useNodeComments } from '~/hooks/comments/useNodeComments';
import { useScrollToTop } from '~/hooks/dom/useScrollToTop';
import { useImageModal } from '~/hooks/navigation/useImageModal';
@ -14,6 +15,7 @@ import { useNodePageParams } from '~/hooks/node/useNodePageParams';
import { useNodePermissions } from '~/hooks/node/useNodePermissions';
import { useNodeTags } from '~/hooks/node/useNodeTags';
import { NodeLayout } from '~/layouts/NodeLayout';
import { IComment } from '~/types';
import { ApiGetNodeResponse } from '~/types/node';
import { CommentContextProvider } from '~/utils/context/CommentContextProvider';
import { NodeContextProvider } from '~/utils/context/NodeContextProvider';
@ -45,7 +47,7 @@ export const getStaticPaths = async () => {
export const getStaticProps = async (
context
): Promise<GetStaticPropsResult<{ fallbackData: ApiGetNodeResponse }>> => {
): Promise<GetStaticPropsResult<{ fallbackData: ApiGetNodeResponse; comments?: IComment[] }>> => {
try {
if (!context.params?.id) {
return { notFound: true };
@ -59,12 +61,18 @@ export const getStaticProps = async (
const fallbackData = await apiGetNode({ id });
const comments = await apiGetNodeComments({
id,
take: COMMENTS_DISPLAY,
});
return {
props: {
fallbackData: {
...fallbackData,
last_seen: fallbackData.last_seen ?? null,
},
comments: comments.comments,
},
revalidate: 7 * 86400, // every week
};
@ -91,7 +99,7 @@ const NodePage: FC<Props> = observer(props => {
comments,
hasMore,
isLoading: isLoadingComments,
} = useNodeComments(parseInt(id, 10));
} = useNodeComments(parseInt(id, 10), props.comments);
const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags(
parseInt(id, 10)