feat: add error catch into some points

iaurg · Sep 6, 2023 · 57d2c0f · 57d2c0f
1 parent 7b872bb
commit 57d2c0f
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 6 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -25,6 +25,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.44.3",
+    "react-hot-toast": "^2.4.1",
     "react-konva": "^18.2.9",
     "react-popper": "^2.3.0",
     "socket.io-client": "^4.6.2",

diff --git a/frontend/src/app/(private)/layout.tsx b/frontend/src/app/(private)/layout.tsx
@@ -7,6 +7,7 @@ import Chat from "@/components/Chat";
 import Header from "@/components/Header";
 import Providers from "../login/providers";
 import { ChatProvider } from "@/contexts/ChatContext";
+import { Toaster } from "react-hot-toast";
 
 export const metadata: Metadata = {
   title: "Game | 42 Transcendence",
@@ -21,6 +22,7 @@ export default function RootPrivateLayout({
   return (
     <html lang="en">
       <body className="bg-black42-100 flex">
+        <Toaster />
         <Providers>
           <div className="flex flex-col md:flex-row">
             <Sidebar />

diff --git a/frontend/src/app/error.tsx b/frontend/src/app/error.tsx
@@ -0,0 +1,30 @@
+"use client"; // Error components must be Client Components
+
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}
diff --git a/frontend/src/app/login/auth/page.tsx b/frontend/src/app/login/auth/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import { toast } from "react-hot-toast";
 
 // TODO: refactor states and input to be a client component, and use the client component here, also remove use client from top
 
@@ -22,6 +23,7 @@ export default function AuthPage() {
 
   const handleSubmit = () => {
     // Handle submission logic here
+    toast.success("Código validado com sucesso!");
     console.log("Submitted code:", code);
     router.push("/game");
   };

diff --git a/frontend/src/app/login/layout.tsx b/frontend/src/app/login/layout.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from "next";
 import Providers from "./providers";
+import { Toaster } from "react-hot-toast";
 
 export const metadata: Metadata = {
   title: "42 Transcendence",
@@ -14,6 +15,7 @@ export default function RootLoginPublicLayout({
   return (
     <html lang="en">
       <body>
+        <Toaster />
         <Providers>{children}</Providers>
       </body>
     </html>

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,8 +1,10 @@
 import Image from "next/image";
+import { Toaster } from "react-hot-toast";
 
 export default function Page() {
   return (
     <div className="max-w-screen-xl m-auto">
+      <Toaster />
       <div className="flex flex-col h-screen md:flex-row">
         <div className="flex flex-col md:flex-1">
           <div className="flex flex-col flex-1 justify-center items-center md:items-start mx-4">

diff --git a/frontend/src/contexts/GameContext.tsx b/frontend/src/contexts/GameContext.tsx
@@ -52,7 +52,7 @@ export type MovePlayerData = {
   direction: string;
 };
 
-export type GameLayout = 'default' | 'sunlight' | 'moonlight' | 'dark';
+export type GameLayout = "default" | "sunlight" | "moonlight" | "dark";
 
 type GameContextType = {
   waitingPlayer2: boolean;
@@ -79,7 +79,7 @@ export const GameProvider = ({ children }: GameProviderProps) => {
   const [clientId, setClientId] = useState("");
   const [gameData, setGameData] = useState({} as GameData);
   const [gameFinishedData, setGameFinishedData] = useState({} as GameData);
-  const [gameLayout, setGameLayout] = useState<GameLayout>('default');
+  const [gameLayout, setGameLayout] = useState<GameLayout>("default");
 
   const socket = useRef<Socket | null>(null);
 
@@ -180,8 +180,8 @@ export const GameProvider = ({ children }: GameProviderProps) => {
         gameAbandoned,
         gameFinishedData,
         gameData,
-        gameLayout, 
-        setGameLayout
+        gameLayout,
+        setGameLayout,
       }}
     >
       {children}

diff --git a/frontend/src/services/queryClient.ts b/frontend/src/services/queryClient.ts
@@ -1,3 +1,12 @@
-import { QueryClient } from "@tanstack/react-query";
+import { QueryCache, QueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
 
-export const queryClient = new QueryClient();
+export const queryClient = new QueryClient({
+  queryCache: new QueryCache({
+    onError: (error: any, query) => {
+      if (query.state.data !== undefined) {
+        toast.error(`Something went wrong: ${error.message}`);
+      }
+    },
+  }),
+});