YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-19 12:50:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: fix search memos

Browse Source
This commit is contained in:
Steven 2024-05-15 22:42:31 +08:00
parent 3ecbbf31a9
commit 3e5e5b1f80
5 changed files with 68 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/pages/Archived.tsx
View File

@ -1,6 +1,6 @@
import { Button, Tooltip } from "@mui/joy"; import { Button, Tooltip } from "@mui/joy";
import { ClientError } from "nice-grpc-web"; import { ClientError } from "nice-grpc-web";
import { useEffect, useRef, useState } from "react"; import { useEffect, useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { showCommonDialog } from "@/components/Dialog/CommonDialog"; import { showCommonDialog } from "@/components/Dialog/CommonDialog";
import Empty from "@/components/Empty"; import Empty from "@/components/Empty";
@ -24,24 +24,19 @@ const Archived = () => {
const memoStore = useMemoStore(); const memoStore = useMemoStore();
const memoList = useMemoList(); const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true); const [isRequesting, setIsRequesting] = useState(true);
const nextPageTokenRef = useRef<string | undefined>(undefined); const [nextPageToken, setNextPageToken] = useState<string>("");
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams(); const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
const sortedMemos = memoList.value const sortedMemos = memoList.value
.filter((memo) => memo.rowStatus === RowStatus.ARCHIVED) .filter((memo) => memo.rowStatus === RowStatus.ARCHIVED)
.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)); .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
useEffect(() => { useEffect(() => {
setIsRequesting(true); memoList.reset();
nextPageTokenRef.current = undefined; fetchMemos("");
setTimeout(async () => {
memoList.reset();
const nextPageToken = await fetchMemos();
nextPageTokenRef.current = nextPageToken;
setIsRequesting(false);
});
}, [tagQuery, textQuery]); }, [tagQuery, textQuery]);
const fetchMemos = async () => { const fetchMemos = async (nextPageToken: string) => {
setIsRequesting(true);
const filters = [`creator == "${user.name}"`, `row_status == "ARCHIVED"`]; const filters = [`creator == "${user.name}"`, `row_status == "ARCHIVED"`];
const contentSearch: string[] = []; const contentSearch: string[] = [];
if (textQuery) { if (textQuery) {
@ -53,12 +48,13 @@ const Archived = () => {
if (tagQuery) { if (tagQuery) {
filters.push(`tag == "${tagQuery}"`); filters.push(`tag == "${tagQuery}"`);
} }
const { nextPageToken } = await memoStore.fetchMemos({ const response = await memoStore.fetchMemos({
pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE, pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
filter: filters.join(" && "), filter: filters.join(" && "),
pageToken: nextPageTokenRef.current, pageToken: nextPageToken,
}); });
return nextPageToken; setIsRequesting(false);
setNextPageToken(response.nextPageToken);
}; };
const handleDeleteMemoClick = async (memo: Memo) => { const handleDeleteMemoClick = async (memo: Memo) => {
@ -136,7 +132,7 @@ const Archived = () => {
<Icon.Loader className="w-4 h-auto animate-spin mr-1" /> <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p> <p className="text-sm italic">{t("memo.fetching-data")}</p>
</div> </div>
) : !nextPageTokenRef.current ? ( ) : !nextPageToken ? (
sortedMemos.length === 0 && ( sortedMemos.length === 0 && (
<div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic"> <div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
<Empty /> <Empty />
@ -145,7 +141,7 @@ const Archived = () => {
) )
) : ( ) : (
<div className="w-full flex flex-row justify-center items-center my-4"> <div className="w-full flex flex-row justify-center items-center my-4">
<Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}> <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
{t("memo.fetch-more")} {t("memo.fetch-more")}
</Button> </Button>
</div> </div>

28
web/src/pages/Explore.tsx
View File

@ -1,6 +1,6 @@
import { Button } from "@mui/joy"; import { Button } from "@mui/joy";
import clsx from "clsx"; import clsx from "clsx";
import { useEffect, useRef, useState } from "react"; import { useEffect, useState } from "react";
import Empty from "@/components/Empty"; import Empty from "@/components/Empty";
import { ExploreSidebar, ExploreSidebarDrawer } from "@/components/ExploreSidebar"; import { ExploreSidebar, ExploreSidebarDrawer } from "@/components/ExploreSidebar";
import Icon from "@/components/Icon"; import Icon from "@/components/Icon";
@ -22,22 +22,17 @@ const Explore = () => {
const memoStore = useMemoStore(); const memoStore = useMemoStore();
const memoList = useMemoList(); const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true); const [isRequesting, setIsRequesting] = useState(true);
const nextPageTokenRef = useRef<string | undefined>(undefined); const [nextPageToken, setNextPageToken] = useState<string>("");
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams(); const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)); const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
useEffect(() => { useEffect(() => {
setIsRequesting(true); memoList.reset();
nextPageTokenRef.current = undefined; fetchMemos("");
setTimeout(async () => {
memoList.reset();
const nextPageToken = await fetchMemos();
nextPageTokenRef.current = nextPageToken;
setIsRequesting(false);
});
}, [tagQuery, textQuery]); }, [tagQuery, textQuery]);
const fetchMemos = async () => { const fetchMemos = async (nextPageToken: string) => {
setIsRequesting(true);
const filters = [`row_status == "NORMAL"`, `visibilities == [${user ? "'PUBLIC', 'PROTECTED'" : "'PUBLIC'"}]`]; const filters = [`row_status == "NORMAL"`, `visibilities == [${user ? "'PUBLIC', 'PROTECTED'" : "'PUBLIC'"}]`];
const contentSearch: string[] = []; const contentSearch: string[] = [];
if (textQuery) { if (textQuery) {
@ -49,12 +44,13 @@ const Explore = () => {
if (tagQuery) { if (tagQuery) {
filters.push(`tag == "${tagQuery}"`); filters.push(`tag == "${tagQuery}"`);
} }
const { nextPageToken } = await memoStore.fetchMemos({ const response = await memoStore.fetchMemos({
pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE, pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
filter: filters.join(" && "), filter: filters.join(" && "),
pageToken: nextPageTokenRef.current, pageToken: nextPageToken,
}); });
return nextPageToken; setIsRequesting(false);
setNextPageToken(response.nextPageToken);
}; };
return ( return (
@ -76,7 +72,7 @@ const Explore = () => {
<Icon.Loader className="w-4 h-auto animate-spin mr-1" /> <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p> <p className="text-sm italic">{t("memo.fetching-data")}</p>
</div> </div>
) : !nextPageTokenRef.current ? ( ) : !nextPageToken ? (
sortedMemos.length === 0 && ( sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic"> <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty /> <Empty />
@ -85,7 +81,7 @@ const Explore = () => {
) )
) : ( ) : (
<div className="w-full flex flex-row justify-center items-center my-4"> <div className="w-full flex flex-row justify-center items-center my-4">
<Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}> <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
{t("memo.fetch-more")} {t("memo.fetch-more")}
</Button> </Button>
</div> </div>

28
web/src/pages/Home.tsx
View File

@ -1,6 +1,6 @@
import { Button } from "@mui/joy"; import { Button } from "@mui/joy";
import clsx from "clsx"; import clsx from "clsx";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import Empty from "@/components/Empty"; import Empty from "@/components/Empty";
import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar"; import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar";
import Icon from "@/components/Icon"; import Icon from "@/components/Icon";
@ -25,7 +25,7 @@ const Home = () => {
const memoStore = useMemoStore(); const memoStore = useMemoStore();
const memoList = useMemoList(); const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true); const [isRequesting, setIsRequesting] = useState(true);
const nextPageTokenRef = useRef<string | undefined>(undefined); const [nextPageToken, setNextPageToken] = useState<string>("");
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams(); const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
const sortedMemos = memoList.value const sortedMemos = memoList.value
.filter((memo) => memo.rowStatus === RowStatus.ACTIVE) .filter((memo) => memo.rowStatus === RowStatus.ACTIVE)
@ -33,17 +33,12 @@ const Home = () => {
.sort((a, b) => Number(b.pinned) - Number(a.pinned)); .sort((a, b) => Number(b.pinned) - Number(a.pinned));
useEffect(() => { useEffect(() => {
setIsRequesting(true); memoList.reset();
nextPageTokenRef.current = undefined; fetchMemos("");
setTimeout(async () => {
memoList.reset();
const nextPageToken = await fetchMemos();
nextPageTokenRef.current = nextPageToken;
setIsRequesting(false);
});
}, [tagQuery, textQuery]); }, [tagQuery, textQuery]);
const fetchMemos = async () => { const fetchMemos = async (nextPageToken: string) => {
setIsRequesting(true);
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`]; const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
const contentSearch: string[] = []; const contentSearch: string[] = [];
if (textQuery) { if (textQuery) {
@ -55,12 +50,13 @@ const Home = () => {
if (tagQuery) { if (tagQuery) {
filters.push(`tag == "${tagQuery}"`); filters.push(`tag == "${tagQuery}"`);
} }
const { nextPageToken } = await memoStore.fetchMemos({ const response = await memoStore.fetchMemos({
pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE, pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
filter: filters.join(" && "), filter: filters.join(" && "),
pageToken: nextPageTokenRef.current, pageToken: nextPageToken,
}); });
return nextPageToken; setIsRequesting(false);
setNextPageToken(response.nextPageToken);
}; };
const handleEditPrevious = useCallback(() => { const handleEditPrevious = useCallback(() => {
@ -91,7 +87,7 @@ const Home = () => {
<Icon.Loader className="w-4 h-auto animate-spin mr-1" /> <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p> <p className="text-sm italic">{t("memo.fetching-data")}</p>
</div> </div>
) : !nextPageTokenRef.current ? ( ) : !nextPageToken ? (
sortedMemos.length === 0 && ( sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic"> <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty /> <Empty />
@ -100,7 +96,7 @@ const Home = () => {
) )
) : ( ) : (
<div className="w-full flex flex-row justify-center items-center my-4"> <div className="w-full flex flex-row justify-center items-center my-4">
<Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}> <Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={() => fetchMemos(nextPageToken)}>
{t("memo.fetch-more")} {t("memo.fetch-more")}
</Button> </Button>
</div> </div>

32
web/src/pages/Timeline.tsx
View File

@ -1,7 +1,7 @@
import { Button, IconButton } from "@mui/joy"; import { Button, IconButton } from "@mui/joy";
import clsx from "clsx"; import clsx from "clsx";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react"; import { useEffect, useState } from "react";
import ActivityCalendar from "@/components/ActivityCalendar"; import ActivityCalendar from "@/components/ActivityCalendar";
import Empty from "@/components/Empty"; import Empty from "@/components/Empty";
import Icon from "@/components/Icon"; import Icon from "@/components/Icon";
@ -30,19 +30,13 @@ const Timeline = () => {
const [activityStats, setActivityStats] = useState<Record<string, number>>({}); const [activityStats, setActivityStats] = useState<Record<string, number>>({});
const [selectedDateString, setSelectedDateString] = useState<string>(new Date().toDateString()); const [selectedDateString, setSelectedDateString] = useState<string>(new Date().toDateString());
const [isRequesting, setIsRequesting] = useState(true); const [isRequesting, setIsRequesting] = useState(true);
const nextPageTokenRef = useRef<string | undefined>(undefined); const [nextPageToken, setNextPageToken] = useState<string>("");
const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(a.displayTime) - getTimeStampByDate(b.displayTime)); const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(a.displayTime) - getTimeStampByDate(b.displayTime));
const monthString = dayjs(selectedDateString).format("YYYY-MM"); const monthString = dayjs(selectedDateString).format("YYYY-MM");
useEffect(() => { useEffect(() => {
setIsRequesting(true); memoList.reset();
nextPageTokenRef.current = undefined; fetchMemos("");
setTimeout(async () => {
memoList.reset();
const nextPageToken = await fetchMemos();
nextPageTokenRef.current = nextPageToken;
setIsRequesting(false);
});
}, [selectedDateString, tagQuery, textQuery]); }, [selectedDateString, tagQuery, textQuery]);
useEffect(() => { useEffect(() => {
@ -74,7 +68,8 @@ const Timeline = () => {
})(); })();
}, [sortedMemos.length]); }, [sortedMemos.length]);
const fetchMemos = async () => { const fetchMemos = async (nextPageToken: string) => {
setIsRequesting(true);
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`]; const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`];
const contentSearch: string[] = []; const contentSearch: string[] = [];
if (textQuery) { if (textQuery) {
@ -92,12 +87,13 @@ const Timeline = () => {
...[`display_time_after == ${selectedDateStamp / 1000}`, `display_time_before == ${(selectedDateStamp + DAILY_TIMESTAMP) / 1000}`], ...[`display_time_after == ${selectedDateStamp / 1000}`, `display_time_before == ${(selectedDateStamp + DAILY_TIMESTAMP) / 1000}`],
); );
} }
const { nextPageToken } = await memoStore.fetchMemos({ const response = await memoStore.fetchMemos({
pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE, pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
filter: filters.join(" && "), filter: filters.join(" && "),
pageToken: nextPageTokenRef.current, pageToken: nextPageToken,
}); });
return nextPageToken; setIsRequesting(false);
setNextPageToken(response.nextPageToken);
}; };
const handleSelectedDataChange = (date: string) => { const handleSelectedDataChange = (date: string) => {
@ -192,7 +188,7 @@ const Timeline = () => {
<Icon.Loader className="w-4 h-auto animate-spin mr-1" /> <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p> <p className="text-sm italic">{t("memo.fetching-data")}</p>
</div> </div>
) : !nextPageTokenRef.current ? ( ) : !nextPageToken ? (
sortedMemos.length === 0 && ( sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic"> <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty /> <Empty />
@ -201,7 +197,11 @@ const Timeline = () => {
) )
) : ( ) : (
<div className="w-full flex flex-row justify-center items-center my-4"> <div className="w-full flex flex-row justify-center items-center my-4">
<Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}> <Button
variant="plain"
endDecorator={<Icon.ArrowDown className="w-5 h-auto" />}
onClick={() => fetchMemos(nextPageToken)}
>
{t("memo.fetch-more")} {t("memo.fetch-more")}
</Button> </Button>
</div> </div>

32
web/src/pages/UserProfile.tsx
View File

@ -1,6 +1,6 @@
import { Button } from "@mui/joy"; import { Button } from "@mui/joy";
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { useEffect, useRef, useState } from "react"; import { useEffect, useState } from "react";
import { toast } from "react-hot-toast"; import { toast } from "react-hot-toast";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import Empty from "@/components/Empty"; import Empty from "@/components/Empty";
@ -26,7 +26,7 @@ const UserProfile = () => {
const memoStore = useMemoStore(); const memoStore = useMemoStore();
const memoList = useMemoList(); const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true); const [isRequesting, setIsRequesting] = useState(true);
const nextPageTokenRef = useRef<string | undefined>(undefined); const [nextPageToken, setNextPageToken] = useState<string>("");
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams(); const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
const sortedMemos = memoList.value const sortedMemos = memoList.value
.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime)) .sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
@ -59,21 +59,16 @@ const UserProfile = () => {
return; return;
} }
setIsRequesting(true); memoList.reset();
nextPageTokenRef.current = undefined; fetchMemos("");
setTimeout(async () => {
memoList.reset();
const nextPageToken = await fetchMemos();
nextPageTokenRef.current = nextPageToken;
setIsRequesting(false);
});
}, [user, tagQuery, textQuery]); }, [user, tagQuery, textQuery]);
const fetchMemos = async () => { const fetchMemos = async (nextPageToken: string) => {
if (!user) { if (!user) {
return; return;
} }
setIsRequesting(true);
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`]; const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
const contentSearch: string[] = []; const contentSearch: string[] = [];
if (textQuery) { if (textQuery) {
@ -85,12 +80,13 @@ const UserProfile = () => {
if (tagQuery) { if (tagQuery) {
filters.push(`tag == "${tagQuery}"`); filters.push(`tag == "${tagQuery}"`);
} }
const { nextPageToken } = await memoStore.fetchMemos({ const response = await memoStore.fetchMemos({
pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE, pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
filter: filters.join(" && "), filter: filters.join(" && "),
pageToken: nextPageTokenRef.current, pageToken: nextPageToken,
}); });
return nextPageToken; setIsRequesting(false);
setNextPageToken(response.nextPageToken);
}; };
const handleCopyProfileLink = () => { const handleCopyProfileLink = () => {
@ -144,7 +140,7 @@ const UserProfile = () => {
<Icon.Loader className="w-4 h-auto animate-spin mr-1" /> <Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p> <p className="text-sm italic">{t("memo.fetching-data")}</p>
</div> </div>
) : !nextPageTokenRef.current ? ( ) : !nextPageToken ? (
sortedMemos.length === 0 && ( sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic"> <div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty /> <Empty />
@ -153,7 +149,11 @@ const UserProfile = () => {
) )
) : ( ) : (
<div className="w-full flex flex-row justify-center items-center my-4"> <div className="w-full flex flex-row justify-center items-center my-4">
<Button variant="plain" endDecorator={<Icon.ArrowDown className="w-5 h-auto" />} onClick={fetchMemos}> <Button
variant="plain"
endDecorator={<Icon.ArrowDown className="w-5 h-auto" />}
onClick={() => fetchMemos(nextPageToken)}
>
{t("memo.fetch-more")} {t("memo.fetch-more")}
</Button> </Button>
</div> </div>