Merge pull request #151 from osu-tournament-rating/hotfix/submit-endp…

…oint Use new submission endpoint
osu-tournament-rating · Apr 8, 2024 · 8d0a41b · 8d0a41b
2 parents ecff811 + 0df8495
commit 8d0a41b
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 52 deletions.
diff --git a/app/actions.ts b/app/actions.ts
@@ -25,7 +25,7 @@ export async function getSession(onlyData: boolean = false) {
     return {
       isLogged: session?.isLogged,
       id: session?.id,
-      userId: session?.userId,
+      playerId: session?.playerId,
       osuId: session?.osuId,
       osuCountry: session?.osuCountry,
       osuPlayMode: session?.osuPlayMode,
@@ -75,12 +75,12 @@ export async function login(cookie: {
   }
 
   session.id = loggedUser.id;
-  session.userId = loggedUser.userId;
+  session.playerId = loggedUser.playerId;
   session.osuId = loggedUser.osuId;
   session.osuCountry = loggedUser.osuCountry;
   session.osuPlayMode = loggedUser.osuPlayMode;
-  session.osuPlayModeSelected = loggedUser.osuPlayMode;
-  session.username = loggedUser.username;
+  session.osuPlayModeSelected = loggedUser.osuPlayMode; // maybe to delete
+  session.username = loggedUser.osuUsername;
   session.scopes = loggedUser.scopes;
   session.isLogged = true;
 
@@ -178,7 +178,7 @@ export async function saveTournamentMatches(
   const session = await getSession(true);
 
   /* IF USER IS UNAUTHORIZED REDIRECT TO HOMEPAGE */
-  if (!session.userId) return redirect('/');
+  if (!session.id) return redirect('/');
 
   try {
     /* REGEX TO REMOVE ALL SPACES AND ENTERS */
@@ -208,15 +208,15 @@ export async function saveTournamentMatches(
       rankRangeLowerBound: parseInt(formData.get('rankRestriction')),
       teamSize: parseInt(formData.get('teamSize')),
       mode: parseInt(formData.get('gameMode')),
-      submitterId: session?.userId ?? 0,
+      submitterId: session?.id ?? 0,
       ids: matchIDs,
     });
 
     let isSubmissionVerified =
       formData.get('verifierCheckBox') == 'on' ?? false;
 
-    await fetch(
-      `${process.env.REACT_APP_API_URL}/matches/batch?verified=${isSubmissionVerified}`,
+    let tournamentSubmit = await fetch(
+      `${process.env.REACT_APP_API_URL}/tournaments?verify=${isSubmissionVerified}`,
       {
         method: 'POST',
         headers: {
@@ -227,32 +227,26 @@ export async function saveTournamentMatches(
         credentials: 'include',
         body: JSON.stringify(data),
       }
-    )
-      .then((response) => {
-        if (response.status !== 200) {
-          throw new Error({
-            issues: [
-              {
-                path: ['serverError'],
-                message: response.body,
-              },
-            ],
-          });
-        }
+    );
 
-        return {
-          status: 'success',
-        };
-      })
-      .then((data) => {
-        console.log(data);
-      })
-      .catch((error) => {
-        console.log(JSON.parse(error.message));
-      });
+    if (!tournamentSubmit?.ok) {
+      const errorMessage = await tournamentSubmit.text();
+
+      return {
+        error: {
+          status: tournamentSubmit.status,
+          text: tournamentSubmit.statusText,
+          message: errorMessage,
+        },
+      };
+    }
 
     return {
-      status: 'success',
+      success: {
+        status: tournamentSubmit.status,
+        text: tournamentSubmit.statusText,
+        message: 'Tournament submitted successfully',
+      },
     };
   } catch (error) {
     let errors = {};
@@ -523,7 +517,7 @@ export async function fetchUserPage(player: string | number) {
 
   let res = await fetch(
     `${process.env.REACT_APP_API_URL}/stats/${player}${
-      session?.userId ? `?comparerId=${session?.userId}` : ''
+      session?.playerId ? `?comparerId=${session?.playerId}` : ''
     }`,
     {
       headers: {

diff --git a/components/ErrorToast/ErrorToast.module.css b/components/ErrorToast/ErrorToast.module.css
@@ -1,6 +1,8 @@
 .toast {
-  width: 26em;
+  width: 28em;
   height: auto;
+  max-width: 40em;
+  max-height: 14em;
   background-color: hsla(var(--toast-error-border));
   color: #222;
   display: flex;
@@ -9,7 +11,7 @@
   position: fixed;
   bottom: 0;
   left: 50%;
-  margin-left: -13em;
+  margin-left: -14em;
   border-radius: 0.3rem;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -18,6 +20,7 @@
   font-family: var(--font-families);
   transform: translateY(-1em);
   opacity: 1;
+  z-index: 4;
 }
 
 .toast .header {
@@ -44,7 +47,10 @@
 }
 
 .toast .body {
+  height: 100%;
   padding: 1em;
   background-color: hsla(var(--toast-error-bg), 0.8);
   border-radius: 0.2rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
diff --git a/components/SubmitMatches/MatchForm/MatchForm.tsx b/components/SubmitMatches/MatchForm/MatchForm.tsx
@@ -4,6 +4,7 @@ import { saveTournamentMatches } from '@/app/actions';
 import Form from '@/components/Form/Form';
 import InfoIcon from '@/components/Form/InfoIcon/InfoIcon';
 import Toast from '@/components/Toast/Toast';
+import { useSetError } from '@/util/hooks';
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { useFormState, useFormStatus } from 'react-dom';
@@ -23,13 +24,19 @@ function SubmitButton() {
   );
 }
 
-export default function MatchForm({ userScopes }: { userScopes: Array<string> }) {
+export default function MatchForm({
+  userScopes,
+}: {
+  userScopes: Array<string>;
+}) {
   const [state, formAction] = useFormState(saveTournamentMatches, initialState);
 
   const [rulesAccepted, setRulesAccepted] = useState(false);
   const [verifierAccepted, setVerifierAccepted] = useState(false);
   const [showToast, setShowToast] = useState(false);
 
+  const setError = useSetError();
+
   useEffect(() => {
     // Shows toast for both success or error, but need better implementation for errors
     /* if (state?.status) {
@@ -39,7 +46,11 @@ export default function MatchForm({ userScopes }: { userScopes: Array<string> })
       }, 6000);
     } */
 
-    if (state?.status === 'success') {
+    if (state?.error) {
+      setError(state?.error);
+    }
+
+    if (state?.success) {
       document.getElementById('tournament-form')?.reset();
       setShowToast(true);
       setTimeout(() => {
@@ -249,7 +260,7 @@ export default function MatchForm({ userScopes }: { userScopes: Array<string> })
                   matches can lead to a restriction
                 </span>
               </div>
-              {(userScopes.includes('verifier')) && (
+              {userScopes.includes('verifier') && (
                 <div className={clsx(styles.row, styles.checkbox)}>
                   <input
                     type="checkbox"
@@ -278,14 +289,8 @@ export default function MatchForm({ userScopes }: { userScopes: Array<string> })
       </div>
       {showToast && (
         <Toast
-          status={state?.status}
-          message={
-            state?.status === 'success'
-              ? 'Tournament submitted successfully'
-              : state?.status === 'error'
-              ? state?.errors[0]
-              : ''
-          }
+          status={state?.success ? 'success' : ''}
+          message={state?.success ? state?.success.message : ''}
         />
       )}
     </>

diff --git a/lib/types.ts b/lib/types.ts
@@ -60,7 +60,7 @@ export const MatchesSubmitFormSchema = z.object({
 
 export interface SessionUser {
   id?: number;
-  userId?: number;
+  playerId?: number;
   osuId?: number;
   osuCountry?: string;
   osuPlayMode?: number;

diff --git a/util/ErrorContext.tsx b/util/ErrorContext.tsx
@@ -21,19 +21,15 @@ export default function ErrorProvider({ children }: Props): JSX.Element {
   useEffect(() => {
     if (!error || show) return;
 
-    if (
-      error?.status === 400 ||
-      error?.message === 'No access token cookie found.'
-    )
-      return;
+    if (error?.message === 'No access token cookie found.') return;
 
     if (error?.status === 401 && error?.message == '') return;
 
     setShow(true);
     setTimeout(() => {
       setError(undefined);
       setShow(false);
-    }, 6000);
+    }, 7000);
   }, [error, show]);
 
   return (