New scene select with additional fields (#4832)

ui/v2.5/src/components/Shared/Select.tsx

@@ -27,6 +27,7 @@ import { TagIDSelect } from "../Tags/TagSelect";
 import { StudioIDSelect } from "../Studios/StudioSelect";
 import { GalleryIDSelect } from "../Galleries/GallerySelect";
 import { MovieIDSelect } from "../Movies/MovieSelect";
+import { SceneIDSelect } from "../Scenes/SceneSelect";
 
 export type SelectObject = {
   id: string;
@@ -254,54 +255,10 @@ export const GallerySelect: React.FC<
   return <GalleryIDSelect {...props} />;
 };
 
-export const SceneSelect: React.FC<ITitledSelect> = (props) => {
-  const [query, setQuery] = useState<string>("");
-  const { data, loading } = GQL.useFindScenesQuery({
-    skip: query === "",
-    variables: {
-      filter: {
-        q: query,
-      },
-    },
-  });
-
-  const scenes = data?.findScenes.scenes ?? [];
-  const items = scenes.map((s) => ({
-    label: objectTitle(s),
-    value: s.id,
-  }));
-
-  const onInputChange = useDebounce(setQuery, 500);
-
-  const onChange = (selectedItems: OnChangeValue<Option, boolean>) => {
-    const selected = getSelectedItems(selectedItems);
-    props.onSelect(
-      (selected ?? []).map((s) => ({
-        id: s.value,
-        title: s.label,
-      }))
-    );
-  };
-
-  const options = props.selected.map((s) => ({
-    value: s.id,
-    label: s.title,
-  }));
-
-  return (
-    <SelectComponent
-      onChange={onChange}
-      onInputChange={onInputChange}
-      isLoading={loading}
-      items={items}
-      selectedOptions={options}
-      isMulti={props.isMulti ?? false}
-      placeholder="Search for scene..."
-      noOptionsMessage={query === "" ? null : "No scenes found."}
-      showDropdown={false}
-      isDisabled={props.disabled}
-    />
-  );
+export const SceneSelect: React.FC<IFilterProps & { excludeIds?: string[] }> = (
+  props
+) => {
+  return <SceneIDSelect {...props} />;
 };
 
 export const ImageSelect: React.FC<ITitledSelect> = (props) => {