DEICH-5558 Deichman.no: fix condition + better loading for reserve widget

deichman.no/components/ReservePublicationWidget/ReservePublicationWidget.js

@@ -51,6 +51,7 @@ export default function ReservePublicationWidget({
   const [platform, setPlatform] = useState(platforms?.[0]);
 
   const [copies, setCopies] = useState({});
+  const [isLoading, setLoading] = useState(true);
 
   const [reservationPublications, setReservationPublications] = useState([]);
   const isLoggedIn = useSelector(state => state.auth.isLoggedIn);
@@ -60,9 +61,13 @@ export default function ReservePublicationWidget({
   useEffect(
     () => {
       let cancelUpdate = false;
-      getCopies(currentPublication).then(
-        newCopies => !cancelUpdate && setCopies(newCopies)
-      );
+      setLoading(true);
+      getCopies(currentPublication).then(newCopies => {
+        if (!cancelUpdate) {
+          setCopies(newCopies);
+          setLoading(false);
+        }
+      });
       return () => (cancelUpdate = true);
     },
     [currentPublication]
@@ -152,67 +157,74 @@ export default function ReservePublicationWidget({
       .map(p => notReservableReason(p, copies))
       .reduce((reasons, reason) => ({ ...reasons, [reason]: reason }), {})
   );
-  if (reasons.length > 0) {
+  if (isLoading) {
+    return null;
+  }
+  if (publications.every(p => notReservableReason(p, copies))) {
     return (
-      <div className="reserve-work-widget">
-        <h3>{title}</h3>
-        <p>
-          {reasons.length === 1 && <>{reasons[0]}</>}
-          {reasons.length > 1 && "Kan ikke bestilles"}
-        </p>
+      <div data-animate-in="top" data-animation-order="4">
+        <div className="reserve-work-widget">
+          <h3>{title}</h3>
+          <p>
+            {reasons.length === 1 && <>{reasons[0]}</>}
+            {reasons.length > 1 && "Kan ikke bestilles"}
+          </p>
+        </div>
       </div>
     );
   }
   return (
-    <div className="reserve-work-widget">
-      <h3>{title}</h3>
-      {!isLoggedIn && (
-        <div>
-          <LoginButton primary>Logg inn og bestill</LoginButton>
-        </div>
-      )}
-      {isLoggedIn && (
-        <div>
-          {reserveChoices.map(choice => {
-            return (
-              <fieldset
-                key={choice.choice}
-                disabled={choice.alternatives.length <= 1}
-              >
-                <Select
-                  name={choice.choice}
-                  options={choice.alternatives}
-                  onChange={choice.onChange}
-                  selected={choice.selected}
+    <div data-animate-in="top" data-animation-order="4">
+      <div className="reserve-work-widget">
+        <h3>{title}</h3>
+        {!isLoggedIn && (
+          <div>
+            <LoginButton primary>Logg inn og bestill</LoginButton>
+          </div>
+        )}
+        {isLoggedIn && (
+          <div>
+            {reserveChoices.map(choice => {
+              return (
+                <fieldset
+                  key={choice.choice}
+                  disabled={choice.alternatives.length <= 1}
+                >
+                  <Select
+                    name={choice.choice}
+                    options={choice.alternatives}
+                    onChange={choice.onChange}
+                    selected={choice.selected}
+                  />
+                </fieldset>
+              );
+            })}
+            <>
+              <Button primary onClick={() => onReserve(reserveChoices)}>
+                Bestill
+              </Button>
+              {!!reservationPublications.length && (
+                <ReservationContainer
+                  publications={reservationPublications}
+                  copies={copies}
+                  onClose={() => setReservationPublications([])}
                 />
-              </fieldset>
-            );
-          })}
-          <>
-            <Button primary onClick={() => onReserve(reserveChoices)}>
-              Bestill
-            </Button>
-            {!!reservationPublications.length && (
-              <ReservationContainer
-                publications={reservationPublications}
-                copies={copies}
-                onClose={() => setReservationPublications([])}
-              />
-            )}
-          </>
-        </div>
-      )}
-      <Block top={2}>
-        <PublicationDetailsButton
-          className="link"
-          publication={{
-            ...currentPublication,
-            items: copies[currentPublication.recordId]?.items
-          }}
-        >
-          Mer info og hylleplassering
-        </PublicationDetailsButton>
-      </Block>
+              )}
+            </>
+          </div>
+        )}
+        <Block top={2}>
+          <PublicationDetailsButton
+            className="link"
+            publication={{
+              ...currentPublication,
+              items: copies[currentPublication.recordId]?.items
+            }}
+          >
+            Mer info og hylleplassering
+          </PublicationDetailsButton>
+        </Block>
+      </div>
     </div>
   );
 }
@@ -236,7 +248,7 @@ export function notReservableReason(publication, copies) {
   const isOnlyForBranchUse = items.every(item => item.notforloan);
 
   if (
-    publication.formats.includes(
+    publication.formats?.includes(
       "http://data.deichman.no/format#MusicalInstrument"
     )
   ) {

deichman.no/components/WorkHero/WorkHero.js

@@ -120,12 +120,10 @@ const WorkHero = ({
             </Block>
 
             <Block top={6} responsive>
-              <div data-animate-in="top" data-animation-order="4">
-                <ReservePublicationWidget
-                  publications={publications}
-                  currentPublication={publicationData}
-                />
-              </div>
+              <ReservePublicationWidget
+                publications={publications}
+                currentPublication={publicationData}
+              />
             </Block>
           </div>
         </GridItem>