fix: fix form state resetting in media source edit modals

chrisbenincasa · Dec 6, 2024 · 236d819 · 236d819
1 parent 3e48d6f
commit 236d819
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 17 deletions.
diff --git a/web/src/components/settings/media_source/JelllyfinServerEditDialog.tsx b/web/src/components/settings/media_source/JelllyfinServerEditDialog.tsx
@@ -80,7 +80,6 @@ export function JellyfinServerEditDialog({ open, onClose, server }: Props) {
   const title = server ? `Editing "${server.name}"` : 'New Media Source';
 
   const handleClose = () => {
-    reset(emptyDefaults);
     setShowAccessToken(false);
     onClose();
   };
@@ -99,6 +98,12 @@ export function JellyfinServerEditDialog({ open, onClose, server }: Props) {
     defaultValues: server ?? emptyDefaults,
   });
 
+  useEffect(() => {
+    if (open) {
+      reset();
+    }
+  }, [reset, open]);
+
   // These are updated in a watch callback, so we debounce them
   // along with the details we use to check server status. Otherwise
   // setting the error will cause us to check server status on every

diff --git a/web/src/components/settings/media_source/MediaSourceTableRow.tsx b/web/src/components/settings/media_source/MediaSourceTableRow.tsx
@@ -6,9 +6,9 @@ import { MediaSourceSettings } from '@tunarr/types';
 import { capitalize, isNull, isUndefined } from 'lodash-es';
 import { useState } from 'react';
 import { RotatingLoopIcon } from '../../base/LoadingIcon.tsx';
+import { JellyfinServerEditDialog } from './JelllyfinServerEditDialog.tsx';
 import { MediaSourceDeleteDialog } from './MediaSourceDeleteDialog.tsx';
 import { PlexServerEditDialog } from './PlexServerEditDialog.tsx';
-import { JellyfinServerEditDialog } from './JelllyfinServerEditDialog.tsx';
 
 export function MediaSourceTableRow({ server }: MediaSourceTableRowProps) {
   const apiClient = useTunarrApi();
@@ -19,7 +19,7 @@ export function MediaSourceTableRow({ server }: MediaSourceTableRowProps) {
     isLoading: backendStatusLoading,
     error: backendStatusError,
   } = useQuery({
-    queryKey: ['plex-servers', server.id, 'status'],
+    queryKey: ['settings', 'media-sources', server.id, 'status'],
     queryFn: () =>
       apiClient.getMediaSourceStatus({ params: { id: server.id } }),
     staleTime: 1000 * 60 * 5,

diff --git a/web/src/components/settings/media_source/PlexServerEditDialog.tsx b/web/src/components/settings/media_source/PlexServerEditDialog.tsx
@@ -65,7 +65,6 @@ export function PlexServerEditDialog({ open, onClose, server }: Props) {
   const title = server ? `Editing "${server.name}"` : 'New Plex Server';
 
   const handleClose = () => {
-    reset(emptyDefaults);
     setShowAccessToken(false);
     onClose();
   };
@@ -81,6 +80,12 @@ export function PlexServerEditDialog({ open, onClose, server }: Props) {
     defaultValues: server ?? emptyDefaults,
   });
 
+  useEffect(() => {
+    if (open) {
+      reset();
+    }
+  }, [open, reset]);
+
   const updatePlexServerMutation = useMutation({
     mutationFn: async (newOrUpdatedServer: PlexServerSettingsForm) => {
       if (isNonEmptyString(newOrUpdatedServer.id)) {
@@ -98,6 +103,7 @@ export function PlexServerEditDialog({ open, onClose, server }: Props) {
     onSuccess: async () => {
       await queryClient.invalidateQueries({
         queryKey: ['settings', 'media-sources'],
+        exact: false,
       });
       handleClose();
     },
@@ -160,7 +166,6 @@ export function PlexServerEditDialog({ open, onClose, server }: Props) {
       fullWidth
       component="form"
       onSubmit={onSubmit}
-      keepMounted={false}
       onClose={() => onClose()}
     >
       <DialogTitle>{title}</DialogTitle>

diff --git a/web/src/pages/settings/MediaSourceSettingsPage.tsx b/web/src/pages/settings/MediaSourceSettingsPage.tsx
@@ -1,8 +1,6 @@
 import UnsavedNavigationAlert from '@/components/settings/UnsavedNavigationAlert.tsx';
 import { AddMediaSourceButton } from '@/components/settings/media_source/AddMediaSourceButton.tsx';
-import { JellyfinServerEditDialog } from '@/components/settings/media_source/JelllyfinServerEditDialog.tsx';
 import { MediaSourceTableRow } from '@/components/settings/media_source/MediaSourceTableRow';
-import { PlexServerEditDialog } from '@/components/settings/media_source/PlexServerEditDialog';
 import {
   CheckboxFormController,
   TypedController,
@@ -51,8 +49,6 @@ const supportedPaths = [
 export default function MediaSourceSettingsPage() {
   const apiClient = useTunarrApi();
   const [restoreTunarrDefaults, setRestoreTunarrDefaults] = useState(false);
-  const [plexEditDialogOpen, setPlexEditDialogOpen] = useState(false);
-  const [jellyfinEditDialogOpen, setJellyfinEditDialogOpen] = useState(false);
 
   const {
     data: servers,
@@ -375,14 +371,6 @@ export default function MediaSourceSettingsPage() {
           </Stack>
         </Stack>
       </Box>
-      <PlexServerEditDialog
-        open={plexEditDialogOpen}
-        onClose={() => setPlexEditDialogOpen(false)}
-      />
-      <JellyfinServerEditDialog
-        open={jellyfinEditDialogOpen}
-        onClose={() => setJellyfinEditDialogOpen(false)}
-      />
     </Box>
   );
 }