From 082f051b75507eb170a8855ab184ba4506a407f0 Mon Sep 17 00:00:00 2001
From: Jaisal Patel <70134418+GhostOf0days@users.noreply.github.com>
Date: Mon, 22 Jan 2024 10:05:41 -0500
Subject: [PATCH] added join button for team details (#213)

---
 pages/teams/details/[teamId].tsx | 27 ++++++++++++++++++++++++++-
 styles/ViewTeam.module.scss      |  5 +++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/pages/teams/details/[teamId].tsx b/pages/teams/details/[teamId].tsx
index d74a468..f9c0220 100644
--- a/pages/teams/details/[teamId].tsx
+++ b/pages/teams/details/[teamId].tsx
@@ -55,6 +55,7 @@ const TeamDescription = () => {
   const [successMessage, setSuccessMessage] = useState("")
   const [isOwnTeam, setIsOwnTeam] = useState(false)
   const errorMessage = useSelector((state: RootState) => state?.teams?.error)
+  const [joinErrorMessage, setJoinErrorMessage] = useState(errorMessage)
   const user = useSelector((state: RootState) => state?.accounts?.data)
   const [isCaptain, setIsCaptain] = useState(false)
   const [open, setOpen] = useState(dialogOpen.No)
@@ -114,6 +115,23 @@ const TeamDescription = () => {
     }
   }
 
+  const handleJoinTeam = async (e: any) => {
+    e.preventDefault()
+    try {
+      await dispatch(actions.teams.joinTeamRequest(teamInfo._id))
+      checkJoinError(false)
+    } catch (err) {
+      checkJoinError(true)
+    }
+  }
+
+  const checkJoinError = (isError: boolean) => {
+    setNotify(isError ? "error" : "success")
+    if (!isError) {
+      setSuccessMessage("Join request sent successfully")
+    }
+  }
+
   useEffect(() => {
     if (teamId === undefined || user._id === undefined) {
       setLoading(false)
@@ -162,7 +180,14 @@ const TeamDescription = () => {
         <WaveFooter />
         <FloatingDiv>
           {ownTeamFetched && !isOwnTeam ? (
-            <BackButton link="/teams" className={styles.backButton} />
+            <div className={styles.buttonContainer}>
+              <BackButton link="/teams" className={styles.backButton} />
+              <form onSubmit={handleJoinTeam}>
+                <RectangleButton type="submit" className={styles.joinButton}>
+                  Join
+                </RectangleButton>
+              </form>
+            </div>
           ) : null}
           <div className={styles.spinnerContainer}>
             <Collapse in={loading}>
diff --git a/styles/ViewTeam.module.scss b/styles/ViewTeam.module.scss
index 13e11d5..9acb5e8 100644
--- a/styles/ViewTeam.module.scss
+++ b/styles/ViewTeam.module.scss
@@ -139,3 +139,8 @@
   align-items: center;
   justify-content: center;
 }
+
+.buttonContainer {
+  display: flex;
+  justify-content: space-between;
+}