mirror of https://github.com/usememos/memos
feat: implement memo filters
Steven
1 year ago
parent
b3b4aa9ddb
commit
cd38ec93ed
@ -0,0 +1,40 @@
|
||||
import { isEqual } from "lodash-es";
|
||||
import { useMemoFilterStore } from "@/store/v1";
|
||||
import Icon from "./Icon";
|
||||
|
||||
const MemoFilters = () => {
|
||||
const memoFilterStore = useMemoFilterStore();
|
||||
const filters = memoFilterStore.filters;
|
||||
|
||||
if (filters.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full mb-2 flex flex-row justify-start items-start gap-2">
|
||||
<span className="flex flex-row items-center gap-0.5 text-gray-500 text-sm leading-6">
|
||||
<Icon.Filter className="w-4 h-auto opacity-60 inline" />
|
||||
Filters
|
||||
</span>
|
||||
<div className="flex flex-row justify-start items-center flex-wrap gap-2 leading-6">
|
||||
{filters.map((filter) => (
|
||||
<div
|
||||
key={filter.factor}
|
||||
className="flex flex-row items-center gap-1 bg-gray-100 dark:bg-zinc-800 border dark:border-zinc-700 px-1 rounded-md"
|
||||
>
|
||||
<span className="text-gray-600 dark:text-gray-500 text-sm">{filter.factor}</span>
|
||||
{filter.value && <span className="text-gray-500 dark:text-gray-400 text-sm max-w-12 truncate">{filter.value}</span>}
|
||||
<button
|
||||
onClick={() => memoFilterStore.removeFilter((f) => isEqual(f, filter))}
|
||||
className="text-gray-500 dark:text-gray-300 opacity-60 hover:opacity-100"
|
||||
>
|
||||
<Icon.X className="w-3 h-auto" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemoFilters;
|
||||
@ -1,45 +0,0 @@
|
||||
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, memoPropertyFilter } = 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,
|
||||
memoPropertyFilter,
|
||||
};
|
||||
};
|
||||
|
||||
export default useFilterWithUrlParams;
|
||||
@ -0,0 +1,40 @@
|
||||
import { uniq } from "lodash-es";
|
||||
import { create } from "zustand";
|
||||
import { combine, persist } from "zustand/middleware";
|
||||
|
||||
type FilterFactor =
|
||||
| "tag"
|
||||
| "visibility"
|
||||
| "contentSearch"
|
||||
| "displayTime"
|
||||
| "property.hasLink"
|
||||
| "property.hasTaskList"
|
||||
| "property.hasCode";
|
||||
|
||||
export interface MemoFilter {
|
||||
factor: FilterFactor;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface State {
|
||||
filters: MemoFilter[];
|
||||
}
|
||||
|
||||
const getDefaultState = (): State => ({
|
||||
filters: [],
|
||||
});
|
||||
|
||||
export const useMemoFilterStore = create(
|
||||
persist(
|
||||
combine(getDefaultState(), (set, get) => ({
|
||||
setState: (state: State) => set(state),
|
||||
getState: () => get(),
|
||||
getFiltersByFactor: (factor: FilterFactor) => get().filters.filter((f) => f.factor === factor),
|
||||
addFilter: (filter: MemoFilter) => set((state) => ({ filters: uniq([...state.filters, filter]) })),
|
||||
removeFilter: (filterFn: (f: MemoFilter) => boolean) => set((state) => ({ filters: state.filters.filter((f) => !filterFn(f)) })),
|
||||
})),
|
||||
{
|
||||
name: "memo-filter",
|
||||
},
|
||||
),
|
||||
);
|
||||
Loading…
Reference in New Issue