feat: improve reconnect, add ESLint configuration for common and socket

packages/web/src/app/(auth)/layout.tsx

@@ -1,6 +1,9 @@
 "use client"
 
+import logo from "@rahoot/web/assets/logo.svg"
+import Loader from "@rahoot/web/components/Loader"
 import { useSocket } from "@rahoot/web/contexts/socketProvider"
+import Image from "next/image"
 import { PropsWithChildren, useEffect } from "react"
 
 const AuthLayout = ({ children }: PropsWithChildren) => {
@@ -11,7 +14,34 @@ const AuthLayout = ({ children }: PropsWithChildren) => {
     }
   }, [connect, isConnected])
 
-  return children
+  if (!isConnected) {
+    return (
+      <section className="relative flex min-h-screen flex-col items-center justify-center">
+        <div className="absolute h-full w-full overflow-hidden">
+          <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
+          <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+        </div>
+
+        <Image src={logo} className="mb-6 h-32" alt="logo" />
+        <Loader className="h-23" />
+        <h2 className="mt-2 text-center text-2xl font-bold text-white drop-shadow-lg md:text-3xl">
+          Loading...
+        </h2>
+      </section>
+    )
+  }
+
+  return (
+    <section className="relative flex min-h-screen flex-col items-center justify-center">
+      <div className="absolute h-full w-full overflow-hidden">
+        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
+        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+      </div>
+
+      <Image src={logo} className="mb-6 h-32" alt="logo" />
+      {children}
+    </section>
+  )
 }
 
 export default AuthLayout

packages/web/src/app/(auth)/manager/page.tsx

@@ -31,7 +31,6 @@ export default function Manager() {
     socket?.emit("manager:auth", password)
   }
   const handleCreate = (quizzId: string) => {
-    console.log(quizzId)
     socket?.emit("game:create", quizzId)
   }
 

packages/web/src/app/(auth)/page.tsx

@@ -1,11 +1,9 @@
 "use client"
 
-import logo from "@rahoot/web/assets/logo.svg"
 import Room from "@rahoot/web/components/game/join/Room"
 import Username from "@rahoot/web/components/game/join/Username"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
-import Image from "next/image"
 import { useEffect } from "react"
 import toast from "react-hot-toast"
 
@@ -23,16 +21,9 @@ export default function Home() {
     toast.error(message)
   })
 
-  return (
-    <section className="relative flex min-h-screen flex-col items-center justify-center">
-      <div className="absolute h-full w-full overflow-hidden">
-        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
-        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
-      </div>
+  if (player) {
+    return <Username />
+  }
 
-      <Image src={logo} className="mb-6 h-32" alt="logo" />
-
-      {!player ? <Room /> : <Username />}
-    </section>
-  )
+  return <Room />
 }