Fix empty sticky post buffer

src/app/create-post/page.tsx

@@ -2,7 +2,14 @@
 
 import Editor from "@/components/editor";
 import { getCookie, hasCookie } from "@/helpers/cookie";
-import { Avatar, Button, Form, Input, Spacer } from "@nextui-org/react";
+import {
+  Avatar,
+  Button,
+  Checkbox,
+  Form,
+  Input,
+  Spacer,
+} from "@nextui-org/react";
 import { LoaderCircle } from "lucide-react";
 import { redirect } from "next/navigation";
 import { ReactNode, useEffect, useState } from "react";
@@ -10,6 +17,7 @@ import { toast } from "react-toastify";
 import sanitizeHtml from "sanitize-html";
 import Select, { MultiValue, StylesConfig } from "react-select";
 import { useTheme } from "next-themes";
+import { UserType } from "@/types/UserType";
 
 export default function CreatePostPage() {
   const [title, setTitle] = useState("");
@@ -31,6 +39,8 @@ export default function CreatePostPage() {
     }[]
   >();
   const { theme } = useTheme();
+  const [user, setUser] = useState<UserType>();
+  const [sticky, setSticky] = useState(false);
 
   useEffect(() => {
     setMounted(true);
@@ -46,7 +56,8 @@ export default function CreatePostPage() {
         }
       );
 
-      const user = await response.json();
+      const localuser = await response.json();
+      setUser(localuser);
 
       const tagResponse = await fetch(
         process.env.NEXT_PUBLIC_MODE === "PROD"
@@ -63,7 +74,7 @@ export default function CreatePostPage() {
         }[] = [];
 
         for (const tag of await tagResponse.json()) {
-          if (tag.modOnly && !user.mod) {
+          if (tag.modOnly && !localuser.mod) {
             continue;
           }
           newoptions.push({
@@ -90,7 +101,6 @@ export default function CreatePostPage() {
         }
 
         setOptions(newoptions);
-        setSelectedTags(newoptions.filter((tag) => tag.isFixed));
       }
     };
     load();
@@ -211,8 +221,14 @@ export default function CreatePostPage() {
               body: JSON.stringify({
                 title: title,
                 content: sanitizedHtml,
+                sticky,
                 username: getCookie("user"),
-                tags,
+                tags: [
+                  ...tags,
+                  ...(options
+                    ? options.filter((tag) => tag.isFixed).map((tag) => tag.id)
+                    : []),
+                ],
               }),
               method: "POST",
               headers: {
@@ -268,6 +284,15 @@ export default function CreatePostPage() {
           />
         )}
 
+        {user && user.mod && (
+          <div>
+            <Spacer />
+            <Checkbox isSelected={sticky} onValueChange={setSticky}>
+              Sticky
+            </Checkbox>
+          </div>
+        )}
+
         <Spacer />
 
         <div className="flex gap-2">

src/app/p/[slug]/page.tsx

@@ -0,0 +1,425 @@
+"use client";
+
+import LikeButton from "@/components/posts/LikeButton";
+import { getCookie } from "@/helpers/cookie";
+import { PostType } from "@/types/PostType";
+import { TagType } from "@/types/TagType";
+import { UserType } from "@/types/UserType";
+import Link from "next/link";
+import {
+  Avatar,
+  Button,
+  Card,
+  CardBody,
+  Chip,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSection,
+  DropdownTrigger,
+  Spacer,
+} from "@nextui-org/react";
+import { formatDistance } from "date-fns";
+import {
+  Flag,
+  LoaderCircle,
+  MessageCircle,
+  MoreVertical,
+  Shield,
+  ShieldAlert,
+  ShieldX,
+  Star,
+  StarOff,
+  Trash,
+  X,
+} from "lucide-react";
+import { redirect, useParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+
+export default function PostPage() {
+  const [post, setPost] = useState<PostType>();
+  const { slug } = useParams();
+  const [reduceMotion, setReduceMotion] = useState<boolean>(false);
+  const [user, setUser] = useState<UserType>();
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReduceMotion(mediaQuery.matches);
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setReduceMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+
+  useEffect(() => {
+    const loadUserAndPosts = async () => {
+      setLoading(true);
+
+      // Fetch the user
+      const userResponse = await fetch(
+        process.env.NEXT_PUBLIC_MODE === "PROD"
+          ? `https://d2jam.com/api/v1/self?username=${getCookie("user")}`
+          : `http://localhost:3005/api/v1/self?username=${getCookie("user")}`,
+        {
+          headers: { authorization: `Bearer ${getCookie("token")}` },
+          credentials: "include",
+        }
+      );
+
+      if (userResponse.ok) {
+        const userData = await userResponse.json();
+        setUser(userData);
+
+        const postResponse = await fetch(
+          process.env.NEXT_PUBLIC_MODE === "PROD"
+            ? `https://d2jam.com/api/v1/post?slug=${slug}&user=${userData.slug}`
+            : `http://localhost:3005/api/v1/post?slug=${slug}&user=${userData.slug}`
+        );
+        setPost(await postResponse.json());
+        setLoading(false);
+      } else {
+        setUser(undefined);
+
+        const postResponse = await fetch(
+          process.env.NEXT_PUBLIC_MODE === "PROD"
+            ? `https://d2jam.com/api/v1/post?slug=${slug}`
+            : `http://localhost:3005/api/v1/post?slug=${slug}`
+        );
+        setPost(await postResponse.json());
+        setLoading(false);
+      }
+    };
+
+    loadUserAndPosts();
+  }, [slug]);
+
+  return (
+    <>
+      {loading ? (
+        <div className="flex justify-center p-6">
+          <LoaderCircle
+            className="animate-spin text-[#333] dark:text-[#999]"
+            size={24}
+          />
+        </div>
+      ) : (
+        <Card className="bg-opacity-60 !duration-250 !ease-linear !transition-all">
+          <CardBody className="p-5">
+            <div>
+              {post && (
+                <div>
+                  <Link href={`/p/${post.slug}`}>
+                    <p className="text-2xl">{post.title}</p>
+                  </Link>
+
+                  <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
+                    <p>By</p>
+                    <Link
+                      href={`/u/${post.author.slug}`}
+                      className="flex items-center gap-2"
+                    >
+                      <Avatar
+                        size="sm"
+                        className="w-6 h-6"
+                        src={post.author.profilePicture}
+                        classNames={{
+                          base: "bg-transparent",
+                        }}
+                      />
+                      <p>{post.author.name}</p>
+                    </Link>
+                    <p>
+                      {formatDistance(new Date(post.createdAt), new Date(), {
+                        addSuffix: true,
+                      })}
+                    </p>
+                  </div>
+
+                  <Spacer y={4} />
+
+                  <div
+                    className="prose dark:prose-invert !duration-250 !ease-linear !transition-all"
+                    dangerouslySetInnerHTML={{ __html: post.content }}
+                  />
+
+                  <Spacer y={4} />
+
+                  {post.tags.filter((tag) => tag.name != "D2Jam").length > 0 ? (
+                    <div className="flex gap-1">
+                      {post.tags
+                        .filter((tag) => tag.name != "D2Jam")
+                        .map((tag: TagType) => (
+                          <Link
+                            href="/"
+                            key={tag.id}
+                            className={`transition-all transform duration-500 ease-in-out ${
+                              !reduceMotion ? "hover:scale-110" : ""
+                            }`}
+                          >
+                            <Chip
+                              radius="sm"
+                              size="sm"
+                              className="!duration-250 !ease-linear !transition-all"
+                              variant="faded"
+                              avatar={
+                                tag.icon && (
+                                  <Avatar
+                                    src={tag.icon}
+                                    classNames={{ base: "bg-transparent" }}
+                                  />
+                                )
+                              }
+                            >
+                              {tag.name}
+                            </Chip>
+                          </Link>
+                        ))}
+                    </div>
+                  ) : (
+                    <></>
+                  )}
+
+                  {post.tags.length > 0 && <Spacer y={4} />}
+
+                  <div className="flex gap-3">
+                    <LikeButton post={post} />
+                    <Button
+                      size="sm"
+                      variant="bordered"
+                      onPress={() => {
+                        toast.warning("Comment functionality coming soon");
+                      }}
+                    >
+                      <MessageCircle size={16} /> {0}
+                    </Button>
+                    <Dropdown backdrop="opaque">
+                      <DropdownTrigger>
+                        <Button size="sm" variant="bordered" isIconOnly>
+                          <MoreVertical size={16} />
+                        </Button>
+                      </DropdownTrigger>
+                      <DropdownMenu className="text-[#333] dark:text-white">
+                        <DropdownSection
+                          showDivider={user?.mod}
+                          title="Actions"
+                        >
+                          <DropdownItem
+                            key="report"
+                            startContent={<Flag />}
+                            description="Report this post to moderators to handle"
+                            onPress={() => {
+                              toast.warning("Report functionality coming soon");
+                            }}
+                          >
+                            Create Report
+                          </DropdownItem>
+                          {user?.slug == post.author.slug ? (
+                            <DropdownItem
+                              key="delete"
+                              startContent={<Trash />}
+                              description="Delete your post"
+                              onPress={async () => {
+                                const response = await fetch(
+                                  process.env.NEXT_PUBLIC_MODE === "PROD"
+                                    ? "https://d2jam.com/api/v1/post"
+                                    : "http://localhost:3005/api/v1/post",
+                                  {
+                                    body: JSON.stringify({
+                                      postId: post.id,
+                                      username: getCookie("user"),
+                                    }),
+                                    method: "DELETE",
+                                    headers: {
+                                      "Content-Type": "application/json",
+                                      authorization: `Bearer ${getCookie(
+                                        "token"
+                                      )}`,
+                                    },
+                                    credentials: "include",
+                                  }
+                                );
+
+                                if (response.ok) {
+                                  toast.success("Deleted post");
+                                  redirect("/");
+                                } else {
+                                  toast.error("Error while deleting post");
+                                }
+                              }}
+                            >
+                              Delete
+                            </DropdownItem>
+                          ) : (
+                            <></>
+                          )}
+                        </DropdownSection>
+                        {user?.mod ? (
+                          <DropdownSection title="Mod Zone">
+                            <DropdownItem
+                              key="remove"
+                              startContent={<X />}
+                              description="Remove this post"
+                              onPress={async () => {
+                                const response = await fetch(
+                                  process.env.NEXT_PUBLIC_MODE === "PROD"
+                                    ? "https://d2jam.com/api/v1/post"
+                                    : "http://localhost:3005/api/v1/post",
+                                  {
+                                    body: JSON.stringify({
+                                      postId: post.id,
+                                      username: getCookie("user"),
+                                    }),
+                                    method: "DELETE",
+                                    headers: {
+                                      "Content-Type": "application/json",
+                                      authorization: `Bearer ${getCookie(
+                                        "token"
+                                      )}`,
+                                    },
+                                    credentials: "include",
+                                  }
+                                );
+
+                                if (response.ok) {
+                                  toast.success("Removed post");
+                                  redirect("/");
+                                } else {
+                                  toast.error("Error while removing post");
+                                }
+                              }}
+                            >
+                              Remove
+                            </DropdownItem>
+                            {post.sticky ? (
+                              <DropdownItem
+                                key="unsticky"
+                                startContent={<StarOff />}
+                                description="Unsticky post"
+                                onPress={async () => {
+                                  const response = await fetch(
+                                    process.env.NEXT_PUBLIC_MODE === "PROD"
+                                      ? "https://d2jam.com/api/v1/post/sticky"
+                                      : "http://localhost:3005/api/v1/post/sticky",
+                                    {
+                                      body: JSON.stringify({
+                                        postId: post.id,
+                                        sticky: false,
+                                        username: getCookie("user"),
+                                      }),
+                                      method: "POST",
+                                      headers: {
+                                        "Content-Type": "application/json",
+                                        authorization: `Bearer ${getCookie(
+                                          "token"
+                                        )}`,
+                                      },
+                                      credentials: "include",
+                                    }
+                                  );
+
+                                  if (response.ok) {
+                                    toast.success("Unsticked post");
+                                    redirect("/");
+                                  } else {
+                                    toast.error("Error while removing post");
+                                  }
+                                }}
+                              >
+                                Unsticky
+                              </DropdownItem>
+                            ) : (
+                              <DropdownItem
+                                key="sticky"
+                                startContent={<Star />}
+                                description="Sticky post"
+                                onPress={async () => {
+                                  const response = await fetch(
+                                    process.env.NEXT_PUBLIC_MODE === "PROD"
+                                      ? "https://d2jam.com/api/v1/post/sticky"
+                                      : "http://localhost:3005/api/v1/post/sticky",
+                                    {
+                                      body: JSON.stringify({
+                                        postId: post.id,
+                                        sticky: true,
+                                        username: getCookie("user"),
+                                      }),
+                                      method: "POST",
+                                      headers: {
+                                        "Content-Type": "application/json",
+                                        authorization: `Bearer ${getCookie(
+                                          "token"
+                                        )}`,
+                                      },
+                                      credentials: "include",
+                                    }
+                                  );
+
+                                  if (response.ok) {
+                                    toast.success("Unsticked post");
+                                    redirect("/");
+                                  } else {
+                                    toast.error("Error while removing post");
+                                  }
+                                }}
+                              >
+                                Sticky
+                              </DropdownItem>
+                            )}
+                            {user?.admin && !post.author.mod ? (
+                              <DropdownItem
+                                key="promote-mod"
+                                startContent={<Shield />}
+                                description="Promote user to Mod"
+                              >
+                                Appoint as mod
+                              </DropdownItem>
+                            ) : (
+                              <></>
+                            )}
+                            {user?.admin &&
+                            post.author.mod &&
+                            post.author.id !== user.id ? (
+                              <DropdownItem
+                                key="demote-mod"
+                                startContent={<ShieldX />}
+                                description="Demote user from Mod"
+                              >
+                                Remove as mod
+                              </DropdownItem>
+                            ) : (
+                              <></>
+                            )}
+                            {user?.admin && !post.author.admin ? (
+                              <DropdownItem
+                                key="promote-admin"
+                                startContent={<ShieldAlert />}
+                                description="Promote user to Admin"
+                              >
+                                Appoint as admin
+                              </DropdownItem>
+                            ) : (
+                              <></>
+                            )}
+                          </DropdownSection>
+                        ) : (
+                          <></>
+                        )}
+                      </DropdownMenu>
+                    </Dropdown>
+                  </div>
+                </div>
+              )}
+            </div>
+          </CardBody>
+        </Card>
+      )}
+    </>
+  );
+}

src/app/theme-slaughter/page.tsx

@@ -1,6 +1,5 @@
 import Timers from "@/components/timers";
 import Streams from "@/components/streams";
-import JamHeader from "@/components/jam-header";
 import ThemeSlaughter from "@/components/themes/theme-slaughter";
 
 export default async function Home() {
@@ -15,4 +14,4 @@ export default async function Home() {
       </div>
     </div>
   );
-}
+}

src/app/theme-suggestions/page.tsx

@@ -1,6 +1,5 @@
 import Timers from "@/components/timers";
 import Streams from "@/components/streams";
-import JamHeader from "@/components/jam-header";
 import ThemeSuggestions from "@/components/themes/theme-suggest";
 
 export default async function Home() {
@@ -15,4 +14,4 @@ export default async function Home() {
       </div>
     </div>
   );
-}
+}

src/app/theme-voting/page.tsx

@@ -1,6 +1,5 @@
 import Timers from "@/components/timers";
 import Streams from "@/components/streams";
-import JamHeader from "@/components/jam-header";
 import ThemeVoting from "@/components/themes/theme-vote";
 
 export default async function Home() {
@@ -15,4 +14,4 @@ export default async function Home() {
       </div>
     </div>
   );
-}
+}

src/components/jam-header/index.tsx

@@ -5,7 +5,8 @@ import { useEffect, useState } from "react";
 import { getCurrentJam, ActiveJamResponse } from "../../helpers/jam";
 
 export default function JamHeader() {
-  const [activeJamResponse, setActiveJamResponse] = useState<ActiveJamResponse | null>(null);
+  const [activeJamResponse, setActiveJamResponse] =
+    useState<ActiveJamResponse | null>(null);
   const [topTheme, setTopTheme] = useState<string | null>(null);
 
   // Fetch active jam details
@@ -40,15 +41,18 @@ export default function JamHeader() {
     fetchData();
   }, []);
 
-
-    // Helper function to get ordinal suffix
+  // Helper function to get ordinal suffix
   const getOrdinalSuffix = (day: number): string => {
     if (day > 3 && day < 21) return "th";
     switch (day % 10) {
-      case 1: return "st";
-      case 2: return "nd";
-      case 3: return "rd";
-      default: return "th";
+      case 1:
+        return "st";
+      case 2:
+        return "nd";
+      case 3:
+        return "rd";
+      default:
+        return "th";
     }
   };
 
@@ -69,34 +73,49 @@ export default function JamHeader() {
           </p>
         </div>
         <div className="p-4 px-6 font-bold">
-        <p>
-          {activeJamResponse?.jam ? (
-            <>
-              {new Date(activeJamResponse.jam.startTime).toLocaleDateString('en-US', {
-                month: 'long',
-              })} {new Date(activeJamResponse.jam.startTime).getDate()}
-              {getOrdinalSuffix(new Date(activeJamResponse.jam.startTime).getDate())}
-              {" - "}
-              {new Date(new Date(activeJamResponse.jam.startTime).getTime() + 
-                (activeJamResponse.jam.jammingHours * 60 * 60 * 1000)).toLocaleDateString('en-US', {
-                month: 'long',
-              })} {new Date(new Date(activeJamResponse.jam.startTime).getTime() + 
-                (activeJamResponse.jam.jammingHours * 60 * 60 * 1000)).getDate()}
-              {getOrdinalSuffix(new Date(new Date(activeJamResponse.jam.startTime).getTime() + 
-                (activeJamResponse.jam.jammingHours * 60 * 60 * 1000)).getDate())}
-            </>
-          ) : (
-            "Dates TBA"
-          )}
-        </p>
-      </div>
+          <p>
+            {activeJamResponse?.jam ? (
+              <>
+                {new Date(activeJamResponse.jam.startTime).toLocaleDateString(
+                  "en-US",
+                  {
+                    month: "long",
+                  }
+                )}{" "}
+                {new Date(activeJamResponse.jam.startTime).getDate()}
+                {getOrdinalSuffix(
+                  new Date(activeJamResponse.jam.startTime).getDate()
+                )}
+                {" - "}
+                {new Date(
+                  new Date(activeJamResponse.jam.startTime).getTime() +
+                    activeJamResponse.jam.jammingHours * 60 * 60 * 1000
+                ).toLocaleDateString("en-US", {
+                  month: "long",
+                })}{" "}
+                {new Date(
+                  new Date(activeJamResponse.jam.startTime).getTime() +
+                    activeJamResponse.jam.jammingHours * 60 * 60 * 1000
+                ).getDate()}
+                {getOrdinalSuffix(
+                  new Date(
+                    new Date(activeJamResponse.jam.startTime).getTime() +
+                      activeJamResponse.jam.jammingHours * 60 * 60 * 1000
+                  ).getDate()
+                )}
+              </>
+            ) : (
+              "Dates TBA"
+            )}
+          </p>
+        </div>
       </div>
 
       {/* Phase-Specific Display */}
       {activeJamResponse?.phase === "Suggestion" && (
         <div className="bg-gray-100 dark:bg-gray-800 p-4 text-center rounded-b-2x">
           <a
-            href="/theme-suggestions"
+            // href="/theme-suggestions"
             className="text-blue-300 dark:text-blue-500 hover:underline font-semibold"
           >
             Go to Theme Suggestion
@@ -107,7 +126,7 @@ export default function JamHeader() {
       {activeJamResponse?.phase === "Survival" && (
         <div className="bg-gray-100 dark:bg-gray-800 p-4 text-center rounded-b-2x">
           <a
-            href="/theme-slaughter"
+            // href="/theme-slaughter"
             className="text-blue-300 dark:text-blue-500 hover:underline font-semibold"
           >
             Go to Theme Survival
@@ -118,7 +137,7 @@ export default function JamHeader() {
       {activeJamResponse?.phase === "Voting" && (
         <div className="bg-gray-100 dark:bg-gray-800 p-4 text-center rounded-b-2x">
           <a
-            href="/theme-voting"
+            // href="/theme-voting"
             className="text-blue-300 dark:text-blue-500 hover:underline font-semibold"
           >
             Go to Theme Voting
@@ -139,7 +158,9 @@ export default function JamHeader() {
       {activeJamResponse?.phase === "Rating" && (
         <div className="bg-gray-100 dark:bg-gray-800 p-4 text-center rounded-b-2x">
           {topTheme ? (
-            <p className="text-xl font-bold text-blue-500">THEME: {topTheme} RESULTS</p>
+            <p className="text-xl font-bold text-blue-500">
+              THEME: {topTheme} RESULTS
+            </p>
           ) : (
             <p>No top-scoring theme available.</p>
           )}
@@ -147,4 +168,4 @@ export default function JamHeader() {
       )}
     </div>
   );
-}
+}

src/components/navbar/MobileNavbarUser.tsx

@@ -19,7 +19,7 @@ interface NavbarUserProps {
   isInJam?: boolean;
 }
 
-export default function MobileNavbarUser({
+export default async function MobileNavbarUser({
   user,
   jam,
   setIsInJam,
@@ -38,7 +38,7 @@ export default function MobileNavbarUser({
           />
         </DropdownTrigger>
         <DropdownMenu>
-          {jam && isInJam ? (
+          {jam && (await getCurrentJam())?.jam && isInJam ? (
             <DropdownItem
               key="create-game"
               href="/create-game"
@@ -47,7 +47,7 @@ export default function MobileNavbarUser({
               Create Game
             </DropdownItem>
           ) : null}
-          {jam && !isInJam ? (
+          {jam && (await getCurrentJam())?.jam && !isInJam ? (
             <DropdownItem
               key="join-event"
               className="text-black"
@@ -55,12 +55,12 @@ export default function MobileNavbarUser({
                 try {
                   const currentJam = await getCurrentJam();
 
-                  if (!currentJam) {
+                  if (!currentJam || !currentJam.jam) {
                     toast.error("There is no jam to join");
                     return;
                   }
 
-                  if (await joinJam(currentJam.id)) {
+                  if (await joinJam(currentJam.jam.id)) {
                     setIsInJam(true);
                   }
                 } catch (error) {

src/components/navbar/PCNavbar.tsx

@@ -24,7 +24,7 @@ import NextImage from "next/image";
 import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 import { getCookie, hasCookie } from "@/helpers/cookie";
-import { getCurrentJam, joinJam, ActiveJamResponse } from "@/helpers/jam";
+import { getCurrentJam, joinJam } from "@/helpers/jam";
 import { JamType } from "@/types/JamType";
 import { UserType } from "@/types/UserType";
 import NavbarUser from "./PCNavbarUser";

src/components/posts/PostCard.tsx

@@ -25,6 +25,8 @@ import {
   Shield,
   ShieldAlert,
   ShieldX,
+  Star,
+  StarOff,
   Trash,
   X,
 } from "lucide-react";
@@ -73,7 +75,9 @@ export default function PostCard({
           (minimized ? (
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-4">
-                <p>{post.title}</p>
+                <Link href={`/p/${post.slug}`}>
+                  <p>{post.title}</p>
+                </Link>
 
                 <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
                   <p>By</p>
@@ -110,7 +114,9 @@ export default function PostCard({
           ) : (
             <div>
               <div className="flex justify-between items-center">
-                <p className="text-2xl">{post.title}</p>
+                <Link href={`/p/${post.slug}`}>
+                  <p className="text-2xl">{post.title}</p>
+                </Link>
                 <Button
                   size="sm"
                   variant="light"
@@ -292,6 +298,81 @@ export default function PostCard({
                         >
                           Remove
                         </DropdownItem>
+                        {post.sticky ? (
+                          <DropdownItem
+                            key="unsticky"
+                            startContent={<StarOff />}
+                            description="Unsticky post"
+                            onPress={async () => {
+                              const response = await fetch(
+                                process.env.NEXT_PUBLIC_MODE === "PROD"
+                                  ? "https://d2jam.com/api/v1/post/sticky"
+                                  : "http://localhost:3005/api/v1/post/sticky",
+                                {
+                                  body: JSON.stringify({
+                                    postId: post.id,
+                                    sticky: false,
+                                    username: getCookie("user"),
+                                  }),
+                                  method: "POST",
+                                  headers: {
+                                    "Content-Type": "application/json",
+                                    authorization: `Bearer ${getCookie(
+                                      "token"
+                                    )}`,
+                                  },
+                                  credentials: "include",
+                                }
+                              );
+
+                              if (response.ok) {
+                                toast.success("Unsticked post");
+                                window.location.reload();
+                              } else {
+                                toast.error("Error while removing post");
+                              }
+                            }}
+                          >
+                            Unsticky
+                          </DropdownItem>
+                        ) : (
+                          <DropdownItem
+                            key="sticky"
+                            startContent={<Star />}
+                            description="Sticky post"
+                            onPress={async () => {
+                              const response = await fetch(
+                                process.env.NEXT_PUBLIC_MODE === "PROD"
+                                  ? "https://d2jam.com/api/v1/post/sticky"
+                                  : "http://localhost:3005/api/v1/post/sticky",
+                                {
+                                  body: JSON.stringify({
+                                    postId: post.id,
+                                    sticky: true,
+                                    username: getCookie("user"),
+                                  }),
+                                  method: "POST",
+                                  headers: {
+                                    "Content-Type": "application/json",
+                                    authorization: `Bearer ${getCookie(
+                                      "token"
+                                    )}`,
+                                  },
+                                  credentials: "include",
+                                }
+                              );
+
+                              if (response.ok) {
+                                toast.success("Stickied post");
+                                window.location.reload();
+                              } else {
+                                toast.error("Error while removing post");
+                              }
+                            }}
+                          >
+                            Sticky
+                          </DropdownItem>
+                        )}
                         {user?.admin && !post.author.mod ? (
                           <DropdownItem
                             key="promote-mod"
@@ -338,7 +419,9 @@ export default function PostCard({
           ))}
         {style == "compact" && (
           <div>
-            <p className="text-2xl">{post.title}</p>
+            <Link href={`/p/${post.slug}`}>
+              <p className="text-2xl">{post.title}</p>
+            </Link>
 
             <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
               <p>By</p>
@@ -366,7 +449,9 @@ export default function PostCard({
         )}
         {style == "ultra" && (
           <div className="flex items-center gap-4">
-            <p>{post.title}</p>
+            <Link href={`/p/${post.slug}`}>
+              <p>{post.title}</p>
+            </Link>
 
             <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
               <p>By</p>

src/components/posts/StickyPostCard.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Avatar, Card, CardBody } from "@nextui-org/react";
+import { formatDistance } from "date-fns";
+import Link from "next/link";
+import { PostType } from "@/types/PostType";
+import { Megaphone, NotebookText } from "lucide-react";
+
+export default function StickyPostCard({ post }: { post: PostType }) {
+  return (
+    <Card className="bg-opacity-60 !duration-250 !ease-linear !transition-all flex">
+      <CardBody className="p-5">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="flex gap-4 items-center text-blue-600 dark:text-blue-400 transition-all duration-250 ease-linear">
+              {post.tags.filter((tag) => tag.name === "Changelog").length >
+              0 ? (
+                <NotebookText />
+              ) : (
+                <Megaphone />
+              )}
+              <Link href={`/p/${post.slug}`}>
+                <p>{post.title}</p>
+              </Link>
+            </div>
+
+            <div className="flex items-center gap-3 text-xs text-default-500 pt-1">
+              <p>By</p>
+              <Link
+                href={`/u/${post.author.slug}`}
+                className="flex items-center gap-2"
+              >
+                <Avatar
+                  size="sm"
+                  className="w-6 h-6"
+                  src={post.author.profilePicture}
+                  classNames={{
+                    base: "bg-transparent",
+                  }}
+                />
+                <p>{post.author.name}</p>
+              </Link>
+              <p>
+                {formatDistance(new Date(post.createdAt), new Date(), {
+                  addSuffix: true,
+                })}
+              </p>
+            </div>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}

src/components/posts/index.tsx

@@ -42,9 +42,11 @@ import {
 import { PostTime } from "@/types/PostTimes";
 import { TagType } from "@/types/TagType";
 import { useTheme } from "next-themes";
+import StickyPostCard from "./StickyPostCard";
 
 export default function Posts() {
   const [posts, setPosts] = useState<PostType[]>();
+  const [stickyPosts, setStickyPosts] = useState<PostType[]>();
   const [sort, setSort] = useState<PostSort>("newest");
   const [time, setTime] = useState<PostTime>("all");
   const [style, setStyle] = useState<PostStyle>("cozy");
@@ -144,6 +146,31 @@ export default function Posts() {
               }`
         );
         setPosts(await postsResponse.json());
+
+        // Sticky posts
+        // Fetch posts with userSlug if user is available
+        const stickyPostsResponse = await fetch(
+          process.env.NEXT_PUBLIC_MODE === "PROD"
+            ? `https://d2jam.com/api/v1/posts?sort=${sort}&user=${
+                userData.slug
+              }&time=${time}&tags=${
+                tagRules
+                  ? Object.entries(tagRules)
+                      .map((key) => `${key}`)
+                      .join("_")
+                  : ""
+              }&sticky=true`
+            : `http://localhost:3005/api/v1/posts?sort=${sort}&user=${
+                userData.slug
+              }&time=${time}&tags=${
+                tagRules
+                  ? Object.entries(tagRules)
+                      .map((key) => `${key}`)
+                      .join("_")
+                  : ""
+              }&sticky=true`
+        );
+        setStickyPosts(await stickyPostsResponse.json());
         setLoading(false);
       } else {
         setUser(undefined);
@@ -167,6 +194,26 @@ export default function Posts() {
               }`
         );
         setPosts(await postsResponse.json());
+
+        // Fetch posts without userSlug if user is not available
+        const stickyPostsResponse = await fetch(
+          process.env.NEXT_PUBLIC_MODE === "PROD"
+            ? `https://d2jam.com/api/v1/posts?sort=${sort}&time=${time}&tags=${
+                tagRules
+                  ? Object.entries(tagRules)
+                      .map((key, value) => `${key}-${value}`)
+                      .join("_")
+                  : ""
+              }&sticky=true`
+            : `http://localhost:3005/api/v1/posts?sort=${sort}&time=${time}&tags=${
+                tagRules
+                  ? Object.entries(tagRules)
+                      .map((key, value) => `${key}-${value}`)
+                      .join("_")
+                  : ""
+              }&sticky=true`
+        );
+        setStickyPosts(await stickyPostsResponse.json());
         setLoading(false);
       }
     };
@@ -263,6 +310,24 @@ export default function Posts() {
 
   return (
     <div>
+      {loading ? (
+        <div className="flex justify-center p-6">
+          <LoaderCircle
+            className="animate-spin text-[#333] dark:text-[#999]"
+            size={24}
+          />
+        </div>
+      ) : (
+        stickyPosts &&
+        stickyPosts.length > 0 && (
+          <div className="flex flex-col gap-3 p-4">
+            {stickyPosts.map((post) => (
+              <StickyPostCard key={post.id} post={post} />
+            ))}
+          </div>
+        )
+      )}
+
       <div className="flex justify-between p-4 pb-0">
         <div className="flex gap-2">
           <Dropdown backdrop="opaque">

src/components/themes/theme-slaughter.tsx

@@ -1,279 +1,286 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
-import { getCookie } from "@/helpers/cookie";
-import { getCurrentJam, hasJoinedCurrentJam, ActiveJamResponse } from "@/helpers/jam";
+// import React, { useState, useEffect, useCallback } from "react";
+// import { getCookie } from "@/helpers/cookie";
+// import {
+//   getCurrentJam,
+//   hasJoinedCurrentJam,
+//   ActiveJamResponse,
+// } from "@/helpers/jam";
 
-export default function ThemeSlaughter() {   
+export default function ThemeSlaughter() {
+  // const [randomTheme, setRandomTheme] = useState(null);
+  // const [votedThemes, setVotedThemes] = useState([]);
+  // const [loading, setLoading] = useState(false);
+  // const [token, setToken] = useState<string | null>(null);
+  // const [hasJoined, setHasJoined] = useState<boolean>(false);
+  // const [activeJamResponse, setActiveJam] = useState<ActiveJamResponse | null>(
+  //   null
+  // );
+  // const [phaseLoading, setPhaseLoading] = useState(true);
 
-  const [randomTheme, setRandomTheme] = useState(null);
-  const [votedThemes, setVotedThemes] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [token, setToken] = useState(null); 
-  const [hasJoined, setHasJoined] = useState<boolean>(false);
-  const [activeJamResponse, setActiveJam] = useState<ActiveJamResponse | null>(null);
-  const [phaseLoading, setPhaseLoading] = useState(true);
+  // // Fetch token on the client side
+  // useEffect(() => {
+  //   const fetchedToken = getCookie("token");
+  //   setToken(fetchedToken);
+  // }, []);
 
-  // Fetch token on the client side
-  useEffect(() => {
-    const fetchedToken = getCookie("token");
-    setToken(fetchedToken);
-  }, []);
+  // // Fetch the current jam phase using helpers/jam
+  // useEffect(() => {
+  //   const fetchCurrentJamPhase = async () => {
+  //     try {
+  //       const activeJam = await getCurrentJam();
+  //       setActiveJam(activeJam); // Set active jam details
+  //     } catch (error) {
+  //       console.error("Error fetching current jam:", error);
+  //     } finally {
+  //       setPhaseLoading(false); // Stop loading when phase is fetched
+  //     }
+  //   };
 
-    // Fetch the current jam phase using helpers/jam
-    useEffect(() => {
-    const fetchCurrentJamPhase = async () => {
-      try {
-        const activeJam = await getCurrentJam();
-        setActiveJam(activeJam); // Set active jam details
-      } catch (error) {
-        console.error("Error fetching current jam:", error);
-      } finally {
-        setPhaseLoading(false); // Stop loading when phase is fetched
-      }
-    };
+  //   fetchCurrentJamPhase();
+  // }, []);
 
-    fetchCurrentJamPhase();
-  }, []);
+  // // Fetch a random theme
+  // const fetchRandomTheme = useCallback(async () => {
+  //   if (!token) return; // Wait until token is available
+  //   if (!activeJamResponse) return;
+  //   if (
+  //     activeJamResponse &&
+  //     activeJamResponse.jam &&
+  //     activeJamResponse.phase != "Survival"
+  //   ) {
+  //     return (
+  //       <div>
+  //         <h1>It&apos;s not Theme Survival phase.</h1>
+  //       </div>
+  //     );
+  //   }
 
+  //   try {
+  //     const response = await fetch(
+  //       process.env.NEXT_PUBLIC_MODE === "PROD"
+  //         ? "https://d2jam.com/api/v1/themes/random"
+  //         : "http://localhost:3005/api/v1/themes/random",
+  //       {
+  //         headers: { Authorization: `Bearer ${token}` },
+  //         credentials: "include",
+  //       }
+  //     );
+  //     if (response.ok) {
+  //       const data = await response.json();
+  //       setRandomTheme(data);
+  //     } else {
+  //       console.error("Failed to fetch random theme.");
+  //     }
+  //   } catch (error) {
+  //     console.error("Error fetching random theme:", error);
+  //   }
+  // }, [activeJamResponse, token]);
 
-  // Fetch a random theme
-  const fetchRandomTheme = async () => {
-    if (!token) return; // Wait until token is available
-    if( !activeJamResponse) return;
-    if(activeJamResponse && activeJamResponse.jam && activeJamResponse.phase != "Survival")
-        {
-            return (
-                <div>
-                <h1>It's not Theme Survival phase.</h1>
-                </div>
-            );
-        }
+  // // Fetch voted themes
+  // const fetchVotedThemes = useCallback(async () => {
+  //   if (!token) return; // Wait until token is available
 
-    try {
-      const response = await fetch(
-        process.env.NEXT_PUBLIC_MODE === "PROD"
-          ? "https://d2jam.com/api/v1/themes/random"
-          : "http://localhost:3005/api/v1/themes/random",
-        {
-          headers: { Authorization: `Bearer ${token}` },
-          credentials: "include",
-        }
-      );
-      if (response.ok) {
-        const data = await response.json();
-        setRandomTheme(data);
-      } else {
-        console.error("Failed to fetch random theme.");
-      }
-    } catch (error) {
-      console.error("Error fetching random theme:", error);
-    }
-  };
+  //   try {
+  //     const response = await fetch(
+  //       process.env.NEXT_PUBLIC_MODE === "PROD"
+  //         ? "https://d2jam.com/api/v1/themes/voteSlaughter"
+  //         : "http://localhost:3005/api/v1/themes/voteSlaughter",
+  //       {
+  //         headers: { Authorization: `Bearer ${token}` },
+  //         credentials: "include",
+  //       }
+  //     );
+  //     if (response.ok) {
+  //       const data = await response.json();
+  //       setVotedThemes(data);
+  //     } else {
+  //       console.error("Failed to fetch voted themes.");
+  //     }
+  //   } catch (error) {
+  //     console.error("Error fetching voted themes:", error);
+  //   }
+  // }, [token]);
 
-  // Fetch voted themes
-  const fetchVotedThemes = async () => {
-    if (!token) return; // Wait until token is available
+  // // Handle voting
+  // const handleVote = async (voteType: string) => {
+  //   if (!randomTheme) return;
 
-    try {
-      const response = await fetch(
-        process.env.NEXT_PUBLIC_MODE === "PROD"
-          ? "https://d2jam.com/api/v1/themes/voteSlaughter"
-          : "http://localhost:3005/api/v1/themes/voteSlaughter",
-        {
-          headers: { Authorization: `Bearer ${token}` },
-          credentials: "include",
-        }
-      );
-      if (response.ok) {
-        const data = await response.json();
-        setVotedThemes(data);
-      } else {
-        console.error("Failed to fetch voted themes.");
-      }
-    } catch (error) {
-      console.error("Error fetching voted themes:", error);
-    }
-  };
+  //   setLoading(true);
+  //   try {
+  //     const response = await fetch(
+  //       process.env.NEXT_PUBLIC_MODE === "PROD"
+  //         ? "https://d2jam.com/api/v1/themes/voteSlaughter"
+  //         : "http://localhost:3005/api/v1/themes/voteSlaughter",
+  //       {
+  //         method: "POST",
+  //         headers: {
+  //           "Content-Type": "application/json",
+  //           Authorization: `Bearer ${token}`,
+  //         },
+  //         credentials: "include",
+  //         body: JSON.stringify({
+  //           suggestionId: randomTheme.id,
+  //           voteType,
+  //         }),
+  //       }
+  //     );
 
-  // Handle voting
-  const handleVote = async (voteType) => {
-    if (!randomTheme) return;
+  //     if (response.ok) {
+  //       // Refresh data after voting
+  //       fetchRandomTheme();
+  //       fetchVotedThemes();
+  //     } else {
+  //       console.error("Failed to submit vote.");
+  //     }
+  //   } catch (error) {
+  //     console.error("Error submitting vote:", error);
+  //   } finally {
+  //     setLoading(false);
+  //   }
+  // };
 
-    setLoading(true);
-    try {
-      const response = await fetch(
-        process.env.NEXT_PUBLIC_MODE === "PROD"
-          ? "https://d2jam.com/api/v1/themes/voteSlaughter"
-          : "http://localhost:3005/api/v1/themes/voteSlaughter",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`,
-          },
-          credentials: "include",
-          body: JSON.stringify({
-            suggestionId: randomTheme.id,
-            voteType,
-          }),
-        }
-      );
+  // // Handle resetting a vote from the grid
+  // const handleResetVote = async (themeId: number) => {
+  //   try {
+  //     setRandomTheme(votedThemes.find((theme) => theme.id === themeId));
+  //     setVotedThemes((prev) =>
+  //       prev.map((theme) =>
+  //         theme.id === themeId ? { ...theme, slaughterScore: 0 } : theme
+  //       )
+  //     );
+  //   } catch (error) {
+  //     console.error("Error resetting vote:", error);
+  //   }
+  // };
 
-      if (response.ok) {
-        // Refresh data after voting
-        fetchRandomTheme();
-        fetchVotedThemes();
-      } else {
-        console.error("Failed to submit vote.");
-      }
-    } catch (error) {
-      console.error("Error submitting vote:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  // useEffect(() => {
+  //   if (token && activeJamResponse?.phase === "Survival") {
+  //     fetchRandomTheme();
+  //     fetchVotedThemes();
+  //   }
+  // }, [token, activeJamResponse, fetchRandomTheme, fetchVotedThemes]);
 
-  // Handle resetting a vote from the grid
-  const handleResetVote = async (themeId) => {
-    try {
-      setRandomTheme(votedThemes.find((theme) => theme.id === themeId));
-      setVotedThemes((prev) =>
-        prev.map((theme) =>
-          theme.id === themeId ? { ...theme, slaughterScore: 0 } : theme
-        )
-      );
-    } catch (error) {
-      console.error("Error resetting vote:", error);
-    }
-  };
+  // useEffect(() => {
+  //   const init = async () => {
+  //     const joined = await hasJoinedCurrentJam();
+  //     setHasJoined(joined);
+  //     setLoading(false);
+  //   };
 
+  //   init();
+  // }, []);
 
-  useEffect(() => {
-    if (token && activeJamResponse?.phase === "Survival") {
-      fetchRandomTheme();
-      fetchVotedThemes();
-    }
-  }, [token, activeJamResponse]);
+  // if (phaseLoading || loading) {
+  //   return <div>Loading...</div>;
+  // }
 
+  // if (!hasJoined) {
+  //   return (
+  //     <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
+  //       <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
+  //         Join the Jam First
+  //       </h1>
+  //       <p className="text-gray-600 dark:text-gray-400">
+  //         You need to join the current jam before you can join Theme Survival.
+  //       </p>
+  //       <button
+  //         onClick={() => joinJam(activeJamResponse?.jam?.id)}
+  //         className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+  //       >
+  //         Join Jam
+  //       </button>
+  //     </div>
+  //   );
+  // }
 
-  useEffect(() => {
-      const init = async () => {
-        const joined = await hasJoinedCurrentJam();
-        setHasJoined(joined);
-        setLoading(false);
-      };
-  
-      init();
-    }, []);
-  
-  if (phaseLoading || loading) {
-    return <div>Loading...</div>;
-  }  
+  // // Render message if not in Theme Slaughter phase
+  // if (activeJamResponse?.phase !== "Survival") {
+  //   return (
+  //     <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
+  //       <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
+  //         Not in Theme Slaughter Phase
+  //       </h1>
+  //       <p className="text-gray-600 dark:text-gray-400">
+  //         The current phase is{" "}
+  //         <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come
+  //         back during the Theme Slaughter phase.
+  //       </p>
+  //     </div>
+  //   );
+  // }
 
-  if (!hasJoined) {
-    return (
-      <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
-        <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
-          Join the Jam First
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          You need to join the current jam before you can join Theme Survival.
-        </p>
-        <button
-          onClick={() => joinJam(activeJamResponse?.jam?.id)}
-          className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
-        >
-          Join Jam
-        </button>
-      </div>
-    );
-  }
+  // const loggedIn = getCookie("token");
 
-  // Render message if not in Theme Slaughter phase
-  if (activeJamResponse?.phase !== "Survival") {
-    return (
-      <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
-        <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
-          Not in Theme Slaughter Phase
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          The current phase is <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come back during the Theme Slaughter phase.
-        </p>
-      </div>
-    );
-  }
+  // if (!loggedIn) {
+  //   return <div>Sign in to be able to join the Theme Survival</div>;
+  // }
 
-  const loggedIn = getCookie("token");
-  
-    if (!loggedIn) {
-      return (
-        <div>Sign in to be able to join the Theme Survival</div>
-      );
-    }
-  
+  // return (
+  //   <div className="flex h-screen">
+  //     {/* Left Side */}
+  //     <div className="w-1/2 p-6 bg-gray-100 dark:bg-gray-800 flex flex-col justify-start items-center">
+  //       {randomTheme ? (
+  //         <>
+  //           <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
+  //             {randomTheme.suggestion}
+  //           </h2>
+  //           <div className="flex gap-4">
+  //             <button
+  //               onClick={() => handleVote("YES")}
+  //               className="px-6 py-3 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600"
+  //               disabled={loading}
+  //             >
+  //               YES
+  //             </button>
+  //             <button
+  //               onClick={() => handleVote("NO")}
+  //               className="px-6 py-3 bg-red-500 text-white font-bold rounded-lg hover:bg-red-600"
+  //               disabled={loading}
+  //             >
+  //               NO
+  //             </button>
+  //             <button
+  //               onClick={() => handleVote("SKIP")}
+  //               className="px-6 py-3 bg-gray-500 text-white font-bold rounded-lg hover:bg-gray-600"
+  //               disabled={loading}
+  //             >
+  //               SKIP
+  //             </button>
+  //           </div>
+  //         </>
+  //       ) : (
+  //         <p className="text-gray-600 dark:text-gray-400">
+  //           No themes available.
+  //         </p>
+  //       )}
+  //     </div>
 
-  return (
-    <div className="flex h-screen">
-      {/* Left Side */}
-      <div className="w-1/2 p-6 bg-gray-100 dark:bg-gray-800 flex flex-col justify-start items-center">
-        {randomTheme ? (
-          <>
-            <h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
-              {randomTheme.suggestion}
-            </h2>
-            <div className="flex gap-4">
-            <button
-                onClick={() => handleVote("YES")}
-                className="px-6 py-3 bg-green-500 text-white font-bold rounded-lg hover:bg-green-600"
-                disabled={loading}
-              >
-                YES
-              </button>
-              <button
-                onClick={() => handleVote("NO")}
-                className="px-6 py-3 bg-red-500 text-white font-bold rounded-lg hover:bg-red-600"
-                disabled={loading}
-              >
-                NO
-              </button>
-              <button
-                onClick={() => handleVote("SKIP")}
-                className="px-6 py-3 bg-gray-500 text-white font-bold rounded-lg hover:bg-gray-600"
-                disabled={loading}
-              >
-                SKIP
-              </button>
-            </div>
-          </>
-        ) : (
-          <p className="text-gray-600 dark:text-gray-400">No themes available.</p>
-        )}
-      </div>
-
-      {/* Right Side */}
-      <div className="w-1/2 p-6 bg-white dark:bg-gray-900 overflow-y-auto">
-        <h3 className="text-xl font-bold text-gray-800 dark:text-white mb-4">
-          Your Votes
-        </h3>
-        <div className="grid grid-cols-4 gap-4">
-          {votedThemes.map((theme) => (
-            <div
-              key={theme.id}
-              onClick={() => handleResetVote(theme.id)}
-              className={`p-4 rounded-lg cursor-pointer ${
-                theme.slaughterScore > 0
-                  ? "bg-green-500 text-white"
-                  : theme.slaughterScore < 0
-                  ? "bg-red-500 text-white"
-                  : "bg-gray-300 text-black"
-              }`}
-            >
-              {theme.suggestion}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
+  //     {/* Right Side */}
+  //     <div className="w-1/2 p-6 bg-white dark:bg-gray-900 overflow-y-auto">
+  //       <h3 className="text-xl font-bold text-gray-800 dark:text-white mb-4">
+  //         Your Votes
+  //       </h3>
+  //       <div className="grid grid-cols-4 gap-4">
+  //         {votedThemes.map((theme) => (
+  //           <div
+  //             key={theme.id}
+  //             onClick={() => handleResetVote(theme.id)}
+  //             className={`p-4 rounded-lg cursor-pointer ${
+  //               theme.slaughterScore > 0
+  //                 ? "bg-green-500 text-white"
+  //                 : theme.slaughterScore < 0
+  //                 ? "bg-red-500 text-white"
+  //                 : "bg-gray-300 text-black"
+  //             }`}
+  //           >
+  //             {theme.suggestion}
+  //           </div>
+  //         ))}
+  //       </div>
+  //     </div>
+  //   </div>
+  // );
+  return <></>;
+}

src/components/themes/theme-suggest.tsx

@@ -1,271 +1,282 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
-import { getCookie } from "@/helpers/cookie";
-import { getCurrentJam, hasJoinedCurrentJam , ActiveJamResponse } from "@/helpers/jam";
+// import React, { useState, useEffect } from "react";
+// import { getCookie } from "@/helpers/cookie";
+// import {
+//   getCurrentJam,
+//   hasJoinedCurrentJam,
+//   ActiveJamResponse,
+// } from "@/helpers/jam";
 
 export default function ThemeSuggestions() {
-  const [suggestion, setSuggestion] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [successMessage, setSuccessMessage] = useState("");
-  const [errorMessage, setErrorMessage] = useState("");
-  const [userSuggestions, setUserSuggestions] = useState([]);
-  const [themeLimit, setThemeLimit] = useState(0);
-  const [hasJoined, setHasJoined] = useState<boolean>(false);
-  const [activeJamResponse, setActiveJamResponse] = useState<ActiveJamResponse | null>(null);
-  const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
+  // const [suggestion, setSuggestion] = useState("");
+  // const [loading, setLoading] = useState(false);
+  // const [successMessage, setSuccessMessage] = useState("");
+  // const [errorMessage, setErrorMessage] = useState("");
+  // const [userSuggestions, setUserSuggestions] = useState([]);
+  // const [themeLimit, setThemeLimit] = useState(0);
+  // const [hasJoined, setHasJoined] = useState<boolean>(false);
+  // const [activeJamResponse, setActiveJamResponse] =
+  //   useState<ActiveJamResponse | null>(null);
+  // const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
 
-  // Fetch the current jam phase using helpers/jam
-  useEffect(() => {
-    const fetchCurrentJamPhase = async () => {
-      try {
-        const activeJam = await getCurrentJam();
-        setActiveJamResponse(activeJam); // Set active jam details
-        if (activeJam?.jam) {
-          setThemeLimit(activeJam.jam.themePerUser || Infinity); // Set theme limit
-        }
-      } catch (error) {
-        console.error("Error fetching current jam:", error);
-      } finally {
-        setPhaseLoading(false); // Stop loading when phase is fetched
-      }
-    };
+  // // Fetch the current jam phase using helpers/jam
+  // useEffect(() => {
+  //   const fetchCurrentJamPhase = async () => {
+  //     try {
+  //       const activeJam = await getCurrentJam();
+  //       setActiveJamResponse(activeJam); // Set active jam details
+  //       if (activeJam?.jam) {
+  //         setThemeLimit(activeJam.jam.themePerUser || Infinity); // Set theme limit
+  //       }
+  //     } catch (error) {
+  //       console.error("Error fetching current jam:", error);
+  //     } finally {
+  //       setPhaseLoading(false); // Stop loading when phase is fetched
+  //     }
+  //   };
 
-    fetchCurrentJamPhase();
-  }, []);
+  //   fetchCurrentJamPhase();
+  // }, []);
 
-  // Fetch all suggestions for the logged-in user
-  const fetchSuggestions = async () => {
-    try {
-      const response = await fetch(
-        process.env.NEXT_PUBLIC_MODE === "PROD"
-          ? "https://d2jam.com/api/v1/themes/suggestion"
-          : "http://localhost:3005/api/v1/themes/suggestion",
-        {
-          headers: { Authorization: `Bearer ${getCookie("token")}` },
-          credentials: "include",
-        }
-      );
-      if (response.ok) {
-        const data = await response.json();
-        setUserSuggestions(data);
-      }
-    } catch (error) {
-      console.error("Error fetching suggestions:", error);
-    }
-  };
+  // // Fetch all suggestions for the logged-in user
+  // const fetchSuggestions = async () => {
+  //   try {
+  //     const response = await fetch(
+  //       process.env.NEXT_PUBLIC_MODE === "PROD"
+  //         ? "https://d2jam.com/api/v1/themes/suggestion"
+  //         : "http://localhost:3005/api/v1/themes/suggestion",
+  //       {
+  //         headers: { Authorization: `Bearer ${getCookie("token")}` },
+  //         credentials: "include",
+  //       }
+  //     );
+  //     if (response.ok) {
+  //       const data = await response.json();
+  //       setUserSuggestions(data);
+  //     }
+  //   } catch (error) {
+  //     console.error("Error fetching suggestions:", error);
+  //   }
+  // };
 
-  // Fetch suggestions only when phase is "Suggestion"
-  useEffect(() => {
-    if (activeJamResponse?.phase === "Suggestion") {
-      fetchSuggestions();
-    }
-  }, [activeJamResponse]);
+  // // Fetch suggestions only when phase is "Suggestion"
+  // useEffect(() => {
+  //   if (activeJamResponse?.phase === "Suggestion") {
+  //     fetchSuggestions();
+  //   }
+  // }, [activeJamResponse]);
 
-  // Handle form submission to add a new suggestion
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setSuccessMessage("");
-    setErrorMessage("");
+  // // Handle form submission to add a new suggestion
+  // const handleSubmit = async (e: React.FormEvent) => {
+  //   e.preventDefault();
+  //   setLoading(true);
+  //   setSuccessMessage("");
+  //   setErrorMessage("");
 
-    if (!suggestion.trim()) {
-      setErrorMessage("Suggestion cannot be empty.");
-      setLoading(false);
-      return;
-    }
+  //   if (!suggestion.trim()) {
+  //     setErrorMessage("Suggestion cannot be empty.");
+  //     setLoading(false);
+  //     return;
+  //   }
 
-    try {
-      const token = getCookie("token");
+  //   try {
+  //     const token = getCookie("token");
 
-      if (!token) {
-        throw new Error("User is not authenticated. Please log in.");
-      }
+  //     if (!token) {
+  //       throw new Error("User is not authenticated. Please log in.");
+  //     }
 
-      const response = await fetch(
-        process.env.NEXT_PUBLIC_MODE === "PROD"
-          ? "https://d2jam.com/api/v1/themes/suggestion"
-          : "http://localhost:3005/api/v1/themes/suggestion",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`,
-          },
-          credentials: "include",
-          body: JSON.stringify({ suggestionText: suggestion }),
-        }
-      );
+  //     const response = await fetch(
+  //       process.env.NEXT_PUBLIC_MODE === "PROD"
+  //         ? "https://d2jam.com/api/v1/themes/suggestion"
+  //         : "http://localhost:3005/api/v1/themes/suggestion",
+  //       {
+  //         method: "POST",
+  //         headers: {
+  //           "Content-Type": "application/json",
+  //           Authorization: `Bearer ${token}`,
+  //         },
+  //         credentials: "include",
+  //         body: JSON.stringify({ suggestionText: suggestion }),
+  //       }
+  //     );
 
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || "Failed to submit suggestion.");
-      }
+  //     if (!response.ok) {
+  //       const errorData = await response.json();
+  //       throw new Error(errorData.error || "Failed to submit suggestion.");
+  //     }
 
-      setSuccessMessage("Suggestion added successfully!");
-      setSuggestion(""); // Clear input field
-      fetchSuggestions(); // Refresh suggestions list
-    } catch (error: any) {
-      console.error("Error submitting suggestion:", error.message);
-      setErrorMessage(error.message || "An unexpected error occurred.");
-    } finally {
-      setLoading(false);
-    }
-  };
+  //     setSuccessMessage("Suggestion added successfully!");
+  //     setSuggestion(""); // Clear input field
+  //     fetchSuggestions(); // Refresh suggestions list
+  //   } catch (error) {
+  //     if (error instanceof Error) {
+  //       console.error("Error submitting suggestion:", error.message);
+  //       setErrorMessage(error.message || "An unexpected error occurred.");
+  //     } else {
+  //       console.error("Unknown error:", error);
+  //       setErrorMessage("An unexpected error occurred.");
+  //     }
+  //   } finally {
+  //     setLoading(false);
+  //   }
+  // };
 
-  // Handle deleting a suggestion
-  const handleDelete = async (id: number) => {
-    try {
-      const token = getCookie("token");
+  // // Handle deleting a suggestion
+  // const handleDelete = async (id: number) => {
+  //   try {
+  //     const token = getCookie("token");
 
-      const response = await fetch(
-        process.env.NEXT_PUBLIC_MODE === "PROD"
-          ? `https://d2jam.com/api/v1/themes/suggestion/${id}`
-          : `http://localhost:3005/api/v1/themes/suggestion/${id}`,
-        {
-          method: "DELETE",
-          headers: { Authorization: `Bearer ${token}` },
-          credentials: "include",
-        }
-      );
+  //     const response = await fetch(
+  //       process.env.NEXT_PUBLIC_MODE === "PROD"
+  //         ? `https://d2jam.com/api/v1/themes/suggestion/${id}`
+  //         : `http://localhost:3005/api/v1/themes/suggestion/${id}`,
+  //       {
+  //         method: "DELETE",
+  //         headers: { Authorization: `Bearer ${token}` },
+  //         credentials: "include",
+  //       }
+  //     );
 
-      if (!response.ok) {
-        throw new Error("Failed to delete suggestion.");
-      }
+  //     if (!response.ok) {
+  //       throw new Error("Failed to delete suggestion.");
+  //     }
 
-      fetchSuggestions(); // Refresh suggestions list
-    } catch (error) {
-      console.error("Error deleting suggestion:", error);
-    }
-  };
+  //     fetchSuggestions(); // Refresh suggestions list
+  //   } catch (error) {
+  //     console.error("Error deleting suggestion:", error);
+  //   }
+  // };
 
-  useEffect(() => {
-    const init = async () => {
-      const joined = await hasJoinedCurrentJam();
-      setHasJoined(joined);
-      setLoading(false);
-    };
+  // useEffect(() => {
+  //   const init = async () => {
+  //     const joined = await hasJoinedCurrentJam();
+  //     setHasJoined(joined);
+  //     setLoading(false);
+  //   };
 
-    init();
-  }, []);
+  //   init();
+  // }, []);
 
-  // Render loading state while fetching phase
-  if (phaseLoading || loading) {
-    return <div>Loading...</div>;
-  }
+  // // Render loading state while fetching phase
+  // if (phaseLoading || loading) {
+  //   return <div>Loading...</div>;
+  // }
 
-  if (!hasJoined) {
-    return (
-      <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
-        <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
-          Join the Jam First
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          You need to join the current jam before you can suggest themes.
-        </p>
-        <button
-          onClick={() => joinJam(activeJamResponse?.jam?.id)}
-          className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
-        >
-          Join Jam
-        </button>
-      </div>
-    );
-  }
+  // if (!hasJoined) {
+  //   return (
+  //     <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
+  //       <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
+  //         Join the Jam First
+  //       </h1>
+  //       <p className="text-gray-600 dark:text-gray-400">
+  //         You need to join the current jam before you can suggest themes.
+  //       </p>
+  //       <button
+  //         onClick={() => joinJam(activeJamResponse?.jam?.id)}
+  //         className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+  //       >
+  //         Join Jam
+  //       </button>
+  //     </div>
+  //   );
+  // }
 
-  const token = getCookie("token");
+  // const token = getCookie("token");
 
-  if (!token) {
-    return (
-      <div>Sign in to be able to suggest themes</div>
-    );
-  }
+  // if (!token) {
+  //   return <div>Sign in to be able to suggest themes</div>;
+  // }
 
-  // Render message if not in Suggestion phase
-  if (activeJamResponse?.phase !== "Suggestion") {
-    return (
-      <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
-        <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
-          Not in Suggestion Phase
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          The current phase is <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come back during the Suggestion phase.
-        </p>
-      </div>
-    );
-  }
+  // // Render message if not in Suggestion phase
+  // if (activeJamResponse?.phase !== "Suggestion") {
+  //   return (
+  //     <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
+  //       <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
+  //         Not in Suggestion Phase
+  //       </h1>
+  //       <p className="text-gray-600 dark:text-gray-400">
+  //         The current phase is{" "}
+  //         <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come
+  //         back during the Suggestion phase.
+  //       </p>
+  //     </div>
+  //   );
+  // }
 
-  return (
-    <div className="max-w-md mx-auto mt-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
-      <h2 className="text-xl font-bold text-gray-800 dark:text-white mb-4">
-        Submit Your Theme Suggestion
-      </h2>
+  // return (
+  //   <div className="max-w-md mx-auto mt-8 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
+  //     <h2 className="text-xl font-bold text-gray-800 dark:text-white mb-4">
+  //       Submit Your Theme Suggestion
+  //     </h2>
 
-      {/* Hide form if user has reached their limit */}
-      {userSuggestions.length < themeLimit ? (
-        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-          <textarea
-            className="w-full p-3 border rounded-lg focus:outline-none text-gray-600 focus:ring focus:ring-blue-300 dark:bg-gray-700 dark:text-white"
-            placeholder="Enter your theme suggestion..."
-            value={suggestion}
-            onChange={(e) => {
-              if (e.target.value.length <= 32) {
-                setSuggestion(e.target.value);
-              }
-            }}
-            rows={1}
-            maxLength={32} 
-          ></textarea>
-          {errorMessage && (
-            <p className="text-red-500 text-sm">{errorMessage}</p>
-          )}
-          {successMessage && (
-            <p className="text-green-500 text-sm">{successMessage}</p>
-          )}
-          <button
-            type="submit"
-            className={`w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 ${
-              loading ? "opacity-50 cursor-not-allowed" : ""
-            }`}
-            disabled={loading}
-          >
-            {loading ? "Submitting..." : "Submit Suggestion"}
-          </button>
-        </form>
-      ) : (
-        <p className="text-yellow-500 text-sm">
-          You've reached your theme suggestion limit for this jam!
-        </p>
-      )}
+  //     {/* Hide form if user has reached their limit */}
+  //     {userSuggestions.length < themeLimit ? (
+  //       <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+  //         <textarea
+  //           className="w-full p-3 border rounded-lg focus:outline-none text-gray-600 focus:ring focus:ring-blue-300 dark:bg-gray-700 dark:text-white"
+  //           placeholder="Enter your theme suggestion..."
+  //           value={suggestion}
+  //           onChange={(e) => {
+  //             if (e.target.value.length <= 32) {
+  //               setSuggestion(e.target.value);
+  //             }
+  //           }}
+  //           rows={1}
+  //           maxLength={32}
+  //         ></textarea>
+  //         {errorMessage && (
+  //           <p className="text-red-500 text-sm">{errorMessage}</p>
+  //         )}
+  //         {successMessage && (
+  //           <p className="text-green-500 text-sm">{successMessage}</p>
+  //         )}
+  //         <button
+  //           type="submit"
+  //           className={`w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 ${
+  //             loading ? "opacity-50 cursor-not-allowed" : ""
+  //           }`}
+  //           disabled={loading}
+  //         >
+  //           {loading ? "Submitting..." : "Submit Suggestion"}
+  //         </button>
+  //       </form>
+  //     ) : (
+  //       <p className="text-yellow-500 text-sm">
+  //         You&apos;ve reached your theme suggestion limit for this jam!
+  //       </p>
+  //     )}
 
-      {/* List of user's suggestions */}
-      <div className="mt-6">
-        <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">
-          Your Suggestions
-        </h3>
-        {userSuggestions.length > 0 ? (
-          <ul className="space-y-4">
-            {userSuggestions.map((suggestion) => (
-              <li
-                key={suggestion.id}
-                className="flex justify-between items-center text-gray-400 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-sm"
-              >
-                <span>{suggestion.suggestion}</span>
-                <button
-                  onClick={() => handleDelete(suggestion.id)}
-                  className="text-red-500 hover:text-red-700 font-semibold"
-                >
-                  Delete
-                </button>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <p className="text-gray-600 dark:text-gray-400">
-            You haven't submitted any suggestions yet.
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}
+  //     {/* List of user's suggestions */}
+  //     <div className="mt-6">
+  //       <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">
+  //         Your Suggestions
+  //       </h3>
+  //       {userSuggestions.length > 0 ? (
+  //         <ul className="space-y-4">
+  //           {userSuggestions.map((suggestion) => (
+  //             <li
+  //               key={suggestion.id}
+  //               className="flex justify-between items-center text-gray-400 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-sm"
+  //             >
+  //               <span>{suggestion.suggestion}</span>
+  //               <button
+  //                 onClick={() => handleDelete(suggestion.id)}
+  //                 className="text-red-500 hover:text-red-700 font-semibold"
+  //               >
+  //                 Delete
+  //               </button>
+  //             </li>
+  //           ))}
+  //         </ul>
+  //       ) : (
+  //         <p className="text-gray-600 dark:text-gray-400">
+  //           You haven&apos;t submitted any suggestions yet.
+  //         </p>
+  //       )}
+  //     </div>
+  //   </div>
+  // );
+  return <></>;
+}

src/components/themes/theme-vote.tsx

@@ -1,242 +1,245 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
-import { getCookie } from "@/helpers/cookie";
-import { getCurrentJam, hasJoinedCurrentJam , ActiveJamResponse } from "@/helpers/jam";
+// import React, { useState, useEffect } from "react";
+// import { getCookie } from "@/helpers/cookie";
+// import {
+//   getCurrentJam,
+//   hasJoinedCurrentJam,
+//   ActiveJamResponse,
+// } from "@/helpers/jam";
 
 export default function VotingPage() {
-  const [themes, setThemes] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [activeJamResponse, setActiveJamResponse] = useState<ActiveJamResponse | null>(null);
-  const [hasJoined, setHasJoined] = useState<boolean>(false);
-  const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
-  const token = getCookie("token");
+  return <></>;
+  // const [themes, setThemes] = useState([]);
+  // const [loading, setLoading] = useState(false);
+  // const [activeJamResponse, setActiveJamResponse] =
+  //   useState<ActiveJamResponse | null>(null);
+  // const [hasJoined, setHasJoined] = useState<boolean>(false);
+  // const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
+  // const token = getCookie("token");
 
-  // Fetch the current jam phase using helpers/jam
-  useEffect(() => {
-    const fetchCurrentJamPhase = async () => {
-      try {
-        const activeJam = await getCurrentJam();
-        setActiveJamResponse(activeJam); // Set active jam details
-      } catch (error) {
-        console.error("Error fetching current jam:", error);
-      } finally {
-        setPhaseLoading(false); // Stop loading when phase is fetched
-      }
-    };
+  // // Fetch the current jam phase using helpers/jam
+  // useEffect(() => {
+  //   const fetchCurrentJamPhase = async () => {
+  //     try {
+  //       const activeJam = await getCurrentJam();
+  //       setActiveJamResponse(activeJam); // Set active jam details
+  //     } catch (error) {
+  //       console.error("Error fetching current jam:", error);
+  //     } finally {
+  //       setPhaseLoading(false); // Stop loading when phase is fetched
+  //     }
+  //   };
 
-    fetchCurrentJamPhase();
-  }, []);
+  //   fetchCurrentJamPhase();
+  // }, []);
 
-  // Fetch top N themes with voting scores
-  const fetchThemes = async () => {
-    if (!token || !activeJamResponse) return;
-  
-    try {
-      const response = await fetch(
-        process.env.NEXT_PUBLIC_MODE === "PROD"
-          ? "https://d2jam.com/api/v1/themes/top-themes"
-          : "http://localhost:3005/api/v1/themes/top-themes",
-        {
-          headers: { Authorization: `Bearer ${token}` },
-          credentials: "include",
-        }
-      );
-      if (response.ok) {
-        const themes = await response.json();
-        console.log("Fetched themes:", themes); // Debug log
-        
-        // Fetch user's votes for these themes
-        const votesResponse = await fetch(
-          process.env.NEXT_PUBLIC_MODE === "PROD"
-            ? "https://d2jam.com/api/v1/themes/votes"
-            : "http://localhost:3005/api/v1/themes/votes",
-          {
-            headers: { Authorization: `Bearer ${token}` },
-            credentials: "include",
-          }
-        );
-  
-        if (votesResponse.ok) {
-          const votes = await votesResponse.json();
-          console.log("Fetched votes:", votes); // Debug log
-          
-          // Merge themes with user's votes
-          const themesWithVotes = themes.map(theme => {
-            const vote = votes.find(v => v.themeSuggestionId === theme.id);
-            console.log(`Theme ${theme.id} vote:`, vote); // Debug log
-            return {
-              ...theme,
-              votingScore: vote ? vote.votingScore : null
-            };
-          });
-          
-          console.log("Themes with votes:", themesWithVotes); // Debug log
-          setThemes(themesWithVotes);
-        }
-      } else {
-        console.error("Failed to fetch themes.");
-      }
-    } catch (error) {
-      console.error("Error fetching themes:", error);
-    }
-  };
+  // // Fetch themes only when phase is "Voting"
+  // useEffect(() => {
+  //   // Fetch top N themes with voting scores
+  //   async function fetchThemes() {
+  //     if (!token || !activeJamResponse) return;
 
-  
-  // Fetch themes only when phase is "Voting"
-  useEffect(() => {
-    if (activeJamResponse?.phase === "Voting") {
-      fetchThemes();
-    }
-  }, [activeJamResponse]);
+  //     try {
+  //       const response = await fetch(
+  //         process.env.NEXT_PUBLIC_MODE === "PROD"
+  //           ? "https://d2jam.com/api/v1/themes/top-themes"
+  //           : "http://localhost:3005/api/v1/themes/top-themes",
+  //         {
+  //           headers: { Authorization: `Bearer ${token}` },
+  //           credentials: "include",
+  //         }
+  //       );
+  //       if (response.ok) {
+  //         const themes = await response.json();
+  //         console.log("Fetched themes:", themes); // Debug log
 
-  // Handle voting
-  const handleVote = async (themeId, votingScore) => {
-    setLoading(true);
-    try {
-      const response = await fetch(
-        process.env.NEXT_PUBLIC_MODE === "PROD"
-          ? "https://d2jam.com/api/v1/themes/vote"
-          : "http://localhost:3005/api/v1/themes/vote",
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`,
-          },
-          credentials: "include",
-          body: JSON.stringify({ suggestionId: themeId, votingScore }),
-        }
-      );
-  
-      if (response.ok) {
-        // Just update the local state instead of re-fetching all themes
-        setThemes((prevThemes) =>
-          prevThemes.map((theme) =>
-            theme.id === themeId 
-              ? { ...theme, votingScore } 
-              : theme
-          )
-        );
-      } else {
-        console.error("Failed to submit vote.");
-      }
-    } catch (error) {
-      console.error("Error submitting vote:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
+  //         // Fetch user's votes for these themes
+  //         const votesResponse = await fetch(
+  //           process.env.NEXT_PUBLIC_MODE === "PROD"
+  //             ? "https://d2jam.com/api/v1/themes/votes"
+  //             : "http://localhost:3005/api/v1/themes/votes",
+  //           {
+  //             headers: { Authorization: `Bearer ${token}` },
+  //             credentials: "include",
+  //           }
+  //         );
 
-  useEffect(() => {
-    const init = async () => {
-      const joined = await hasJoinedCurrentJam();
-      setHasJoined(joined);
-      setLoading(false);
-    };
+  //         if (votesResponse.ok) {
+  //           const votes = await votesResponse.json();
+  //           console.log("Fetched votes:", votes); // Debug log
 
-    init();
-  }, []);
+  //           // Merge themes with user's votes
+  //           const themesWithVotes = themes.map((theme) => {
+  //             const vote = votes.find((v) => v.themeSuggestionId === theme.id);
+  //             console.log(`Theme ${theme.id} vote:`, vote); // Debug log
+  //             return {
+  //               ...theme,
+  //               votingScore: vote ? vote.votingScore : null,
+  //             };
+  //           });
 
+  //           console.log("Themes with votes:", themesWithVotes); // Debug log
+  //           setThemes(themesWithVotes);
+  //         }
+  //       } else {
+  //         console.error("Failed to fetch themes.");
+  //       }
+  //     } catch (error) {
+  //       console.error("Error fetching themes:", error);
+  //     }
+  //   }
 
-  if (phaseLoading || loading) {
-    return <div>Loading...</div>;
-  }
+  //   if (activeJamResponse?.phase === "Voting") {
+  //     fetchThemes();
+  //   }
+  // }, [activeJamResponse, token]);
 
-  if (!hasJoined) {
-    return (
-      <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
-        <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
-          Join the Jam First
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          You need to join the current jam before you can vote themes.
-        </p>
-        <button
-          onClick={() => joinJam(activeJamResponse?.jam?.id)}
-          className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
-        >
-          Join Jam
-        </button>
-      </div>
-    );
-  }
+  // // Handle voting
+  // const handleVote = async (themeId, votingScore) => {
+  //   setLoading(true);
+  //   try {
+  //     const response = await fetch(
+  //       process.env.NEXT_PUBLIC_MODE === "PROD"
+  //         ? "https://d2jam.com/api/v1/themes/vote"
+  //         : "http://localhost:3005/api/v1/themes/vote",
+  //       {
+  //         method: "POST",
+  //         headers: {
+  //           "Content-Type": "application/json",
+  //           Authorization: `Bearer ${token}`,
+  //         },
+  //         credentials: "include",
+  //         body: JSON.stringify({ suggestionId: themeId, votingScore }),
+  //       }
+  //     );
 
+  //     if (response.ok) {
+  //       // Just update the local state instead of re-fetching all themes
+  //       setThemes((prevThemes) =>
+  //         prevThemes.map((theme) =>
+  //           theme.id === themeId ? { ...theme, votingScore } : theme
+  //         )
+  //       );
+  //     } else {
+  //       console.error("Failed to submit vote.");
+  //     }
+  //   } catch (error) {
+  //     console.error("Error submitting vote:", error);
+  //   } finally {
+  //     setLoading(false);
+  //   }
+  // };
 
-  if (activeJamResponse?.phase !== "Voting") {
-    return (
-      <div className="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen">
-        <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
-          Not in Voting Phase
-        </h1>
-        <p className="text-gray-600 dark:text-gray-400">
-          The current phase is <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come back during the Voting phase.
-        </p>
-      </div>
-    );
-  }
+  // useEffect(() => {
+  //   const init = async () => {
+  //     const joined = await hasJoinedCurrentJam();
+  //     setHasJoined(joined);
+  //     setLoading(false);
+  //   };
 
-  const loggedIn = getCookie("token");
-    
-    if (!loggedIn) {
-    return (
-        <div>Sign in to be able to vote</div>
-    );
-    }
+  //   init();
+  // }, []);
 
-  return (
-    <div className="p-3 bg-gray-100 dark:bg-gray-800 min-h-screen">
-      <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
-        Voting Phase
-      </h1>
-      <div className="space-y-2">
-        {themes.map((theme) => (
-          <div
-            key={theme.id}
-            className="p-3 bg-white dark:bg-gray-900 rounded-lg shadow-md flex items-center"
-          >
-            {/* Voting Buttons */}
-            <div className="flex gap-1 mr-4">
-              <button
-                onClick={() => handleVote(theme.id, -1)}
-                className={`px-3 py-2 rounded-lg ${
-                  theme.votingScore === -1
-                    ? "bg-red-500 text-white"
-                    : "bg-gray-300 text-black hover:bg-red-500 hover:text-white"
-                }`}
-                disabled={loading}
-              >
-                -1
-              </button>
-              <button
-                onClick={() => handleVote(theme.id, 0)}
-                className={`px-3 py-2 rounded-lg ${
-                  theme.votingScore === 0
-                    ? "bg-gray-500 text-white"
-                    : "bg-gray-300 text-black hover:bg-gray-500 hover:text-white"
-                }`}
-                disabled={loading}
-              >
-                0
-              </button>
-              <button
-                onClick={() => handleVote(theme.id, +1)}
-                className={`px-3 py-2 rounded-lg ${
-                  theme.votingScore === +1
-                    ? "bg-green-500 text-white"
-                    : "bg-gray-300 text-black hover:bg-green-500 hover:text-white"
-                }`}
-                disabled={loading}
-              >
-                +1
-              </button>
-            </div>
+  // if (phaseLoading || loading) {
+  //   return <div>Loading...</div>;
+  // }
 
-            {/* Theme Suggestion */}
-            <div className="text-gray-800 dark:text-white">{theme.suggestion}</div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
+  // if (!hasJoined) {
+  //   return (
+  //     <div className="p-6 bg-gray-100 dark:bg-gray-800 min-h-screen">
+  //       <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-6">
+  //         Join the Jam First
+  //       </h1>
+  //       <p className="text-gray-600 dark:text-gray-400">
+  //         You need to join the current jam before you can vote themes.
+  //       </p>
+  //       <button
+  //         onClick={() => joinJam(activeJamResponse?.jam?.id)}
+  //         className="mt-4 px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
+  //       >
+  //         Join Jam
+  //       </button>
+  //     </div>
+  //   );
+  // }
+
+  // if (activeJamResponse?.phase !== "Voting") {
+  //   return (
+  //     <div className="p-4 bg-gray-100 dark:bg-gray-800 min-h-screen">
+  //       <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
+  //         Not in Voting Phase
+  //       </h1>
+  //       <p className="text-gray-600 dark:text-gray-400">
+  //         The current phase is{" "}
+  //         <strong>{activeJamResponse?.phase || "Unknown"}</strong>. Please come
+  //         back during the Voting phase.
+  //       </p>
+  //     </div>
+  //   );
+  // }
+
+  // const loggedIn = getCookie("token");
+
+  // if (!loggedIn) {
+  //   return <div>Sign in to be able to vote</div>;
+  // }
+
+  // return (
+  //   <div className="p-3 bg-gray-100 dark:bg-gray-800 min-h-screen">
+  //     <h1 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
+  //       Voting Phase
+  //     </h1>
+  //     <div className="space-y-2">
+  //       {themes.map((theme) => (
+  //         <div
+  //           key={theme.id}
+  //           className="p-3 bg-white dark:bg-gray-900 rounded-lg shadow-md flex items-center"
+  //         >
+  //           {/* Voting Buttons */}
+  //           <div className="flex gap-1 mr-4">
+  //             <button
+  //               onClick={() => handleVote(theme.id, -1)}
+  //               className={`px-3 py-2 rounded-lg ${
+  //                 theme.votingScore === -1
+  //                   ? "bg-red-500 text-white"
+  //                   : "bg-gray-300 text-black hover:bg-red-500 hover:text-white"
+  //               }`}
+  //               disabled={loading}
+  //             >
+  //               -1
+  //             </button>
+  //             <button
+  //               onClick={() => handleVote(theme.id, 0)}
+  //               className={`px-3 py-2 rounded-lg ${
+  //                 theme.votingScore === 0
+  //                   ? "bg-gray-500 text-white"
+  //                   : "bg-gray-300 text-black hover:bg-gray-500 hover:text-white"
+  //               }`}
+  //               disabled={loading}
+  //             >
+  //               0
+  //             </button>
+  //             <button
+  //               onClick={() => handleVote(theme.id, +1)}
+  //               className={`px-3 py-2 rounded-lg ${
+  //                 theme.votingScore === +1
+  //                   ? "bg-green-500 text-white"
+  //                   : "bg-gray-300 text-black hover:bg-green-500 hover:text-white"
+  //               }`}
+  //               disabled={loading}
+  //             >
+  //               +1
+  //             </button>
+  //           </div>
+
+  //           {/* Theme Suggestion */}
+  //           <div className="text-gray-800 dark:text-white">
+  //             {theme.suggestion}
+  //           </div>
+  //         </div>
+  //       ))}
+  //     </div>
+  //   </div>
+  // );
+}

src/components/timers/index.tsx

@@ -1,15 +1,12 @@
-"use client"
+"use client";
 import { Spacer } from "@nextui-org/react";
 import React, { useState, useEffect } from "react";
 import Timer from "./Timer";
 import { getCurrentJam, ActiveJamResponse } from "@/helpers/jam";
 
-
-
 export default function Timers() {
-
-  const [activeJamResponse, setActiveJamResponse] = useState<ActiveJamResponse | null>(null);
-  const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
+  const [activeJamResponse, setActiveJamResponse] =
+    useState<ActiveJamResponse | null>(null);
 
   // Fetch the current jam phase using helpers/jam
   useEffect(() => {
@@ -20,15 +17,13 @@ export default function Timers() {
       } catch (error) {
         console.error("Error fetching current jam:", error);
       } finally {
-        setPhaseLoading(false); // Stop loading when phase is fetched
       }
     };
 
     fetchCurrentJamPhase();
   }, []);
 
-  if(activeJamResponse && activeJamResponse.jam)
-  {
+  if (activeJamResponse && activeJamResponse.jam) {
     return (
       <div className="text-[#333] dark:text-white transition-color duration-250">
         <Timer
@@ -39,16 +34,13 @@ export default function Timers() {
         <p>Site under construction</p>
       </div>
     );
-  }
-  else
-  {
+  } else {
     return (
       <div className="text-[#333] dark:text-white transition-color duration-250">
         No upcoming jams
         <Spacer y={8} />
         <p>Site under construction</p>
       </div>
-    )
+    );
   }
-  
 }

src/helpers/jam.ts

@@ -18,28 +18,25 @@ export async function getJams(): Promise<JamType[]> {
 }
 
 export async function getCurrentJam(): Promise<ActiveJamResponse | null> {
-  
   try {
     const response = await fetch(
       process.env.NEXT_PUBLIC_MODE === "PROD"
-        ? "https://d2jam.com/api/v1/jams"
+        ? "https://d2jam.com/api/v1/jams/active"
         : "http://localhost:3005/api/v1/jams/active"
     );
 
     // Parse JSON response
-      const data = await response.json();
-
-      // Return the phase and jam details
-      return {
-        phase: data.phase,
-        jam: data.jam,
-      };
-
-    } catch (error) {
-      console.error("Error fetching active jam:", error);
-      return null;
-    }
+    const data = await response.json();
 
+    // Return the phase and jam details
+    return {
+      phase: data.phase,
+      jam: data.jam,
+    };
+  } catch (error) {
+    console.error("Error fetching active jam:", error);
+    return null;
+  }
 }
 
 export async function joinJam(jamId: number) {
@@ -53,7 +50,7 @@ export async function joinJam(jamId: number) {
         userSlug: getCookie("user"),
       }),
       method: "POST",
-      credentials: 'include',
+      credentials: "include",
       headers: {
         "Content-Type": "application/json",
         authorization: `Bearer ${getCookie("token")}`,
@@ -80,7 +77,7 @@ export async function hasJoinedCurrentJam(): Promise<boolean> {
         ? "https://d2jam.com/api/v1/participation"
         : "http://localhost:3005/api/v1/participation",
       {
-        credentials: 'include',
+        credentials: "include",
         headers: {
           Authorization: `Bearer ${getCookie("token")}`,
         },
@@ -92,4 +89,4 @@ export async function hasJoinedCurrentJam(): Promise<boolean> {
     console.error("Error checking jam participation:", error);
     return false;
   }
-}
+}

src/types/PostType.ts

@@ -3,7 +3,9 @@ import { UserType } from "./UserType";
 
 export interface PostType {
   id: number;
+  slug: string;
   title: string;
+  sticky: boolean;
   content: string;
   author: UserType;
   createdAt: Date;