Move "articles are always available" logic into useAvailabilityData hook

Previously it was in the availability label component, but it makes more
sense for it to be located together with the rest of the logic that
decides whether a material is available or not. This also fixes an issue
we were having with availability labels for articles loading although
they were just supposed to be available and not load any data.

src/components/availability-label/availability-label.tsx

@@ -11,7 +11,6 @@ import {
 } from "../../core/dbc-gateway/generated/graphql";
 import AvailabilityLabelInside from "./availability-label-inside";
 import { FaustId } from "../../core/utils/types/ids";
-import { ManifestationMaterialType } from "../../core/utils/types/material-type";
 
 export interface AvailabilityLabelProps {
   manifestText: string;
@@ -45,16 +44,13 @@ export const AvailabilityLabel: React.FC<AvailabilityLabelProps> = ({
     accessTypes,
     access,
     faustIds,
-    isbn: isbns ? isbns[0] : null
+    isbn: isbns ? isbns[0] : null,
+    manifestText
   });
 
-  let availabilityText = isAvailable
+  const availabilityText = isAvailable
     ? t("availabilityAvailableText")
     : t("availabilityUnavailableText");
-  // Articles are always available
-  if (manifestText === ManifestationMaterialType.article) {
-    availabilityText = t("availabilityAvailableText");
-  }
 
   useDeepCompareEffect(() => {
     // Track material availability (status) if the button is active - also meaning
@@ -76,12 +72,7 @@ export const AvailabilityLabel: React.FC<AvailabilityLabelProps> = ({
     <AvailabilityLabelInside
       selected={selected}
       isLoading={!!isLoading}
-      // Articles are always available
-      isAvailable={
-        manifestText === ManifestationMaterialType.article
-          ? true
-          : !!isAvailable
-      }
+      isAvailable={!!isAvailable}
       manifestText={manifestText}
       availabilityText={availabilityText}
     />

src/components/availability-label/helper.ts

@@ -12,17 +12,20 @@ import {
 import { FaustId } from "../../core/utils/types/ids";
 import useGetAvailability from "../../core/utils/useGetAvailability";
 import { publizonProductStatuses } from "./types";
+import { ManifestationMaterialType } from "../../core/utils/types/material-type";
 
 export const useAvailabilityData = ({
   accessTypes,
   access,
   faustIds,
-  isbn
+  isbn,
+  manifestText
 }: {
   accessTypes: AccessTypeCode[];
   access: Access["__typename"][];
   faustIds: FaustId[] | null;
   isbn: string | null;
+  manifestText: string;
 }) => {
   const [isAvailable, setIsAvailable] = useState<null | boolean>(null);
   const config = useConfig();
@@ -37,13 +40,23 @@ export const useAvailabilityData = ({
     }
   }, [isOnline]);
 
+  useEffect(() => {
+    // Articles are always available.
+    if (manifestText === ManifestationMaterialType.article) {
+      setIsAvailable(true);
+    }
+  }, [manifestText]);
+
   const { isLoading: isLoadingIdentifier } = useGetV1ProductsIdentifier(
     isbn ?? "",
     {
       query: {
         // Publizon / useGetV1ProductsIdentifier is responsible for online
         // materials. It requires an ISBN to do lookups.
-        enabled: isOnline && isbn !== null,
+        enabled:
+          isOnline &&
+          isbn !== null &&
+          manifestText !== ManifestationMaterialType.article,
         onSuccess: (res) => {
           // If an online material isn't cost-free we need to check whether there is a queue
           // to reserve it (via useGetV1LoanstatusIdentifier below in the code)
@@ -67,7 +80,8 @@ export const useAvailabilityData = ({
         isOnline &&
         !!isbn &&
         isCostFree === false &&
-        access.some((acc) => acc === "Ereol"),
+        access.some((acc) => acc === "Ereol") &&
+        manifestText !== ManifestationMaterialType.article,
       onSuccess: (res) => {
         if (res && res.loanStatus) {
           setIsAvailable(publizonProductStatuses[res.loanStatus].isAvailable);
@@ -87,7 +101,10 @@ export const useAvailabilityData = ({
         // FBS / useGetAvailabilityV3 is responsible for handling availability
         // for physical items. This will be the majority of all materials so we
         // use this for everything except materials that are explicitly online.
-        enabled: !isOnline && faustIds !== null,
+        enabled:
+          !isOnline &&
+          faustIds !== null &&
+          manifestText !== ManifestationMaterialType.article,
         onSuccess: (data) => {
           if (data?.some((item) => item.available)) {
             setIsAvailable(true);
@@ -98,15 +115,21 @@ export const useAvailabilityData = ({
   });
 
   useEffect(() => {
-    setIsLoading(
-      (isLoadingAvailability || isLoadingIdentifier || isLoadingProductInfo) &&
-        isAvailable === null
-    );
+    // Articles are always available, thus no need to load.
+    if (manifestText !== ManifestationMaterialType.article) {
+      setIsLoading(
+        (isLoadingAvailability ||
+          isLoadingIdentifier ||
+          isLoadingProductInfo) &&
+          isAvailable === null
+      );
+    }
   }, [
     isLoadingAvailability,
     isLoadingIdentifier,
     isLoadingProductInfo,
-    isAvailable
+    isAvailable,
+    manifestText
   ]);
 
   return { isLoading, isAvailable };