diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx index 818a53fb..b1d549be 100644 --- a/web/src/pages/Archived.tsx +++ b/web/src/pages/Archived.tsx @@ -8,6 +8,7 @@ import MemoContent from "@/components/MemoContent"; import MobileHeader from "@/components/MobileHeader"; import { memoServiceClient } from "@/grpcweb"; import { getDateTimeString } from "@/helpers/datetime"; +import useCurrentUser from "@/hooks/useCurrentUser"; import useLoading from "@/hooks/useLoading"; import { useMemoV1Store } from "@/store/v1"; import { RowStatus } from "@/types/proto/api/v2/common"; @@ -17,13 +18,14 @@ import { useTranslate } from "@/utils/i18n"; const Archived = () => { const t = useTranslate(); const loadingState = useLoading(); + const user = useCurrentUser(); const memoStore = useMemoV1Store(); const [archivedMemos, setArchivedMemos] = useState([]); useEffect(() => { memoServiceClient .listMemos({ - filter: "row_status == 'ARCHIVED'", + filter: [`creator == "${user.name}"`, "row_status == 'ARCHIVED'"].join(" && "), }) .then(({ memos }) => { setArchivedMemos(memos); diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx index 880197f4..c4e0da18 100644 --- a/web/src/pages/Explore.tsx +++ b/web/src/pages/Explore.tsx @@ -16,8 +16,8 @@ const Explore = () => { const filterStore = useFilterStore(); const memoStore = useMemoV1Store(); const memoList = useMemoList(); + const [isRequesting, setIsRequesting] = useState(true); const [isComplete, setIsComplete] = useState(false); - const [isRequesting, setIsRequesting] = useState(false); const { tag: tagQuery, text: textQuery } = filterStore.state; const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)); diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index 6d33cf80..bb3b799c 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -20,9 +20,9 @@ const Home = () => { const user = useCurrentUser(); const filterStore = useFilterStore(); const memoStore = useMemoV1Store(); - const [isComplete, setIsComplete] = useState(false); - const [isRequesting, setIsRequesting] = useState(false); const memoList = useMemoList(); + const [isRequesting, setIsRequesting] = useState(true); + const [isComplete, setIsComplete] = useState(false); const { tag: tagQuery, text: textQuery } = filterStore.state; const sortedMemos = memoList.value .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)) diff --git a/web/src/pages/Timeline.tsx b/web/src/pages/Timeline.tsx index f1836fb9..7dbdf277 100644 --- a/web/src/pages/Timeline.tsx +++ b/web/src/pages/Timeline.tsx @@ -15,25 +15,34 @@ import { useTranslate } from "@/utils/i18n"; const Timeline = () => { const t = useTranslate(); - const currentUser = useCurrentUser(); + const user = useCurrentUser(); const memoStore = useMemoV1Store(); const memoList = useMemoList(); const currentDateStamp = getDateStampByDate(getNormalizedDateString()) as number; const [selectedDateStamp, setSelectedDateStamp] = useState(currentDateStamp as number); + const [isRequesting, setIsRequesting] = useState(true); const [showDatePicker, toggleShowDatePicker] = useToggle(false); const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(a.createTime) - getTimeStampByDate(b.createTime)); useEffect(() => { memoList.reset(); + fetchMemos(); + }, [selectedDateStamp]); + + const fetchMemos = async () => { const filters = [ - `creator == "${currentUser.name}"`, + `creator == "${user.name}"`, + `row_status == "NORMAL"`, `created_ts_after == ${selectedDateStamp / 1000}`, `created_ts_before == ${(selectedDateStamp + DAILY_TIMESTAMP) / 1000}`, ]; - memoStore.fetchMemos({ + setIsRequesting(true); + await memoStore.fetchMemos({ + offset: memoList.size(), filter: filters.join(" && "), }); - }, [selectedDateStamp]); + setIsRequesting(false); + }; const handleDataPickerChange = (datestamp: number): void => { setSelectedDateStamp(datestamp); @@ -73,12 +82,6 @@ const Timeline = () => { />
- {sortedMemos.length === 0 && ( -
- -

{t("message.no-data")}

-
- )}
{sortedMemos.map((memo, index) => (
{
)}
+ {!isRequesting && sortedMemos.length === 0 && ( +
+ +

{t("message.no-data")}

+
+ )}
diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx index d5847429..fd6f4b2a 100644 --- a/web/src/pages/UserProfile.tsx +++ b/web/src/pages/UserProfile.tsx @@ -6,10 +6,10 @@ import MemoView from "@/components/MemoView"; import MobileHeader from "@/components/MobileHeader"; import UserAvatar from "@/components/UserAvatar"; import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts"; +import { getTimeStampByDate } from "@/helpers/datetime"; import useLoading from "@/hooks/useLoading"; import { useFilterStore } from "@/store/module"; -import { useMemoV1Store, useUserV1Store } from "@/store/v1"; -import { Memo } from "@/types/proto/api/v2/memo_service"; +import { useMemoList, useMemoV1Store, useUserV1Store } from "@/store/v1"; import { User } from "@/types/proto/api/v2/user_service"; import { useTranslate } from "@/utils/i18n"; @@ -21,10 +21,13 @@ const UserProfile = () => { const [user, setUser] = useState(); const filterStore = useFilterStore(); const memoStore = useMemoV1Store(); - const [memos, setMemos] = useState([]); + const memoList = useMemoList(); + const [isRequesting, setIsRequesting] = useState(true); const [isComplete, setIsComplete] = useState(false); - const [isRequesting, setIsRequesting] = useState(false); const { tag: tagQuery, text: textQuery } = filterStore.state; + const sortedMemos = memoList.value + .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)) + .sort((a, b) => Number(b.pinned) - Number(a.pinned)); useEffect(() => { const username = params.username; @@ -45,6 +48,7 @@ const UserProfile = () => { }, [params.username]); useEffect(() => { + memoList.reset(); fetchMemos(); }, [tagQuery, textQuery]); @@ -54,16 +58,23 @@ const UserProfile = () => { } const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`]; - if (tagQuery) filters.push(`tags == "${tagQuery}"`); - if (textQuery) filters.push(`content_search == "${textQuery}"`); + const contentSearch: string[] = []; + if (tagQuery) { + contentSearch.push(`"#${tagQuery}"`); + } + if (textQuery) { + contentSearch.push(`"${textQuery}"`); + } + if (contentSearch.length > 0) { + filters.push(`content_search == [${contentSearch.join(", ")}]`); + } setIsRequesting(true); const data = await memoStore.fetchMemos({ limit: DEFAULT_MEMO_LIMIT, - offset: memos.length, + offset: memoList.size(), filter: filters.join(" && "), }); setIsRequesting(false); - setMemos([...memos, ...data]); setIsComplete(data.length < DEFAULT_MEMO_LIMIT); }; @@ -78,16 +89,15 @@ const UserProfile = () => {

{user?.nickname}

- {memos.map((memo) => ( + {sortedMemos.map((memo) => ( ))} - {isRequesting && ( + {isRequesting ? (

{t("memo.fetching-data")}

- )} - {isComplete ? ( - memos.length === 0 && ( + ) : isComplete ? ( + sortedMemos.length === 0 && (

{t("message.no-data")}