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: handle filter in user profile page

Browse Source
This commit is contained in:
Steven 2024-01-18 11:38:45 +08:00
parent 8ed827cd2d
commit 354011f994
1 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,12 +4,14 @@ 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";
import Icon from "@/components/Icon"; import Icon from "@/components/Icon";
import MemoFilter from "@/components/MemoFilter";
import MemoView from "@/components/MemoView"; import MemoView from "@/components/MemoView";
import MobileHeader from "@/components/MobileHeader"; import MobileHeader from "@/components/MobileHeader";
import UserAvatar from "@/components/UserAvatar"; import UserAvatar from "@/components/UserAvatar";
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts"; import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
import { getTimeStampByDate } from "@/helpers/datetime"; import { getTimeStampByDate } from "@/helpers/datetime";
import useLoading from "@/hooks/useLoading"; import useLoading from "@/hooks/useLoading";
import { useFilterStore } from "@/store/module";
import { useMemoList, useMemoStore, useUserStore } from "@/store/v1"; import { useMemoList, useMemoStore, useUserStore } from "@/store/v1";
import { User } from "@/types/proto/api/v2/user_service"; import { User } from "@/types/proto/api/v2/user_service";
import { useTranslate } from "@/utils/i18n"; import { useTranslate } from "@/utils/i18n";
@ -19,11 +21,13 @@ const UserProfile = () => {
const params = useParams(); const params = useParams();
const userStore = useUserStore(); const userStore = useUserStore();
const loadingState = useLoading(); const loadingState = useLoading();
const filterStore = useFilterStore();
const [user, setUser] = useState<User>(); const [user, setUser] = useState<User>();
const memoStore = useMemoStore(); const memoStore = useMemoStore();
const memoList = useMemoList(); const memoList = useMemoList();
const [isRequesting, setIsRequesting] = useState(true); const [isRequesting, setIsRequesting] = useState(true);
const [isComplete, setIsComplete] = useState(false); const [isComplete, setIsComplete] = useState(false);
const { tag: tagQuery, text: textQuery } = filterStore.state;
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))
.sort((a, b) => Number(b.pinned) - Number(a.pinned)); .sort((a, b) => Number(b.pinned) - Number(a.pinned));
@ -53,7 +57,7 @@ const UserProfile = () => {
memoList.reset(); memoList.reset();
fetchMemos(); fetchMemos();
}, [user]); }, [user, tagQuery, textQuery]);
const fetchMemos = async () => { const fetchMemos = async () => {
if (!user) { if (!user) {
@ -61,6 +65,16 @@ const UserProfile = () => {
} }
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[] = [];
if (tagQuery) {
contentSearch.push(`"#${tagQuery}"`);
}
if (textQuery) {
contentSearch.push(`"${textQuery}"`);
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
}
setIsRequesting(true); setIsRequesting(true);
const data = await memoStore.fetchMemos({ const data = await memoStore.fetchMemos({
filter: filters.join(" && "), filter: filters.join(" && "),
@ -91,6 +105,7 @@ const UserProfile = () => {
<p className="text-3xl text-black leading-none opacity-80 dark:text-gray-200">{user?.nickname}</p> <p className="text-3xl text-black leading-none opacity-80 dark:text-gray-200">{user?.nickname}</p>
</div> </div>
</div> </div>
<MemoFilter className="px-2 pb-3" />
{sortedMemos.map((memo) => ( {sortedMemos.map((memo) => (
<MemoView key={memo.id} memo={memo} showVisibility showPinnedStyle /> <MemoView key={memo.id} memo={memo} showVisibility showPinnedStyle />
))} ))}