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

feat: tag filter in explore (#1032)

Browse Source 
* temp

* Revert "temp"

This reverts commit d2d14b4c5710d499b9fd0314b9571d44d062f52a.

* Revert "Revert "temp""

This reverts commit c50be22cb47027d44ecf4ccbe552948f363c40e7.

* feat: tag filter in explore page

* update
This commit is contained in:
Zeng1998 2023-02-07 20:11:22 +08:00 committed by GitHub
parent d6fe180ca1
commit 9e818cddce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 54 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,8 @@ import useLoading from "../hooks/useLoading";
import toastHelper from "../components/Toast";
import MemoContent from "../components/MemoContent";
import MemoResources from "../components/MemoResources";
import MemoFilter from "../components/MemoFilter";
import { TAG_REG } from "../labs/marked/parser";
import "../less/explore.less";
interface State {
@ -20,6 +22,7 @@ const Explore = () => {
const locationStore = useLocationStore();
const userStore = useUserStore();
const memoStore = useMemoStore();
const query = locationStore.state.query;
const [state, setState] = useState<State>({
memos: [],
});
@ -30,7 +33,7 @@ const Explore = () => {
const location = locationStore.state;
useEffect(() => {
memoStore.fetchAllMemos(DEFAULT_MEMO_LIMIT, state.memos.length).then((memos) => {
memoStore.fetchAllMemos(DEFAULT_MEMO_LIMIT, 0).then((memos) => {
if (memos.length < DEFAULT_MEMO_LIMIT) {
setIsComplete(true);
}
@ -41,6 +44,39 @@ const Explore = () => {
});
}, [location]);
const { tag: tagQuery, text: textQuery } = query ?? {};
const showMemoFilter = Boolean(tagQuery || textQuery);
const shownMemos = showMemoFilter
? state.memos.filter((memo) => {
let shouldShow = true;
if (tagQuery) {
const tagsSet = new Set<string>();
for (const t of Array.from(memo.content.match(new RegExp(TAG_REG, "g")) ?? [])) {
const tag = t.replace(TAG_REG, "$1").trim();
const items = tag.split("/");
let temp = "";
for (const i of items) {
temp += i;
tagsSet.add(temp);
temp += "/";
}
}
if (!tagsSet.has(tagQuery)) {
shouldShow = false;
}
}
return shouldShow;
})
: state.memos;
const memoSort = (mi: Memo, mj: Memo) => {
return mj.displayTs - mi.displayTs;
};
shownMemos.sort(memoSort);
const sortedMemos = shownMemos.filter((m) => m.rowStatus === "NORMAL");
const handleFetchMoreClick = async () => {
try {
const fetchedMemos = await memoStore.fetchAllMemos(DEFAULT_MEMO_LIMIT, state.memos.length);
@ -58,6 +94,20 @@ const Explore = () => {
}
};
const handleMemoContentClick = async (e: React.MouseEvent) => {
const targetEl = e.target as HTMLElement;
if (targetEl.className === "tag-span") {
const tagName = targetEl.innerText.slice(1);
const currTagQuery = locationStore.getState().query?.tag;
if (currTagQuery === tagName) {
locationStore.setTagQuery(undefined);
} else {
locationStore.setTagQuery(tagName);
}
}
};
return (
<section className="page-wrapper explore">
<div className="page-container">
@ -80,7 +130,8 @@ const Explore = () => {
</div>
{!loadingState.isLoading && (
<main className="memos-wrapper">
{state.memos.map((memo) => {
<MemoFilter />
{sortedMemos.map((memo) => {
const createdAtStr = dayjs(memo.displayTs).locale(i18n.language).format("YYYY/MM/DD HH:mm:ss");
return (
<div className="memo-container" key={memo.id}>
@ -90,7 +141,7 @@ const Explore = () => {
@{memo.creator.nickname || memo.creator.username}
</a>
</div>
<MemoContent className="memo-content" content={memo.content} onMemoContentClick={() => undefined} />
<MemoContent className="memo-content" content={memo.content} onMemoContentClick={handleMemoContentClick} />
<MemoResources resourceList={memo.resourceList} />
</div>
);