Only update tags if not dirtied (#2241)

ui/v2.5/src/components/Tagger/scenes/StashSearchResult.tsx

@@ -23,6 +23,7 @@ import { OptionalField } from "../IncludeButton";
 import { SceneTaggerModalsState } from "./sceneTaggerModals";
 import PerformerResult from "./PerformerResult";
 import StudioResult from "./StudioResult";
+import { useInitialState } from "src/hooks/state";
 
 const getDurationStatus = (
   scene: IScrapedScene,
@@ -214,7 +215,9 @@ const StashSearchResult: React.FC<IStashSearchResultProps> = ({
   const [excludedFields, setExcludedFields] = useState<Record<string, boolean>>(
     {}
   );
-  const [tagIDs, setTagIDs] = useState<string[]>(getInitialTags());
+  const [tagIDs, setTagIDs, setInitialTagIDs] = useInitialState<string[]>(
+    getInitialTags()
+  );
 
   // map of original performer to id
   const [performerIDs, setPerformerIDs] = useState<(string | undefined)[]>(
@@ -226,8 +229,8 @@ const StashSearchResult: React.FC<IStashSearchResultProps> = ({
   );
 
   useEffect(() => {
-    setTagIDs(getInitialTags());
-  }, [getInitialTags]);
+    setInitialTagIDs(getInitialTags());
+  }, [getInitialTags, setInitialTagIDs]);
 
   useEffect(() => {
     setPerformerIDs(getInitialPerformers());
@@ -566,6 +569,13 @@ const StashSearchResult: React.FC<IStashSearchResultProps> = ({
     </div>
   );
 
+  async function onCreateTag(t: GQL.ScrapedTag) {
+    const newTagID = await createNewTag(t);
+    if (newTagID !== undefined) {
+      setTagIDs([...tagIDs, newTagID]);
+    }
+  }
+
   const renderTagsField = () => (
     <div className="mt-2">
       <div>
@@ -592,7 +602,7 @@ const StashSearchResult: React.FC<IStashSearchResultProps> = ({
             variant="secondary"
             key={t.name}
             onClick={() => {
-              createNewTag(t);
+              onCreateTag(t);
             }}
           >
             {t.name}

ui/v2.5/src/hooks/state.ts

@@ -0,0 +1,34 @@
+import React, { useCallback, Dispatch, SetStateAction } from "react";
+
+// useInitialState is an extension of the useState hook.
+// It maintains a state, but additionally exposes a setInitialState function.
+// When setInitialState is called, the current state is only updated if the current
+// state is unchanged from the initial state. This means that the current state will
+// only be updated if explicitly called, or if the initial state is changed and the current
+// state is not dirty.
+export function useInitialState<T>(
+  initialValue: T
+): [T, Dispatch<SetStateAction<T>>, Dispatch<T>] {
+  const [, setInitialValueInternal] = React.useState<T>(initialValue);
+  const [value, setValue] = React.useState<T>(initialValue);
+
+  const setInitialValue = useCallback((v: T) => {
+    setInitialValueInternal((currentInitial) => {
+      if (v === currentInitial) {
+        return currentInitial;
+      }
+
+      setValue((currentValue) => {
+        if (currentInitial === currentValue) {
+          return v;
+        }
+
+        return currentValue;
+      });
+
+      return v;
+    });
+  }, []);
+
+  return [value, setValue, setInitialValue];
+}