YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-15 10:50:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore(frontend): add order by time asc

Browse Source
This commit is contained in:
Steven 2024-07-31 23:51:20 +08:00
parent 6184375cbb
commit 26fa172641
6 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/components/MemoFilters.tsx
View File

@ -40,6 +40,15 @@ const MemoFilters = () => {
</button>
</div>
))}
<div
className="flex flex-row items-center gap-1 pl-1.5 pr-1 hover:opacity-80 cursor-pointer"
onClick={() => memoFilterStore.setOrderByTimeAsc(!memoFilterStore.orderByTimeAsc)}
>
<Icon.Clock className="w-4 h-auto text-gray-500 dark:text-gray-400 opacity-60" />
<span className="text-gray-500 dark:text-gray-400 text-sm max-w-32 truncate">
{memoFilterStore.orderByTimeAsc ? "Asc" : "Desc"}
</span>
</div>
</div>
</div>
);

9
web/src/pages/Archived.tsx
View File

@ -26,7 +26,11 @@ const Archived = () => {
const [nextPageToken, setNextPageToken] = useState<string>("");
const sortedMemos = memoList.value
.filter((memo) => memo.rowStatus === RowStatus.ARCHIVED)
.sort((a, b) => dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix());
.sort((a, b) =>
memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0
? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
: dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
);
useEffect(() => {
memoList.reset();
@ -45,6 +49,9 @@ const Archived = () => {
tagSearch.push(`"${filter.value}"`);
}
}
if (memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0) {
filters.push(`order_by_time_asc == true`);
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
}

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

@ -23,7 +23,11 @@ const Explore = () => {
const memoFilterStore = useMemoFilterStore();
const [isRequesting, setIsRequesting] = useState(true);
const [nextPageToken, setNextPageToken] = useState<string>("");
const sortedMemos = memoList.value.sort((a, b) => dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix());
const sortedMemos = memoList.value.sort((a, b) =>
memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0
? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
: dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
);
useEffect(() => {
memoList.reset();
@ -42,6 +46,9 @@ const Explore = () => {
tagSearch.push(`"${filter.value}"`);
}
}
if (memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0) {
filters.push(`order_by_time_asc == true`);
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
}

9
web/src/pages/Home.tsx
View File

@ -27,7 +27,11 @@ const Home = () => {
const [nextPageToken, setNextPageToken] = useState<string>("");
const sortedMemos = memoList.value
.filter((memo) => memo.rowStatus === RowStatus.ACTIVE)
.sort((a, b) => dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix())
.sort((a, b) =>
memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0
? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
: dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
)
.sort((a, b) => Number(b.pinned) - Number(a.pinned));
useEffect(() => {
@ -57,6 +61,9 @@ const Home = () => {
filters.push(`display_time_before == ${timestampAfter + 60 * 60 * 24}`);
}
}
if (memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0) {
filters.push(`order_by_time_asc == true`);
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
}

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

@ -28,7 +28,11 @@ const UserProfile = () => {
const [isRequesting, setIsRequesting] = useState(true);
const [nextPageToken, setNextPageToken] = useState<string>("");
const sortedMemos = memoList.value
.sort((a, b) => dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix())
.sort((a, b) =>
memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0
? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
: dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
)
.sort((a, b) => Number(b.pinned) - Number(a.pinned));
useEffect(() => {
@ -78,6 +82,9 @@ const UserProfile = () => {
tagSearch.push(`"${filter.value}"`);
}
}
if (memoFilterStore.orderByTimeAsc && memoFilterStore.filters.length > 0) {
filters.push(`order_by_time_asc == true`);
}
if (contentSearch.length > 0) {
filters.push(`content_search == [${contentSearch.join(", ")}]`);
}

4
web/src/store/v1/memoFilter.ts
View File

@ -20,14 +20,16 @@ export const getMemoFilterKey = (filter: MemoFilter) => `${filter.factor}:${filt
interface State {
filters: MemoFilter[];
orderByTimeAsc: boolean;
}
export const useMemoFilterStore = create(
combine(((): State => ({ filters: [] }))(), (set, get) => ({
combine(((): State => ({ filters: [], orderByTimeAsc: false }))(), (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: uniqBy([...state.filters, filter], getMemoFilterKey) })),
removeFilter: (filterFn: (f: MemoFilter) => boolean) => set((state) => ({ filters: state.filters.filter((f) => !filterFn(f)) })),
setOrderByTimeAsc: (orderByTimeAsc: boolean) => set({ orderByTimeAsc }),
})),
);