From 7e747fd8a97591d1063e3ea377ebdd935720df14 Mon Sep 17 00:00:00 2001
From: WithoutPants <53250216+WithoutPants@users.noreply.github.com>
Date: Mon, 20 Apr 2020 12:46:55 +1000
Subject: [PATCH] Restore movie/studio data on edit cancel (#476)

---
 .../components/Movies/MovieDetails/Movie.tsx  |   7 +-
 .../Movies/MovieDetails/MovieScenesPanel.tsx  |   5 +-
 .../Studios/StudioDetails/Studio.tsx          |   7 +-
 ui/v2.5/src/utils/editabletext.tsx            | 103 +++++++++---------
 4 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
index d77f8192d..a551c9bdf 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx
@@ -165,6 +165,11 @@ export const Movie: React.FC = () => {
     ImageUtils.onImageChange(event, onBackImageLoad);
   }
 
+  function onToggleEdit() {
+    setIsEditing(!isEditing);
+    updateMovieData(movie);
+  }
+
   function renderDeleteAlert() {
     return (
       <Modal
@@ -266,7 +271,7 @@ export const Movie: React.FC = () => {
           objectName={name ?? "movie"}
           isNew={isNew}
           isEditing={isEditing}
-          onToggleEdit={() => setIsEditing(!isEditing)}
+          onToggleEdit={onToggleEdit}
           onSave={onSave}
           onImageChange={onImageChange}
           onBackImageChange={onBackImageChange}
diff --git a/ui/v2.5/src/components/Movies/MovieDetails/MovieScenesPanel.tsx b/ui/v2.5/src/components/Movies/MovieDetails/MovieScenesPanel.tsx
index 0b1c94044..a705942df 100644
--- a/ui/v2.5/src/components/Movies/MovieDetails/MovieScenesPanel.tsx
+++ b/ui/v2.5/src/components/Movies/MovieDetails/MovieScenesPanel.tsx
@@ -41,5 +41,8 @@ export const MovieScenesPanel: React.FC<IMovieScenesPanel> = ({ movie }) => {
     return filter;
   }
 
-  return <SceneList subComponent filterHook={filterHook} />;
+  if (movie && movie.id) {
+    return <SceneList subComponent filterHook={filterHook} />;
+  }
+  return <></>;
 };
diff --git a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
index 989735b16..653c0be10 100644
--- a/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
+++ b/ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx
@@ -150,6 +150,11 @@ export const Studio: React.FC = () => {
     );
   }
 
+  function onToggleEdit() {
+    setIsEditing(!isEditing);
+    updateStudioData(studio);
+  }
+
   return (
     <div className="row">
       <div
@@ -180,7 +185,7 @@ export const Studio: React.FC = () => {
           objectName={name ?? "studio"}
           isNew={isNew}
           isEditing={isEditing}
-          onToggleEdit={() => setIsEditing(!isEditing)}
+          onToggleEdit={onToggleEdit}
           onSave={onSave}
           onImageChange={onImageChangeHandler}
           onAutoTag={onAutoTag}
diff --git a/ui/v2.5/src/utils/editabletext.tsx b/ui/v2.5/src/utils/editabletext.tsx
index 27d5e6aa3..d74acd307 100644
--- a/ui/v2.5/src/utils/editabletext.tsx
+++ b/ui/v2.5/src/utils/editabletext.tsx
@@ -63,20 +63,20 @@ const renderInputGroup = (options: {
         {options.value}
       </a>
     );
-  } else {
-    return (
-      <Form.Control
-        className="text-input"
-        readOnly={!options.isEditing}
-        plaintext={!options.isEditing}
-        value={options.value}
-        placeholder={options.placeholder ?? options.title}
-        onChange={(event: React.FormEvent<HTMLInputElement>) =>
-          options.onChange(event.currentTarget.value)
-        }
-      />
-    );
   }
+    
+  return (
+    <Form.Control
+      className="text-input"
+      readOnly={!options.isEditing}
+      plaintext={!options.isEditing}
+      value={options.value ?? ""}
+      placeholder={options.placeholder ?? options.title}
+      onChange={(event: React.FormEvent<HTMLInputElement>) =>
+        options.onChange(event.currentTarget.value)
+      }
+    />
+  );
 }
 
 const renderDurationInput = (options: {
@@ -86,7 +86,7 @@ const renderDurationInput = (options: {
   asString?: boolean
   onChange: (value: string | undefined) => void;
 }) => {
-  let numericValue: number | undefined = undefined;
+  let numericValue: number | undefined;
   if (options.value) {
     if (!options.asString) {
       try {
@@ -100,7 +100,7 @@ const renderDurationInput = (options: {
   }
   
   if (!options.isEditing) {
-    let durationString = undefined;
+    let durationString;
     if (numericValue !== undefined) {
       durationString = DurationUtils.secondsToString(numericValue);
     }
@@ -108,26 +108,26 @@ const renderDurationInput = (options: {
     return (
       <Form.Control
         className="text-input"
-        readOnly={true}
-        plaintext={true}
+        readOnly
+        plaintext
         defaultValue={durationString}
       />
     );
-  } else {
-    return (
-      <DurationInput
-        disabled={!options.isEditing}
-        numericValue={numericValue}
-        onValueChange={(valueAsNumber: number, valueAsString? : string) => { 
-          if (!options.asString) {
-            valueAsString = valueAsNumber !== undefined ? valueAsNumber.toString() : undefined;
-          }
-
-          options.onChange(valueAsString);
-        }}
-      />
-    );
   }
+  return (
+    <DurationInput
+      disabled={!options.isEditing}
+      numericValue={numericValue}
+      onValueChange={(valueAsNumber: number, valueAsString? : string) => { 
+        let value = valueAsString;
+        if (!options.asString) {
+          value = valueAsNumber !== undefined ? valueAsNumber.toString() : undefined;
+        }
+
+        options.onChange(value);
+      }}
+    />
+  );
 }
 
 const renderHtmlSelect = (options: {
@@ -140,31 +140,30 @@ const renderHtmlSelect = (options: {
     return (
       <Form.Control
         className="text-input"
-        readOnly={true}
-        plaintext={true}
+        readOnly
+        plaintext
         defaultValue={options.value}
       />
     );
-  } else {
-    return (
-      <Form.Control
-        as="select"
-        className="input-control"
-        disabled={!options.isEditing}
-        plaintext={!options.isEditing}
-        value={options.value?.toString()}
-        onChange={(event: React.FormEvent<HTMLSelectElement>) =>
-          options.onChange(event.currentTarget.value)
-        }
-      >
-        {options.selectOptions.map((opt) => (
-          <option value={opt} key={opt}>
-            {opt}
-          </option>
-        ))}
-      </Form.Control>
-    );
   }
+  return (
+    <Form.Control
+      as="select"
+      className="input-control"
+      disabled={!options.isEditing}
+      plaintext={!options.isEditing}
+      value={options.value?.toString()}
+      onChange={(event: React.FormEvent<HTMLSelectElement>) =>
+        options.onChange(event.currentTarget.value)
+      }
+    >
+      {options.selectOptions.map((opt) => (
+        <option value={opt} key={opt}>
+          {opt}
+        </option>
+      ))}
+    </Form.Control>
+  );
 }
 
 // TODO: isediting