Merge pull request #1437 from danskernesdigitalebibliotek/DDFBRA-30-h…

…uskeliste-materialer-med-hvide-hjerter-kan-ikke-slettes

Fix favorites list - white hearts

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<FavoritesListProps> = ({ pageSize }) => {
   const t = useText();
   const { data, isLoading } = useGetList("default");
-  const [displayedMaterials, setDisplayedMaterials] = useState<Pid[]>([]);
-  const [materials, setMaterials] = useState<Pid[]>([]);
+  const [displayedMaterials, setDisplayedMaterials] = useState<WorkId[]>([]);
+  const [materials, setMaterials] = useState<WorkId[]>([]);
   const { itemsShown, PagerComponent, page } = usePager({
     hitcount: materials.length,
     pageSize
   });
-  const { collections } = (data as { collections: Pid[] }) || [];
+  const { collections } = (data as { collections: WorkId[] }) || [];
 
   const lastItemRef = useRef<HTMLLIElement>(null);
 
@@ -71,15 +71,15 @@ const FavoritesList: React.FC<FavoritesListProps> = ({ pageSize }) => {
   const renderContent = () =>
     displayedMaterials.length > 0 ? (
       <ul className="content-list">
-        {displayedMaterials.map((pid, i) => {
+        {displayedMaterials.map((id, i) => {
           const isFirstNewItem = i === page * pageSize;
           return (
             <MaterialListItem
               className="content-list__item"
-              key={pid}
+              key={id}
               ref={isFirstNewItem ? lastItemRef : null}
             >
-              <CardListItemAdapter pid={pid} />
+              <CardListItemAdapter id={id} />
             </MaterialListItem>
           );
         })}

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<CardListItemAdapterProps> = ({ pid }) => {
+const CardListItemAdapter: FC<CardListItemAdapterProps> = ({ id }) => {
   const { data, isLoading } = useGetSmallWorkQuery({
-    id: pid
+    id
   });
 
   if (isLoading) return <CardListItemSkeleton />;
@@ -20,8 +20,9 @@ const CardListItemAdapter: FC<CardListItemAdapterProps> = ({ pid }) => {
     <div>
       {data && data.work && (
         <CardListItem
-          key={data.work?.workId}
+          key={id}
           item={data.work as Work}
+          preferredId={id}
           coverTint="100"
           resultNumber={0}
         />

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<CardListItemProps> = ({
@@ -57,6 +60,7 @@ const CardListItem: React.FC<CardListItemProps> = ({
   },
   coverTint,
   resultNumber,
+  preferredId,
   dataCy = "card-list-item"
 }) => {
   const searchTitleId = useId();
@@ -149,7 +153,7 @@ const CardListItem: React.FC<CardListItemProps> = ({
           {showItem && (
             <ButtonFavourite
               title={fullTitle[0]}
-              id={workId}
+              id={preferredId || workId}
               addToListRequest={addToListRequest}
             />
           )}

src/components/search-bar/search-bar.tsx

@@ -55,7 +55,8 @@ const SearchBar: React.FC<SearchBarProps> = ({
         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<SearchBarProps> = ({
         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);
           }
         }}