int: UI integration

Author: BRAVO68WEB

apps/web/src/App.jsx

@@ -2,8 +2,6 @@
 import { Routes, Route } from "react-router-dom";
 import Home from "./pages/home";
 import Player from "./pages/app";
-import Login from "./pages/login";
-import Register from "./pages/register";
 import Verify from "./pages/verify";
 import About from "./pages/about";
 import Leaderboard from "./pages/leaderboard";
@@ -17,8 +15,6 @@ const App = () => {
       <Route path='/about' element={<About />} />
       <Route path='/app' element={<Player />} />
       <Route path='/news' element={<News />} />
-      <Route path='/login' element={<Login />} />
-      <Route path='/register' element={<Register />} />
       <Route path='/verify' element={<Verify />} />
       <Route path='/leaderboard' element={<Leaderboard />} />
       <Route path='/whoami' element={<WhoAmI />} />

apps/web/src/components/cards/create-team-card.tsx

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
 import apiClient from "../../libs/api.client";
-import { useState } from "react";
 import { toast } from "react-toastify";
 
 function CreateTeamCard() {
@@ -10,14 +9,29 @@ function CreateTeamCard() {
   async function submitData(evt) {
     evt.preventDefault();
     try {
-      const res = await apiClient.post("/team", {
+      await apiClient.post("/team", {
         team_name: teamName,
         join_code: teamCode,
+      }, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
       });
-      window.location.href = "/whoami";
+      toast.success("Team created successfully");
+
+      await apiClient.post("/team/join",{
+        join_code: teamCode,
+      }, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      });
+
+      toast.success("Team joined successfully");
     } catch (err) {
-      console.error("errr");
-      toast.error("Error creating team");
+      toast.error(err.response.data.message || "Error creating team");
     }
   }
   return (

apps/web/src/components/cards/join-team-card.tsx

@@ -1,14 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
 import apiClient from "../../libs/api.client";
-import { useState } from "react";
+import { toast } from "react-toastify";
 
 function JoinTeamCard() {
   const [teamCode, setTeamCode] = useState("");
+
+  async function submitData(evt) {
+    evt.preventDefault();
+    try {
+      const { data } = await apiClient.post("/team/join", {
+        join_code: teamCode,
+      }, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      });
+      console.log(data);
+      toast.success("Team joined successfully");
+      window.location.href = "/whoami";
+    } catch (err) {
+      toast.error("Error creating team");
+    }
+  }
 
   return (
     <div className="signup-card login-card">
       <h2>Join a Team</h2>
-      <form onSubmit={() => {}}>
+      <form onSubmit={submitData}>
         <div className="form-control">
           <div className="form-el-container">
             <label htmlFor="team_code">Team Code</label>

apps/web/src/components/cards/login-card.tsx

@@ -37,7 +37,7 @@ export const LoginCard = () => {
             draggable: true,
           });
           setTimeout(() => {
-            window.location.href = "/app";
+            window.location.href = "/";
           }, 3000);
         } else {
           toast.error("Login Failed!", {

apps/web/src/components/cards/register-card.tsx

@@ -1,7 +1,5 @@
 import { useState } from "react";
-import { ToastContainer, toast } from "react-toastify";
-import { Link } from "react-router-dom";
-
+import { toast } from "react-toastify";
 
 import apiClient from "../../libs/api.client";
 

apps/web/src/pages/login.jsx

@@ -5,14 +5,6 @@ function News() {
   return (
     <>
       <Navbar pageTitle={"News"} />
-      {/* <div className='about-elements'>
-        <h2>News</h2>
-        <div className='action-card'>
-          <a href='https://www.youtube.com/watch?v=9Pzj7Aj25lw'>
-            How to use the scoreboard
-          </a>
-        </div>
-      </div> */}
     </>
   );
 }