Fix season in series info, allow filtering with season and tag, renam…

…er QoL (#1008) * Fix season filter from series page * Allow tag filtering from series * Renamer: Show success status if there are no changes
ShokoAnime · Aug 22, 2024 · 3098e93 · 3098e93
1 parent d16c1b3
commit 3098e93
Show file tree

Hide file tree

Showing 14 changed files with 188 additions and 69 deletions.
diff --git a/src/components/Collection/CollectionTitle.tsx b/src/components/Collection/CollectionTitle.tsx
@@ -6,11 +6,12 @@ import cx from 'classnames';
 
 type Props = {
   count: number;
+  filterActive: boolean;
   filterOrGroup?: string;
   searchQuery: string;
 };
 
-const CollectionTitle = memo(({ count, filterOrGroup, searchQuery }: Props) => (
+const CollectionTitle = memo(({ count, filterActive, filterOrGroup, searchQuery }: Props) => (
   <div className="flex items-center gap-x-2 text-xl font-semibold">
     <Link to="/webui/collection" className={cx(filterOrGroup ? 'text-panel-text-primary' : 'pointer-events-none')}>
       Entire Collection
@@ -21,6 +22,12 @@ const CollectionTitle = memo(({ count, filterOrGroup, searchQuery }: Props) => (
         {filterOrGroup}
       </>
     )}
+    {!filterOrGroup && filterActive && (
+      <>
+        <Icon path={mdiChevronRight} size={1} />
+        Filtered
+      </>
+    )}
     {searchQuery && (
       <>
         <Icon path={mdiChevronRight} size={1} />

diff --git a/src/components/Collection/Filter/FilterSidebar.tsx b/src/components/Collection/Filter/FilterSidebar.tsx
@@ -1,7 +1,7 @@
 import React, { type ReactNode, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { mdiFilterPlusOutline } from '@mdi/js';
-import { forEach, keys, map, values } from 'lodash';
+import { keys, map, values } from 'lodash';
 
 import AddCriteriaModal from '@/components/Collection/Filter/AddCriteriaModal';
 import DefaultCriteria from '@/components/Collection/Filter/DefaultCriteria';
@@ -10,13 +10,13 @@ import TagCriteria from '@/components/Collection/Filter/TagCriteria';
 import Button from '@/components/Input/Button';
 import IconButton from '@/components/Input/IconButton';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
-import { buildSidebarFilter } from '@/core/buildFilter';
 import {
-  removeFilterCriteria,
   resetActiveFilter,
+  resetFilter,
   selectActiveCriteriaWithValues,
   setActiveFilter,
 } from '@/core/slices/collection';
+import { buildSidebarFilter } from '@/core/utilities/filter';
 import useEventCallback from '@/hooks/useEventCallback';
 
 import type { RootState } from '@/core/store';
@@ -42,7 +42,6 @@ type OptionsProps = {
 const Options = ({ showModal }: OptionsProps) => <OptionButton onClick={showModal} icon={mdiFilterPlusOutline} />;
 
 const FilterSidebar = () => {
-  const activeFilter = useSelector((state: RootState) => state.collection.activeFilter);
   const [criteriaModal, setCriteriaModal] = useState(false);
   const dispatch = useDispatch();
   const selectedCriteria = useSelector((state: RootState) => state.collection.filterCriteria);
@@ -57,18 +56,16 @@ const FilterSidebar = () => {
     setCriteriaModal(state);
   };
 
-  const resetFilter = useEventCallback(() => {
-    forEach(selectedCriteria, (criteria) => {
-      dispatch(removeFilterCriteria(criteria));
-    });
+  const handleResetFilter = useEventCallback(() => {
+    dispatch(resetFilter());
   });
 
   useEffect(() => {
     const count = keys(selectedCriteria).length;
     if (count !== keys(activeCriteriaWithValues).length) return;
     if (count > 0) applyFilter();
     else dispatch(resetActiveFilter());
-  }, [activeCriteriaWithValues, applyFilter, dispatch, resetFilter, selectedCriteria]);
+  }, [activeCriteriaWithValues, applyFilter, dispatch, selectedCriteria]);
 
   return (
     <ShokoPanel
@@ -84,8 +81,7 @@ const FilterSidebar = () => {
       <Button
         buttonType="danger"
         className="px-4 py-3"
-        onClick={resetFilter}
-        disabled={!activeFilter}
+        onClick={handleResetFilter}
       >
         Clear filter
       </Button>

diff --git a/src/components/Collection/Group/EditGroupModal.tsx b/src/components/Collection/Group/EditGroupModal.tsx
@@ -33,14 +33,15 @@ const renderTab = (activeTab: string, groupId: number) => {
 const EditGroupModal = () => {
   const dispatch = useDispatch();
 
+  const groupId = useSelector((state: RootState) => state.modals.editGroup.groupId);
+
   const onClose = useEventCallback(() => {
+    if (groupId === -1) return;
     dispatch(setGroupId(-1));
   });
 
   useEffect(() => onClose, [onClose]);
 
-  const groupId = useSelector((state: RootState) => state.modals.editGroup.groupId);
-
   const [activeTab, setActiveTab] = useState<keyof typeof tabs>('name');
 
   return (

diff --git a/src/components/Collection/Series/EditSeriesModal.tsx b/src/components/Collection/Series/EditSeriesModal.tsx
@@ -48,14 +48,15 @@ const renderTab = (activeTab: string, seriesId = -1) => {
 const EditSeriesModal = () => {
   const dispatch = useDispatch();
 
+  const seriesId = useSelector((state: RootState) => state.modals.editSeries.seriesId);
+
   const onClose = useEventCallback(() => {
+    if (seriesId === -1) return;
     dispatch(setSeriesId(-1));
   });
 
   useEffect(() => onClose, [onClose]);
 
-  const seriesId = useSelector((state: RootState) => state.modals.editSeries.seriesId);
-
   const [activeTab, setActiveTab] = useState('name');
 
   return (

diff --git a/src/components/Collection/SeriesInfo.tsx b/src/components/Collection/SeriesInfo.tsx
@@ -1,10 +1,15 @@
 import React, { useMemo } from 'react';
+import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import cx from 'classnames';
 import { toNumber } from 'lodash';
 
 import { useSeriesOverviewQuery } from '@/core/react-query/webui/queries';
+import { resetFilter, setFilterValues } from '@/core/slices/collection';
 import { convertTimeSpanToMs, dayjs } from '@/core/util';
+import { addFilterCriteriaToStore } from '@/core/utilities/filter';
+import useEventCallback from '@/hooks/useEventCallback';
 
 import type { SeriesType } from '@/core/types/api/series';
 import type { WebuiSeriesDetailsType } from '@/core/types/api/webui';
@@ -16,6 +21,9 @@ type SeriesInfoProps = {
 const SeriesInfo = ({ series }: SeriesInfoProps) => {
   const { seriesId } = useParams();
 
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
   // Series Data;
   const seriesOverviewQuery = useSeriesOverviewQuery(toNumber(seriesId!), !!seriesId);
   const overview = seriesOverviewQuery?.data ?? {} as WebuiSeriesDetailsType;
@@ -44,6 +52,16 @@ const SeriesInfo = ({ series }: SeriesInfoProps) => {
     return 'Finished';
   }, [startDate, endDate]);
 
+  const handleSeasonFilter = useEventCallback(() => {
+    if (!overview.FirstAirSeason) return;
+    dispatch(resetFilter());
+    const [season, year] = overview.FirstAirSeason.split(' ');
+    addFilterCriteriaToStore('InSeason').then(() => {
+      dispatch(setFilterValues({ InSeason: [`${year}: ${season}`] }));
+      navigate('/webui/collection');
+    }).catch(console.error);
+  });
+
   if (!seriesId) return null;
 
   return (
@@ -102,24 +120,21 @@ const SeriesInfo = ({ series }: SeriesInfoProps) => {
           <div className="truncate">
             &nbsp;
             {overview.RuntimeLength
-              ? `${dayjs.duration(convertTimeSpanToMs(overview.RuntimeLength)).asMinutes()} Min/Ep`
+              ? `${dayjs.duration(convertTimeSpanToMs(overview.RuntimeLength)).asMinutes()} Mins/Episode`
               : '--'}
           </div>
         </div>
         <div className="flex justify-between capitalize">
           <div className="font-semibold">Season</div>
-          <div className="truncate">
+          <div
+            className={cx(
+              'truncate',
+              overview.FirstAirSeason && 'cursor-pointer font-semibold text-panel-text-primary',
+            )}
+            onClick={handleSeasonFilter}
+          >
             &nbsp;
-            {overview?.FirstAirSeason
-              ? (
-                <Link
-                  className="font-semibold text-panel-text-primary"
-                  to={`/webui/collection/filter/${overview.FirstAirSeason.IDs.ID}`}
-                >
-                  {overview.FirstAirSeason.Name}
-                </Link>
-              )
-              : '--'}
+            {overview?.FirstAirSeason ?? '--'}
           </div>
         </div>
         <div className="flex justify-between capitalize">

diff --git a/src/components/Collection/SeriesTopPanel.tsx b/src/components/Collection/SeriesTopPanel.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
+import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { mdiTagTextOutline } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import cx from 'classnames';
@@ -12,6 +14,9 @@ import SeriesUserStats from '@/components/Collection/SeriesUserStats';
 import ShokoPanel from '@/components/Panels/ShokoPanel';
 import { useSeriesImagesQuery, useSeriesTagsQuery } from '@/core/react-query/series/queries';
 import { useSettingsQuery } from '@/core/react-query/settings/queries';
+import { resetFilter, setFilterTag } from '@/core/slices/collection';
+import { addFilterCriteriaToStore } from '@/core/utilities/filter';
+import useEventCallback from '@/hooks/useEventCallback';
 
 import type { ImageType } from '@/core/types/api/common';
 import type { SeriesType } from '@/core/types/api/series';
@@ -20,17 +25,30 @@ type SeriesSidePanelProps = {
   series: SeriesType;
 };
 
-const SeriesTag = ({ text, type }) => (
-  <div
-    className={cx(
-      'text-sm font-semibold flex gap-x-3 items-center border-2 border-panel-tags rounded-lg py-2 px-3 whitespace-nowrap capitalize h-fit',
-      type === 'User' ? 'text-panel-icon-important' : 'text-panel-icon-action',
-    )}
-  >
-    <Icon path={mdiTagTextOutline} size="1.25rem" />
-    <span className="text-panel-text">{text}</span>
-  </div>
-);
+const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'AniDB' }) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const handleClick = useEventCallback(() => {
+    dispatch(resetFilter());
+    addFilterCriteriaToStore('HasTag').then(() => {
+      dispatch(setFilterTag({ HasTag: [{ Name: text, isExcluded: false }] }));
+      navigate('/webui/collection');
+    }).catch(console.error);
+  });
+
+  return (
+    <div
+      className={cx(
+        'text-sm font-semibold flex gap-x-3 items-center border-2 border-panel-tags rounded-lg py-2 px-3 whitespace-nowrap capitalize h-fit cursor-pointer',
+        type === 'User' ? 'text-panel-icon-important' : 'text-panel-icon-action',
+      )}
+      onClick={handleClick}
+    >
+      <Icon path={mdiTagTextOutline} size="1.25rem" />
+      <span className="text-panel-text">{text}</span>
+    </div>
+  );
+});
 
 const SeriesTopPanel = React.memo(({ series }: SeriesSidePanelProps) => {
   const { WebUI_Settings: { collection: { image: { showRandomPoster } } } } = useSettingsQuery().data;

diff --git a/src/components/Collection/TitleOptions.tsx b/src/components/Collection/TitleOptions.tsx
@@ -1,5 +1,6 @@
-import React, { memo } from 'react';
+import React from 'react';
 import type { Dispatch, SetStateAction } from 'react';
+import { useParams } from 'react-router';
 import {
   mdiCogOutline,
   mdiFilterMenuOutline,
@@ -25,10 +26,24 @@ type Props = {
   toggleMode: () => void;
 };
 
-const OptionButton = memo(
+const OptionButton = React.memo(
   (
-    { icon, onClick, tooltip }: { icon: string, onClick: React.MouseEventHandler<HTMLDivElement>, tooltip?: string },
-  ) => <IconButton icon={icon} buttonType="secondary" buttonSize="normal" onClick={onClick} tooltip={tooltip} />,
+    { disabled, icon, onClick, tooltip }: {
+      disabled?: boolean;
+      icon: string;
+      onClick: React.MouseEventHandler<HTMLDivElement>;
+      tooltip?: string;
+    },
+  ) => (
+    <IconButton
+      disabled={disabled}
+      icon={icon}
+      buttonType="secondary"
+      buttonSize="normal"
+      onClick={onClick}
+      tooltip={tooltip}
+    />
+  ),
 );
 
 const TitleOptions = (props: Props) => {
@@ -42,6 +57,8 @@ const TitleOptions = (props: Props) => {
     toggleMode,
   } = props;
 
+  const { filterId } = useParams();
+
   const [showFilterModal, toggleFilterModal] = useToggle(false);
   const [showDisplaySettingsModal, toggleDisplaySettingsModal] = useToggle(false);
 
@@ -59,7 +76,12 @@ const TitleOptions = (props: Props) => {
         {!isSeries && (
           <>
             <OptionButton onClick={toggleFilterModal} icon={mdiFilterMenuOutline} tooltip="Filter Presets" />
-            <OptionButton onClick={toggleFilterSidebar} icon={mdiFilterOutline} tooltip="Filter" />
+            <OptionButton
+              onClick={toggleFilterSidebar}
+              icon={mdiFilterOutline}
+              tooltip={!filterId ? 'Filter' : ''}
+              disabled={!!filterId}
+            />
           </>
         )}
         <OptionButton

diff --git a/src/components/Input/IconButton.tsx b/src/components/Input/IconButton.tsx
@@ -9,7 +9,7 @@ import type { ButtonType, SizeType } from '@/components/Input/Button.utils';
 
 type IconButtonProps = {
   icon: string;
-
+  disabled?: boolean;
   className?: string;
   onClick: React.MouseEventHandler<HTMLDivElement | HTMLButtonElement>;
   buttonType: ButtonType;
@@ -18,7 +18,7 @@ type IconButtonProps = {
 };
 
 const IconButton = (
-  { buttonSize = 'normal', buttonType = 'secondary', className, icon, onClick, tooltip }: IconButtonProps,
+  { buttonSize = 'normal', buttonType = 'secondary', className, disabled, icon, onClick, tooltip }: IconButtonProps,
 ) => (
   <Button
     className={cx(
@@ -29,6 +29,7 @@ const IconButton = (
     )}
     onClick={onClick}
     tooltip={tooltip}
+    disabled={disabled}
   >
     <Icon path={icon} size={1} />
   </Button>

diff --git a/src/core/react-query/filter/queries.ts b/src/core/react-query/filter/queries.ts
@@ -40,6 +40,7 @@ export const useFilterExpressionsQuery = (enabled = true) =>
     queryFn: () => axios.get('Filter/Expressions'),
     select: transformFilterExpressions,
     enabled,
+    staleTime: Infinity, // This query does not return different results each time, so we can cache it forever.
   });
 
 export const useFilteredSeriesInfiniteQuery = (