Join Jam warnings

src/components/themes/theme-slaughter.tsx

@@ -2,16 +2,17 @@
 
 import React, { useState, useEffect } from "react";
 import { getCookie } from "@/helpers/cookie";
-import { getCurrentJam,ActiveJamResponse } from "@/helpers/jam";
+import { getCurrentJam, hasJoinedCurrentJam, ActiveJamResponse } from "@/helpers/jam";
 
 export default function ThemeSlaughter() {   
 
   const [randomTheme, setRandomTheme] = useState(null);
   const [votedThemes, setVotedThemes] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [token, setToken] = useState(null); // Store token after fetching it on the client
+  const [token, setToken] = useState(null); 
+  const [hasJoined, setHasJoined] = useState<boolean>(false);
   const [activeJamResponse, setActiveJam] = useState<ActiveJamResponse | null>(null);
-  const [phaseLoading, setPhaseLoading] = useState(true); // Loading state for fetching phase
+  const [phaseLoading, setPhaseLoading] = useState(true);
 
   // Fetch token on the client side
   useEffect(() => {
@@ -155,11 +156,40 @@ export default function ThemeSlaughter() {
     }
   }, [token, activeJamResponse]);
 
-  // Render loading state while fetching phase
-  if (phaseLoading) {
+
+  useEffect(() => {
+      const init = async () => {
+        const joined = await hasJoinedCurrentJam();
+        setHasJoined(joined);
+        setLoading(false);
+      };
+  
+      init();
+    }, []);
+  
+  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>
+    );
+  }
+
   // Render message if not in Theme Slaughter phase
   if (activeJamResponse?.phase !== "Survival") {
     return (

src/components/themes/theme-suggest.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from "react";
 import { getCookie } from "@/helpers/cookie";
-import { getCurrentJam, ActiveJamResponse } from "@/helpers/jam";
+import { getCurrentJam, hasJoinedCurrentJam , ActiveJamResponse } from "@/helpers/jam";
 
 export default function ThemeSuggestions() {
   const [suggestion, setSuggestion] = useState("");
@@ -11,6 +11,7 @@ export default function ThemeSuggestions() {
   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
 
@@ -138,11 +139,40 @@ export default function ThemeSuggestions() {
     }
   };
 
+  useEffect(() => {
+    const init = async () => {
+      const joined = await hasJoinedCurrentJam();
+      setHasJoined(joined);
+      setLoading(false);
+    };
+
+    init();
+  }, []);
+
   // Render loading state while fetching phase
-  if (phaseLoading) {
+  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>
+    );
+  }
+
   const token = getCookie("token");
 
   if (!token) {

src/components/themes/theme-vote.tsx

@@ -2,12 +2,13 @@
 
 import React, { useState, useEffect } from "react";
 import { getCookie } from "@/helpers/cookie";
-import { getCurrentJam, ActiveJamResponse } from "@/helpers/jam";
+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");
 
@@ -127,12 +128,41 @@ export default function VotingPage() {
     }
   };
 
-  // Render loading state while fetching phase
-  if (phaseLoading) {
+  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 Voting phase
+  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">

src/helpers/jam.ts

@@ -53,6 +53,7 @@ export async function joinJam(jamId: number) {
         userSlug: getCookie("user"),
       }),
       method: "POST",
+      credentials: 'include',
       headers: {
         "Content-Type": "application/json",
         authorization: `Bearer ${getCookie("token")}`,
@@ -71,3 +72,24 @@ export async function joinJam(jamId: number) {
     return false;
   }
 }
+
+export async function hasJoinedCurrentJam(): Promise<boolean> {
+  try {
+    const response = await fetch(
+      process.env.NEXT_PUBLIC_MODE === "PROD"
+        ? "https://d2jam.com/api/v1/participation"
+        : "http://localhost:3005/api/v1/participation",
+      {
+        credentials: 'include',
+        headers: {
+          Authorization: `Bearer ${getCookie("token")}`,
+        },
+      }
+    );
+
+    return response.ok;
+  } catch (error) {
+    console.error("Error checking jam participation:", error);
+    return false;
+  }
+}