diff --git a/web/src/components/MemoFilters.tsx b/web/src/components/MemoFilters.tsx index 70fd6f39..639b43b1 100644 --- a/web/src/components/MemoFilters.tsx +++ b/web/src/components/MemoFilters.tsx @@ -40,6 +40,15 @@ const MemoFilters = () => { ))} +
memoFilterStore.setOrderByTimeAsc(!memoFilterStore.orderByTimeAsc)} + > + + + {memoFilterStore.orderByTimeAsc ? "Asc" : "Desc"} + +
); diff --git a/web/src/pages/Archived.tsx b/web/src/pages/Archived.tsx index cc28c7b3..034de908 100644 --- a/web/src/pages/Archived.tsx +++ b/web/src/pages/Archived.tsx @@ -26,7 +26,11 @@ const Archived = () => { const [nextPageToken, setNextPageToken] = useState(""); 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(", ")}]`); } diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx index 5863577b..20cc9f80 100644 --- a/web/src/pages/Explore.tsx +++ b/web/src/pages/Explore.tsx @@ -23,7 +23,11 @@ const Explore = () => { const memoFilterStore = useMemoFilterStore(); const [isRequesting, setIsRequesting] = useState(true); const [nextPageToken, setNextPageToken] = useState(""); - 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(", ")}]`); } diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index a6aca6a8..7bb494e2 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -27,7 +27,11 @@ const Home = () => { const [nextPageToken, setNextPageToken] = useState(""); 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(", ")}]`); } diff --git a/web/src/pages/UserProfile.tsx b/web/src/pages/UserProfile.tsx index 7b698fd3..4649388e 100644 --- a/web/src/pages/UserProfile.tsx +++ b/web/src/pages/UserProfile.tsx @@ -28,7 +28,11 @@ const UserProfile = () => { const [isRequesting, setIsRequesting] = useState(true); const [nextPageToken, setNextPageToken] = useState(""); 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(", ")}]`); } diff --git a/web/src/store/v1/memoFilter.ts b/web/src/store/v1/memoFilter.ts index dbf30705..b3183969 100644 --- a/web/src/store/v1/memoFilter.ts +++ b/web/src/store/v1/memoFilter.ts @@ -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 }), })), );