mirror of
https://github.com/usememos/memos.git
synced 2024-12-19 00:51:30 +03:00
fix: auto fetch more (#2472)
* fix: auto fetch more * feat: use union type
This commit is contained in:
Zexi
GitHub
parent
5d69d89627
commit
8b0083ffc5
@ -43,13 +43,20 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(memo.displayTs));
|
||||
const memoContainerRef = useRef<HTMLDivElement>(null);
|
||||
const readonly = memo.creatorUsername !== user?.username;
|
||||
const creator = userV1Store.getUserByUsername(memo.creatorUsername);
|
||||
const [creator, setCreator] = useState(userV1Store.getUserByUsername(memo.creatorUsername));
|
||||
const referenceRelations = memo.relationList.filter((relation) => relation.type === "REFERENCE");
|
||||
const commentRelations = memo.relationList.filter((relation) => relation.relatedMemoId === memo.id && relation.type === "COMMENT");
|
||||
|
||||
// Prepare memo creator.
|
||||
useEffect(() => {
|
||||
userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
|
||||
if (creator) return;
|
||||
|
||||
const fn = async () => {
|
||||
const user = await userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
|
||||
setCreator(user);
|
||||
};
|
||||
|
||||
fn();
|
||||
}, [memo.creatorUsername]);
|
||||
|
||||
// Update display time string.
|
||||
@ -68,30 +75,23 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
|
||||
// Lazy rendering.
|
||||
useEffect(() => {
|
||||
if (shouldRender) {
|
||||
return;
|
||||
}
|
||||
if (shouldRender) return;
|
||||
if (!memoContainerRef.current) return;
|
||||
|
||||
const root = document.body.querySelector("#root");
|
||||
if (root) {
|
||||
const checkShouldRender = () => {
|
||||
if (root.scrollTop + window.innerHeight > (memoContainerRef.current?.offsetTop || 0)) {
|
||||
setShouldRender(true);
|
||||
root.removeEventListener("scroll", checkShouldRender);
|
||||
return true;
|
||||
}
|
||||
};
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
if (!entry.isIntersecting) return;
|
||||
observer.disconnect();
|
||||
|
||||
if (checkShouldRender()) {
|
||||
return;
|
||||
}
|
||||
root.addEventListener("scroll", checkShouldRender);
|
||||
}
|
||||
setShouldRender(true);
|
||||
});
|
||||
observer.observe(memoContainerRef.current);
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [lazyRendering, filterStore.state]);
|
||||
|
||||
if (!shouldRender) {
|
||||
// Render a placeholder to occupy the space.
|
||||
return <div className={`w-full h-32 !bg-transparent ${"memos-" + memo.id}`} ref={memoContainerRef}></div>;
|
||||
return <div className={`w-full h-32 !bg-transparent ${"memos-" + memo.id}`} ref={memoContainerRef} />;
|
||||
}
|
||||
|
||||
const handleGotoMemoDetailPage = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
@ -299,7 +299,9 @@ const Memo: React.FC<Props> = (props: Props) => {
|
||||
<Tooltip title={"Creator"} placement="top">
|
||||
<span className="flex flex-row justify-start items-center">
|
||||
<UserAvatar className="!w-5 !h-auto mr-1" avatarUrl={creator.avatarUrl} />
|
||||
<span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">{creator.nickname}</span>
|
||||
<span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">
|
||||
{creator.nickname || creator.username}
|
||||
</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Link>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useParams } from "react-router-dom";
|
||||
import MemoFilter from "@/components/MemoFilter";
|
||||
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
||||
import { getTimeStampByDate } from "@/helpers/datetime";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
@ -16,14 +17,14 @@ const MemoList: React.FC = () => {
|
||||
const memoStore = useMemoStore();
|
||||
const filterStore = useFilterStore();
|
||||
const filter = filterStore.state;
|
||||
const { memos } = memoStore.state;
|
||||
const [isFetching, setIsFetching] = useState<boolean>(true);
|
||||
const [isComplete, setIsComplete] = useState<boolean>(false);
|
||||
const { loadingStatus, memos } = memoStore.state;
|
||||
const user = useCurrentUser();
|
||||
const { tag: tagQuery, duration, text: textQuery, visibility } = filter;
|
||||
const showMemoFilter = Boolean(tagQuery || (duration && duration.from < duration.to) || textQuery || visibility);
|
||||
const username = params.username || user?.username || "";
|
||||
|
||||
const fetchMoreRef = useRef<HTMLSpanElement>(null);
|
||||
|
||||
const shownMemos = (
|
||||
showMemoFilter
|
||||
? memos.filter((memo) => {
|
||||
@ -74,74 +75,48 @@ const MemoList: React.FC = () => {
|
||||
const sortedMemos = pinnedMemos.concat(unpinnedMemos).filter((m) => m.rowStatus === "NORMAL");
|
||||
|
||||
useEffect(() => {
|
||||
memoStore
|
||||
.fetchMemos(username)
|
||||
.then((fetchedMemos) => {
|
||||
if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
|
||||
setIsComplete(true);
|
||||
} else {
|
||||
setIsComplete(false);
|
||||
}
|
||||
setIsFetching(false);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
toast.error(error.response.data.message);
|
||||
});
|
||||
}, [user?.username]);
|
||||
|
||||
useEffect(() => {
|
||||
const pageWrapper = document.body.querySelector(".page-wrapper");
|
||||
if (pageWrapper) {
|
||||
pageWrapper.scrollTo(0, 0);
|
||||
const root = document.body.querySelector("#root");
|
||||
if (root) {
|
||||
root.scrollTo(0, 0);
|
||||
}
|
||||
}, [filter]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isFetching || isComplete) {
|
||||
return;
|
||||
}
|
||||
if (sortedMemos.length < DEFAULT_MEMO_LIMIT) {
|
||||
handleFetchMoreClick();
|
||||
return;
|
||||
}
|
||||
if (!fetchMoreRef.current) return;
|
||||
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
handleFetchMoreClick();
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
if (!entry.isIntersecting) return;
|
||||
observer.disconnect();
|
||||
handleFetchMoreClick();
|
||||
});
|
||||
}, [isFetching, isComplete, filter, sortedMemos.length]);
|
||||
observer.observe(fetchMoreRef.current);
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [loadingStatus]);
|
||||
|
||||
const handleFetchMoreClick = async () => {
|
||||
try {
|
||||
setIsFetching(true);
|
||||
const fetchedMemos = await memoStore.fetchMemos(username, DEFAULT_MEMO_LIMIT, memos.length);
|
||||
if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
|
||||
setIsComplete(true);
|
||||
} else {
|
||||
setIsComplete(false);
|
||||
}
|
||||
setIsFetching(false);
|
||||
await memoStore.fetchMemos(username, DEFAULT_MEMO_LIMIT, memos.length);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toast.error(error.response.data.message);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col justify-start items-start w-full max-w-full overflow-y-scroll pb-28 hide-scrollbar">
|
||||
<MemoFilter />
|
||||
{sortedMemos.map((memo) => (
|
||||
<Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} lazyRendering showVisibility showPinnedStyle />
|
||||
<Memo key={memo.id} memo={memo} lazyRendering showVisibility showPinnedStyle />
|
||||
))}
|
||||
{isFetching ? (
|
||||
|
||||
{loadingStatus === "fetching" ? (
|
||||
<div className="flex flex-col justify-start items-center w-full mt-2 mb-1">
|
||||
<p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col justify-start items-center w-full my-6">
|
||||
<div className="text-sm text-gray-400 italic">
|
||||
{isComplete ? (
|
||||
{loadingStatus === "complete" ? (
|
||||
sortedMemos.length === 0 && (
|
||||
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
|
||||
<Empty />
|
||||
@ -149,11 +124,9 @@ const MemoList: React.FC = () => {
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<span className="cursor-pointer hover:text-green-600" onClick={handleFetchMoreClick}>
|
||||
{t("memo.fetch-more")}
|
||||
</span>
|
||||
</>
|
||||
<span ref={fetchMoreRef} className="cursor-pointer hover:text-green-600" onClick={handleFetchMoreClick}>
|
||||
{t("memo.fetch-more")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,28 +1,23 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import Empty from "@/components/Empty";
|
||||
import Memo from "@/components/Memo";
|
||||
import MemoFilter from "@/components/MemoFilter";
|
||||
import MobileHeader from "@/components/MobileHeader";
|
||||
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import { TAG_REG } from "@/labs/marked/parser";
|
||||
import { useFilterStore, useMemoStore } from "@/store/module";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
const Explore = () => {
|
||||
const t = useTranslate();
|
||||
const location = useLocation();
|
||||
const filterStore = useFilterStore();
|
||||
const memoStore = useMemoStore();
|
||||
const filter = filterStore.state;
|
||||
const { memos } = memoStore.state;
|
||||
const [isComplete, setIsComplete] = useState<boolean>(false);
|
||||
const loadingState = useLoading();
|
||||
|
||||
const { loadingStatus, memos } = memoStore.state;
|
||||
const { tag: tagQuery, text: textQuery } = filter;
|
||||
const showMemoFilter = Boolean(tagQuery || textQuery);
|
||||
const fetchMoreRef = useRef<HTMLSpanElement>(null);
|
||||
|
||||
const fetchedMemos = showMemoFilter
|
||||
? memos.filter((memo) => {
|
||||
@ -58,30 +53,22 @@ const Explore = () => {
|
||||
.sort((mi, mj) => mj.displayTs - mi.displayTs);
|
||||
|
||||
useEffect(() => {
|
||||
memoStore
|
||||
.fetchAllMemos(DEFAULT_MEMO_LIMIT, 0)
|
||||
.then((fetchedMemos) => {
|
||||
if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
|
||||
setIsComplete(true);
|
||||
}
|
||||
loadingState.setFinish();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
toast.error(error.response.data.message);
|
||||
});
|
||||
}, [location]);
|
||||
if (!fetchMoreRef.current) return;
|
||||
|
||||
const observer = new IntersectionObserver(([entry]) => {
|
||||
if (!entry.isIntersecting) return;
|
||||
observer.disconnect();
|
||||
handleFetchMoreClick();
|
||||
});
|
||||
observer.observe(fetchMoreRef.current);
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [loadingStatus]);
|
||||
|
||||
const handleFetchMoreClick = async () => {
|
||||
try {
|
||||
const fetchedMemos = await memoStore.fetchAllMemos(DEFAULT_MEMO_LIMIT, memos.length);
|
||||
if (fetchedMemos.length < DEFAULT_MEMO_LIMIT) {
|
||||
setIsComplete(true);
|
||||
} else {
|
||||
setIsComplete(false);
|
||||
}
|
||||
await memoStore.fetchAllMemos(DEFAULT_MEMO_LIMIT, memos.length);
|
||||
} catch (error: any) {
|
||||
console.error(error);
|
||||
toast.error(error.response.data.message);
|
||||
}
|
||||
};
|
||||
@ -89,26 +76,35 @@ const Explore = () => {
|
||||
return (
|
||||
<section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8 bg-zinc-100 dark:bg-zinc-800">
|
||||
<MobileHeader showSearch={false} />
|
||||
{!loadingState.isLoading && (
|
||||
<div className="relative w-full h-auto flex flex-col justify-start items-start">
|
||||
<MemoFilter />
|
||||
{sortedMemos.map((memo) => {
|
||||
return <Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} />;
|
||||
})}
|
||||
{isComplete ? (
|
||||
sortedMemos.length === 0 && (
|
||||
<div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
|
||||
<Empty />
|
||||
<p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<p className="m-auto text-center mt-4 italic cursor-pointer text-gray-500 hover:text-green-600" onClick={handleFetchMoreClick}>
|
||||
{t("memo.fetch-more")}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="relative w-full h-auto flex flex-col justify-start items-start">
|
||||
<MemoFilter />
|
||||
{sortedMemos.map((memo) => (
|
||||
<Memo key={memo.id} memo={memo} lazyRendering />
|
||||
))}
|
||||
|
||||
{loadingStatus === "fetching" ? (
|
||||
<div className="flex flex-col justify-start items-center w-full mt-2 mb-1">
|
||||
<p className="text-sm text-gray-400 italic">{t("memo.fetching-data")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col justify-start items-center w-full my-6">
|
||||
<div className="text-sm text-gray-400 italic">
|
||||
{loadingStatus === "complete" ? (
|
||||
sortedMemos.length === 0 && (
|
||||
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
|
||||
<Empty />
|
||||
<p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<span ref={fetchMoreRef} className="cursor-pointer hover:text-green-600" onClick={handleFetchMoreClick}>
|
||||
{t("memo.fetch-more")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import HomeSidebar from "@/components/HomeSidebar";
|
||||
import MemoEditor from "@/components/MemoEditor";
|
||||
import MemoFilter from "@/components/MemoFilter";
|
||||
import MemoList from "@/components/MemoList";
|
||||
import MobileHeader from "@/components/MobileHeader";
|
||||
|
||||
@ -9,10 +8,7 @@ const Home = () => {
|
||||
<div className="@container w-full flex flex-row justify-start items-start">
|
||||
<div className="w-full px-4 @lg:max-w-[calc(100%-14rem)] sm:px-2 sm:pt-4">
|
||||
<MobileHeader />
|
||||
<div className="w-full h-auto flex flex-col justify-start items-start bg-zinc-100 dark:bg-zinc-800 rounded-lg">
|
||||
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />
|
||||
<MemoFilter />
|
||||
</div>
|
||||
<MemoEditor className="mb-2" cacheKey="home-memo-editor" />
|
||||
<MemoList />
|
||||
</div>
|
||||
<HomeSidebar />
|
||||
|
||||
@ -2,7 +2,7 @@ import { omit } from "lodash-es";
|
||||
import * as api from "@/helpers/api";
|
||||
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
||||
import store, { useAppSelector } from "../";
|
||||
import { createMemo, deleteMemo, patchMemo, upsertMemos } from "../reducer/memo";
|
||||
import { updateLoadingStatus, createMemo, deleteMemo, patchMemo, upsertMemos } from "../reducer/memo";
|
||||
import { useMemoCacheStore } from "../v1";
|
||||
|
||||
export const convertResponseModelMemo = (memo: Memo): Memo => {
|
||||
@ -40,12 +40,17 @@ export const useMemoStore = () => {
|
||||
if (username) {
|
||||
memoFind.creatorUsername = username;
|
||||
}
|
||||
|
||||
store.dispatch(updateLoadingStatus("fetching"));
|
||||
const { data } = await api.getMemoList(memoFind);
|
||||
const fetchedMemos = data.map((m) => convertResponseModelMemo(m));
|
||||
store.dispatch(upsertMemos(fetchedMemos));
|
||||
store.dispatch(updateLoadingStatus(fetchedMemos.length === limit ? "incomplete" : "complete"));
|
||||
|
||||
for (const m of fetchedMemos) {
|
||||
memoCacheStore.setMemoCache(m);
|
||||
}
|
||||
|
||||
return fetchedMemos;
|
||||
},
|
||||
fetchAllMemos: async (limit = DEFAULT_MEMO_LIMIT, offset?: number) => {
|
||||
@ -54,9 +59,12 @@ export const useMemoStore = () => {
|
||||
limit,
|
||||
offset,
|
||||
};
|
||||
|
||||
store.dispatch(updateLoadingStatus("fetching"));
|
||||
const { data } = await api.getAllMemos(memoFind);
|
||||
const fetchedMemos = data.map((m) => convertResponseModelMemo(m));
|
||||
store.dispatch(upsertMemos(fetchedMemos));
|
||||
store.dispatch(updateLoadingStatus(fetchedMemos.length === limit ? "incomplete" : "complete"));
|
||||
|
||||
for (const m of fetchedMemos) {
|
||||
memoCacheStore.setMemoCache(m);
|
||||
|
||||
@ -1,16 +1,26 @@
|
||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||
import { uniqBy } from "lodash-es";
|
||||
|
||||
type LoadingStatus = "incomplete" | "fetching" | "complete";
|
||||
|
||||
interface State {
|
||||
loadingStatus: LoadingStatus;
|
||||
memos: Memo[];
|
||||
}
|
||||
|
||||
const memoSlice = createSlice({
|
||||
name: "memo",
|
||||
initialState: {
|
||||
loadingStatus: "incomplete",
|
||||
memos: [],
|
||||
} as State,
|
||||
reducers: {
|
||||
updateLoadingStatus: (state, action: PayloadAction<LoadingStatus>) => {
|
||||
return {
|
||||
...state,
|
||||
loadingStatus: action.payload,
|
||||
};
|
||||
},
|
||||
upsertMemos: (state, action: PayloadAction<Memo[]>) => {
|
||||
return {
|
||||
...state,
|
||||
@ -51,6 +61,6 @@ const memoSlice = createSlice({
|
||||
},
|
||||
});
|
||||
|
||||
export const { upsertMemos, createMemo, patchMemo, deleteMemo } = memoSlice.actions;
|
||||
export const { updateLoadingStatus, upsertMemos, createMemo, patchMemo, deleteMemo } = memoSlice.actions;
|
||||
|
||||
export default memoSlice.reducer;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user