Odds & Ends

.eslintrc.json

@@ -60,6 +60,7 @@
         "ignorePrimitives": { "boolean": true }
       }
     ],
+    "id-length": ["error", { "min": 3, "exceptions": ["cx", "ID", "id", "_", "__"], "properties": "never" }],
     "implicit-arrow-linebreak": "off",
     "import/order": [
       "error",
@@ -94,7 +95,7 @@
     ],
     "no-param-reassign": [
       "error",
-      { "props": true, "ignorePropertyModificationsFor": ["sliceState", "immerState", "draftState", "draftState2"] }
+      { "props": true, "ignorePropertyModificationsFor": ["sliceState", "immerState", "draftState", "draftState2", "reduceResult"] }
     ],
     "no-restricted-imports": [
       "error",

src/components/BackgroundImagePlaceholderDiv.tsx

@@ -63,19 +63,19 @@ const BackgroundImagePlaceholderDiv = React.memo((props: Props) => {
     setImageError(null);
 
     let complete = false;
-    const bg = new Image();
-    bg.setAttribute('lazy', 'true');
-    bg.onload = () => {
+    const background = new Image();
+    background.setAttribute('lazy', 'true');
+    background.onload = () => {
       if (complete) return;
       complete = true;
-      setBackgroundImage(bg);
+      setBackgroundImage(background);
     };
-    bg.onerror = () => {
+    background.onerror = () => {
       if (complete) return;
       complete = true;
       setImageError('Please refresh your browser to correct.');
     };
-    bg.src = imageSource;
+    background.src = imageSource;
     return () => {
       complete = true;
     };
@@ -116,7 +116,7 @@ const BackgroundImagePlaceholderDiv = React.memo((props: Props) => {
           aria-label="Link to image"
           rel="noopener noreferrer"
           target="_blank"
-          onClick={e => e.stopPropagation()}
+          onClick={event => event.stopPropagation()}
         >
           <Icon path={mdiOpenInNew} size={1} />
         </a>

src/components/Collection/CollectionView.tsx

@@ -114,17 +114,17 @@ const CollectionView = (props: Props) => {
           const toIndex = fromIndex + itemsPerRow;
 
           // Here, i will be the actual index of the group in group list
-          for (let i = fromIndex; i < toIndex; i += 1) {
-            const item = items[i];
+          for (let index = fromIndex; index < toIndex; index += 1) {
+            const item = items[index];
 
             // Placeholder to solve formatting issues.
             // Used to fill the empty "slots" in the last row
-            const isPlaceholder = i > total - 1;
+            const isPlaceholder = index > total - 1;
 
             if (isPlaceholder) {
               children.push(
                 <div
-                  key={`placeholder-${i}`}
+                  key={`placeholder-${index}`}
                   style={{
                     width: `${itemWidth / 16}rem`,
                   }}
@@ -135,7 +135,7 @@ const CollectionView = (props: Props) => {
               children.push(
                 <div
                   className="flex shrink-0 items-center justify-center rounded-lg border border-panel-border text-panel-text-primary"
-                  key={`loading-${i}`}
+                  key={`loading-${index}`}
                   style={{
                     width: `${itemWidth / 16}rem`,
                     height: `${itemHeight / 16}rem`,

src/components/Collection/Files/FilesMissingEpisodes.tsx

@@ -24,7 +24,7 @@ const MissingEpisode = ({ episode, rowId }: FileMissingEpisodeProps) => (
       {padNumber(episode.EpisodeNumber)}
     </div>
     <div className="flex w-[46.875rem] flex-row">
-      {episode.Titles.find(e => e.Language === 'en')?.Name ?? '--'}
+      {episode.Titles.find(title => title.Language === 'en')?.Name ?? '--'}
       &nbsp;
       <a
         className="inline-flex items-center gap-0 text-panel-text-primary"

src/components/Collection/Group/EditGroupTabs/NameTab.tsx

@@ -50,8 +50,8 @@ const NameTab = React.memo(({ groupId }: Props) => {
     toggleNameEditable();
   });
 
-  const updateName = useEventCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setGroupName(e.target.value);
+  const updateName = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setGroupName(event.target.value);
   });
 
   const resetName = useEventCallback(() => {

src/components/Collection/Group/EditGroupTabs/SeriesTab.tsx

@@ -27,7 +27,10 @@ const SeriesTab = React.memo(({ groupId }: Props) => {
     isSuccess: seriesSuccess,
   } = useGroupSeriesQuery(groupId);
 
-  const sortedSeriesData = useMemo(() => seriesData?.sort((a, b) => (a.IDs.ID > b.IDs.ID ? 1 : -1)), [seriesData]);
+  const sortedSeriesData = useMemo(
+    () => seriesData?.sort((seriesA, seriesB) => (seriesA.IDs.ID > seriesB.IDs.ID ? 1 : -1)),
+    [seriesData],
+  );
 
   const { mutate: moveToNewGroupMutation } = useCreateGroupMutation();
   const { mutate: setGroupMainSeriesMutation } = usePatchGroupMutation();

src/components/Collection/Series/EditSeriesTabs/GroupTab.tsx

@@ -156,7 +156,7 @@ function GroupTab({ seriesId }: Props) {
   const [search, setSearch] = useState('');
   const [debouncedSearch] = useDebounceValue(search, 200);
 
-  const updateSearch = useEventCallback((e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value));
+  const updateSearch = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => setSearch(event.target.value));
 
   const { data: seriesGroup, isFetching } = useSeriesGroupQuery(seriesId, false);
   const groupsQuery = useFilteredGroupsInfiniteQuery({

src/components/Collection/Series/EditSeriesTabs/NameTab.tsx

@@ -82,7 +82,7 @@ const NameTab = ({ seriesId }: Props) => {
       <Input
         id="name"
         type="text"
-        onChange={e => setName(e.target.value)}
+        onChange={event => setName(event.target.value)}
         value={name}
         placeholder={isFetching ? 'Loading...' : undefined}
         label="Name"

src/components/Collection/TitleOptions.tsx

@@ -66,7 +66,7 @@ const TitleOptions = (props: Props) => {
           placeholder="Search..."
           startIcon={mdiMagnify}
           value={isSeries ? seriesSearch : groupSearch}
-          onChange={e => setSearch(e.target.value)}
+          onChange={event => setSearch(event.target.value)}
         />
         {!isSeries && (
           <>

src/components/Collection/Tmdb/AniDBEpisode.tsx

@@ -1,28 +1,38 @@
 import React from 'react';
+import { mdiMinus, mdiPlus } from '@mdi/js';
+import { Icon } from '@mdi/react';
 import cx from 'classnames';
 
+import Button from '@/components/Input/Button';
 import { padNumber } from '@/core/util';
 import { getEpisodePrefixAlt } from '@/core/utilities/getEpisodePrefix';
 
 import type { EpisodeType } from '@/core/types/api/episode';
 
 type Props = {
   episode: EpisodeType;
+  extra?: boolean;
   isOdd: boolean;
+  onIconClick?: () => void;
 };
 
-const AniDBEpisode = React.memo(({ episode, isOdd }: Props) => (
+const AniDBEpisode = React.memo(({ episode, extra, isOdd, onIconClick }: Props) => (
   <div
     className={cx(
       'flex grow basis-0 gap-x-6 rounded-lg border border-panel-border p-4',
       isOdd ? 'bg-panel-background-alt' : 'bg-panel-background',
     )}
   >
-    <div className="w-8">
+    <div className={cx('w-8', extra && 'opacity-65')}>
       {getEpisodePrefixAlt(episode.AniDB?.Type)}
     </div>
-    <div className="w-8">{padNumber(episode.AniDB?.EpisodeNumber ?? 0)}</div>
-    <div className="line-clamp-1">{episode.Name}</div>
+    <div className={cx('w-8', extra && 'opacity-65')}>{padNumber(episode.AniDB?.EpisodeNumber ?? 0)}</div>
+    <div className={cx('line-clamp-1 grow text-left', extra && 'opacity-65')}>{episode.Name}</div>
+    {onIconClick && (
+      <Button onClick={onIconClick} tooltip={extra ? 'Remove link' : 'Add link'}>
+        <Icon path={extra ? mdiMinus : mdiPlus} size={1} className="text-panel-icon-action" />
+      </Button>
+    )}
   </div>
 ));