Fix a issue that the edit modal will clear the languages profiles if without changing anything

frontend/src/components/modals/ItemEditorModal.tsx

@@ -1,18 +1,18 @@
 import { useIsAnyActionRunning, useLanguageProfiles } from "apis/hooks";
-import React, { FunctionComponent, useMemo, useState } from "react";
+import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
 import { Container, Form } from "react-bootstrap";
+import { UseMutationResult } from "react-query";
 import { GetItemId } from "utilities";
 import { AsyncButton, Selector } from "../";
 import BaseModal, { BaseModalProps } from "./BaseModal";
 import { useModalInformation } from "./hooks";
 
 interface Props {
-  submit: (form: FormType.ModifyItem) => Promise<void>;
-  onSuccess?: (item: Item.Base) => void;
+  mutation: UseMutationResult<void, unknown, FormType.ModifyItem, unknown>;
 }
 
 const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
-  const { onSuccess, submit, ...modal } = props;
+  const { mutation, ...modal } = props;
 
   const { data: profiles } = useLanguageProfiles();
 
@@ -20,6 +20,8 @@ const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
     modal.modalKey
   );
 
+  const { mutateAsync, isLoading } = mutation;
+
   const hasTask = useIsAnyActionRunning();
 
   const profileOptions = useMemo<SelectorOption<number>[]>(
@@ -29,14 +31,16 @@ const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
       }) ?? [],
     [profiles]
   );
-  const [id, setId] = useState<Nullable<number>>(null);
 
-  const [updating, setUpdating] = useState(false);
+  const [id, setId] = useState<Nullable<number>>(payload?.profileId ?? null);
+
+  useEffect(() => {
+    setId(payload?.profileId ?? null);
+  }, [payload]);
 
   const footer = (
     <AsyncButton
       noReset
-      onChange={setUpdating}
       disabled={hasTask}
       promise={() => {
         if (payload) {
@@ -45,7 +49,7 @@ const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
             return null;
           }
 
-          return submit({
+          return mutateAsync({
             id: [itemId],
             profileid: [id],
           });
@@ -53,10 +57,7 @@ const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
           return null;
         }
       }}
-      onSuccess={() => {
-        closeModal();
-        onSuccess && payload && onSuccess(payload);
-      }}
+      onSuccess={() => closeModal()}
     >
       Save
     </AsyncButton>
@@ -64,7 +65,7 @@ const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
 
   return (
     <BaseModal
-      closeable={!updating}
+      closeable={!isLoading}
       footer={footer}
       title={payload?.title}
       {...modal}
@@ -87,7 +88,7 @@ const Editor: FunctionComponent<Props & BaseModalProps> = (props) => {
               clearable
               disabled={hasTask}
               options={profileOptions}
-              defaultValue={payload?.profileId}
+              value={id}
               onChange={(v) => setId(v === undefined ? null : v)}
             ></Selector>
           </Form.Group>

frontend/src/components/views/ItemView.tsx

@@ -36,8 +36,6 @@ function ItemView<T extends Item.Base>({
 }: Props<T>) {
   const [editMode, setEditMode] = useState(false);
 
-  const { mutateAsync } = mutation;
-
   const showModal = useShowModal();
 
   const updateRow = useCallback<TableUpdater<T>>(
@@ -77,7 +75,7 @@ function ItemView<T extends Item.Base>({
           query={query}
           data={[]}
         ></QueryPageTable>
-        <ItemEditorModal modalKey="edit" submit={mutateAsync}></ItemEditorModal>
+        <ItemEditorModal modalKey="edit" mutation={mutation}></ItemEditorModal>
       </Row>
     </>
   );

frontend/src/pages/Episodes/index.tsx

@@ -44,7 +44,7 @@ const SeriesEpisodesView: FunctionComponent<Props> = (props) => {
   const { data: series, isFetched } = useSeriesById(id);
   const { data: episodes } = useEpisodesBySeriesId(id);
 
-  const { mutateAsync } = useSeriesModification();
+  const mutation = useSeriesModification();
   const { mutateAsync: action } = useSeriesAction();
 
   const available = episodes?.length !== 0;
@@ -168,7 +168,7 @@ const SeriesEpisodesView: FunctionComponent<Props> = (props) => {
           ></Table>
         )}
       </Row>
-      <ItemEditorModal modalKey="edit" submit={mutateAsync}></ItemEditorModal>
+      <ItemEditorModal modalKey="edit" mutation={mutation}></ItemEditorModal>
       <SeriesUploadModal
         modalKey="upload"
         episodes={episodes ?? []}

frontend/src/pages/Movies/Details/index.tsx

@@ -48,7 +48,7 @@ const MovieDetailView: FunctionComponent<Props> = ({ match }) => {
 
   const showModal = useShowModal();
 
-  const { mutateAsync } = useMovieModification();
+  const mutation = useMovieModification();
   const { mutateAsync: action } = useMovieAction();
   const { mutateAsync: downloadAsync } = useDownloadMovieSubtitles();
 
@@ -177,7 +177,7 @@ const MovieDetailView: FunctionComponent<Props> = ({ match }) => {
       <Row>
         <Table movie={movie} profile={profile} disabled={hasTask}></Table>
       </Row>
-      <ItemEditorModal modalKey="edit" submit={mutateAsync}></ItemEditorModal>
+      <ItemEditorModal modalKey="edit" mutation={mutation}></ItemEditorModal>
       <SubtitleToolModal modalKey="tools" size="lg"></SubtitleToolModal>
       <MovieHistoryModal modalKey="history" size="lg"></MovieHistoryModal>
       <MovieUploadModal modalKey="upload" size="lg"></MovieUploadModal>