Fetch favorites feed and show them in my books

Author: natlibfi-burger

src/components/MyBooks.tsx

@@ -41,8 +41,9 @@ function compareTitles(a: AnyBook, b: AnyBook): 0 | -1 | 1 {
 }
 
 export const MyBooks: React.FC = () => {
-  const { loans, isLoading } = useUser();
+  const { loans, selected, isLoading } = useUser();
   const sortedBooks = loans ? sortBooksByLoanExpirationDate(loans) : [];
+  const selectedBooks = selected ? selected : [];
   const noBooks = sortedBooks.length === 0;
 
   return (
@@ -57,11 +58,21 @@ export const MyBooks: React.FC = () => {
         {noBooks && isLoading ? (
           <PageLoader />
         ) : noBooks ? (
-          <Empty />
+          <EmptyLoansAndHolds />
         ) : (
           <LoansContent books={sortedBooks} />
         )}
       </div>
+      <div sx={{ flex: 1, pb: 4 }}>
+        <PageTitle>Favorites</PageTitle>
+        {noBooks && isLoading ? (
+          <PageLoader />
+        ) : noBooks ? (
+          <EmptySelected />
+        ) : (
+          <LoansContent books={selectedBooks} />
+        )}
+      </div>
     </AuthProtectedRoute>
   );
 };
@@ -74,7 +85,7 @@ const LoansContent: React.FC<{ books: AnyBook[] }> = ({ books }) => {
   );
 };
 
-const Empty = () => {
+const EmptyLoansAndHolds = () => {
   return (
     <>
       <div
@@ -89,7 +100,26 @@ const Empty = () => {
         <H3>
           Your books will show up here when you have any loaned or on hold.
         </H3>
-        <SignOut />
+      </div>
+    </>
+  );
+};
+
+const EmptySelected = () => {
+  return (
+    <>
+      <div
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          px: [3, 5]
+        }}
+      >
+        <H3>
+          No books in favorites.
+        </H3>
       </div>
     </>
   );

src/components/context/UserContext.tsx

@@ -12,6 +12,7 @@ import { addHours, isBefore } from "date-fns";
 type Status = "authenticated" | "loading" | "unauthenticated";
 export type UserState = {
   loans: AnyBook[] | undefined;
+  selected: AnyBook[] | undefined;
   status: Status;
   isAuthenticated: boolean;
   isLoading: boolean;
@@ -44,7 +45,7 @@ interface UserProviderProps {
  * those change it will cause a refetch.
  */
 export const UserProvider = ({ children }: UserProviderProps) => {
-  const { shelfUrl, slug, authMethods } = useLibraryContext();
+  const { shelfUrl, selectedUrl, slug, authMethods } = useLibraryContext();
   const { credentials, setCredentials, clearCredentials } = useCredentials(
     slug,
     authMethods
@@ -64,9 +65,15 @@ export const UserProvider = ({ children }: UserProviderProps) => {
   };
 
   const token = stringifyToken(credentials);
-  const { data, mutate, isValidating } = useSWR(
+  const { data : loansData, mutate, isValidating } = fetchFeed(shelfUrl)
+  const { data : selectedData } = fetchFeed(selectedUrl)
+
+  function fetchFeed (
+    fetchableUrl: string | null
+  ) {
+    return useSWR(
     // pass null if there are no credentials or shelfUrl to tell SWR not to fetch at all.
-    credentials && shelfUrl ? [shelfUrl, token, credentials?.methodType] : null,
+    credentials && fetchableUrl ? [fetchableUrl, token, credentials?.methodType] : null,
     fetchLoans,
     {
       shouldRetryOnError: credentials?.methodType === BasicTokenAuthType,
@@ -115,7 +122,8 @@ export const UserProvider = ({ children }: UserProviderProps) => {
         }
       }
     }
-  );
+  )
+  }
 
   function signIn(
     token: string | Token,
@@ -132,7 +140,7 @@ export const UserProvider = ({ children }: UserProviderProps) => {
   }
 
   function setBook(book: AnyBook, id?: string) {
-    const existing = data ?? [];
+    const existing = loansData ?? [];
 
     // if the id exists, remove that book and set the new one
     const withoutOldBook = existing.filter(book => book.id !== id);
@@ -144,7 +152,7 @@ export const UserProvider = ({ children }: UserProviderProps) => {
    * We should only ever be in one of these three states.
    */
   const status: Status =
-    data && credentials
+    loansData && credentials
       ? "authenticated"
       : credentials && isValidating
       ? "loading"
@@ -156,7 +164,8 @@ export const UserProvider = ({ children }: UserProviderProps) => {
     status,
     isAuthenticated,
     isLoading,
-    loans: isAuthenticated ? data ?? [] : undefined,
+    loans: isAuthenticated ? loansData ?? [] : undefined,
+    selected: isAuthenticated ? selectedData ?? [] : undefined,
     refetchLoans: mutate,
     signIn,
     signOut,

src/dataflow/getLibraryData.ts

@@ -46,6 +46,13 @@ function getShelfUrl(authDoc: OPDS1.AuthDocument): string | null {
   );
 }
 
+function getSelectedUrl(authDoc: OPDS1.AuthDocument): string | null {
+  return (
+    authDoc.links?.find(link => {
+      return link.rel === OPDS1.SelectedLinkRel;
+    })?.href ?? null
+  );
+}
 /**
  * Extracts the catalog root url from an auth document
  */
@@ -79,11 +86,13 @@ export function buildLibraryData(
   const libraryLinks = parseLinks(authDoc.links);
   const authMethods = flattenSamlMethod(authDoc);
   const shelfUrl = getShelfUrl(authDoc);
+  const selectedUrl = getSelectedUrl(authDoc);
   const catalogUrl = getCatalogUrl(authDoc);
   return {
     slug: librarySlug,
     catalogUrl,
     shelfUrl: shelfUrl ?? null,
+    selectedUrl: selectedUrl ?? null,
     catalogName: authDoc.title,
     logoUrl: logoUrl ?? null,
     colors:

src/interfaces.ts

@@ -130,6 +130,7 @@ export interface LibraryData {
   libraryLinks: LibraryLinks;
   authMethods: AppAuthMethod[];
   shelfUrl: string | null;
+  selectedUrl: string | null;
 }
 
 /**

src/types/opds1.ts

@@ -156,10 +156,12 @@ export interface Link {
  */
 export const CatalogRootRel = "start";
 export const ShelfLinkRel = "http://opds-spec.org/shelf";
+export const SelectedLinkRel = "http://opds-spec.org/shelf/selected_books";
 type AuthDocLinkRelations =
   | typeof SelfRel
   | typeof CatalogRootRel
   | typeof ShelfLinkRel
+  | typeof SelectedLinkRel
   | "navigation"
   | "logo"
   | "register"