Prettier

ui/v2.5/src/components/ErrorBoundary.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
 interface IErrorBoundaryProps {
-  children?: React.ReactNode,
+  children?: React.ReactNode;
 }
 
 type ErrorInfo = {
-    componentStack: string,
+  componentStack: string;
 };
 
 interface IErrorBoundaryState {
@@ -13,7 +13,10 @@ interface IErrorBoundaryState {
   errorInfo?: ErrorInfo;
 }
 
-export class ErrorBoundary extends React.Component<IErrorBoundaryProps, IErrorBoundaryState> {
+export class ErrorBoundary extends React.Component<
+  IErrorBoundaryProps,
+  IErrorBoundaryState
+> {
   constructor(props: IErrorBoundaryProps) {
     super(props);
     this.state = {};

ui/v2.5/src/components/List/AddFilter.tsx

@@ -26,9 +26,7 @@ export const AddFilter: React.FC<IAddFilterProps> = (
   const defaultValue = useRef<string | number | undefined>();
 
   const [isOpen, setIsOpen] = useState(false);
-  const [criterion, setCriterion] = useState<Criterion>(
+  const [criterion, setCriterion] = useState<Criterion>(new NoneCriterion());
-    new NoneCriterion()
-  );
 
   const valueStage = useRef<CriterionValue>(criterion.value);
 
@@ -143,7 +141,8 @@ export const AddFilter: React.FC<IAddFilterProps> = (
         if (
           criterion.type !== "performers" &&
           criterion.type !== "studios" &&
-          criterion.type !== "tags")
+          criterion.type !== "tags"
+        )
           return;
 
         return (

ui/v2.5/src/components/List/ListFilter.tsx

@@ -73,7 +73,7 @@ export const ListFilter: React.FC<IListFilterProps> = (
   }
 
   function onChangeSortBy(event: React.MouseEvent<SafeAnchor>) {
-    const target = event.currentTarget as unknown as HTMLAnchorElement;
+    const target = (event.currentTarget as unknown) as HTMLAnchorElement;
     props.onChangeSortBy(target.text);
   }
 

ui/v2.5/src/components/SceneFilenameParser/ParserInput.tsx

@@ -132,7 +132,9 @@ export const ParserInput: React.FC<IParserInputProps> = (
         <InputGroup className="col-8">
           <Form.Control
             id="filename-pattern"
-            onChange={(e: React.FormEvent<HTMLInputElement>) => setPattern(e.currentTarget.value)}
+            onChange={(e: React.FormEvent<HTMLInputElement>) =>
+              setPattern(e.currentTarget.value)
+            }
             value={pattern}
           />
           <InputGroup.Append>
@@ -158,7 +160,9 @@ export const ParserInput: React.FC<IParserInputProps> = (
         <Form.Label className="col-2">Ignored words</Form.Label>
         <InputGroup className="col-8">
           <Form.Control
-            onChange={(e: React.FormEvent<HTMLInputElement>) => setIgnoreWords(e.currentTarget.value)}
+            onChange={(e: React.FormEvent<HTMLInputElement>) =>
+              setIgnoreWords(e.currentTarget.value)
+            }
             value={ignoreWords}
           />
         </InputGroup>

ui/v2.5/src/components/SceneFilenameParser/SceneFilenameParser.tsx

@@ -10,7 +10,7 @@ import { useToast } from "src/hooks";
 import { Pagination } from "src/components/List/Pagination";
 import { IParserInput, ParserInput } from "./ParserInput";
 import { ParserField } from "./ParserField";
-import { SceneParserResult, SceneParserRow } from './SceneParserRow';
+import { SceneParserResult, SceneParserRow } from "./SceneParserRow";
 
 const initialParserInput = {
   pattern: "{title}.{ext}",

ui/v2.5/src/components/SceneFilenameParser/SceneParserRow.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import _ from "lodash";
-import { Form } from 'react-bootstrap';
+import { Form } from "react-bootstrap";
 import {
   ParseSceneFilenamesQuery,
-  SlimSceneDataFragment,
+  SlimSceneDataFragment
 } from "src/core/generated-graphql";
 import {
   PerformerSelect,
@@ -77,15 +77,9 @@ export class SceneParserResult {
       url: this.scene.url,
       rating: this.scene.rating,
       gallery_id: this.scene.gallery?.id,
-      title: this.title.isSet
+      title: this.title.isSet ? this.title.value : this.scene.title,
-        ? this.title.value
+      date: this.date.isSet ? this.date.value : this.scene.date,
-        : this.scene.title,
+      studio_id: this.studio.isSet ? this.studio.value : this.scene.studio?.id,
-      date: this.date.isSet
-        ? this.date.value
-        : this.scene.date,
-      studio_id: this.studio.isSet
-        ? this.studio.value
-        : this.scene.studio?.id,
       performer_ids: this.performers.isSet
         ? this.performers.value
         : this.scene.performers.map(performer => performer.id),
@@ -135,7 +129,9 @@ function SceneParserStringField(props: ISceneParserFieldProps<string>) {
             disabled={!props.parserResult.isSet}
             className={props.className}
             value={props.parserResult.value || ""}
-            onChange={(event: React.FormEvent<HTMLInputElement>) => maybeValueChanged(event.currentTarget.value)}
+            onChange={(event: React.FormEvent<HTMLInputElement>) =>
+              maybeValueChanged(event.currentTarget.value)
+            }
           />
         </Form.Group>
       </td>
@@ -150,7 +146,8 @@ function SceneParserPerformerField(props: ISceneParserFieldProps<string[]>) {
     }
   }
 
-  const originalPerformers = (props.originalParserResult?.originalValue ?? []) as string[];
+  const originalPerformers = (props.originalParserResult?.originalValue ??
+    []) as string[];
   const newPerformers = props.parserResult.value ?? [];
 
   return (
@@ -165,11 +162,7 @@ function SceneParserPerformerField(props: ISceneParserFieldProps<string[]>) {
       </td>
       <td>
         <Form.Group className={props.className}>
-          <PerformerSelect
+          <PerformerSelect isDisabled isMulti ids={originalPerformers} />
-            isDisabled
-            isMulti
-            ids={originalPerformers}
-          />
           <PerformerSelect
             isMulti
             onSelect={items => {
@@ -205,11 +198,7 @@ function SceneParserTagField(props: ISceneParserFieldProps<string[]>) {
       </td>
       <td>
         <Form.Group className={props.className}>
-          <TagSelect
+          <TagSelect isDisabled isMulti ids={originalTags} />
-            isDisabled
-            isMulti
-            ids={originalTags}
-          />
           <TagSelect
             isMulti
             onSelect={items => {
@@ -230,7 +219,9 @@ function SceneParserStudioField(props: ISceneParserFieldProps<string>) {
     }
   }
 
-  const originalStudio = props.originalParserResult?.originalValue ? [props.originalParserResult?.originalValue] : [];
+  const originalStudio = props.originalParserResult?.originalValue
+    ? [props.originalParserResult?.originalValue]
+    : [];
   const newStudio = props.parserResult.value ? [props.parserResult.value] : [];
 
   return (
@@ -245,10 +236,7 @@ function SceneParserStudioField(props: ISceneParserFieldProps<string>) {
       </td>
       <td>
         <Form.Group className={props.className}>
-          <StudioSelect
+          <StudioSelect isDisabled ids={originalStudio} />
-            isDisabled
-            ids={originalStudio}
-          />
           <StudioSelect
             onSelect={items => {
               maybeValueChanged(items[0].id);
@@ -317,9 +305,11 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
           className="parser-field-title"
           parserResult={props.scene.title}
           onSetChanged={isSet =>
-            onTitleChanged(isSet, props.scene.title.value ?? '')
+            onTitleChanged(isSet, props.scene.title.value ?? "")
+          }
+          onValueChanged={value =>
+            onTitleChanged(props.scene.title.isSet, value)
           }
-          onValueChanged={value => onTitleChanged(props.scene.title.isSet, value)}
         />
       )}
       {props.showFields.get("Date") && (
@@ -329,7 +319,7 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
           className="parser-field-date"
           parserResult={props.scene.date}
           onSetChanged={isSet =>
-            onDateChanged(isSet, props.scene.date.value ?? '')
+            onDateChanged(isSet, props.scene.date.value ?? "")
           }
           onValueChanged={value => onDateChanged(props.scene.date.isSet, value)}
         />
@@ -342,10 +332,7 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
           parserResult={props.scene.performers}
           originalParserResult={props.scene.performers}
           onSetChanged={set =>
-            onPerformerIdsChanged(
+            onPerformerIdsChanged(set, props.scene.performers.value ?? [])
-              set,
-              props.scene.performers.value ?? []
-            )
           }
           onValueChanged={value =>
             onPerformerIdsChanged(props.scene.performers.isSet, value)
@@ -375,11 +362,13 @@ export const SceneParserRow = (props: ISceneParserRowProps) => {
           parserResult={props.scene.studio}
           originalParserResult={props.scene.studio}
           onSetChanged={set =>
-            onStudioIdChanged(set, props.scene.studio.value ?? '')
+            onStudioIdChanged(set, props.scene.studio.value ?? "")
+          }
+          onValueChanged={value =>
+            onStudioIdChanged(props.scene.studio.isSet, value)
           }
-          onValueChanged={value => onStudioIdChanged(props.scene.studio.isSet, value)}
         />
       )}
     </tr>
   );
-}
+};

ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx

@@ -69,9 +69,10 @@ export class ScenePlayerImpl extends React.Component<
 
   public UNSAFE_componentWillReceiveProps(props: IScenePlayerProps) {
     if (props.scene !== this.props.scene) {
-      this.setState( state => (
+      this.setState(state => ({
-        { ...state, config: this.makeJWPlayerConfig(this.props.scene) }
+        ...state,
-      ));
+        config: this.makeJWPlayerConfig(this.props.scene)
+      }));
     }
   }
 
@@ -147,7 +148,9 @@ export class ScenePlayerImpl extends React.Component<
     let seekHook:
       | ((seekToPosition: number, _videoTag: HTMLVideoElement) => void)
       | undefined;
-    let getCurrentTimeHook: ((_videoTag: HTMLVideoElement) => number) | undefined;
+    let getCurrentTimeHook:
+      | ((_videoTag: HTMLVideoElement) => number)
+      | undefined;
 
     if (!this.props.scene.is_streamable) {
       getDurationHook = () => {
@@ -163,7 +166,7 @@ export class ScenePlayerImpl extends React.Component<
       };
 
       getCurrentTimeHook = (_videoTag: HTMLVideoElement) => {
-        const start = Number.parseInt(_videoTag.dataset?.start ?? '0', 10);
+        const start = Number.parseInt(_videoTag.dataset?.start ?? "0", 10);
         return _videoTag.currentTime + start;
       };
     }

ui/v2.5/src/components/ScenePlayer/ScenePlayerScrubber.tsx

@@ -293,7 +293,8 @@ export const ScenePlayerScrubber: React.FC<IScenePlayerScrubberProps> = (
       const percentage = marker.seconds / duration;
 
       const left =
-        scrubberSliderEl.current.scrollWidth * percentage - tag!.clientWidth / 2;
+        scrubberSliderEl.current.scrollWidth * percentage -
+        tag!.clientWidth / 2;
       return {
         left: `${left}px`,
         height: 20

ui/v2.5/src/components/Scenes/SceneDetails/SceneEditPanel.tsx

@@ -305,7 +305,9 @@ export const SceneEditPanel: React.FC<IProps> = (props: IProps) => {
               <td>URL</td>
               <td>
                 <Form.Control
-                  onChange={(newValue: React.FormEvent<HTMLInputElement>) => setUrl(newValue.currentTarget.value)}
+                  onChange={(newValue: React.FormEvent<HTMLInputElement>) =>
+                    setUrl(newValue.currentTarget.value)
+                  }
                   value={url}
                   placeholder="URL"
                 />
@@ -376,7 +378,9 @@ export const SceneEditPanel: React.FC<IProps> = (props: IProps) => {
           <Form.Control
             as="textarea"
             className="scene-description"
-            onChange={(newValue: React.FormEvent<HTMLTextAreaElement>) => setDetails(newValue.currentTarget.value)}
+            onChange={(newValue: React.FormEvent<HTMLTextAreaElement>) =>
+              setDetails(newValue.currentTarget.value)
+            }
             value={details}
           />
         </Form.Group>

ui/v2.5/src/components/Scenes/SceneSelectedOptions.tsx

@@ -265,7 +265,9 @@ export const SceneSelectedOptions: React.FC<IListOperationProps> = (
           <Form.Control
             as="select"
             value={rating}
-            onChange={(event: React.FormEvent<HTMLSelectElement>) => setRating(event.currentTarget.value)}
+            onChange={(event: React.FormEvent<HTMLSelectElement>) =>
+              setRating(event.currentTarget.value)
+            }
           >
             {["", "1", "2", "3", "4", "5"].map(opt => (
               <option key={opt} value={opt}>

ui/v2.5/src/components/Settings/SettingsConfigurationPanel.tsx

@@ -175,7 +175,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
           <Form.Control
             className="col col-sm-6"
             defaultValue={databasePath}
-            onChange={(e: React.FormEvent<HTMLInputElement>) => setDatabasePath(e.currentTarget.value)}
+            onChange={(e: React.FormEvent<HTMLInputElement>) =>
+              setDatabasePath(e.currentTarget.value)
+            }
           />
           <Form.Text className="text-muted">
             File location for the SQLite database (requires restart)
@@ -187,7 +189,9 @@ export const SettingsConfigurationPanel: React.FC = () => {
           <Form.Control
             className="col col-sm-6"
             defaultValue={generatedPath}
-            onChange={(e: React.FormEvent<HTMLInputElement>) => setGeneratedPath(e.currentTarget.value)}
+            onChange={(e: React.FormEvent<HTMLInputElement>) =>
+              setGeneratedPath(e.currentTarget.value)
+            }
           />
           <Form.Text className="text-muted">
             Directory location for the generated files (scene markers, scene

ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx

@@ -141,7 +141,9 @@ export const SettingsInterfacePanel: React.FC = () => {
         <Form.Control
           as="textarea"
           value={css}
-          onChange={(e: React.FormEvent<HTMLTextAreaElement>) => setCSS(e.currentTarget.value)}
+          onChange={(e: React.FormEvent<HTMLTextAreaElement>) =>
+            setCSS(e.currentTarget.value)
+          }
           rows={16}
           className="col col-sm-6"
         ></Form.Control>

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

@@ -78,7 +78,9 @@ export const DurationInput: React.FC<IProps> = (props: IProps) => {
           className="duration-control"
           disabled={props.disabled}
           value={value}
-          onChange={(e: React.FormEvent<HTMLInputElement>) => setValue(e.currentTarget.value)}
+          onChange={(e: React.FormEvent<HTMLInputElement>) =>
+            setValue(e.currentTarget.value)
+          }
           onBlur={() =>
             props.onValueChange(DurationUtils.stringToSeconds(value))
           }

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

@@ -51,7 +51,9 @@ export const FolderSelect: React.FC<IProps> = (props: IProps) => {
             <InputGroup>
               <Form.Control
                 placeholder="File path"
-                onChange={(e: React.FormEvent<HTMLInputElement>) => setCurrentDirectory(e.currentTarget.value)}
+                onChange={(e: React.FormEvent<HTMLInputElement>) =>
+                  setCurrentDirectory(e.currentTarget.value)
+                }
                 defaultValue={currentDirectory}
               />
               <InputGroup.Append>

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

@@ -287,7 +287,9 @@ export const TagSelect: React.FC<IFilterProps> = props => {
   const onChange = (selectedItems: ValueType<Option>) => {
     const selectedValues = getSelectedValues(selectedItems);
     setSelectedIds(selectedValues);
-    props.onSelect?.(tags.filter(item => selectedValues.indexOf(item.id) !== -1));
+    props.onSelect?.(
+      tags.filter(item => selectedValues.indexOf(item.id) !== -1)
+    );
   };
 
   return (
@@ -361,7 +363,7 @@ const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
     isClearable,
     defaultValue,
     noOptionsMessage: () => (type !== "tags" ? "None" : null),
-    placeholder: isDisabled ? '' : placeholder,
+    placeholder: isDisabled ? "" : placeholder,
     onInputChange,
     isDisabled,
     isLoading,

ui/v2.5/src/components/Tags/TagList.tsx

@@ -160,7 +160,9 @@ export const TagList: React.FC = () => {
         <Form.Group controlId="tag-name">
           <Form.Label>Name</Form.Label>
           <Form.Control
-            onChange={(newValue:React.FormEvent<HTMLInputElement>) => setName(newValue.currentTarget.value)}
+            onChange={(newValue: React.FormEvent<HTMLInputElement>) =>
+              setName(newValue.currentTarget.value)
+            }
             defaultValue={(editingTag && editingTag.name) || ""}
           />
         </Form.Group>

ui/v2.5/src/hooks/ListHook.tsx

@@ -16,7 +16,10 @@ import {
   FindStudiosQueryResult,
   FindPerformersQueryResult
 } from "src/core/generated-graphql";
-import { useInterfaceLocalForage, IInterfaceConfig } from "src/hooks/LocalForage";
+import {
+  useInterfaceLocalForage,
+  IInterfaceConfig
+} from "src/hooks/LocalForage";
 import { LoadingIndicator } from "src/components/Shared";
 import { ListFilter } from "src/components/List/ListFilter";
 import { Pagination } from "src/components/List/Pagination";
@@ -142,7 +145,7 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
             itemsPerPage: newFilter.itemsPerPage,
             currentPage: newFilter.currentPage
           }
-        }
+        };
         return data;
       });
     }
@@ -214,9 +217,7 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
 
     // Remove duplicate modifiers
     newFilter.criteria = newFilter.criteria.filter((obj, pos, arr) => {
-      return (
+      return arr.map(mapObj => mapObj.getId()).indexOf(obj.getId()) === pos;
-        arr.map(mapObj => mapObj.getId()).indexOf(obj.getId()) === pos
-      );
     });
 
     newFilter.currentPage = 1;

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

@@ -26,7 +26,9 @@ interface ILocalForage<T> {
 const Loading: Record<string, boolean> = {};
 const Cache: Record<string, ValidTypes> = {};
 
-function useLocalForage(key: Key): [ILocalForage<ValidTypes>, Dispatch<SetStateAction<ValidTypes>>] {
+function useLocalForage(
+  key: Key
+): [ILocalForage<ValidTypes>, Dispatch<SetStateAction<ValidTypes>>] {
   const [error, setError] = React.useState(null);
   const [data, setData] = React.useState(Cache[key]);
   const [loading, setLoading] = React.useState(Loading[key]);
@@ -67,9 +69,9 @@ function useLocalForage(key: Key): [ILocalForage<ValidTypes>, Dispatch<SetStateA
   return [{ data, error, loading: isLoading }, setData];
 }
 
-export function useInterfaceLocalForage():
+export function useInterfaceLocalForage(): [
-  [ILocalForage<IInterfaceConfig>,
+  ILocalForage<IInterfaceConfig>,
-  Dispatch<SetStateAction<IInterfaceConfig>>]
+  Dispatch<SetStateAction<IInterfaceConfig>>
- {
+] {
   return useLocalForage("interface");
 }

ui/v2.5/src/models/list-filter/criteria/criterion.ts

@@ -121,11 +121,9 @@ export abstract class Criterion {
   public inputType: "number" | "text" | undefined;
 
   public getLabelValue(): string {
-    if(typeof this.value === "string")
+    if (typeof this.value === "string") return this.value;
-      return this.value;
+    if (typeof this.value === "number") return this.value.toString();
-    if(typeof this.value === "number")
+    return this.value.map(v => v.label).join(", ");
-      return this.value.toString();
-    return this.value.map(v => v.label).join(', ');
   }
 
   public getLabel(): string {

ui/v2.5/src/models/list-filter/filter.ts

@@ -271,7 +271,7 @@ export class ListFilterModel {
       const encodedCriterion: Partial<Criterion> = {
         type: criterion.type,
         value: criterion.value,
-        modifier: criterion.modifier,
+        modifier: criterion.modifier
       };
       const jsonCriterion = JSON.stringify(encodedCriterion);
       encodedCriteria.push(jsonCriterion);