Convert Add New Series to TypeScript

2026-04-20 21:54:58 -04:00 · 2025-01-11 21:39:48 -08:00
parent ee46e6378a
commit 87c840974b
22 changed files with 818 additions and 1107 deletions
@@ -0,0 +1,184 @@
+import React, { useCallback, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AddSeries } from 'App/State/AddSeriesAppState';
+import HeartRating from 'Components/HeartRating';
+import Icon from 'Components/Icon';
+import Label from 'Components/Label';
+import Link from 'Components/Link/Link';
+import MetadataAttribution from 'Components/MetadataAttribution';
+import { icons, kinds, sizes } from 'Helpers/Props';
+import { Statistics } from 'Series/Series';
+import SeriesGenres from 'Series/SeriesGenres';
+import SeriesPoster from 'Series/SeriesPoster';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import createExistingSeriesSelector from 'Store/Selectors/createExistingSeriesSelector';
+import translate from 'Utilities/String/translate';
+import AddNewSeriesModal from './AddNewSeriesModal';
+import styles from './AddNewSeriesSearchResult.css';
+
+type AddNewSeriesSearchResultProps = AddSeries;
+
+function AddNewSeriesSearchResult({
+  tvdbId,
+  titleSlug,
+  title,
+  year,
+  network,
+  originalLanguage,
+  genres = [],
+  status,
+  statistics = {} as Statistics,
+  ratings,
+  folder,
+  overview,
+  seriesType,
+  images,
+}: AddNewSeriesSearchResultProps) {
+  const isExistingSeries = useSelector(createExistingSeriesSelector(tvdbId));
+  const { isSmallScreen } = useSelector(createDimensionsSelector());
+  const [isNewAddSeriesModalOpen, setIsNewAddSeriesModalOpen] = useState(false);
+
+  const seasonCount = statistics.seasonCount;
+  const handlePress = useCallback(() => {
+    setIsNewAddSeriesModalOpen(true);
+  }, []);
+
+  const handleAddSeriesModalClose = useCallback(() => {
+    setIsNewAddSeriesModalOpen(false);
+  }, []);
+
+  const handleTvdbLinkPress = useCallback((event: React.SyntheticEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  const linkProps = isExistingSeries
+    ? { to: `/series/${titleSlug}` }
+    : { onPress: handlePress };
+  let seasons = translate('OneSeason');
+
+  if (seasonCount > 1) {
+    seasons = translate('CountSeasons', { count: seasonCount });
+  }
+
+  return (
+    <div className={styles.searchResult}>
+      <Link className={styles.underlay} {...linkProps} />
+
+      <div className={styles.overlay}>
+        {isSmallScreen ? null : (
+          <SeriesPoster
+            className={styles.poster}
+            images={images}
+            size={250}
+            overflow={true}
+            lazy={false}
+          />
+        )}
+
+        <div className={styles.content}>
+          <div className={styles.titleRow}>
+            <div className={styles.titleContainer}>
+              <div className={styles.title}>
+                {title}
+
+                {!title.includes(String(year)) && year ? (
+                  <span className={styles.year}>({year})</span>
+                ) : null}
+              </div>
+            </div>
+
+            <div className={styles.icons}>
+              {isExistingSeries ? (
+                <Icon
+                  className={styles.alreadyExistsIcon}
+                  name={icons.CHECK_CIRCLE}
+                  size={36}
+                  title={translate('AlreadyInYourLibrary')}
+                />
+              ) : null}
+
+              <Link
+                className={styles.tvdbLink}
+                to={`https://www.thetvdb.com/?tab=series&id=${tvdbId}`}
+                onPress={handleTvdbLinkPress}
+              >
+                <Icon
+                  className={styles.tvdbLinkIcon}
+                  name={icons.EXTERNAL_LINK}
+                  size={28}
+                />
+              </Link>
+            </div>
+          </div>
+
+          <div>
+            <Label size={sizes.LARGE}>
+              <HeartRating
+                rating={ratings.value}
+                votes={ratings.votes}
+                iconSize={13}
+              />
+            </Label>
+
+            {originalLanguage?.name ? (
+              <Label size={sizes.LARGE}>
+                <Icon name={icons.LANGUAGE} size={13} />
+
+                <span className={styles.originalLanguageName}>
+                  {originalLanguage.name}
+                </span>
+              </Label>
+            ) : null}
+
+            {network ? (
+              <Label size={sizes.LARGE}>
+                <Icon name={icons.NETWORK} size={13} />
+
+                <span className={styles.network}>{network}</span>
+              </Label>
+            ) : null}
+
+            {genres.length > 0 ? (
+              <Label size={sizes.LARGE}>
+                <Icon name={icons.GENRE} size={13} />
+                <SeriesGenres className={styles.genres} genres={genres} />
+              </Label>
+            ) : null}
+
+            {seasonCount ? <Label size={sizes.LARGE}>{seasons}</Label> : null}
+
+            {status === 'ended' ? (
+              <Label kind={kinds.DANGER} size={sizes.LARGE}>
+                {translate('Ended')}
+              </Label>
+            ) : null}
+
+            {status === 'upcoming' ? (
+              <Label kind={kinds.INFO} size={sizes.LARGE}>
+                {translate('Upcoming')}
+              </Label>
+            ) : null}
+          </div>
+
+          <div className={styles.overview}>{overview}</div>
+
+          <MetadataAttribution />
+        </div>
+      </div>
+
+      <AddNewSeriesModal
+        isOpen={isNewAddSeriesModalOpen && !isExistingSeries}
+        tvdbId={tvdbId}
+        title={title}
+        year={year}
+        overview={overview}
+        folder={folder}
+        initialSeriesType={seriesType}
+        images={images}
+        onModalClose={handleAddSeriesModalClose}
+      />
+    </div>
+  );
+}
+
+export default AddNewSeriesSearchResult;