Add validate spin wheel button; Refactor code

Author: anees-asghar

src/app/(authenticated)/home/page.tsx

@@ -14,11 +14,11 @@ import authOptions from "@/app/api/auth/[...nextauth]/authOptions";
 import { UserService } from "@/services/UserService";
 import { isCompany, isToday } from "@/utils/utils";
 import UserSignOut from "@/components/UserSignOut";
+import { SPIN_WHEEL_MAXIMUM } from "@/constants";
 
 const N_SESSION_TILES = 3;
 const N_COMPANY_TILES = 6;
 const N_SPEAKER_TILES = 6;
-const SPIN_WHEEL_MAXIMUM = 10;
 
 export default async function Home() {
   const session = (await getServerSession(authOptions))!;
@@ -58,7 +58,10 @@ export default async function Home() {
       {/* Spin the Wheel Section */}
       {showSpinWheelSection && (
         <ProgressBar
-          current={spinWheelData?.signatures.length ?? 0}
+          current={Math.min(
+            spinWheelData?.signatures.length ?? 0,
+            SPIN_WHEEL_MAXIMUM
+          )}
           maximum={SPIN_WHEEL_MAXIMUM}
           title="Companies Visited Today"
           className="pb-2"

src/app/(authenticated)/spin/page.tsx

@@ -4,13 +4,12 @@ import { CompanyTile } from "@/components/company";
 import GridList from "@/components/GridList";
 import ProgressBar from "@/components/ProgressBar";
 import UserSignOut from "@/components/UserSignOut";
+import { SPIN_WHEEL_MAXIMUM } from "@/constants";
 import { CompanyService } from "@/services/CompanyService";
 import { UserService } from "@/services/UserService";
 import { isCompany, isToday } from "@/utils/utils";
 import { getServerSession } from "next-auth";
 
-const SPIN_WHEEL_MAXIMUM = 10;
-
 export default async function Spin() {
   const session = (await getServerSession(authOptions))!;
   const user = await UserService.getMe(session.cannonToken);
@@ -39,7 +38,8 @@ export default async function Spin() {
     spinWheelData?.signatures
       .sort((a, b) => a.date.localeCompare(b.date))
       .map((s) => companyMap.get(s.companyId))
-      .filter((c) => c !== undefined) ?? [];
+      .filter((c) => c !== undefined)
+      .slice(0, SPIN_WHEEL_MAXIMUM) ?? [];
 
   return (
     <div className="container mx-auto">

src/app/(authenticated)/users/[id]/ConnectButton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { UserPlus } from "lucide-react";
+import { ProfileButtonProps } from ".";
+
+export default function ConnectButton({
+  cannonToken,
+  user,
+  otherUser,
+}: ProfileButtonProps) {
+  if (user.id === otherUser.id) return <></>;
+
+  return (
+    <button className="button-primary text-sm">
+      <UserPlus size={16} />
+      Connect
+    </button>
+  );
+}

src/app/(authenticated)/users/[id]/DemoteButton.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { UserService } from "@/services/UserService";
+import { isCompany, isMember } from "@/utils/utils";
+import { ArrowBigDown } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { ProfileButtonProps } from ".";
+
+export default function DemoteButton({
+  cannonToken,
+  user,
+  otherUser,
+}: ProfileButtonProps) {
+  const router = useRouter();
+
+  if (
+    user.id === otherUser.id ||
+    !isMember(user.role) ||
+    (!isCompany(otherUser.role) && !isMember(otherUser.role))
+  )
+    return <></>;
+
+  async function handleDemote() {
+    if (await UserService.demote(cannonToken, otherUser.id)) router.refresh();
+    else alert("Failed to demote!");
+  }
+
+  return (
+    <button className="button-secondary text-sm" onClick={handleDemote}>
+      <ArrowBigDown size={20} />
+      Demote
+    </button>
+  );
+}

src/app/(authenticated)/users/[id]/buttons/ConnectButton.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { isCompany, isMember, isToday } from "@/utils/utils";
+import { FerrisWheel } from "lucide-react";
+import { ProfileButtonProps } from ".";
+import { UserService } from "@/services/UserService";
+import { useRouter } from "next/navigation";
+import { SPIN_WHEEL_MAXIMUM } from "@/constants";
+
+export default function ValidateSpinButton({
+  cannonToken,
+  user,
+  otherUser,
+}: ProfileButtonProps) {
+  const router = useRouter();
+
+  if (
+    user.id === otherUser.id ||
+    !isMember(user.role) ||
+    isCompany(otherUser.role)
+  ) {
+    return <></>;
+  }
+
+  const spinWheelData = otherUser.signatures?.find(
+    (s) => s.edition === process.env.EVENT_EDITION && isToday(s.day)
+  );
+
+  const isEligible =
+    (spinWheelData &&
+      !spinWheelData.redeemed &&
+      spinWheelData.signatures.length >= SPIN_WHEEL_MAXIMUM) ??
+    false;
+
+  async function validateSpinWheel() {
+    const success = await UserService.validateSpinWheel(
+      cannonToken,
+      otherUser.id
+    );
+    if (success) router.refresh();
+    else alert("Could not validate!");
+  }
+
+  return (
+    <button
+      className="button-tertiary text-sm"
+      disabled={!isEligible}
+      onClick={validateSpinWheel}
+    >
+      <FerrisWheel size={16} />
+      Validate Spin the Wheel
+    </button>
+  );
+}

src/app/(authenticated)/users/[id]/buttons/DemoteButton.tsx

@@ -0,0 +1,19 @@
+import ConnectButton from "./ConnectButton";
+import DemoteButton from "./DemoteButton";
+import ValidateSpinButton from "./ValidateSpinButton";
+
+export interface ProfileButtonProps {
+  cannonToken: string;
+  user: User;
+  otherUser: User;
+}
+
+export default function ProfileButtons(buttonProps: ProfileButtonProps) {
+  return (
+    <div className="px-4 pb-2 flex flex-col lg:flex-row gap-2 [&>button]:w-full [&>button]:lg:w-60 text-sm">
+      <ConnectButton {...buttonProps} />
+      <ValidateSpinButton {...buttonProps} />
+      <DemoteButton {...buttonProps} />
+    </div>
+  );
+}

src/app/(authenticated)/users/[id]/buttons/ValidateSpinButton.tsx

@@ -8,11 +8,10 @@ import ProfileInformations from "@/components/user/ProfileInformations";
 import { AchievementService } from "@/services/AchievementService";
 import { UserService } from "@/services/UserService";
 import { isCompany, isMember } from "@/utils/utils";
-import { UserPlus } from "lucide-react";
 import { getServerSession } from "next-auth";
-import DemoteButton from "./DemoteButton";
 import UserSignOut from "@/components/UserSignOut";
 import BlankPageWithMessage from "@/components/BlankPageMessage";
+import ProfileButtons from "./buttons";
 
 interface UserProfileParams {
   id: string;
@@ -34,8 +33,6 @@ export default async function UserProfile({
     return <BlankPageWithMessage message="User not found!" />;
   }
 
-  const isMyself = userProfile.id === user.id;
-
   const achievements = await AchievementService.getAchievements();
   const userAchievements = achievements?.filter((a) =>
     a.users?.includes(userProfile.id)
@@ -44,21 +41,12 @@ export default async function UserProfile({
   return (
     <div className="container mx-auto">
       <ProfileHeader user={userProfile} />
-      {!isMyself && (
-        <div className="px-4 py-2">
-          <button className="button-primary text-sm w-full mt-2">
-            <UserPlus size={16} />
-            Connect
-          </button>
-          {isMember(user.role) &&
-            (isMember(userProfile.role) || isCompany(userProfile.role)) && (
-              <DemoteButton
-                cannonToken={session.cannonToken}
-                userId={userProfile.id}
-              />
-            )}
-        </div>
-      )}
+
+      <ProfileButtons
+        cannonToken={session.cannonToken}
+        user={user}
+        otherUser={userProfile}
+      />
 
       {/* Notes */}
       {/* <List title="Notes">

src/app/(authenticated)/users/[id]/buttons/index.tsx

@@ -0,0 +1 @@
+export const SPIN_WHEEL_MAXIMUM = 10;