From e5aa7c2a2ab5b36cba694dcfeee12f5928d30ed6 Mon Sep 17 00:00:00 2001
From: Ategon <benjamin@barbeau.net>
Date: Sat, 18 Jan 2025 13:31:28 -0500
Subject: [PATCH] Add post sorts
---
src/components/posts/index.tsx | 36 +++++++++++++++++++++++++++-------
src/types/PostSort.ts | 1 +
2 files changed, 30 insertions(+), 7 deletions(-)
create mode 100644 src/types/PostSort.ts
diff --git a/src/components/posts/index.tsx b/src/components/posts/index.tsx
index b0ed317..be038ee 100644
--- a/src/components/posts/index.tsx
+++ b/src/components/posts/index.tsx
@@ -3,31 +3,53 @@
import { useEffect, useState } from "react";
import PostCard from "./PostCard";
import { PostType } from "@/types/PostType";
-import { Button } from "@nextui-org/react";
+import {
+ Button,
+ Dropdown,
+ DropdownItem,
+ DropdownMenu,
+ DropdownTrigger,
+} from "@nextui-org/react";
+import { PostSort } from "@/types/PostSort";
export default function Posts() {
const [posts, setPosts] = useState<PostType[]>();
+ const [sort, setSort] = useState<PostSort>("newest");
useEffect(() => {
const fetchPosts = async () => {
const response = await fetch(
process.env.NEXT_PUBLIC_MODE === "PROD"
- ? "https://d2jam.com/api/v1/posts"
- : "http://localhost:3005/api/v1/posts"
+ ? `https://d2jam.com/api/v1/posts?sort=${sort}`
+ : `http://localhost:3005/api/v1/posts?sort=${sort}`
);
setPosts(await response.json());
};
fetchPosts();
- }, []);
+ }, [sort]);
return (
<div>
<div className="flex justify-between p-4 pb-0">
<div className="flex gap-2">
- <Button size="sm" className="text-xs" variant="faded">
- Newest
- </Button>
+ <Dropdown>
+ <DropdownTrigger>
+ <Button size="sm" className="text-xs" variant="faded">
+ {sort.charAt(0).toUpperCase() + sort.slice(1)}
+ </Button>
+ </DropdownTrigger>
+ <DropdownMenu
+ onAction={(key) => {
+ setSort(key as PostSort);
+ }}
+ className="text-black"
+ >
+ <DropdownItem key="newest">Newest</DropdownItem>
+ <DropdownItem key="top">Top</DropdownItem>
+ <DropdownItem key="oldest">Oldest</DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
<Button size="sm" className="text-xs" variant="faded">
All Tags
</Button>
diff --git a/src/types/PostSort.ts b/src/types/PostSort.ts
new file mode 100644
index 0000000..ac07621
--- /dev/null
+++ b/src/types/PostSort.ts
@@ -0,0 +1 @@
+export type PostSort = "newest" | "oldest";