From c99f19e992ff05af1b8206bd3a426e251160d56f Mon Sep 17 00:00:00 2001 From: natyusha <985941+natyusha@users.noreply.github.com> Date: Mon, 7 Oct 2024 07:06:36 -0400 Subject: [PATCH] Apply Review Suggestions - also remove pointless transition all for ratings --- src/components/Collection/Filter/Criteria.tsx | 13 ++----------- src/components/Collection/ListViewItem.tsx | 13 ++++++------- .../Collection/Series/SeriesRating.tsx | 2 +- src/components/Collection/SeriesTopPanel.tsx | 8 ++++---- src/components/Collection/TimelineSidebar.tsx | 17 +++-------------- src/pages/collection/Collection.tsx | 2 +- src/pages/dashboard/panels/CollectionStats.tsx | 3 +-- 7 files changed, 18 insertions(+), 40 deletions(-) diff --git a/src/components/Collection/Filter/Criteria.tsx b/src/components/Collection/Filter/Criteria.tsx index 35f614bfe..f7ec42920 100644 --- a/src/components/Collection/Filter/Criteria.tsx +++ b/src/components/Collection/Filter/Criteria.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useMemo, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { useLocation, useNavigate } from 'react-router-dom'; import { mdiCircleEditOutline, mdiMinusCircleOutline } from '@mdi/js'; import { Icon } from '@mdi/react'; @@ -44,8 +43,6 @@ const ParameterList = ({ expression, value }: { expression: string, value: strin const Criteria = ({ criteria, parameterExists, transformedParameter, type }: Props) => { const dispatch = useDispatch(); - const location = useLocation(); - const navigate = useNavigate(); const [showModal, setShowModal] = useState(false); const openModal = useEventCallback(() => { @@ -61,14 +58,8 @@ const Criteria = ({ criteria, parameterExists, transformedParameter, type }: Pro }); useEffect(() => { - if (parameterExists) { - navigate('/webui/collection', { replace: true, state: { isFilterLink: false } }); - return; - } - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - if (!location.state?.isFilterLink) setShowModal(true); - // locate/navigate are only used to check/clear the tag link state, adding it to the deps would cause them to loop - // eslint-disable-next-line react-hooks/exhaustive-deps + if (parameterExists) return; + setShowModal(true); }, [parameterExists]); const Modal = useMemo(() => getModalComponent(type), [type]); diff --git a/src/components/Collection/ListViewItem.tsx b/src/components/Collection/ListViewItem.tsx index 6d065687e..526d32f07 100644 --- a/src/components/Collection/ListViewItem.tsx +++ b/src/components/Collection/ListViewItem.tsx @@ -20,7 +20,7 @@ import { listItemSize } from '@/components/Collection/constants'; import Button from '@/components/Input/Button'; import { useSeriesTagsQuery } from '@/core/react-query/series/queries'; import { useSettingsQuery } from '@/core/react-query/settings/queries'; -import { setFilterTag } from '@/core/slices/collection'; +import { resetFilter, setFilterTag } from '@/core/slices/collection'; import { setGroupId } from '@/core/slices/modals/editGroup'; import { setSeriesId } from '@/core/slices/modals/editSeries'; import { dayjs, formatThousand } from '@/core/util'; @@ -52,10 +52,10 @@ const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'An const dispatch = useDispatch(); const navigate = useNavigate(); const handleClick = useEventCallback(() => { - navigate('/webui/collection', { state: { isFilterLink: true } }); - addFilterCriteriaToStore('HasTag').then(() => { - dispatch(setFilterTag({ HasTag: [{ Name: text, isExcluded: false }] })); - }).catch(console.error); + dispatch(resetFilter()); + dispatch(setFilterTag({ HasTag: [{ Name: text, isExcluded: false }] })); + addFilterCriteriaToStore('HasTag').catch(console.error); + navigate('/webui/collection'); }); return ( @@ -65,10 +65,9 @@ const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'An type === 'User' ? 'text-panel-text-important' : 'text-panel-text-primary', )} onClick={handleClick} - tooltip="Filter Tag" > - {text} + {text} ); }); diff --git a/src/components/Collection/Series/SeriesRating.tsx b/src/components/Collection/Series/SeriesRating.tsx index c995ca384..469a3294b 100644 --- a/src/components/Collection/Series/SeriesRating.tsx +++ b/src/components/Collection/Series/SeriesRating.tsx @@ -26,7 +26,7 @@ const StarIcon = React.memo(({ handleHover, handleVote, hovered, index }: StarIc onMouseEnter={handleHover} onClick={handleVote} > - + )); diff --git a/src/components/Collection/SeriesTopPanel.tsx b/src/components/Collection/SeriesTopPanel.tsx index bc1500495..52d4eff22 100644 --- a/src/components/Collection/SeriesTopPanel.tsx +++ b/src/components/Collection/SeriesTopPanel.tsx @@ -15,7 +15,7 @@ import Button from '@/components/Input/Button'; import ShokoPanel from '@/components/Panels/ShokoPanel'; import { useSeriesImagesQuery, useSeriesTagsQuery } from '@/core/react-query/series/queries'; import { useSettingsQuery } from '@/core/react-query/settings/queries'; -import { setFilterTag } from '@/core/slices/collection'; +import { resetFilter, setFilterTag } from '@/core/slices/collection'; import { addFilterCriteriaToStore } from '@/core/utilities/filter'; import useEventCallback from '@/hooks/useEventCallback'; @@ -26,9 +26,10 @@ const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'An const dispatch = useDispatch(); const navigate = useNavigate(); const handleClick = useEventCallback(() => { + dispatch(resetFilter()); addFilterCriteriaToStore('HasTag').then(() => { dispatch(setFilterTag({ HasTag: [{ Name: text, isExcluded: false }] })); - navigate('/webui/collection', { state: { isFilterLink: true } }); + navigate('/webui/collection'); }).catch(console.error); }); @@ -39,10 +40,9 @@ const SeriesTag = React.memo(({ text, type }: { text: string, type: 'User' | 'An type === 'User' ? 'text-panel-icon-important' : 'text-panel-icon-action', )} onClick={handleClick} - tooltip="Filter Tag" > - {text} + {text} ); }); diff --git a/src/components/Collection/TimelineSidebar.tsx b/src/components/Collection/TimelineSidebar.tsx index 4f857697b..514dfc510 100644 --- a/src/components/Collection/TimelineSidebar.tsx +++ b/src/components/Collection/TimelineSidebar.tsx @@ -1,7 +1,5 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { mdiLoading } from '@mdi/js'; -import { Icon } from '@mdi/react'; import BackgroundImagePlaceholderDiv from '@/components/BackgroundImagePlaceholderDiv'; import ShokoPanel from '@/components/Panels/ShokoPanel'; @@ -43,19 +41,10 @@ const TimelineSidebar = ({ isFetching, series }: { isFetching: boolean, series: - {isFetching - ? ( -
- -
- ) - : ( -
- {series.map(item => )} -
- )} + {series.map(item => )} ); diff --git a/src/pages/collection/Collection.tsx b/src/pages/collection/Collection.tsx index 1a8a1cb1c..e018a598d 100644 --- a/src/pages/collection/Collection.tsx +++ b/src/pages/collection/Collection.tsx @@ -232,7 +232,7 @@ function Collection() { className={cx( 'flex items-start transition-all', (!isSeries && showFilterSidebar) - ? 'w-[28rem] opacity-100 ' + ? 'w-[28rem] opacity-100' : 'w-0 opacity-0 overflow-hidden ', )} > diff --git a/src/pages/dashboard/panels/CollectionStats.tsx b/src/pages/dashboard/panels/CollectionStats.tsx index fe536fe85..e31e079c4 100644 --- a/src/pages/dashboard/panels/CollectionStats.tsx +++ b/src/pages/dashboard/panels/CollectionStats.tsx @@ -24,11 +24,11 @@ const Item = ( }); return ( - /* eslint-disable no-nested-ternary */
{title}
+ {/* eslint-disable-next-line no-nested-ternary */} {link ? {value} : filter @@ -42,7 +42,6 @@ const Item = ( ) :
{value}
}
- /* eslint-enable no-nested-ternary */ ); };