General adjustments

package.json

@@ -19,6 +19,7 @@
     "react": "^18",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18",
+    "react-toastify": "^10.0.5",
     "sass": "^1.77.8",
     "zod": "^3.23.8"
   },

src/app/activations/game/play/page.tsx

@@ -1,15 +1,18 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Element } from '@/components/Game';
 import { DragDropContext, Droppable, Draggable, resetServerContext } from 'react-beautiful-dnd';
 import './game.scss';
 import { InitialElements } from '@/data/elementsData';
 import { IElement } from '../../../../../types.game';
+import { useRealtime } from '@superviz/react-sdk';
 
 export default function Jogo() {
   const [elements, setElements] = useState<IElement[]>([]);
   const USERDATA_KEY = process.env.NEXT_PUBLIC_USERDATA_KEY as string;
 
+  // const { subscribe } = useRealtime('game');
+
   const getSavedElements = () => {
     let existingSave = localStorage.getItem("saved_game");
     if (existingSave) {
@@ -32,7 +35,7 @@ export default function Jogo() {
       body: JSON.stringify({
         elementA: elementA.name,
         elementB: elementB.name,
-        email: localStorage.getItem(USERDATA_KEY)
+        email: JSON.parse(localStorage.getItem(USERDATA_KEY) as string),
       })
     }).then(res => res.json()).then(data => {
       const newElements = [...elements];
@@ -83,9 +86,15 @@ export default function Jogo() {
     )
   }
 
+  const handleGameUpdate = useCallback((message: any) => {
+
+  }, []);
+
   resetServerContext();
 
   useEffect(() => {
+    // subscribe("new.element", handleGameUpdate);
+
     getSavedElements();
   }, []);
 

src/app/activations/hackathon/page.tsx

@@ -9,13 +9,7 @@ export default function HackathonPage() {
         height="100%"
         allowFullScreen
         sandbox='allow-scripts allow-same-origin allow-forms'
-      >
-        <p>
-          <a href="https://superviz.com/">
-            Oops... algo deu errado!
-          </a>
-        </p>
-      </iframe>
+      ></iframe>
     </div>
   )
 }

src/app/activations/layout.tsx

@@ -9,7 +9,11 @@ export default function ActivationLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const isGame = window.location.pathname.includes('game');
+
+  let isGame = false;
+  if (typeof window !== 'undefined') {
+    isGame = window?.location.pathname.includes('game') ?? false;
+  };
 
   return (
     <div className={`flex flex-col w-screen h-screen mobileBg`}>

src/app/api/game/route.ts

@@ -120,21 +120,18 @@ export async function POST(request: NextRequest): Promise<NextResponse> {
     // TODO: Add point to user
     const totalPoints = 4 // TODO: pegar quantidade de pontos
 
-    await publishEvent('default', 'new.element', {
-      name: 'activation.game.update',
-      data: {
-        userId: user.id,
-        points: totalPoints
-      }
-    })
-
-    await publishEvent('game', 'new.element', {
-      name: 'new.element',
-      data: {
+    await Promise.all([
+      publishEvent('default', 'activation.game.update', {
+        user: user,
+        points: totalPoints,
+        element: element
+      }),
+
+      publishEvent('game', 'new.element', {
         element,
         userName: user.name
-      }
-    })
+      })
+    ])
 
     return NextResponse.json({
       element: element,

src/app/api/user/activation/route.ts

@@ -3,11 +3,9 @@ import { CreateActivationDTO } from "./dto/create-activation.dto";
 import { db } from '@/lib/prisma'
 import { validateRequestBody } from "@/lib/zod/validate-body";
 import { z } from "zod";
+import { publishEvent } from '@/app/services/publishEvent';
 
-// TODO: Verificar necessidade deste endpoint
 export async function POST(request: NextRequest): Promise<NextResponse> {
-  const DEVELOPER_KEY = process.env.NEXT_PUBLIC_DEVELOPER_KEY as string;
-
   try {
     const body = await request.text()
     const parsedBody = validateRequestBody<z.infer<typeof CreateActivationDTO>>(CreateActivationDTO, body)
@@ -59,18 +57,9 @@ export async function POST(request: NextRequest): Promise<NextResponse> {
       }
     })
 
-    await fetch('https://nodeapi.superviz.com/realtime/superviz_dashboard/default/publish', {
-      method: 'POST',
-      headers: {
-        'apiKey': DEVELOPER_KEY,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        name: 'activation',
-        data: {
-          activation,
-        }
-      })
+    await publishEvent('default', 'activation.start', {
+      userId: user.id,
+      activation: activation.name,
     })
 
     return NextResponse.json(

src/app/dashboard/page.tsx

@@ -8,6 +8,7 @@ import Activations from "@/components/Activations";
 import UsersDashboard from "@/components/UsersDashboard";
 import { activations } from "@/data/activationsData";
 import { Realtime, SuperVizRoomProvider } from "@superviz/react-sdk";
+import { ToastContainer } from 'react-toastify';
 
 const DEVELOPER_KEY = process.env.NEXT_PUBLIC_DEVELOPER_KEY as string
 const DASHBOARD_GROUP_ID = process.env.NEXT_PUBLIC_DASHBOARD_GROUP_ID as string
@@ -61,6 +62,7 @@ export default function Dashboard() {
           </div>
         </div>
       </div>
+      <ToastContainer />
     </SuperVizRoomProvider>
   );
 };

src/app/globals.css

@@ -12,6 +12,10 @@ html, body {
   color: white;
 }
 
+.Toastify__progress-bar-theme--dark {
+  background: linear-gradient(90deg, #4cd964, #5ac8fa, #007aff, #34aadc, #6210CC, #ff2d55) !important;
+}
+
 @layer components {
   .activations {
     .pinpoint{

src/app/page.tsx

@@ -4,36 +4,36 @@ import React from 'react';
 import Image from "next/image";
 import fenderImg from '../../public/fender-lego.png'
 import Button from "@/components/Button";
-import {useRouter} from "next/navigation";
+import { useRouter } from "next/navigation";
 
 const USERDATA_KEY = process.env.NEXT_PUBLIC_USERDATA_KEY as string;
 
 export default function App() {
   const router = useRouter()
-  
+
   const handleParticipate = () => {
     const userData = localStorage.getItem(USERDATA_KEY)
-    if(userData !== null) {
+    if (userData !== null) {
       router.push('/userPage')
     } else {
       router.push('/enter')
     }
   }
-  
+
   return (
     <div className='flex flex-col w-full h-dvh px-8 py-6'>
       <div className="relative flex flex-col justify-between z-10 h-full">
         <div className="flex flex-col items-center">
-          <Image src="./logo-sm.svg" width={109} height={80} alt="Logo Superviz"/>
+          <Image src="./logo-sm.svg" width={109} height={80} alt="Logo Superviz" />
           <h1 className="mt-6 text-[64px]/[70px] font-black text-center">
             Ganhe um LEGO<span className="text-3xl align-top">® </span>
             da Fender<span className="text-3xl align-top">®</span>
           </h1>
         </div>
-        <Button text="Participar" onClick={handleParticipate} type="button"/>
-          
+        <Button text="Participar" onClick={handleParticipate} type="button" />
+
       </div>
-      <Image src={fenderImg} alt="Imagem de um Lego da Fender"  className="z-0 absolute top-28 left-0" />
+      <Image src={fenderImg} alt="Imagem de um Lego da Fender" className="z-0 absolute top-28 left-0" />
     </div>
   );
 };