Skip to content

C
canifa_note
Commit 3e5e5b1f authored by Steven's avatar Steven
Browse files
Options

chore: fix search memos

parent 3ecbbf31
Hide whitespace changes
Inline Side-by-side
Showing with 68 additions and 80 deletions
web/src/pages/Archived.tsx
View file @ 3e5e5b1f
import { Button, Tooltip } from "@mui/joy";
import { ClientError } from "nice-grpc-web";
import { useEffect, useRef, useState } from "react";
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { showCommonDialog } from "@/components/Dialog/CommonDialog";
import Empty from "@/components/Empty";
......@@ -24,24 +24,19 @@ const Archived = () => {
const memoStore = useMemoStore();
const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true);
const nextPageTokenRef = useRef<string | undefined>(undefined);
const [nextPageToken, setNextPageToken] = useState<string>("");
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
const sortedMemos = memoList.value
.filter((memo) => memo.rowStatus === RowStatus.ARCHIVED)
.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
useEffect(() => {
setIsRequesting(true);
nextPageTokenRef.current = undefined;
setTimeout(async () => {
memoList.reset();
const nextPageToken = await fetchMemos();
nextPageTokenRef.current = nextPageToken;
setIsRequesting(false);
});
memoList.reset();
fetchMemos("");
}, [tagQuery, textQuery]);
const fetchMemos = async () => {
const fetchMemos = async (nextPageToken: string) => {
setIsRequesting(true);
const filters = [`creator == "${user.name}"`, `row_status == "ARCHIVED"`];
const contentSearch: string[] = [];
if (textQuery) {
......@@ -53,12 +48,13 @@ const Archived = () => {
if (tagQuery) {
filters.push(`tag == "${tagQuery}"`);
}
const { nextPageToken } = await memoStore.fetchMemos({
const response = await memoStore.fetchMemos({
pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
filter: filters.join(" && "),
pageToken: nextPageTokenRef.current,
pageToken: nextPageToken,
});
return nextPageToken;
setIsRequesting(false);
setNextPageToken(response.nextPageToken);
};
const handleDeleteMemoClick = async (memo: Memo) => {
......@@ -136,7 +132,7 @@ const Archived = () => {
<Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p>
</div>
) : !nextPageTokenRef.current ? (
) : !nextPageToken ? (
sortedMemos.length === 0 && (
<div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
<Empty />
......@@ -145,7 +141,7 @@ const Archived = () => {
)
) : (
<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")}
</Button>
</div>
......
web/src/pages/Explore.tsx
View file @ 3e5e5b1f
import { Button } from "@mui/joy";
import clsx from "clsx";
import { useEffect, useRef, useState } from "react";
import { useEffect, useState } from "react";
import Empty from "@/components/Empty";
import { ExploreSidebar, ExploreSidebarDrawer } from "@/components/ExploreSidebar";
import Icon from "@/components/Icon";
......@@ -22,22 +22,17 @@ const Explore = () => {
const memoStore = useMemoStore();
const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true);
const nextPageTokenRef = useRef<string | undefined>(undefined);
const [nextPageToken, setNextPageToken] = useState<string>("");
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
useEffect(() => {
setIsRequesting(true);
nextPageTokenRef.current = undefined;
setTimeout(async () => {
memoList.reset();
const nextPageToken = await fetchMemos();
nextPageTokenRef.current = nextPageToken;
setIsRequesting(false);
});
memoList.reset();
fetchMemos("");
}, [tagQuery, textQuery]);
const fetchMemos = async () => {
const fetchMemos = async (nextPageToken: string) => {
setIsRequesting(true);
const filters = [`row_status == "NORMAL"`, `visibilities == [${user ? "'PUBLIC', 'PROTECTED'" : "'PUBLIC'"}]`];
const contentSearch: string[] = [];
if (textQuery) {
......@@ -49,12 +44,13 @@ const Explore = () => {
if (tagQuery) {
filters.push(`tag == "${tagQuery}"`);
}
const { nextPageToken } = await memoStore.fetchMemos({
const response = await memoStore.fetchMemos({
pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
filter: filters.join(" && "),
pageToken: nextPageTokenRef.current,
pageToken: nextPageToken,
});
return nextPageToken;
setIsRequesting(false);
setNextPageToken(response.nextPageToken);
};
return (
......@@ -76,7 +72,7 @@ const Explore = () => {
<Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p>
</div>
) : !nextPageTokenRef.current ? (
) : !nextPageToken ? (
sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty />
......@@ -85,7 +81,7 @@ const Explore = () => {
)
) : (
<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")}
</Button>
</div>
......
web/src/pages/Home.tsx
View file @ 3e5e5b1f
import { Button } from "@mui/joy";
import clsx from "clsx";
import { useCallback, useEffect, useRef, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import Empty from "@/components/Empty";
import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar";
import Icon from "@/components/Icon";
......@@ -25,7 +25,7 @@ const Home = () => {
const memoStore = useMemoStore();
const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true);
const nextPageTokenRef = useRef<string | undefined>(undefined);
const [nextPageToken, setNextPageToken] = useState<string>("");
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
const sortedMemos = memoList.value
.filter((memo) => memo.rowStatus === RowStatus.ACTIVE)
......@@ -33,17 +33,12 @@ const Home = () => {
.sort((a, b) => Number(b.pinned) - Number(a.pinned));
useEffect(() => {
setIsRequesting(true);
nextPageTokenRef.current = undefined;
setTimeout(async () => {
memoList.reset();
const nextPageToken = await fetchMemos();
nextPageTokenRef.current = nextPageToken;
setIsRequesting(false);
});
memoList.reset();
fetchMemos("");
}, [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 contentSearch: string[] = [];
if (textQuery) {
......@@ -55,12 +50,13 @@ const Home = () => {
if (tagQuery) {
filters.push(`tag == "${tagQuery}"`);
}
const { nextPageToken } = await memoStore.fetchMemos({
const response = await memoStore.fetchMemos({
pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
filter: filters.join(" && "),
pageToken: nextPageTokenRef.current,
pageToken: nextPageToken,
});
return nextPageToken;
setIsRequesting(false);
setNextPageToken(response.nextPageToken);
};
const handleEditPrevious = useCallback(() => {
......@@ -91,7 +87,7 @@ const Home = () => {
<Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p>
</div>
) : !nextPageTokenRef.current ? (
) : !nextPageToken ? (
sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty />
......@@ -100,7 +96,7 @@ const Home = () => {
)
) : (
<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")}
</Button>
</div>
......
web/src/pages/Timeline.tsx
View file @ 3e5e5b1f
import { Button, IconButton } from "@mui/joy";
import clsx from "clsx";
import dayjs from "dayjs";
import { useEffect, useRef, useState } from "react";
import { useEffect, useState } from "react";
import ActivityCalendar from "@/components/ActivityCalendar";
import Empty from "@/components/Empty";
import Icon from "@/components/Icon";
......@@ -30,19 +30,13 @@ const Timeline = () => {
const [activityStats, setActivityStats] = useState<Record<string, number>>({});
const [selectedDateString, setSelectedDateString] = useState<string>(new Date().toDateString());
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 monthString = dayjs(selectedDateString).format("YYYY-MM");
useEffect(() => {
setIsRequesting(true);
nextPageTokenRef.current = undefined;
setTimeout(async () => {
memoList.reset();
const nextPageToken = await fetchMemos();
nextPageTokenRef.current = nextPageToken;
setIsRequesting(false);
});
memoList.reset();
fetchMemos("");
}, [selectedDateString, tagQuery, textQuery]);
useEffect(() => {
......@@ -74,7 +68,8 @@ const Timeline = () => {
})();
}, [sortedMemos.length]);
const fetchMemos = async () => {
const fetchMemos = async (nextPageToken: string) => {
setIsRequesting(true);
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`];
const contentSearch: string[] = [];
if (textQuery) {
......@@ -92,12 +87,13 @@ const Timeline = () => {
...[`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,
filter: filters.join(" && "),
pageToken: nextPageTokenRef.current,
pageToken: nextPageToken,
});
return nextPageToken;
setIsRequesting(false);
setNextPageToken(response.nextPageToken);
};
const handleSelectedDataChange = (date: string) => {
......@@ -192,7 +188,7 @@ const Timeline = () => {
<Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p>
</div>
) : !nextPageTokenRef.current ? (
) : !nextPageToken ? (
sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty />
......@@ -201,7 +197,11 @@ const Timeline = () => {
)
) : (
<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")}
</Button>
</div>
......
web/src/pages/UserProfile.tsx
View file @ 3e5e5b1f
import { Button } from "@mui/joy";
import copy from "copy-to-clipboard";
import { useEffect, useRef, useState } from "react";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useParams } from "react-router-dom";
import Empty from "@/components/Empty";
......@@ -26,7 +26,7 @@ const UserProfile = () => {
const memoStore = useMemoStore();
const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true);
const nextPageTokenRef = useRef<string | undefined>(undefined);
const [nextPageToken, setNextPageToken] = useState<string>("");
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
const sortedMemos = memoList.value
.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
......@@ -59,21 +59,16 @@ const UserProfile = () => {
return;
}
setIsRequesting(true);
nextPageTokenRef.current = undefined;
setTimeout(async () => {
memoList.reset();
const nextPageToken = await fetchMemos();
nextPageTokenRef.current = nextPageToken;
setIsRequesting(false);
});
memoList.reset();
fetchMemos("");
}, [user, tagQuery, textQuery]);
const fetchMemos = async () => {
const fetchMemos = async (nextPageToken: string) => {
if (!user) {
return;
}
setIsRequesting(true);
const filters = [`creator == "${user.name}"`, `row_status == "NORMAL"`, `order_by_pinned == true`];
const contentSearch: string[] = [];
if (textQuery) {
......@@ -85,12 +80,13 @@ const UserProfile = () => {
if (tagQuery) {
filters.push(`tag == "${tagQuery}"`);
}
const { nextPageToken } = await memoStore.fetchMemos({
const response = await memoStore.fetchMemos({
pageSize: DEFAULT_LIST_MEMOS_PAGE_SIZE,
filter: filters.join(" && "),
pageToken: nextPageTokenRef.current,
pageToken: nextPageToken,
});
return nextPageToken;
setIsRequesting(false);
setNextPageToken(response.nextPageToken);
};
const handleCopyProfileLink = () => {
......@@ -144,7 +140,7 @@ const UserProfile = () => {
<Icon.Loader className="w-4 h-auto animate-spin mr-1" />
<p className="text-sm italic">{t("memo.fetching-data")}</p>
</div>
) : !nextPageTokenRef.current ? (
) : !nextPageToken ? (
sortedMemos.length === 0 && (
<div className="w-full mt-12 mb-8 flex flex-col justify-center items-center italic">
<Empty />
......@@ -153,7 +149,11 @@ const UserProfile = () => {
)
) : (
<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")}
</Button>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment