Convert Manual Import to Typescript

2026-04-21 22:05:38 -04:00 · 2023-03-27 16:48:55 -07:00
parent 032d9a720c
commit defdc84b7e
63 changed files with 2946 additions and 3528 deletions
@@ -0,0 +1,169 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+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 { QualityModel } from 'Quality/Quality';
+import { fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
+import getQualities from 'Utilities/Quality/getQualities';
+
+function createQualitySchemeSelctor() {
+  return createSelector(
+    (state) => state.settings.qualityProfiles,
+    (qualityProfiles) => {
+      const { isSchemaFetching, isSchemaPopulated, schemaError, schema } =
+        qualityProfiles;
+
+      return {
+        isFetching: isSchemaFetching,
+        isPopulated: isSchemaPopulated,
+        error: schemaError,
+        items: getQualities(schema.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(
+    createQualitySchemeSelctor()
+  );
+  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 }) => {
+      setQualityId(parseInt(value));
+    },
+    [setQualityId]
+  );
+
+  const onProperChange = useCallback(
+    ({ value }) => {
+      setProper(value);
+    },
+    [setProper]
+  );
+
+  const onRealChange = useCallback(
+    ({ value }) => {
+      setReal(value);
+    },
+    [setReal]
+  );
+
+  const onQualitySelectWrapper = useCallback(() => {
+    const quality = items.find((item) => item.id === qualityId);
+
+    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} - Select Quality</ModalHeader>
+
+      <ModalBody>
+        {isFetching && <LoadingIndicator />}
+
+        {!isFetching && error ? <div>Unable to load qualities</div> : null}
+
+        {isPopulated && !error ? (
+          <Form>
+            <FormGroup>
+              <FormLabel>Quality</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.SELECT}
+                name="quality"
+                value={qualityId}
+                values={qualityOptions}
+                onChange={onQualityChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Proper</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="proper"
+                value={proper}
+                onChange={onProperChange}
+              />
+            </FormGroup>
+
+            <FormGroup>
+              <FormLabel>Real</FormLabel>
+
+              <FormInputGroup
+                type={inputTypes.CHECK}
+                name="real"
+                value={real}
+                onChange={onRealChange}
+              />
+            </FormGroup>
+          </Form>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>Cancel</Button>
+
+        <Button kind={kinds.SUCCESS} onPress={onQualitySelectWrapper}>
+          Select Quality
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default SelectQualityModalContent;