diff --git a/src/components/blog/PostSortingSelect.tsx b/src/components/blog/PostSortingSelect.tsx
index e236f4d..cce1b64 100644
--- a/src/components/blog/PostSortingSelect.tsx
+++ b/src/components/blog/PostSortingSelect.tsx
@@ -4,11 +4,11 @@ import Check from "~/components/icons/Check";
import UpDownArrows from "~/components/icons/UpDownArrows";
const sorting = [
- { val: "Newest" },
- { val: "Oldest" },
- { val: "Most Liked" },
- { val: "Most Read" },
- { val: "Most Comments" }
+ { val: "newest", label: "Newest" },
+ { val: "oldest", label: "Oldest" },
+ { val: "most_liked", label: "Most Liked" },
+ { val: "most_read", label: "Most Read" },
+ { val: "most_comments", label: "Most Comments" }
];
export interface PostSortingSelectProps {}
@@ -23,14 +23,14 @@ export default function PostSortingSelect(props: PostSortingSelectProps) {
const currentFilters = () => searchParams.filter || null;
createEffect(() => {
- let newRoute = location.pathname + "?sort=" + selected().val.toLowerCase();
+ let newRoute = location.pathname + "?sort=" + selected().val;
if (currentFilters()) {
newRoute += "&filter=" + currentFilters();
}
navigate(newRoute);
});
- const handleSelect = (sort: { val: string }) => {
+ const handleSelect = (sort: { val: string; label: string }) => {
setSelected(sort);
setIsOpen(false);
};
@@ -42,7 +42,7 @@ export default function PostSortingSelect(props: PostSortingSelectProps) {
onClick={() => setIsOpen(!isOpen())}
class="focus-visible:border-peach focus-visible:ring-offset-peach bg-surface0 focus-visible:ring-opacity-75 relative w-full cursor-default rounded-lg py-2 pr-10 pl-3 text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:text-sm"
>
-
{selected().val}
+
{selected().label}
- {sort.val}
+ {sort.label}
diff --git a/src/routes/blog/index.tsx b/src/routes/blog/index.tsx
index 862ee9c..9561dd1 100644
--- a/src/routes/blog/index.tsx
+++ b/src/routes/blog/index.tsx
@@ -14,7 +14,13 @@ export default function BlogIndex() {
const sort = () => searchParams.sort || "newest";
const filters = () => searchParams.filter || "";
- const data = createAsync(() => api.blog.getPosts.query());
+ // Pass filters and sortBy to server query
+ const data = createAsync(() =>
+ api.blog.getPosts.query({
+ filters: filters(),
+ sortBy: sort() as any // Will be validated by Zod schema
+ })
+ );
return (
<>
@@ -51,8 +57,6 @@ export default function BlogIndex() {