Always refresh round backup files when opening the dialog

JensForstmann · Oct 9, 2023 · ddda9f8 · ddda9f8
1 parent c01dcff
commit ddda9f8
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 55 deletions.
diff --git a/frontend/src/components/MatchMapCard.tsx b/frontend/src/components/MatchMapCard.tsx
@@ -1,4 +1,4 @@
-import { Component } from 'solid-js';
+import { Component, createSignal } from 'solid-js';
 import {
 	IMatchMap,
 	IMatchMapUpdateDto,
@@ -50,6 +50,21 @@ export const MatchMapCard: Component<{
 			_switchTeamInternals: true,
 		});
 	};
+	const [roundBackupFiles, setRoundBackupFiles] = createSignal<string[]>();
+	const loadRoundBackupFiles = async () => {
+		const resp = await fetcher<{ latestFiles: string[]; total: number }>(
+			'GET',
+			`/api/matches/${props.match.id}/server/round_backups?count=15`
+		);
+		if (resp) {
+			setRoundBackupFiles(resp.latestFiles);
+		}
+	};
+	const openRoundBackup = () => {
+		loadRoundBackupFiles();
+		modalRef?.showModal();
+	};
+
 	let modalRef: HTMLDialogElement | undefined;
 
 	const teamA = () => {
@@ -78,7 +93,7 @@ export const MatchMapCard: Component<{
 					[t('change map name'), changeMapName],
 					[t('change map state'), changeMapState],
 					props.match.currentMap === props.mapIndex
-						? [t('load round backup'), () => modalRef?.showModal()]
+						? [t('load round backup'), openRoundBackup]
 						: [t('switch to this map'), mustConfirm(loadThisMap)],
 					[t('switch team internals'), switchTeamInternals],
 				]}
@@ -100,10 +115,14 @@ export const MatchMapCard: Component<{
 			<p>
 				<span>{t(props.map.state)}</span>
 			</p>
-			<Modal ref={modalRef}>
+			<Modal ref={modalRef} onClose={() => setRoundBackupFiles(undefined)}>
 				<h4>{t('Load Round Backup')}</h4>
 				<div class="text-left">
-					<RoundBackups match={props.match} onClose={() => modalRef?.close()} />
+					<RoundBackups
+						match={props.match}
+						onClose={() => modalRef?.close()}
+						roundBackupFiles={roundBackupFiles()}
+					/>
 				</div>
 			</Modal>
 		</Card>

diff --git a/frontend/src/components/Modal.tsx b/frontend/src/components/Modal.tsx
@@ -1,12 +1,14 @@
-import { Component, JSX } from 'solid-js';
+import { Component, ComponentProps, JSX, splitProps } from 'solid-js';
 import { t } from '../utils/locale';
 
-export const Modal: Component<{
-	children: JSX.Element;
-	ref?: HTMLDialogElement;
-}> = (props) => {
+export const Modal: Component<
+	ComponentProps<'dialog'> & {
+		children: JSX.Element;
+	}
+> = (props) => {
+	const [local, others] = splitProps(props, ['children']);
 	return (
-		<dialog class="modal" ref={props.ref}>
+		<dialog class="modal" {...others}>
 			<div class="modal-box">
 				<button
 					class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
@@ -16,7 +18,7 @@ export const Modal: Component<{
 				>
 					✕
 				</button>
-				{props.children}
+				{local.children}
 			</div>
 			<form method="dialog" class="modal-backdrop">
 				<button>{t('close')}</button>

diff --git a/frontend/src/components/RoundBackups.tsx b/frontend/src/components/RoundBackups.tsx
@@ -1,24 +1,19 @@
-import { Component, createResource, createSignal, For, Match, Switch } from 'solid-js';
+import { Component, createSignal, For, Show } from 'solid-js';
 import { IMatchResponse } from '../../../common';
 import { createFetcher } from '../utils/fetcher';
+import { t } from '../utils/locale';
 import { mustConfirm } from '../utils/mustConfirm';
-import { ErrorComponent } from './ErrorComponent';
 import { Loader } from './Loader';
 import { SelectInput } from './SelectInput';
-import { t } from '../utils/locale';
 
 export const RoundBackups: Component<{
 	match: IMatchResponse;
+	roundBackupFiles?: string[];
 	onClose?: () => void;
 }> = (props) => {
 	const fetcher = createFetcher(props.match.tmtSecret);
 	const [selectedFile, setSelectedFile] = createSignal<string>();
-	const [roundBackups] = createResource(() =>
-		fetcher<{ latestFiles: string[]; total: number }>(
-			'GET',
-			`/api/matches/${props.match.id}/server/round_backups?count=15`
-		)
-	);
+
 	const loadBackup = async () => {
 		const success = await fetcher<boolean>(
 			'POST',
@@ -30,40 +25,28 @@ export const RoundBackups: Component<{
 	};
 
 	return (
-		<Switch>
-			<Match when={roundBackups.error || roundBackups() instanceof Error}>
-				<ErrorComponent />
-			</Match>
-			<Match when={roundBackups()}>
-				{(roundBackups) => (
-					<>
-						<SelectInput
-							value={selectedFile()}
-							onInput={(e) => setSelectedFile(e.currentTarget.value)}
-						>
-							<option value="">{t('Select Round Backup File...')}</option>
-							<For each={roundBackups().latestFiles}>
-								{(file) => (
-									<option value={file}>
-										{file.replace(`round_backup_${props.match.id}_`, '')}
-									</option>
-								)}
-							</For>
-						</SelectInput>
-						<div class="text-center">
-							<button
-								class="btn btn-primary"
-								onClick={() => selectedFile() && mustConfirm(() => loadBackup())()}
-							>
-								{t('Load Round Backup')}
-							</button>
-						</div>
-					</>
-				)}
-			</Match>
-			<Match when={roundBackups.loading}>
-				<Loader />
-			</Match>
-		</Switch>
+		<Show when={props.roundBackupFiles} fallback={<Loader />}>
+			<SelectInput
+				value={selectedFile()}
+				onInput={(e) => setSelectedFile(e.currentTarget.value)}
+			>
+				<option value="">{t('Select Round Backup File...')}</option>
+				<For each={props.roundBackupFiles}>
+					{(file) => (
+						<option value={file}>
+							{file.replace(`round_backup_${props.match.id}_`, '')}
+						</option>
+					)}
+				</For>
+			</SelectInput>
+			<div class="text-center">
+				<button
+					class="btn btn-primary"
+					onClick={() => selectedFile() && mustConfirm(() => loadBackup())()}
+				>
+					{t('Load Round Backup')}
+				</button>
+			</div>
+		</Show>
 	);
 };