From fc78cde8b8454bd1099b48b4093292ff1ac57dd0 Mon Sep 17 00:00:00 2001
From: Jonathan Gruber <gruberjonathan@gmail.com>
Date: Mon, 5 Jun 2023 18:03:04 +0200
Subject: [PATCH] Use the reducer pattern to edit matches

---
 src/hooks/useSteamGames.ts |  10 +-
 src/pages/AddMatch.tsx     |  38 ++--
 src/pages/EditMatch.tsx    | 343 ++++++++++++++++++++-----------------
 src/types/index.ts         |   6 +-
 4 files changed, 223 insertions(+), 174 deletions(-)

diff --git a/src/hooks/useSteamGames.ts b/src/hooks/useSteamGames.ts
index 6a8dc40..65c6fe9 100644
--- a/src/hooks/useSteamGames.ts
+++ b/src/hooks/useSteamGames.ts
@@ -17,18 +17,18 @@ interface Response {
 }
 
 export const useSteamGames = () => {
-  const { data: user } = useSteamUser();
+  const { data: steamUser } = useSteamUser();
 
   const url = new URL(
     'https://api.jogruber.de/steam/IPlayerService/GetOwnedGames/v0001?format=json&include_appinfo=1',
   );
 
-  if (user) {
-    url.searchParams.append('steamid', user.id);
+  if (steamUser) {
+    url.searchParams.append('steamid', steamUser.id);
   }
 
   return useQuery({
-    queryKey: ['steam-apps', user?.id],
+    queryKey: ['steam-apps', steamUser?.id],
     queryFn: () =>
       axios
         .get<Response>(url.toString())
@@ -36,6 +36,6 @@ export const useSteamGames = () => {
         .then(games =>
           games.sort((a, b) => b.playtime_forever - a.playtime_forever),
         ),
-    enabled: Boolean(user),
+    enabled: Boolean(steamUser),
   });
 };
diff --git a/src/pages/AddMatch.tsx b/src/pages/AddMatch.tsx
index 4b05a94..f4342c7 100644
--- a/src/pages/AddMatch.tsx
+++ b/src/pages/AddMatch.tsx
@@ -62,6 +62,7 @@ const AddMatch: FunctionComponent = () => {
 
   const [game, setGame] = useState<GameOption | null>(null);
   const [date, setDate] = useState<Date | null>(defaultDate);
+  const [maxPlayers, setMaxPlayers] = useState<string>('');
   const [description, setDescription] = useState<string>();
   const [selfJoinMatch, setSelfJoinMatch] = useState(true);
 
@@ -78,18 +79,19 @@ const AddMatch: FunctionComponent = () => {
 
     setLoading(true);
 
-    const match: NewMatch = {
+    const match = {
       created: Timestamp.fromDate(new Date()),
       createdBy: authUser.uid,
       date: Timestamp.fromDate(date),
       game: {
         name: game.name,
-        ...(isSteamGame(game) && { steamAppId: game.appid }),
+        steamAppId: isSteamGame(game) ? game.appid : null,
+        maxPlayers: null,
       },
       players: [],
       reactions: [],
-      ...(description && { description }),
-    };
+      description: description ?? null,
+    } satisfies NewMatch;
 
     addDoc(getCollectionRef('matches'), match)
       .then(doc => {
@@ -121,7 +123,8 @@ const AddMatch: FunctionComponent = () => {
         {!steamUser && (
           <Box mt={2} mb={5}>
             <Typography variant="body1" color="textSecondary" mb={2}>
-              Melde dich bei Steam an, um all deine verfügbaren Spiele zu laden.
+              Melde dich bei Steam an, um all deine verfügbaren Spiele
+              anzuzeigen.
             </Typography>
             <SteamAuthentication />
           </Box>
@@ -131,17 +134,32 @@ const AddMatch: FunctionComponent = () => {
         </Box>
 
         <form autoComplete="off" onSubmit={event => addMatch(event, authUser)}>
-          <Box mb="1.5rem">
+          <Box mb={3}>
             <DateTimePicker date={date} onChange={setDate} />
           </Box>
-          <Box mb="1rem">
+          <Box mb={3}>
             <TextField
-              label="Beschreibung (optional)"
-              defaultValue={description}
+              type="number"
+              label="Anzahl Spieler"
+              inputProps={{
+                inputMode: 'numeric',
+                min: 2,
+                max: 50,
+              }}
+              value={maxPlayers}
+              onChange={event => setMaxPlayers(event.target.value)}
               variant="outlined"
+              fullWidth
+            />
+          </Box>
+          <Box mb={3}>
+            <TextField
+              label="Beschreibung"
+              value={description}
               onChange={event => setDescription(event.target.value)}
               multiline
               rows={3}
+              variant="outlined"
               fullWidth
             />
           </Box>
@@ -154,7 +172,7 @@ const AddMatch: FunctionComponent = () => {
             }
             label="Selbst mitspielen"
           />
-          <Box my="1.5rem">
+          <Box my={3}>
             <Grid container direction="row" spacing={2}>
               <Grid item xs>
                 <Button
diff --git a/src/pages/EditMatch.tsx b/src/pages/EditMatch.tsx
index ded6e6f..50420da 100644
--- a/src/pages/EditMatch.tsx
+++ b/src/pages/EditMatch.tsx
@@ -7,14 +7,13 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import isValid from 'date-fns/isValid';
 import setDate from 'date-fns/set';
 import { Timestamp, updateDoc } from 'firebase/firestore';
 import React, {
   FormEvent,
-  FunctionComponent,
+  Reducer,
   useContext,
-  useEffect,
+  useReducer,
   useState,
 } from 'react';
 import { useDocumentDataOnce } from 'react-firebase-hooks/firestore';
@@ -24,71 +23,96 @@ import AppBar from '../components/AppBar';
 import SteamAuthentication from '../components/Auth/SteamAuthentication';
 import DateTimePicker from '../components/DateTimePicker';
 import { SnackbarContext } from '../components/Layout';
-import GameSelect from '../components/Match/GameSelect';
+import GameSelect, { GameOption } from '../components/Match/GameSelect';
 import PageMetadata from '../components/PageMetadata';
 import routes from '../constants/routes';
 import { useSteamUser } from '../hooks/useSteamUser';
 import { getDocRef } from '../services/firebase';
-import { Game, Match, Player } from '../types';
+import { Match, Player } from '../types';
 import { isSteamGame } from '../types/guards';
 
-const updatePlayerList = (
-  players: Array<Player>,
-  updatedDate: Date,
-): Array<Player> =>
-  players.map(player => {
-    const updateDate = {
-      year: updatedDate.getFullYear(),
-      month: updatedDate.getMonth(),
-      date: updatedDate.getDate(),
-    };
-
-    return {
-      uid: player.uid,
-      from: Timestamp.fromDate(setDate(player.from.toDate(), updateDate)),
-      until: Timestamp.fromDate(setDate(player.until.toDate(), updateDate)),
-    };
-  });
-
-const EditMatch: FunctionComponent = () => {
-  const navigate = useNavigate();
-  const dispatchSnack = useContext(SnackbarContext);
-
-  const dispatchError = () =>
-    dispatchSnack('Match konnte nicht bearbeitet werden', 'error');
+type Actions =
+  | { type: 'set_game'; game: GameOption }
+  | { type: 'set_date'; date: Date }
+  | { type: 'set_max_players'; maxPlayers: string }
+  | { type: 'set_description'; description: string };
+
+const reducer: Reducer<Match, Actions> = (match, action) => {
+  switch (action.type) {
+    case 'set_game': {
+      return {
+        ...match,
+        game: {
+          ...match.game,
+          name: action.game.name,
+          steamAppId: isSteamGame(action.game) ? action.game.appid : null,
+        },
+      };
+    }
+    case 'set_date': {
+      return {
+        ...match,
+        date: Timestamp.fromDate(action.date),
+        players: updatePlayerDates(match.players, action.date),
+      };
+    }
+    case 'set_max_players': {
+      return {
+        ...match,
+        game: {
+          ...match.game,
+          maxPlayers: action.maxPlayers ? Number(action.maxPlayers) : null,
+        },
+      };
+    }
+    case 'set_description': {
+      return {
+        ...match,
+        description: action.description ?? null,
+      };
+    }
+    default:
+      return match;
+  }
+};
 
+const EditMatch = () => {
   const { id } = useParams<{ id: string }>();
-  const [match, matchLoading, matchError] = useDocumentDataOnce<Match>(
+  const [match, loading, error] = useDocumentDataOnce<Match>(
     getDocRef('matches', id),
     { idField: 'id' },
   );
 
-  const { data: steamUser } = useSteamUser();
-  const [loading, setLoading] = useState(false);
-
-  const [matchState, setMatchState] = useState<{
-    game?: Game;
-    date?: Date;
-    description?: string;
-  }>({});
-
-  useEffect(() => {
-    if (match) {
-      setMatchState({
-        game: match.game,
-        date: match.date.toDate(),
-        description: match.description,
-      });
-    }
-  }, [match, matchLoading]);
-
-  if (matchError || (!matchLoading && !match)) {
+  const dispatchSnack = useContext(SnackbarContext);
+  if (error || (!loading && !match)) {
     dispatchSnack(`Match kann nicht bearbeitet werden`, 'error');
 
     return <Navigate to={routes.matchList} />;
   }
 
-  if (matchLoading || !match) {
+  return (
+    <>
+      <PageMetadata title="Match bearbeiten – Daddel" />
+      <AppBar title="Match bearbeiten" />
+      <Container>{match && <EditForm match={match} />}</Container>
+    </>
+  );
+};
+
+interface Props {
+  match: Match;
+}
+
+const EditForm = (props: Props) => {
+  const navigate = useNavigate();
+  const dispatchSnack = useContext(SnackbarContext);
+
+  const { data: steamUser, isLoading: steamUserLoading } = useSteamUser();
+  const [loading, setLoading] = useState(false);
+
+  const [match, dispatch] = useReducer(reducer, props.match);
+
+  if (steamUserLoading) {
     return null;
   }
 
@@ -96,127 +120,134 @@ const EditMatch: FunctionComponent = () => {
     event.preventDefault();
     setLoading(true);
 
-    if (!matchState.date || !matchState.game) {
-      return dispatchError();
-    }
-
-    const updatedMatch: Omit<
-      Match,
-      'id' | 'created' | 'createdBy' | 'reactions'
-    > = {
-      date: Timestamp.fromDate(matchState.date),
-      game: matchState.game,
-      players: updatePlayerList(match.players, matchState.date),
-      ...(matchState.description && { description: matchState.description }),
-    };
-
-    updateDoc<Match>(getDocRef('matches', match.id), updatedMatch)
+    updateDoc<Match>(getDocRef('matches', match.id), match)
       .then(() => {
         dispatchSnack('Match aktualisiert');
         navigate(routes.matchList);
       })
-      .catch(dispatchError)
+      .catch(() =>
+        dispatchSnack('Match konnte nicht bearbeitet werden', 'error'),
+      )
       .finally(() => setLoading(false));
   };
 
   return (
     <>
-      <PageMetadata title="Match bearbeiten – Daddel" />
-      <AppBar title="Match bearbeiten" />
-      <Container>
-        {!steamUser && (
-          <Box mt={2} mb={5}>
-            <Typography variant="body1" color="textSecondary" mb={2}>
-              Melde dich bei Steam an, um all deine verfügbaren Spiele zu laden.
-            </Typography>
-            <SteamAuthentication />
-          </Box>
-        )}
-        <Box mt={2} mb={3}>
-          <GameSelect
-            defaultValue={match.game}
-            onChange={game => {
-              if (game) {
-                setMatchState(prev => ({
-                  ...prev,
-                  game: {
-                    name: game.name,
-                    ...(isSteamGame(game) && { steamAppId: game.appid }),
-                  },
-                }));
+      {!steamUser && (
+        <Box mt={2} mb={5}>
+          <Typography variant="body1" color="textSecondary" mb={2}>
+            Melde dich bei Steam an, um all deine verfügbaren Spiele anzuzeigen.
+          </Typography>
+          <SteamAuthentication />
+        </Box>
+      )}
+      <Box mt={2} mb={3}>
+        <GameSelect
+          defaultValue={match.game}
+          onChange={game => {
+            if (game) {
+              dispatch({ type: 'set_game', game });
+            }
+          }}
+        />
+      </Box>
+
+      <form autoComplete="off" onSubmit={handleUpdate}>
+        <Box mb={3}>
+          <DateTimePicker
+            date={match.date.toDate()}
+            onChange={date => {
+              if (date) {
+                dispatch({ type: 'set_date', date });
               }
             }}
           />
         </Box>
-
-        <form autoComplete="off" onSubmit={handleUpdate}>
-          <Box mb="1.5rem">
-            <DateTimePicker
-              date={matchState.date ?? null}
-              onChange={date =>
-                setMatchState(prev => ({
-                  ...prev,
-                  ...(date && { date }),
-                }))
-              }
-            />
-          </Box>
-          <Box mb="1rem">
-            <TextField
-              label="Beschreibung (optional)"
-              defaultValue={match.description}
-              variant="outlined"
-              onChange={event =>
-                setMatchState(prev => ({
-                  ...prev,
-                  description: event.target.value,
-                }))
-              }
-              multiline
-              rows={3}
-              fullWidth
-            />
-          </Box>
-          <Box my="1.5rem">
-            <Grid container direction="row" spacing={2}>
-              <Grid item xs>
-                <Button
-                  onClick={() => window.history.go(-1)}
-                  disabled={loading}
-                  fullWidth
-                >
-                  Abbrechen
-                </Button>
-              </Grid>
-              <Grid item xs>
-                <Button
-                  type="submit"
-                  color="primary"
-                  disabled={
-                    !matchState.game?.name ||
-                    !isValid(matchState.date) ||
-                    loading
-                  }
-                  startIcon={
-                    loading ? (
-                      <CircularProgress
-                        color="inherit"
-                        size={22}
-                        thickness={3}
-                      />
-                    ) : null
-                  }
-                  fullWidth
-                >
-                  Speichern
-                </Button>
-              </Grid>
+        <Box mb={3}>
+          <TextField
+            type="number"
+            label="Anzahl Spieler"
+            inputProps={{
+              inputMode: 'numeric',
+              min: 2,
+              max: 50,
+            }}
+            value={String(match.game.maxPlayers ?? '')}
+            onChange={event => {
+              dispatch({
+                type: 'set_max_players',
+                maxPlayers: event.target.value,
+              });
+            }}
+            variant="outlined"
+            fullWidth
+          />
+        </Box>
+        <Box mb={3}>
+          <TextField
+            label="Beschreibung (optional)"
+            value={match.description}
+            onChange={event =>
+              dispatch({
+                type: 'set_description',
+                description: event.target.value,
+              })
+            }
+            multiline
+            rows={3}
+            variant="outlined"
+            fullWidth
+          />
+        </Box>
+        <Box my={3}>
+          <Grid container direction="row" spacing={2}>
+            <Grid item xs>
+              <Button
+                onClick={() => window.history.go(-1)}
+                disabled={loading}
+                fullWidth
+              >
+                Abbrechen
+              </Button>
+            </Grid>
+            <Grid item xs>
+              <Button
+                type="submit"
+                color="primary"
+                disabled={!match.game?.name || loading}
+                startIcon={
+                  loading ? (
+                    <CircularProgress color="inherit" size={22} thickness={3} />
+                  ) : null
+                }
+                fullWidth
+              >
+                Speichern
+              </Button>
             </Grid>
-          </Box>
-        </form>
-      </Container>
+          </Grid>
+        </Box>
+      </form>
     </>
   );
 };
 
+const updatePlayerDates = (
+  players: Array<Player>,
+  updatedDate: Date,
+): Array<Player> =>
+  players.map(player => {
+    const updateDate = {
+      year: updatedDate.getFullYear(),
+      month: updatedDate.getMonth(),
+      date: updatedDate.getDate(),
+    };
+
+    return {
+      uid: player.uid,
+      from: Timestamp.fromDate(setDate(player.from.toDate(), updateDate)),
+      until: Timestamp.fromDate(setDate(player.until.toDate(), updateDate)),
+    };
+  });
+
 export default EditMatch;
diff --git a/src/types/index.ts b/src/types/index.ts
index 115b59f..eccc2ae 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -14,7 +14,7 @@ export interface NewMatch {
   createdBy: Uid;
   date: Timestamp;
   game: Game;
-  description?: string;
+  description: string | null;
   players: Array<Player>;
   reactions?: Array<Reaction>;
 }
@@ -26,8 +26,8 @@ export interface Reaction {
 
 export interface Game {
   name: string;
-  steamAppId?: number;
-  maxPlayers?: number;
+  steamAppId: number | null;
+  maxPlayers: number | null;
 }
 
 export interface Player {