More typings

frontend/src/components/brackets/match.tsx

@@ -132,6 +132,7 @@ export default function Match({
         opened={opened}
         setOpened={setOpened}
         dynamicSchedule={dynamicSchedule}
+        priorMatch={null}
       />
     </>
   );

frontend/src/components/builder/builder.tsx

@@ -28,12 +28,10 @@ function StageItemInputSectionLast({
   lastInList,
 }: {
   input: StageItemInput;
-  team: TeamInterface | null;
-  teamStageItem: TeamInterface | null;
+  team: TeamInterface;
+  teamStageItem: StageItemWithRounds;
   lastInList: boolean;
 }) {
-  assert(team != null || teamStageItem != null);
-
   const content = team
     ? team.name
     : // @ts-ignore
@@ -53,7 +51,7 @@ function StageItemRow({
   stageItem,
   swrStagesResponse,
 }: {
-  teamsMap: any;
+  teamsMap: NonNullable<ReturnType<typeof getTeamsLookup>>;
   tournament: Tournament;
   stageItem: StageItemWithRounds;
   swrStagesResponse: SWRResponse;
@@ -70,12 +68,14 @@ function StageItemRow({
         ? stageItemsLookup[input.winner_from_stage_item_id]
         : null;
 
+      assert(team != null || teamStageItem != null);
+
       return (
         <StageItemInputSectionLast
           key={i}
-          team={team}
+          team={team!}
           input={input}
-          teamStageItem={teamStageItem}
+          teamStageItem={teamStageItem!}
           lastInList={i === stageItem.inputs.length - 1}
         />
       );

frontend/src/components/modals/match_modal.tsx

@@ -20,13 +20,8 @@ import DeleteButton from '../buttons/delete';
 
 interface MatchModalBaseProps {
   tournamentData: TournamentMinimal;
-  // match: MatchInterface | null;
-  // swrStagesResponse: SWRResponse;
   swrUpcomingMatchesResponse: SWRResponse | null;
-  // opened: boolean;
-  // setOpened: any;
   dynamicSchedule: boolean;
-  // priorMatch?: MatchInterface;
 }
 
 interface MatchModalProps extends MatchModalBaseProps {
@@ -36,6 +31,11 @@ interface MatchModalProps extends MatchModalBaseProps {
   priorMatch: MatchInterface | null;
 }
 
+/**
+ * A typical implementation for opening a match modal. Useful for other components, especially in pages.
+ */
+export type OpenMatchModalFn = (match: MatchInterface, priorMatch: MatchInterface | null) => void;
+
 function MatchDeleteButton({
   tournamentData,
   match,

frontend/src/interfaces/stage.tsx

@@ -12,5 +12,6 @@ export interface StageWithStageItems {
 }
 
 export function getStageById(swrStagesResponse: SWRResponse, stageId: number) {
-  return swrStagesResponse.data.data.filter((stage: StageWithStageItems) => stage.id === stageId);
+  return (swrStagesResponse.data.data as StageWithStageItems[])
+    .filter((stage: StageWithStageItems) => stage.id === stageId);
 }

frontend/src/interfaces/stage_item.tsx

@@ -3,7 +3,7 @@ import { StageItemInput } from './stage_item_input';
 
 export interface StageItemWithRounds {
   id: number;
-  tournament_id: number;
+  stage_id: number;
   created: string;
   type: string;
   name: string;

frontend/src/pages/tournaments/[id]/dashboard/present/courts.tsx

@@ -48,7 +48,7 @@ export default function CourtsPage() {
   const courts = responseIsValid(swrCourtsResponse) ? swrCourtsResponse.data.data : [];
   const matchesByCourtId = responseIsValid(swrStagesResponse)
     ? getMatchLookupByCourt(swrStagesResponse)
-    : [];
+    : {};
 
   const rows = courts.map((court: Court) => {
     const matchesForCourt = matchesByCourtId[court.id] || [];

frontend/src/pages/tournaments/[id]/results.tsx

@@ -14,9 +14,9 @@ import {
 import { IconAlertCircle } from '@tabler/icons-react';
 import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 
-import MatchModal from '../../../components/modals/match_modal';
+import MatchModal, { OpenMatchModalFn } from '../../../components/modals/match_modal';
 import { NoContentDashboard } from '../../../components/no_content/empty_table_info';
 import { Time, formatTime } from '../../../components/utils/datetime';
 import { Translator } from '../../../components/utils/types';
@@ -31,11 +31,13 @@ function ScheduleRow({
   openMatchModal,
   stageItemsLookup,
   matchesLookup,
+  previousMatch,
 }: {
-  data: any;
-  openMatchModal: any;
+  data: { match: MatchInterface; stageItem: any };
+  openMatchModal: OpenMatchModalFn;
   stageItemsLookup: any;
   matchesLookup: any;
+  previousMatch: MatchInterface | null;
 }) {
   const winColor = '#2a8f37';
   const drawColor = '#656565';
@@ -62,14 +64,14 @@ function ScheduleRow({
         mt="md"
         pt="0rem"
         onClick={() => {
-          openMatchModal(data.match);
+          openMatchModal(data.match, previousMatch);
         }}
       >
         <Card.Section withBorder>
           <Grid pt="0.75rem" pb="0.5rem">
             <Grid.Col mb="0rem" span={4}>
               <Text pl="sm" mt="sm" fw={800}>
-                {data.match.court.name}
+                {data.match.court!.name}
               </Text>
             </Grid.Col>
             <Grid.Col mb="0rem" span={4}>
@@ -147,10 +149,10 @@ function Schedule({
 }: {
   t: Translator;
   stageItemsLookup: any;
-  openMatchModal: CallableFunction;
-  matchesLookup: any;
+  openMatchModal: OpenMatchModalFn;
+  matchesLookup: ReturnType<typeof getMatchLookup>;
 }) {
-  const matches: any[] = Object.values(matchesLookup);
+  const matches = Object.values(matchesLookup);
   const sortedMatches = matches
     .filter((m1: any) => m1.match.start_time != null)
     .sort((m1: any, m2: any) => (m1.match.court?.name > m2.match.court?.name ? 1 : -1))
@@ -182,6 +184,7 @@ function Schedule({
         openMatchModal={openMatchModal}
         stageItemsLookup={stageItemsLookup}
         matchesLookup={matchesLookup}
+        previousMatch={c > 0 ? sortedMatches[c - 1].match : null}
       />
     );
   }
@@ -193,7 +196,7 @@ function Schedule({
   }
 
   const noItemsAlert =
-    matchesLookup.length < 1 ? (
+    Object.getOwnPropertyNames(matchesLookup).length < 1 ? (
       <Alert
         icon={<IconAlertCircle size={16} />}
         title={t('no_matches_title')}
@@ -217,6 +220,7 @@ function Schedule({
 export default function SchedulePage() {
   const [modalOpened, modalSetOpened] = useState(false);
   const [match, setMatch] = useState<MatchInterface | null>(null);
+  const [priorMatch, setPriorMatch] = useState<MatchInterface | null>(null);
 
   const { t } = useTranslation();
   const { tournamentData } = getTournamentIdFromRouter();
@@ -226,22 +230,19 @@ export default function SchedulePage() {
   const stageItemsLookup = responseIsValid(swrStagesResponse)
     ? getStageItemLookup(swrStagesResponse)
     : [];
-  const matchesLookup = responseIsValid(swrStagesResponse) ? getMatchLookup(swrStagesResponse) : [];
+  const matchesLookup = responseIsValid(swrStagesResponse) ? getMatchLookup(swrStagesResponse) : {};
 
-  if (!responseIsValid(swrStagesResponse)) return null;
-  if (!responseIsValid(swrCourtsResponse)) return null;
-
-  function openMatchModal(matchToOpen: MatchInterface) {
+  const openMatchModal: OpenMatchModalFn = useCallback((
+    matchToOpen: MatchInterface,
+    priorMatchToOpen: MatchInterface | null
+  ) => {
     setMatch(matchToOpen);
+    setPriorMatch(priorMatchToOpen);
     modalSetOpened(true);
-  }
+  }, [setMatch, setPriorMatch, modalSetOpened]);
 
-  function modalSetOpenedAndUpdateMatch(opened: boolean) {
-    if (!opened) {
-      setMatch(null);
-    }
-    modalSetOpened(opened);
-  }
+  if (!responseIsValid(swrStagesResponse)) return null;
+  if (!responseIsValid(swrCourtsResponse)) return null;
 
   return (
     <TournamentLayout tournament_id={tournamentData.id}>
@@ -251,8 +252,12 @@ export default function SchedulePage() {
         tournamentData={tournamentData}
         match={match}
         opened={modalOpened}
-        setOpened={modalSetOpenedAndUpdateMatch}
+        setOpened={(openend) => {
+          if (openend === false) setMatch(null);
+          modalSetOpened(openend);
+        }}
         dynamicSchedule={false}
+        priorMatch={priorMatch}
       />
       <Title>{t('results_title')}</Title>
       <Center mt="1rem">

frontend/src/pages/tournaments/[id]/schedule.tsx

@@ -6,7 +6,7 @@ import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import React, { useCallback, useState } from 'react';
 
 import { BiEditAlt } from 'react-icons/bi';
-import MatchModal from '../../../components/modals/match_modal';
+import MatchModal, { OpenMatchModalFn } from '../../../components/modals/match_modal';
 import { NoContent } from '../../../components/no_content/empty_table_info';
 import { DateTime } from '../../../components/utils/datetime';
 import { Translator } from '../../../components/utils/types';
@@ -34,10 +34,10 @@ function ScheduleRow({
 }: {
   index: number;
   match: MatchInterface;
-  openMatchModal: (match: MatchInterface, priorMatch?: MatchInterface) => void;
+  openMatchModal: OpenMatchModalFn;
   stageItemsLookup: any;
   matchesLookup: any;
-  previousMatch?: MatchInterface;
+  previousMatch: MatchInterface | null;
 }) {
   return (
     <Draggable key={match.id} index={index} draggableId={`${match.id}`}>
@@ -94,7 +94,7 @@ function ScheduleColumn({
 }: {
   court: Court;
   matches: MatchInterface[];
-  openMatchModal: any;
+  openMatchModal: OpenMatchModalFn;
   stageItemsLookup: any;
   matchesLookup: any;
 }) {
@@ -107,7 +107,7 @@ function ScheduleColumn({
       match={match}
       openMatchModal={openMatchModal}
       key={match.id}
-      previousMatch={index > 0 ? matches[index - 1] : undefined}
+      previousMatch={index > 0 ? matches[index - 1] : null}
     />
   ));
 
@@ -150,7 +150,7 @@ function Schedule({
   stageItemsLookup: any;
   matchesLookup: any;
   schedule: { court: Court; matches: MatchInterface[] }[];
-  openMatchModal: CallableFunction;
+  openMatchModal: OpenMatchModalFn;
 }) {
   const columns = schedule.map((item) => (
     <ScheduleColumn
@@ -200,7 +200,7 @@ export default function SchedulePage() {
         )
       : [];
 
-  const openMatchModal = useCallback((
+  const openMatchModal: OpenMatchModalFn = useCallback((
     matchToOpen: MatchInterface,
     priorMatchToOpen: MatchInterface | null
   ) => {

frontend/src/pages/tournaments/[id]/swiss/[stage_item_id].tsx

@@ -18,8 +18,8 @@ import {
 import { BracketDisplaySettings } from '../../../../interfaces/brackets';
 import { SchedulerSettings } from '../../../../interfaces/match';
 import { RoundInterface } from '../../../../interfaces/round';
-import { getStageById } from '../../../../interfaces/stage';
-import { stageItemIsHandledAutomatically } from '../../../../interfaces/stage_item';
+import { StageWithStageItems, getStageById } from '../../../../interfaces/stage';
+import { StageItemWithRounds, stageItemIsHandledAutomatically } from '../../../../interfaces/stage_item';
 import { getTournamentEndpoint } from '../../../../interfaces/tournament';
 import {
   checkForAuthError,
@@ -71,12 +71,12 @@ export default function TournamentPage() {
   const tournamentDataFull =
     swrTournamentResponse.data != null ? swrTournamentResponse.data.data : null;
 
-  let activeStage = null;
-  let draftRound = null;
-  let stageItem = null;
+  let activeStage: StageWithStageItems | null = null;
+  let draftRound: RoundInterface | null = null;
+  let stageItem: StageItemWithRounds | null = null;
 
-  if (responseIsValid(swrStagesResponse) && stageItemId != null) {
-    stageItem = getStageItemLookup(swrStagesResponse)[stageItemId];
+  if (responseIsValid(swrStagesResponse)) {
+    stageItem = getStageItemLookup(swrStagesResponse)[stageItemId] ?? null;
     [activeStage] = getStageById(swrStagesResponse, stageItem.stage_id);
 
     if (activeStage != null && activeStage.stage_items != null) {
@@ -90,7 +90,11 @@ export default function TournamentPage() {
     }
   }
 
-  const swrUpcomingMatchesResponse = getUpcomingMatches(id, draftRound?.id, schedulerSettings);
+  const swrUpcomingMatchesResponse = getUpcomingMatches(
+    id,
+    draftRound?.id ?? null,
+    schedulerSettings
+  );
   const scheduler =
     draftRound != null &&
     stageItem != null &&
@@ -163,7 +167,7 @@ export default function TournamentPage() {
           swrStagesResponse={swrStagesResponse}
           swrUpcomingMatchesResponse={swrUpcomingMatchesResponse}
           readOnly={false}
-          stageItem={stageItem}
+          stageItem={stageItem!} // TODO: Actually check if stageItem exists before using it, remove this once proper checks are in place
           displaySettings={displaySettings}
         />
         {scheduler}

frontend/src/services/adapter.tsx

@@ -187,7 +187,7 @@ export function getUser(): SWRResponse {
 
 export function getUpcomingMatches(
   tournament_id: number,
-  round_id: number,
+  round_id: number | null,
   schedulerSettings: SchedulerSettings
 ): SWRResponse {
   return useSWR(

frontend/src/services/lookups.tsx

@@ -16,7 +16,9 @@ export function getTeamsLookup(tournamentId: number) {
   if (!isResponseValid) {
     return null;
   }
-  return Object.fromEntries(swrTeamsResponse.data.data.teams.map((x: TeamInterface) => [x.id, x]));
+  return Object.fromEntries(
+    (swrTeamsResponse.data.data.teams as TeamInterface[]).map((x: TeamInterface) => [x.id, x])
+  );
 }
 
 export function getStageItemLookup(