Implement spin the wheel section/page

Author: anees-asghar

.env.local

@@ -1,3 +1,5 @@
+EVENT_EDITION = mock-edition-id
+
 WEBAPP_URL = http://localhost:3000
 
 CANNON_URL = https://cannon-staging-dev.sinfo.org

src/app/(authenticated)/companies/[id]/connections/page.tsx

@@ -1,3 +1,4 @@
+import BlankPageWithMessage from "@/components/BlankPageMessage";
 import List from "@/components/List";
 import { UserTile } from "@/components/user/UserTile";
 import { CompanyService } from "@/services/CompanyService";
@@ -16,7 +17,7 @@ export default async function CompanyConnections({
   const connections = await CompanyService.getConnections(companyID);
 
   if (!connections) {
-    return <div>Company connections not found</div>;
+    return <BlankPageWithMessage message="Company connections not found!" />;
   }
 
   return (

src/app/(authenticated)/companies/[id]/page.tsx

@@ -14,6 +14,7 @@ import EventDayButton from "@/components/EventDayButton";
 import { Scan } from "lucide-react";
 import Link from "next/link";
 import { SocialNetwork } from "@/components/SocialNetwork";
+import BlankPageWithMessage from "@/components/BlankPageMessage";
 
 interface CompanyParams {
   id: string;
@@ -27,17 +28,17 @@ export default async function Company({ params }: { params: CompanyParams }) {
   const company = await CompanyService.getCompany(companyID);
 
   if (!company) {
-    return <div>Company not found</div>;
+    return <BlankPageWithMessage message="Company not found!" />;
   }
 
   const companySessions = company.sessions?.sort((a, b) =>
-    a.date.localeCompare(b.date),
+    a.date.localeCompare(b.date)
   );
   const companyMembers = company.members?.sort((a, b) =>
-    a.name.localeCompare(b.name),
+    a.name.localeCompare(b.name)
   );
   const companyStands = company.stands?.sort((a, b) =>
-    a.date.localeCompare(b.date),
+    a.date.localeCompare(b.date)
   );
   const hereToday = isHereToday(company);
 

src/app/(authenticated)/companies/[id]/promote/page.tsx

@@ -2,6 +2,7 @@ import authOptions from "@/app/api/auth/[...nextauth]/authOptions";
 import { CompanyService } from "@/services/CompanyService";
 import { getServerSession } from "next-auth";
 import CompanyPromoteScanner from "./CompanyPromoteScanner";
+import BlankPageWithMessage from "@/components/BlankPageMessage";
 
 interface CompanyPromoteParams {
   id: string;
@@ -17,7 +18,7 @@ export default async function CompanyPromote({
   const company = await CompanyService.getCompany(companyID);
 
   if (!company) {
-    return <div>Company not found</div>;
+    return <BlankPageWithMessage message="Company not found!" />;
   }
 
   const session = await getServerSession(authOptions);

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

@@ -1,11 +1,12 @@
 import { CompanyService } from "@/services/CompanyService";
 import CompaniesList from "./CompaniesList";
+import BlankPageWithMessage from "@/components/BlankPageMessage";
 
 export default async function Companies() {
   let companies = await CompanyService.getCompanies();
 
   if (!companies) {
-    return <div>Failed to load companies</div>;
+    return <BlankPageWithMessage message="No companies found!" />;
   }
 
   // Sort companies by name

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

@@ -7,36 +7,72 @@ import { SessionTile } from "@/components/session";
 import ListCard from "@/components/ListCard";
 import List from "@/components/List";
 import GridList from "@/components/GridList";
+import ProgressBar from "@/components/ProgressBar";
+import Link from "next/link";
+import { getServerSession } from "next-auth";
+import authOptions from "@/app/api/auth/[...nextauth]/authOptions";
+import { UserService } from "@/services/UserService";
+import { isCompany, isToday } from "@/utils/utils";
+import UserSignOut from "@/components/UserSignOut";
 
 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))!;
+  const user = await UserService.getMe(session.cannonToken);
+  if (!user) return <UserSignOut />;
+
   const eventSessions = await SessionService.getSessions();
   const companies = await CompanyService.getCompanies();
   const speakers = await SpeakerService.getSpeakers();
 
   // choose upcoming sessions
-  let upcomingSessions: SINFOSession[] = eventSessions
+  const upcomingSessions: SINFOSession[] = eventSessions
     ? eventSessions
         .filter((s) => new Date(s.date) >= new Date())
         .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
         .slice(0, N_SESSION_TILES)
     : [];
 
   // choose random companies
-  let highlightedCompanies: Company[] = companies
+  const highlightedCompanies: Company[] = companies
     ? companies.sort(() => Math.random() - 0.5).slice(0, N_COMPANY_TILES)
     : [];
 
   // choose random speakers
-  let highlightedSpeakers: Speaker[] = speakers
+  const highlightedSpeakers: Speaker[] = speakers
     ? speakers.sort(() => Math.random() - 0.5).slice(0, N_SPEAKER_TILES)
     : [];
 
+  const spinWheelData = user.signatures?.find(
+    (s) => s.edition === process.env.EVENT_EDITION && isToday(s.day)
+  );
+  const showSpinWheelSection =
+    !isCompany(user.role) && !spinWheelData?.redeemed;
+
   return (
     <div className="container mx-auto">
+      {/* Spin the Wheel Section */}
+      {showSpinWheelSection && (
+        <ProgressBar
+          current={spinWheelData?.signatures.length ?? 0}
+          maximum={SPIN_WHEEL_MAXIMUM}
+          title="Companies Visited Today"
+          className="pb-2"
+        >
+          <div className="text-xs text-gray-600">
+            Visit {SPIN_WHEEL_MAXIMUM} companies for a chance to spin the wheel
+            and win exciting prizes!&nbsp;
+            <Link href={"/spin"} className="text-link">
+              See more
+            </Link>
+          </div>
+        </ProgressBar>
+      )}
+
       {/* Upcoming Sessions */}
       <List title="Next Up" link="/schedule?day=today" linkText="See all">
         {upcomingSessions.length > 0 ? (
@@ -45,6 +81,7 @@ export default async function Home() {
           <ListCard title="Nothing to show" />
         )}
       </List>
+
       {/* Highlighted Companies */}
       <GridList
         title="Companies"
@@ -60,6 +97,7 @@ export default async function Home() {
           <ListCard title="Nothing to show" />
         )}
       </GridList>
+
       {/* Highlighted Speakers */}
       <GridList title="Speakers" link="/speakers" linkText="See all" scrollable>
         {highlightedSpeakers.length > 0 ? (

src/app/(authenticated)/loading.tsx

@@ -1,7 +1,5 @@
+import BlankPageWithMessage from "@/components/BlankPageMessage";
+
 export default function Loading() {
-  return (
-    <div className="h-full flex items-center justify-center text-gray-800">
-      Loading...
-    </div>
-  );
+  <BlankPageWithMessage message="Spinning up some magic..." />;
 }

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

@@ -10,12 +10,13 @@ import { getServerSession } from "next-auth";
 import PrizeSessions from "./PrizeSessions";
 import MessageCard from "@/components/MessageCard";
 import DailyPrizesTable from "./DailyPrizesTable";
+import BlankPageWithMessage from "@/components/BlankPageMessage";
 
 export default async function Prizes() {
   const prizes = await PrizeService.getPrizes();
 
   if (!prizes) {
-    return <div>Prizes not found.</div>;
+    return <BlankPageWithMessage message="Prizes not found!" />;
   }
 
   const session = await getServerSession(authOptions);
@@ -84,7 +85,7 @@ export default async function Prizes() {
             <PrizeTile prize={sessionPrize} />
             <PrizeSessions
               sessions={sinfoSessions.filter((s) =>
-                sessionPrize.sessions?.includes(s.id),
+                sessionPrize.sessions?.includes(s.id)
               )}
             />
           </div>

src/app/(authenticated)/profile/achievements/page.tsx

@@ -1,16 +1,17 @@
 import authOptions from "@/app/api/auth/[...nextauth]/authOptions";
+import BlankPageWithMessage from "@/components/BlankPageMessage";
 import GridList from "@/components/GridList";
 import AchievementTile from "@/components/user/AchievementTile";
 import { AchievementService } from "@/services/AchievementService";
 import { UserService } from "@/services/UserService";
-import { humanizeAchivementKind } from "@/utils/utils";
+import { formatAchievementKind } from "@/utils/utils";
 import { getServerSession } from "next-auth";
 
 export default async function Achievements() {
   const achievements = await AchievementService.getAchievements();
 
   if (!achievements) {
-    return <div>Achievements not found.</div>;
+    return <BlankPageWithMessage message="No achievements found." />;
   }
 
   const session = await getServerSession(authOptions);
@@ -40,7 +41,7 @@ export default async function Achievements() {
         </span>
       </div>
       {sortedKinds.map((k) => (
-        <GridList key={k} title={humanizeAchivementKind(k)}>
+        <GridList key={k} title={formatAchievementKind(k)}>
           {achievementsByKind[k].slice(0, 30).map((a) => (
             <AchievementTile
               key={a.id}

src/app/(authenticated)/profile/edit/page.tsx

@@ -3,14 +3,12 @@ import { UserService } from "@/services/UserService";
 import { getServerSession } from "next-auth";
 import EditProfileForm from "./EditProfileForm";
 import { redirect } from "next/navigation";
+import UserSignOut from "@/components/UserSignOut";
 
 export default async function EditProfile() {
   const session = (await getServerSession(authOptions))!;
-  const user: User | null = await UserService.getMe(session.cannonToken);
-
-  if (!user) {
-    return <div>Profile not found</div>;
-  }
+  const user = await UserService.getMe(session.cannonToken);
+  if (!user) return <UserSignOut />;
 
   async function updateUser(newUser: User) {
     "use server";