mirror of
https://github.com/usememos/memos.git
synced 2024-10-04 07:17:52 +03:00
chore: tweak url filters
This commit is contained in:
parent
db3457e081
commit
d7889d9903
44
web/src/hooks/useFilterWithUrlParams.ts
Normal file
44
web/src/hooks/useFilterWithUrlParams.ts
Normal file
@ -0,0 +1,44 @@
|
||||
import { useEffect } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { useFilterStore } from "@/store/module";
|
||||
|
||||
const useFilterWithUrlParams = () => {
|
||||
const location = useLocation();
|
||||
const filterStore = useFilterStore();
|
||||
const { tag, text } = filterStore.state;
|
||||
|
||||
useEffect(() => {
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
const tag = urlParams.get("tag");
|
||||
const text = urlParams.get("text");
|
||||
if (tag) {
|
||||
filterStore.setTagFilter(tag);
|
||||
}
|
||||
if (text) {
|
||||
filterStore.setTextFilter(text);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
if (tag) {
|
||||
urlParams.set("tag", tag);
|
||||
} else {
|
||||
urlParams.delete("tag");
|
||||
}
|
||||
if (text) {
|
||||
urlParams.set("text", text);
|
||||
} else {
|
||||
urlParams.delete("text");
|
||||
}
|
||||
const params = urlParams.toString();
|
||||
window.history.replaceState({}, "", `${location.pathname}${params?.length > 0 ? `?${params}` : ""}`);
|
||||
}, [tag, text]);
|
||||
|
||||
return {
|
||||
tag,
|
||||
text,
|
||||
};
|
||||
};
|
||||
|
||||
export default useFilterWithUrlParams;
|
@ -12,8 +12,8 @@ import SearchBar from "@/components/SearchBar";
|
||||
import { memoServiceClient } from "@/grpcweb";
|
||||
import { getDateTimeString } from "@/helpers/datetime";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import { useFilterStore } from "@/store/module";
|
||||
import { useMemoStore } from "@/store/v1";
|
||||
import { RowStatus } from "@/types/proto/api/v2/common";
|
||||
import { Memo } from "@/types/proto/api/v2/memo_service";
|
||||
@ -23,10 +23,9 @@ const Archived = () => {
|
||||
const t = useTranslate();
|
||||
const loadingState = useLoading();
|
||||
const user = useCurrentUser();
|
||||
const filterStore = useFilterStore();
|
||||
const memoStore = useMemoStore();
|
||||
const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
|
||||
const { tag: tagQuery, text: textQuery } = filterStore.state;
|
||||
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
|
@ -1,6 +1,5 @@
|
||||
import { Button } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import Empty from "@/components/Empty";
|
||||
import Icon from "@/components/Icon";
|
||||
import MemoFilter from "@/components/MemoFilter";
|
||||
@ -9,49 +8,21 @@ import MobileHeader from "@/components/MobileHeader";
|
||||
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
||||
import { getTimeStampByDate } from "@/helpers/datetime";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import { useFilterStore } from "@/store/module";
|
||||
import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams";
|
||||
import { useMemoList, useMemoStore } from "@/store/v1";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
const Explore = () => {
|
||||
const t = useTranslate();
|
||||
const location = useLocation();
|
||||
const user = useCurrentUser();
|
||||
const filterStore = useFilterStore();
|
||||
const memoStore = useMemoStore();
|
||||
const memoList = useMemoList();
|
||||
const [isRequesting, setIsRequesting] = useState(true);
|
||||
const [isComplete, setIsComplete] = useState(false);
|
||||
const { tag: tagQuery, text: textQuery } = filterStore.state;
|
||||
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
|
||||
const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
|
||||
|
||||
useEffect(() => {
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
const tag = urlParams.get("tag");
|
||||
const text = urlParams.get("text");
|
||||
if (tag) {
|
||||
filterStore.setTagFilter(tag);
|
||||
}
|
||||
if (text) {
|
||||
filterStore.setTextFilter(text);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
if (tagQuery) {
|
||||
urlParams.set("tag", tagQuery);
|
||||
} else {
|
||||
urlParams.delete("tag");
|
||||
}
|
||||
if (textQuery) {
|
||||
urlParams.set("text", textQuery);
|
||||
} else {
|
||||
urlParams.delete("text");
|
||||
}
|
||||
const params = urlParams.toString();
|
||||
window.history.replaceState({}, "", `${location.pathname}${params?.length > 0 ? `?${params}` : ""}`);
|
||||
|
||||
memoList.reset();
|
||||
fetchMemos();
|
||||
}, [tagQuery, textQuery]);
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { Button } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import Empty from "@/components/Empty";
|
||||
import HomeSidebar from "@/components/HomeSidebar";
|
||||
import HomeSidebarDrawer from "@/components/HomeSidebarDrawer";
|
||||
@ -13,55 +12,27 @@ import MobileHeader from "@/components/MobileHeader";
|
||||
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
||||
import { getTimeStampByDate } from "@/helpers/datetime";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams";
|
||||
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
|
||||
import { useFilterStore } from "@/store/module";
|
||||
import { useMemoList, useMemoStore } from "@/store/v1";
|
||||
import { RowStatus } from "@/types/proto/api/v2/common";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
const Home = () => {
|
||||
const t = useTranslate();
|
||||
const location = useLocation();
|
||||
const { md } = useResponsiveWidth();
|
||||
const user = useCurrentUser();
|
||||
const filterStore = useFilterStore();
|
||||
const memoStore = useMemoStore();
|
||||
const memoList = useMemoList();
|
||||
const [isRequesting, setIsRequesting] = useState(true);
|
||||
const [isComplete, setIsComplete] = useState(false);
|
||||
const { tag: tagQuery, text: textQuery } = filterStore.state;
|
||||
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
|
||||
const sortedMemos = memoList.value
|
||||
.filter((memo) => memo.rowStatus === RowStatus.ACTIVE)
|
||||
.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
|
||||
.sort((a, b) => Number(b.pinned) - Number(a.pinned));
|
||||
|
||||
useEffect(() => {
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
const tag = urlParams.get("tag");
|
||||
const text = urlParams.get("text");
|
||||
if (tag) {
|
||||
filterStore.setTagFilter(tag);
|
||||
}
|
||||
if (text) {
|
||||
filterStore.setTextFilter(text);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
if (tagQuery) {
|
||||
urlParams.set("tag", tagQuery);
|
||||
} else {
|
||||
urlParams.delete("tag");
|
||||
}
|
||||
if (textQuery) {
|
||||
urlParams.set("text", textQuery);
|
||||
} else {
|
||||
urlParams.delete("text");
|
||||
}
|
||||
const params = urlParams.toString();
|
||||
window.history.replaceState({}, "", `${location.pathname}${params?.length > 0 ? `?${params}` : ""}`);
|
||||
|
||||
memoList.reset();
|
||||
fetchMemos();
|
||||
}, [tagQuery, textQuery]);
|
||||
|
@ -13,9 +13,9 @@ import { memoServiceClient } from "@/grpcweb";
|
||||
import { DAILY_TIMESTAMP, DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
||||
import { getNormalizedTimeString, getTimeStampByDate } from "@/helpers/datetime";
|
||||
import useCurrentUser from "@/hooks/useCurrentUser";
|
||||
import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams";
|
||||
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
|
||||
import i18n from "@/i18n";
|
||||
import { useFilterStore } from "@/store/module";
|
||||
import { useMemoList, useMemoStore } from "@/store/v1";
|
||||
import { Memo } from "@/types/proto/api/v2/memo_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
@ -50,12 +50,11 @@ const Timeline = () => {
|
||||
const user = useCurrentUser();
|
||||
const memoStore = useMemoStore();
|
||||
const memoList = useMemoList();
|
||||
const filterStore = useFilterStore();
|
||||
const [activityStats, setActivityStats] = useState<Record<string, number>>({});
|
||||
const [selectedDay, setSelectedDay] = useState<string | undefined>();
|
||||
const [isRequesting, setIsRequesting] = useState(true);
|
||||
const [isComplete, setIsComplete] = useState(false);
|
||||
const { tag: tagQuery, text: textQuery } = filterStore.state;
|
||||
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
|
||||
const sortedMemos = memoList.value.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime));
|
||||
const groupedByMonth = groupByMonth(activityStats, sortedMemos);
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { Button } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useLocation, useParams } from "react-router-dom";
|
||||
import { useParams } from "react-router-dom";
|
||||
import Empty from "@/components/Empty";
|
||||
import Icon from "@/components/Icon";
|
||||
import MemoFilter from "@/components/MemoFilter";
|
||||
@ -10,41 +10,27 @@ import MobileHeader from "@/components/MobileHeader";
|
||||
import UserAvatar from "@/components/UserAvatar";
|
||||
import { DEFAULT_MEMO_LIMIT } from "@/helpers/consts";
|
||||
import { getTimeStampByDate } from "@/helpers/datetime";
|
||||
import useFilterWithUrlParams from "@/hooks/useFilterWithUrlParams";
|
||||
import useLoading from "@/hooks/useLoading";
|
||||
import { useFilterStore } from "@/store/module";
|
||||
import { useMemoList, useMemoStore, useUserStore } from "@/store/v1";
|
||||
import { User } from "@/types/proto/api/v2/user_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
|
||||
const UserProfile = () => {
|
||||
const t = useTranslate();
|
||||
const location = useLocation();
|
||||
const params = useParams();
|
||||
const userStore = useUserStore();
|
||||
const loadingState = useLoading();
|
||||
const filterStore = useFilterStore();
|
||||
const [user, setUser] = useState<User>();
|
||||
const memoStore = useMemoStore();
|
||||
const memoList = useMemoList();
|
||||
const [isRequesting, setIsRequesting] = useState(true);
|
||||
const [isComplete, setIsComplete] = useState(false);
|
||||
const { tag: tagQuery, text: textQuery } = filterStore.state;
|
||||
const { tag: tagQuery, text: textQuery } = useFilterWithUrlParams();
|
||||
const sortedMemos = memoList.value
|
||||
.sort((a, b) => getTimeStampByDate(b.displayTime) - getTimeStampByDate(a.displayTime))
|
||||
.sort((a, b) => Number(b.pinned) - Number(a.pinned));
|
||||
|
||||
useEffect(() => {
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
const tag = urlParams.get("tag");
|
||||
const text = urlParams.get("text");
|
||||
if (tag) {
|
||||
filterStore.setTagFilter(tag);
|
||||
}
|
||||
if (text) {
|
||||
filterStore.setTextFilter(text);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const username = params.username;
|
||||
if (!username) {
|
||||
@ -68,20 +54,6 @@ const UserProfile = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
const urlParams = new URLSearchParams(location.search);
|
||||
if (tagQuery) {
|
||||
urlParams.set("tag", tagQuery);
|
||||
} else {
|
||||
urlParams.delete("tag");
|
||||
}
|
||||
if (textQuery) {
|
||||
urlParams.set("text", textQuery);
|
||||
} else {
|
||||
urlParams.delete("text");
|
||||
}
|
||||
const params = urlParams.toString();
|
||||
window.history.replaceState({}, "", `${location.pathname}${params?.length > 0 ? `?${params}` : ""}`);
|
||||
|
||||
memoList.reset();
|
||||
fetchMemos();
|
||||
}, [user, tagQuery, textQuery]);
|
||||
|
Loading…
Reference in New Issue
Block a user