Convert Manual Import to Typescript

2026-04-20 21:55:03 -04:00 · 2023-05-02 23:07:12 -05:00
parent d2112f2bdc
commit eeb997430c
130 changed files with 3314 additions and 3161 deletions
@@ -0,0 +1,186 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import { Error } from 'App/State/AppSectionState';
+import AppState from 'App/State/AppState';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds } from 'Helpers/Props';
+import Quality, { QualityModel } from 'Quality/Quality';
+import { fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
+import { CheckInputChanged } from 'typings/inputs';
+import getQualities from 'Utilities/Quality/getQualities';
+import translate from 'Utilities/String/translate';
+
+interface QualitySchemaState {
+  isFetching: boolean;
+  isPopulated: boolean;
+  error: Error;
+  items: Quality[];
+}
+
+function createQualitySchemaSelector() {
+  return createSelector(
+    (state: AppState) => state.settings.qualityProfiles,
+    (qualityProfiles): QualitySchemaState => {
+      const { isSchemaFetching, isSchemaPopulated, schemaError, schema } =
+        qualityProfiles;
+
+      const items = getQualities(schema.items) as Quality[];
+
+      return {
+        isFetching: isSchemaFetching,
+        isPopulated: isSchemaPopulated,
+        error: schemaError,
+        items,
+      };
+    }
+  );
+}
+
+interface SelectQualityModalContentProps {
+  qualityId: number;
+  proper: boolean;
+  real: boolean;
+  modalTitle: string;
+  onQualitySelect(quality: QualityModel): void;
+  onModalClose(): void;
+}
+
+function SelectQualityModalContent(props: SelectQualityModalContentProps) {
+  const { modalTitle, onQualitySelect, onModalClose } = props;
+
+  const [qualityId, setQualityId] = useState(props.qualityId);
+  const [proper, setProper] = useState(props.proper);
+  const [real, setReal] = useState(props.real);
+
+  const { isFetching, isPopulated, error, items } = useSelector(
+    createQualitySchemaSelector()
+  );
+  const dispatch = useDispatch();
+
+  useEffect(
+    () => {
+      dispatch(fetchQualityProfileSchema());
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const qualityOptions = useMemo(() => {
+    return items.map(({ id, name }) => {
+      return {
+        key: id,
+        value: name,
+      };
+    });
+  }, [items]);
+
+  const onQualityChange = useCallback(
+    ({ value }: { value: string }) => {
+      setQualityId(parseInt(value));
+    },
+    [setQualityId]
+  );
+
+  const onProperChange = useCallback(
+    ({ value }: CheckInputChanged) => {
+      setProper(value);
+    },
+    [setProper]
+  );
+
+  const onRealChange = useCallback(
+    ({ value }: CheckInputChanged) => {
+      setReal(value);
+    },
+    [setReal]
+  );
+
+  const onQualitySelectWrapper = useCallback(() => {
+    const quality = items.find((item) => item.id === qualityId) as Quality;
+
+    const revision = {
+      version: proper ? 2 : 1,
+      real: real ? 1 : 0,
+      isRepack: false,
+    };
+
+    onQualitySelect({
+      quality,
+      revision,
+    });
+  }, [items, qualityId, proper, real, onQualitySelect]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {modalTitle} - {translate('SelectQuality')}
+      </ModalHeader>
+
+      <ModalBody>
+        {isFetching && <LoadingIndicator />}
+
+        {!isFetching && error ? (
+          <div>{translate('UnableToLoadQualities')}</div>
+        ) : null}
+
+        {isPopulated && !error ? (
+          <Form>
+            <FormGroup>
+              <FormLabel>{translate('Quality')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="quality"
+                value={qualityId}
+                values={qualityOptions}
+                onChange={onQualityChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('Proper')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="proper"
+                value={proper}
+                onChange={onProperChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>{translate('Real')}</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="real"
+                value={real}
+                onChange={onRealChange}
+              />
+            </FormGroup>
+          </Form>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <Button kind={kinds.SUCCESS} onPress={onQualitySelectWrapper}>
+          {translate('SelectQuality')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default SelectQualityModalContent;