From f0672b9bc1044adae80755cf7b3336164aafd4e7 Mon Sep 17 00:00:00 2001 From: shrt Date: Mon, 31 Mar 2025 13:54:54 +0200 Subject: [PATCH] new SSE system (downgraded, git add .git add .go with redis if productiongit add .git add .); implimented empty lobby deletion --- src/app/(routes)/lobby/[id]/page.tsx | 5 +- src/app/(routes)/lobby/page.tsx | 9 +- src/app/_components/lobby/lobby-provider.tsx | 57 ++++--- src/components/nav-link.tsx | 32 ---- src/components/navbar.tsx | 52 ++++++- src/lib/store/lobby-store.ts | 2 +- src/server/api/routers/lobby.ts | 151 +++++++++++-------- src/server/events.d.ts | 28 ++++ src/server/redis/events.d.ts | 10 -- src/server/redis/index.ts | 11 ++ src/server/redis/sse-redis.ts | 73 --------- src/server/redis/utils/lobby-utils.ts | 60 ++++++++ 12 files changed, 277 insertions(+), 213 deletions(-) delete mode 100644 src/components/nav-link.tsx create mode 100644 src/server/events.d.ts delete mode 100644 src/server/redis/events.d.ts create mode 100644 src/server/redis/index.ts delete mode 100644 src/server/redis/sse-redis.ts create mode 100644 src/server/redis/utils/lobby-utils.ts diff --git a/src/app/(routes)/lobby/[id]/page.tsx b/src/app/(routes)/lobby/[id]/page.tsx index da684d9..f450413 100644 --- a/src/app/(routes)/lobby/[id]/page.tsx +++ b/src/app/(routes)/lobby/[id]/page.tsx @@ -10,12 +10,11 @@ async function Page({ id: string; }>; }) { - const sessionPlayer = await api.player.getBySession(); const { id } = await params; const lobby = await api.lobby.get({ id }); - if (!lobby) return notFound(); + if (!lobby) return
Lobby not found
; - return ; + return ; } export default Page; diff --git a/src/app/(routes)/lobby/page.tsx b/src/app/(routes)/lobby/page.tsx index 03d4506..e36b56f 100644 --- a/src/app/(routes)/lobby/page.tsx +++ b/src/app/(routes)/lobby/page.tsx @@ -5,11 +5,12 @@ import { Button } from "@/components/ui/button"; import LobbyPage from "@/app/_components/lobby/lobby-page"; import { redirect } from "next/navigation"; import { appRoutes } from "@/config/app.routes"; +import { auth } from "@/server/auth"; async function Page() { - const sessionPlayer = await api.player.getBySession(); - if (!sessionPlayer) return redirect(appRoutes.signIn); - const lobby = sessionPlayer ? await api.lobby.getCurrentLobby() : null; + const session = await auth(); + if (!session?.user) return redirect(appRoutes.signIn); + const lobby = await api.lobby.getCurrentLobby(); if (!lobby) return (
@@ -23,7 +24,7 @@ async function Page() {
); - return ; + return ; } export default Page; diff --git a/src/app/_components/lobby/lobby-provider.tsx b/src/app/_components/lobby/lobby-provider.tsx index 1c7f0ac..97766cb 100644 --- a/src/app/_components/lobby/lobby-provider.tsx +++ b/src/app/_components/lobby/lobby-provider.tsx @@ -2,10 +2,10 @@ import { appRoutes } from "@/config/app.routes"; import { useSessionPlayerStore } from "@/lib/store/current-player-store"; import { useLobbyStore } from "@/lib/store/lobby-store"; import type { Lobby, LobbyMember } from "@/server/db/schema"; -import type { LobbyMemberLeaveEventData } from "@/server/redis/events"; import { api } from "@/trpc/react"; import { useRouter } from "next/navigation"; import React from "react"; +import { toast } from "sonner"; function LobbyProvider({ children, @@ -23,29 +23,42 @@ function LobbyProvider({ const removeMember = useLobbyStore((state) => state.removeMember); const router = useRouter(); - api.lobby.onMemberUpdate.useSubscription(undefined, { - onData({ data: _data }) { - const joined = _data.joined; - if (joined) { - const data = _data.membership as LobbyMember; - addMember(data); - } else { - const data = _data.membership as LobbyMemberLeaveEventData; - removeMember(data.playerId); - if (data?.kicked && data?.playerId === sessionPlayer?.id) { - router.push(appRoutes.lobby(lobby.id)); - router.refresh(); - } - } - }, - }); - api.lobby.onUpdate.useSubscription(undefined, { - onData({ data }) { - if (!data?.lobby) return; - updateLobby(data.lobby); + const lobbyId = lobby.id ?? ""; + api.lobby.onMemberUpdate.useSubscription( + { lobbyId }, + { + onData({ data }) { + if (data.joined) { + const member = data.member as LobbyMember; + addMember(member); + } else { + const memberId = data.member as string; + removeMember(memberId); + if (data?.kicked && memberId === sessionPlayer?.id) { + router.push(appRoutes.lobby(lobby.id)); + router.refresh(); + } + } + }, }, - }); + ); + + api.lobby.onUpdate.useSubscription( + { lobbyId }, + { + onData({ data }) { + if (data.deleted) { + resetLobby(undefined); + router.push(appRoutes.home); + router.refresh(); + toast.error("Lobby got deleted"); + return; + } + if (data.lobby) updateLobby(data.lobby); + }, + }, + ); React.useEffect(() => { resetLobby(initialLobby); setMembers(initialLobby?.members ?? []); diff --git a/src/components/nav-link.tsx b/src/components/nav-link.tsx deleted file mode 100644 index dd6730b..0000000 --- a/src/components/nav-link.tsx +++ /dev/null @@ -1,32 +0,0 @@ -"use client"; - -import React from "react"; -import { Button } from "./ui/button"; -import Link from "next/link"; -import { usePathname } from "next/navigation"; -import { cn } from "@/lib/utils"; - -function NavLink({ label, path, className }: NavLink & { className?: string }) { - const active = usePathname() === path; - return ( - - ); -} - -export default NavLink; diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index 81a5051..2e88c50 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -1,16 +1,22 @@ +"use client"; import React from "react"; import { Button } from "./ui/button"; import Link from "next/link"; import UserPopover from "@/app/_components/profile-popover"; import { appConfig } from "@/config/app.config"; -import NavLink from "./nav-link"; -import { api } from "@/trpc/server"; + import { Icons } from "./icons"; import { appRoutes } from "@/config/app.routes"; +import { useSessionPlayerStore } from "@/lib/store/current-player-store"; +import { useLobbyStore } from "@/lib/store/lobby-store"; +import { usePathname } from "next/navigation"; +import { cn } from "@/lib/utils"; -async function Navbar() { - const sessionPlayer = await api.player.getBySession(); - const currentLobby = sessionPlayer ? await api.lobby.getCurrentLobby() : null; +function Navbar() { + const sessionPlayer = useSessionPlayerStore((state) => state.sessionPlayer); + const currentLobby = useLobbyStore((state) => state.lobby); + + const pathname = usePathname(); return (