displays reported teams at the top of view teams page

app/(api)/_actions/invite/getInviteData.ts

@@ -12,7 +12,8 @@ export async function getInviteData() {
   if (noUsers) {
     return null;
   } else {
-    const data = cookies().get('data');
+    const cookieStore = await cookies();
+    const data = cookieStore.get('data');
     if (!data) return null;
 
     const dataJson = atob(data.value);

app/(api)/_actions/invite/processInvite.ts

@@ -10,8 +10,9 @@ export async function processInvite(slug: string) {
     const data = slugComponents[0];
     const sig = slugComponents[1];
 
-    cookies().set('data', data, { httpOnly: true });
-    cookies().set('sig', sig, { httpOnly: true });
+    const cookieStore = await cookies();
+    cookieStore.set('data', data, { httpOnly: true });
+    cookieStore.set('sig', sig, { httpOnly: true });
 
     return true;
   }

app/(api)/_utils/authentication/authenticated.ts

@@ -4,9 +4,9 @@ import { auth } from '@/auth';
 import { HttpError, NotAuthenticatedError } from '@utils/response/Errors';
 
 export default function authenticated(
-  handler: (request: NextRequest, params: any) => Promise<NextResponse>
+  handler: (request: NextRequest, params?: any) => Promise<NextResponse>
 ) {
-  return async (request: NextRequest, params: object) => {
+  return async (request: NextRequest, params?: any) => {
     try {
       const session = await auth();
       if (!session) {

app/(api)/api/auth/logout/route.ts

@@ -1,11 +1,11 @@
 'use server';
 
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 
 import Logout from '@datalib/auth/logout';
 import authenticated from '@utils/authentication/authenticated';
 
-async function post() {
+async function post(_: NextRequest) {
   const res = await Logout();
   return NextResponse.json({ ...res }, { status: res.ok ? 200 : 401 });
 }

app/(pages)/(magic-link)/invite/[slug]/page.tsx

@@ -5,13 +5,18 @@ import { useRouter } from 'next/navigation';
 import { processInvite } from '@actions/invite/processInvite';
 import Loader from '@pages/_components/Loader/Loader';
 
-export default function Page({ params }: { params: { slug: string } }) {
+export default function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
   const router = useRouter();
   const [valid, setValid] = useState(true);
 
   useEffect(() => {
     const handleInvite = async () => {
-      if (await processInvite(params.slug)) {
+      const resolvedParams = await params;
+      if (await processInvite(resolvedParams.slug)) {
         setValid(true);
         router.push('/register');
       } else {

app/(pages)/(magic-link)/reset/[slug]/page.tsx

@@ -5,13 +5,18 @@ import { useRouter } from 'next/navigation';
 import { processInvite } from '@actions/invite/processInvite';
 import Loader from '@pages/_components/Loader/Loader';
 
-export default function Page({ params }: { params: { slug: string } }) {
+export default function Page({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
   const router = useRouter();
   const [valid, setValid] = useState(true);
 
   useEffect(() => {
     const handleReset = async () => {
-      if (await processInvite(params.slug)) {
+      const resolvedParams = await params;
+      if (await processInvite(resolvedParams.slug)) {
         setValid(true);
         router.push('/reset-password');
       } else {

app/(pages)/_components/InviteOnlyRoute/InviteOnlyRoute.tsx

@@ -8,8 +8,9 @@ export default async function InviteOnlyRoute({
 }: {
   children: React.ReactNode;
 }) {
-  const data = cookies().get('data');
-  const sig = cookies().get('sig');
+  const cookieStore = await cookies();
+  const data = cookieStore.get('data');
+  const sig = cookieStore.get('sig');
 
   const users = await getManyUsers();
   const noUsers = users.body.length === 0;

app/(pages)/admin/teams/page.module.scss

@@ -82,3 +82,29 @@ $data-gap: 24px;
 .action_header {
     font-size: 1.75rem;
 }
+
+.reported_teams_container {
+    display: flex;
+    gap: 8px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.reports_container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 4px;
+
+    @include desktop-m {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+.report_container {
+    font-size: 0.9rem;
+    color: black;
+    padding: 6px 12px;
+    border-radius: 8px;
+    background: var(--text-gray-light);
+    box-shadow: 0px 4px 8px 4px rgba(195, 194, 194, 0.08);
+}

app/(pages)/admin/teams/page.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 import { useTeams } from '@pages/_hooks/useTeams';
 import { GoSearch } from 'react-icons/go';
+import { IoAdd } from 'react-icons/io5';
+import { RxCross1 } from 'react-icons/rx';
 import TeamCard from '../_components/Teams/TeamCard';
 import Team from '@typeDefs/team';
 import User from '@typeDefs/user';
@@ -20,6 +22,7 @@ export default function Teams() {
   const { loading, teams, getTeams } = useTeams();
   const { data, setData } = useFormContext();
   const isEditing = Boolean(data._id);
+  const [reportedTeamsDisplay, setReportedTeamsDisplay] = useState(false);
 
   if (loading) {
     return 'loading...';
@@ -29,6 +32,10 @@ export default function Teams() {
     return teams.error;
   }
 
+  function toggleReportedTeamsDisplay() {
+    setReportedTeamsDisplay(!reportedTeamsDisplay);
+  }
+
   const teamData: TeamWithJudges[] = teams.body
     .filter((team: TeamWithJudges) =>
       JSON.stringify(team).toLowerCase().includes(search.toLowerCase())
@@ -44,6 +51,8 @@ export default function Teams() {
     backgroundColor: '#9EE7E5',
   }));
 
+  const reportedTeams = teamData.filter((team) => team.reports?.length > 0);
+
   return (
     <div className={styles.container}>
       <h1 className={styles.page_title}>Team Manager</h1>
@@ -65,15 +74,71 @@ export default function Teams() {
         />
         <GoSearch className={styles.search_icon} />
       </div>
+      <div className={styles.reported_teams_container}>
+        <h2 className={styles.action_header}> Reported Teams</h2>
+        <button
+          onClick={toggleReportedTeamsDisplay}
+          style={{
+            fontSize: '1.25rem',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '40px',
+            height: '40px',
+            backgroundColor: reportedTeamsDisplay
+              ? 'var(--text-error)'
+              : 'var(--text-gray-light)',
+            color: reportedTeamsDisplay ? 'white' : 'black',
+            borderRadius: '6px',
+            cursor: 'pointer',
+            border: 'none',
+          }}
+        >
+          {reportedTeamsDisplay ? <RxCross1 /> : <IoAdd />}
+        </button>
+      </div>
+      <div className={styles.reports_container}>
+        {reportedTeamsDisplay &&
+          reportedTeams
+            .sort((a, b) => (b.reports?.length || 0) - (a.reports?.length || 0))
+            .map((team) => (
+              <div className={styles.report_container} key={team._id}>
+                <a href={`#${team._id}`}>
+                  <strong style={{ color: 'var(--text-error)' }}>
+                    [{team.reports?.length}]
+                  </strong>{' '}
+                  Table {team.tableNumber}: {team.name} (Team {team.teamNumber})
+                </a>
+              </div>
+            ))}
+      </div>
       <div className={styles.data_portion}>
         <div className={styles.teams_list}>
-          {teamData.map((team: TeamWithJudges) => (
-            <div className={styles.team_card_wrapper} key={team._id}>
-              <TeamCard team={team} onEditClick={() => setData(team)} />
-            </div>
-          ))}
+          {teamData
+            .sort((a, b) => (b.reports?.length || 0) - (a.reports?.length || 0))
+            .map((team: TeamWithJudges) => (
+              <div
+                id={team._id}
+                className={styles.team_card_wrapper}
+                key={team._id}
+              >
+                <TeamCard team={team} onEditClick={() => setData(team)} />
+              </div>
+            ))}
+          {teamData
+            .sort((a, b) => (b.reports?.length || 0) - (a.reports?.length || 0))
+            .map((team: TeamWithJudges) => (
+              <div
+                id={team._id}
+                className={styles.team_card_wrapper}
+                key={team._id}
+              >
+                <TeamCard team={team} onEditClick={() => setData(team)} />
+              </div>
+            ))}
         </div>
         <div className={styles.bar_chart_container}>
+          <h2 className={styles.action_header}>Judge Count</h2>
           <BarChart
             data={chartData}
             lines={[{ style: 'dashed 1px red', value: 3 }]}

app/(pages)/judges/(app)/score/[team-id]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import styles from './page.module.scss';
 import ScoringForm from '@components/ScoringForm/ScoringForm';
 import Loader from '@components/Loader/Loader';
@@ -13,15 +13,19 @@ import { useTeam } from '@hooks/useTeam';
 import leftArrow from '@public/judges/scoring/left-arrow.svg';
 
 interface ScoringFormProps {
-  params: {
+  params: Promise<{
     'team-id': string;
-  };
+  }>;
 }
 
 export default function ScoreTeam({ params }: ScoringFormProps) {
   const [showInfo, setShowInfo] = useState(false);
-  const { submission, loading: subLoading } = useSubmission(params['team-id']);
-  const { team, loading: teamLoading } = useTeam(params['team-id']);
+  const [teamId, setTeamId] = useState<string>('');
+  useEffect(() => {
+    params.then((p) => setTeamId(p['team-id']));
+  }, [params]);
+  const { submission, loading: subLoading } = useSubmission(teamId);
+  const { team, loading: teamLoading } = useTeam(teamId);
   const loading = subLoading || teamLoading;
 
   if (loading) {