diff --git a/src/apps/favorites-list/FavoritesList.tsx b/src/apps/favorites-list/FavoritesList.tsx index ca6546d243..81e275f01e 100644 --- a/src/apps/favorites-list/FavoritesList.tsx +++ b/src/apps/favorites-list/FavoritesList.tsx @@ -3,7 +3,7 @@ import EmptyList from "../../components/empty-list/empty-list"; import usePager from "../../components/result-pager/use-pager"; import { useGetList } from "../../core/material-list-api/material-list"; import { useText } from "../../core/utils/text"; -import { Pid } from "../../core/utils/types/ids"; +import { WorkId } from "../../core/utils/types/ids"; import CardListItemAdapter from "../../components/card-item-list/card-list-item/card-list-item-adapter"; import MaterialListItem from "../../components/card-item-list/MaterialListItem"; import CardListItemSkeleton from "../../components/card-item-list/card-list-item/card-list-item-skeleton"; @@ -15,13 +15,13 @@ export interface FavoritesListProps { const FavoritesList: React.FC = ({ pageSize }) => { const t = useText(); const { data, isLoading } = useGetList("default"); - const [displayedMaterials, setDisplayedMaterials] = useState([]); - const [materials, setMaterials] = useState([]); + const [displayedMaterials, setDisplayedMaterials] = useState([]); + const [materials, setMaterials] = useState([]); const { itemsShown, PagerComponent, page } = usePager({ hitcount: materials.length, pageSize }); - const { collections } = (data as { collections: Pid[] }) || []; + const { collections } = (data as { collections: WorkId[] }) || []; const lastItemRef = useRef(null); @@ -71,15 +71,15 @@ const FavoritesList: React.FC = ({ pageSize }) => { const renderContent = () => displayedMaterials.length > 0 ? (
    - {displayedMaterials.map((pid, i) => { + {displayedMaterials.map((id, i) => { const isFirstNewItem = i === page * pageSize; return ( - + ); })} diff --git a/src/components/card-item-list/card-list-item/card-list-item-adapter.tsx b/src/components/card-item-list/card-list-item/card-list-item-adapter.tsx index 106dfc046d..973541bba1 100644 --- a/src/components/card-item-list/card-list-item/card-list-item-adapter.tsx +++ b/src/components/card-item-list/card-list-item/card-list-item-adapter.tsx @@ -2,16 +2,16 @@ import React, { FC } from "react"; import { useGetSmallWorkQuery } from "../../../core/dbc-gateway/generated/graphql"; import { Work } from "../../../core/utils/types/entities"; import CardListItem from "./card-list-item"; -import { Pid } from "../../../core/utils/types/ids"; import CardListItemSkeleton from "./card-list-item-skeleton"; +import { WorkId } from "../../../core/utils/types/ids"; export interface CardListItemAdapterProps { - pid: Pid; + id: WorkId; } -const CardListItemAdapter: FC = ({ pid }) => { +const CardListItemAdapter: FC = ({ id }) => { const { data, isLoading } = useGetSmallWorkQuery({ - id: pid + id }); if (isLoading) return ; @@ -20,8 +20,9 @@ const CardListItemAdapter: FC = ({ pid }) => {
    {data && data.work && ( diff --git a/src/components/card-item-list/card-list-item/card-list-item.tsx b/src/components/card-item-list/card-list-item/card-list-item.tsx index ace3d8e5f4..f46697bb66 100644 --- a/src/components/card-item-list/card-list-item/card-list-item.tsx +++ b/src/components/card-item-list/card-list-item/card-list-item.tsx @@ -44,6 +44,9 @@ export interface CardListItemProps { item: Work; coverTint: CoverProps["tint"]; resultNumber: number; + preferredId?: WorkId; // If this item is on the favorites list, there is a single + // preferred ID - it needs to match the favorite item ID from useGetList("default") + // call in FavoritesList.tsx component. dataCy?: string; } const CardListItem: React.FC = ({ @@ -57,6 +60,7 @@ const CardListItem: React.FC = ({ }, coverTint, resultNumber, + preferredId, dataCy = "card-list-item" }) => { const searchTitleId = useId(); @@ -149,7 +153,7 @@ const CardListItem: React.FC = ({ {showItem && ( )} diff --git a/src/components/search-bar/search-bar.tsx b/src/components/search-bar/search-bar.tsx index d891a2a136..b6df8a9365 100644 --- a/src/components/search-bar/search-bar.tsx +++ b/src/components/search-bar/search-bar.tsx @@ -55,7 +55,8 @@ const SearchBar: React.FC = ({ placeholder={t("inputPlaceholderText")} aria-label={t("inputPlaceholderText")} onKeyUp={(e) => { - if (e.key === "Enter" && qWithoutQuery === q && q.length > 0) { + // Only redirect if there is no selected item in autosuggest + query is longer than 2 characters + if (e.key === "Enter" && qWithoutQuery === q && q.length > 2) { redirectTo(redirectUrl); } }} @@ -72,14 +73,14 @@ const SearchBar: React.FC = ({ alt={t("searchHeaderIconAltText")} className="header__menu-search-icon" onClick={() => { - // Only redirect if there is no selected item in autosuggest - if (qWithoutQuery === q && q.length > 0) { + // Only redirect if there is no selected item in autosuggest + query is longer than 2 characters + if (qWithoutQuery === q && q.length > 2) { redirectTo(redirectUrl); } }} onKeyUp={(e) => { - // Only redirect if there is no selected item in autosuggest - if (e.key === "Enter" && qWithoutQuery === q && q.length > 0) { + // Only redirect if there is no selected item in autosuggest + query is longer than 2 characters + if (e.key === "Enter" && qWithoutQuery === q && q.length > 2) { redirectTo(redirectUrl); } }}