mirror of https://github.com/usememos/memos
refactor: filter store (#1331)
boojack
2 years ago
committed by
GitHub
parent
f3f0efba1e
commit
a9218ed5f0
@ -0,0 +1,77 @@
|
|||||||
|
import store, { useAppSelector } from "..";
|
||||||
|
import { setFilter, Filter } from "../reducer/filter";
|
||||||
|
|
||||||
|
export const useFilterStore = () => {
|
||||||
|
const state = useAppSelector((state) => state.filter);
|
||||||
|
|
||||||
|
return {
|
||||||
|
state,
|
||||||
|
getState: () => {
|
||||||
|
return store.getState().filter;
|
||||||
|
},
|
||||||
|
setFilter: (filter: Filter) => {
|
||||||
|
store.dispatch(setFilter(filter));
|
||||||
|
},
|
||||||
|
clearFilter: () => {
|
||||||
|
store.dispatch(
|
||||||
|
setFilter({
|
||||||
|
tag: undefined,
|
||||||
|
type: undefined,
|
||||||
|
duration: undefined,
|
||||||
|
text: undefined,
|
||||||
|
shortcutId: undefined,
|
||||||
|
visibility: undefined,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
setMemoTypeFilter: (type?: MemoSpecType) => {
|
||||||
|
store.dispatch(
|
||||||
|
setFilter({
|
||||||
|
type: type,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
setMemoShortcut: (shortcutId?: ShortcutId) => {
|
||||||
|
store.dispatch(
|
||||||
|
setFilter({
|
||||||
|
shortcutId: shortcutId,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
setTextFilter: (text?: string) => {
|
||||||
|
store.dispatch(
|
||||||
|
setFilter({
|
||||||
|
text: text,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
setTagFilter: (tag?: string) => {
|
||||||
|
store.dispatch(
|
||||||
|
setFilter({
|
||||||
|
tag: tag,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
setFromAndToFilter: (from?: number, to?: number) => {
|
||||||
|
let duration = undefined;
|
||||||
|
if (from && to && from < to) {
|
||||||
|
duration = {
|
||||||
|
from,
|
||||||
|
to,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
store.dispatch(
|
||||||
|
setFilter({
|
||||||
|
duration,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
setMemoVisibilityFilter: (visibility?: Visibility) => {
|
||||||
|
store.dispatch(
|
||||||
|
setFilter({
|
||||||
|
visibility: visibility,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -1,122 +0,0 @@
|
|||||||
import { stringify } from "qs";
|
|
||||||
import store, { useAppSelector } from "../";
|
|
||||||
import { setQuery, setPathname, Query, updateStateWithLocation, updatePathnameStateWithLocation } from "../reducer/location";
|
|
||||||
|
|
||||||
const updateLocationUrl = (method: "replace" | "push" = "replace") => {
|
|
||||||
// avoid pathname confusion when entering from non-home page
|
|
||||||
store.dispatch(updatePathnameStateWithLocation());
|
|
||||||
|
|
||||||
const { query, pathname, hash } = store.getState().location;
|
|
||||||
let queryString = stringify(query);
|
|
||||||
if (queryString) {
|
|
||||||
queryString = "?" + queryString;
|
|
||||||
} else {
|
|
||||||
queryString = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
if (method === "replace") {
|
|
||||||
window.history.replaceState(null, "", pathname + hash + queryString);
|
|
||||||
} else {
|
|
||||||
window.history.pushState(null, "", pathname + hash + queryString);
|
|
||||||
}
|
|
||||||
store.dispatch(updateStateWithLocation());
|
|
||||||
};
|
|
||||||
|
|
||||||
export const useLocationStore = () => {
|
|
||||||
const state = useAppSelector((state) => state.location);
|
|
||||||
|
|
||||||
return {
|
|
||||||
state,
|
|
||||||
getState: () => {
|
|
||||||
return store.getState().location;
|
|
||||||
},
|
|
||||||
updateStateWithLocation: () => {
|
|
||||||
store.dispatch(updateStateWithLocation());
|
|
||||||
},
|
|
||||||
setPathname: (pathname: string) => {
|
|
||||||
store.dispatch(setPathname(pathname));
|
|
||||||
updateLocationUrl();
|
|
||||||
},
|
|
||||||
pushHistory: (pathname: string) => {
|
|
||||||
store.dispatch(setPathname(pathname));
|
|
||||||
updateLocationUrl("push");
|
|
||||||
},
|
|
||||||
replaceHistory: (pathname: string) => {
|
|
||||||
store.dispatch(setPathname(pathname));
|
|
||||||
updateLocationUrl("replace");
|
|
||||||
},
|
|
||||||
setQuery: (query: Query) => {
|
|
||||||
store.dispatch(setQuery(query));
|
|
||||||
updateLocationUrl();
|
|
||||||
},
|
|
||||||
clearQuery: () => {
|
|
||||||
store.dispatch(
|
|
||||||
setQuery({
|
|
||||||
tag: undefined,
|
|
||||||
type: undefined,
|
|
||||||
duration: undefined,
|
|
||||||
text: undefined,
|
|
||||||
shortcutId: undefined,
|
|
||||||
visibility: undefined,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
updateLocationUrl();
|
|
||||||
},
|
|
||||||
setMemoTypeQuery: (type?: MemoSpecType) => {
|
|
||||||
store.dispatch(
|
|
||||||
setQuery({
|
|
||||||
type: type,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
updateLocationUrl();
|
|
||||||
},
|
|
||||||
setMemoShortcut: (shortcutId?: ShortcutId) => {
|
|
||||||
store.dispatch(
|
|
||||||
setQuery({
|
|
||||||
shortcutId: shortcutId,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
updateLocationUrl();
|
|
||||||
},
|
|
||||||
setTextQuery: (text?: string) => {
|
|
||||||
store.dispatch(
|
|
||||||
setQuery({
|
|
||||||
text: text,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
updateLocationUrl();
|
|
||||||
},
|
|
||||||
setTagQuery: (tag?: string) => {
|
|
||||||
store.dispatch(
|
|
||||||
setQuery({
|
|
||||||
tag: tag,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
updateLocationUrl();
|
|
||||||
},
|
|
||||||
setFromAndToQuery: (from?: number, to?: number) => {
|
|
||||||
let duration = undefined;
|
|
||||||
if (from && to && from < to) {
|
|
||||||
duration = {
|
|
||||||
from,
|
|
||||||
to,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
store.dispatch(
|
|
||||||
setQuery({
|
|
||||||
duration,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
updateLocationUrl();
|
|
||||||
},
|
|
||||||
setMemoVisibilityQuery: (visibility?: Visibility) => {
|
|
||||||
store.dispatch(
|
|
||||||
setQuery({
|
|
||||||
visibility: visibility,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
updateLocationUrl();
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||||
|
|
||||||
|
interface Duration {
|
||||||
|
from: number;
|
||||||
|
to: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
tag?: string;
|
||||||
|
duration?: Duration;
|
||||||
|
type?: MemoSpecType;
|
||||||
|
text?: string;
|
||||||
|
shortcutId?: ShortcutId;
|
||||||
|
visibility?: Visibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Filter = State;
|
||||||
|
|
||||||
|
const filterSlice = createSlice({
|
||||||
|
name: "filter",
|
||||||
|
initialState: {} as State,
|
||||||
|
reducers: {
|
||||||
|
setFilter: (state, action: PayloadAction<Partial<State>>) => {
|
||||||
|
if (JSON.stringify(action.payload) === state) {
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
...action.payload,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export const { setFilter } = filterSlice.actions;
|
||||||
|
|
||||||
|
export default filterSlice.reducer;
|
||||||
@ -1,107 +0,0 @@
|
|||||||
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
|
||||||
import { parse, ParsedQs } from "qs";
|
|
||||||
|
|
||||||
interface Duration {
|
|
||||||
from: number;
|
|
||||||
to: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface Query {
|
|
||||||
tag?: string;
|
|
||||||
duration?: Duration;
|
|
||||||
type?: MemoSpecType;
|
|
||||||
text?: string;
|
|
||||||
shortcutId?: ShortcutId;
|
|
||||||
visibility?: Visibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface State {
|
|
||||||
pathname: string;
|
|
||||||
hash: string;
|
|
||||||
query: Query;
|
|
||||||
}
|
|
||||||
|
|
||||||
const getValidPathname = (pathname: string): string => {
|
|
||||||
const userPageUrlRegex = /^\/u\/\d+.*/;
|
|
||||||
if (["/", "/auth", "/explore"].includes(pathname) || userPageUrlRegex.test(pathname)) {
|
|
||||||
return pathname;
|
|
||||||
} else {
|
|
||||||
return "/";
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStateFromLocation = () => {
|
|
||||||
const { pathname, search, hash } = window.location;
|
|
||||||
const urlParams = parse(search.slice(1));
|
|
||||||
const state: State = {
|
|
||||||
pathname: getValidPathname(pathname),
|
|
||||||
hash: hash,
|
|
||||||
query: {},
|
|
||||||
};
|
|
||||||
|
|
||||||
if (search !== "") {
|
|
||||||
state.query = {};
|
|
||||||
state.query.tag = urlParams["tag"] as string;
|
|
||||||
state.query.type = urlParams["type"] as MemoSpecType;
|
|
||||||
state.query.text = urlParams["text"] as string;
|
|
||||||
const shortcutIdStr = urlParams["shortcutId"] as string;
|
|
||||||
state.query.shortcutId = shortcutIdStr ? Number(shortcutIdStr) : undefined;
|
|
||||||
const durationObj = urlParams["duration"] as ParsedQs;
|
|
||||||
if (durationObj) {
|
|
||||||
const duration: Duration = {
|
|
||||||
from: Number(durationObj["from"]),
|
|
||||||
to: Number(durationObj["to"]),
|
|
||||||
};
|
|
||||||
if (duration.to > duration.from && duration.to !== 0) {
|
|
||||||
state.query.duration = duration;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
state.query.visibility = urlParams["visibility"] as Visibility;
|
|
||||||
}
|
|
||||||
|
|
||||||
return state;
|
|
||||||
};
|
|
||||||
|
|
||||||
const locationSlice = createSlice({
|
|
||||||
name: "location",
|
|
||||||
initialState: getStateFromLocation(),
|
|
||||||
reducers: {
|
|
||||||
updateStateWithLocation: () => {
|
|
||||||
return getStateFromLocation();
|
|
||||||
},
|
|
||||||
updatePathnameStateWithLocation: (state) => {
|
|
||||||
const { pathname } = window.location;
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
pathname: getValidPathname(pathname),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
setPathname: (state, action: PayloadAction<string>) => {
|
|
||||||
if (state.pathname === action.payload) {
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
pathname: action.payload,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
setQuery: (state, action: PayloadAction<Partial<Query>>) => {
|
|
||||||
if (JSON.stringify(action.payload) === state.query) {
|
|
||||||
return state;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...state,
|
|
||||||
query: {
|
|
||||||
...state.query,
|
|
||||||
...action.payload,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export const { setPathname, setQuery, updateStateWithLocation, updatePathnameStateWithLocation } = locationSlice.actions;
|
|
||||||
|
|
||||||
export default locationSlice.reducer;
|
|
||||||
Loading…
Reference in New Issue