Use Publisher field for Publisher Group instead of bookshelves

src/IFilter.ts

@@ -1,12 +1,14 @@
 export enum InCirculationOptions {
     All,
     No,
-    Yes
+    Yes,
 }
 export interface IFilter {
     language?: string; // review: what is this exactly? BCP 47? Our Parse has duplicate "ethnologueCode" and "isoCode" columns, which actually contain code and full script tags.
     //    publisher?: string;
     bookshelf?: string;
+    publisher?: string;
+    originalPublisher?: string;
     feature?: string;
     topic?: string;
     bookShelfCategory?: string;

src/components/BookShelfGroup.tsx

@@ -28,14 +28,11 @@ interface IProps {
 
 // Normally the bookshelf name matches the image name, but if not we change it here:
 const nameToImageMap = new Map<string, string>([
-    //  // something in our pipeline won't deliver an image that starts with "3"
-    ["3Asafeer", "Asafeer"],
-    ["Room To Read", "Room to Read"],
     ["Ministerio de Educación de Guatemala", "Guatemala MOE"],
-    ["Resources for the Blind, Inc. (Philippines)", "Resources for the Blind"]
+    ["Resources for the Blind, Inc. (Philippines)", "Resources for the Blind"],
 ]);
 
-export const BookshelfGroup: React.FunctionComponent<IProps> = props => {
+export const BookshelfGroup: React.FunctionComponent<IProps> = (props) => {
     // At this point there are so few bookshelves that we just retrieve the whole list and then filter here.
     // Might be a good thing to cache.
     const bookshelfResults = useGetBookshelvesByCategory(
@@ -49,26 +46,26 @@ export const BookshelfGroup: React.FunctionComponent<IProps> = props => {
     // From that we need to determine that on this level, we should be showing [painting, sculpture].
 
     const bookshelfPathsAtThisLevel = props.pathToTheCurrentLevel
-        ? bookshelfResults.filter(b =>
+        ? bookshelfResults.filter((b) =>
               b.key.startsWith(props.pathToTheCurrentLevel!)
           )
         : bookshelfResults;
 
     const prefix: string = props.pathToTheCurrentLevel || "";
     const allNamesAtThisLevel = bookshelfPathsAtThisLevel
-        .map(b => b.key.replace(prefix, ""))
-        .map(name => {
+        .map((b) => b.key.replace(prefix, ""))
+        .map((name) => {
             const i = name.indexOf("/");
             return i < 0 ? name : name.substr(0, i);
         });
 
     const uniqueNamesAtThisLevel = [
-        ...Array.from(new Set(allNamesAtThisLevel))
+        ...Array.from(new Set(allNamesAtThisLevel)),
     ];
 
     const { bookshelves } = useContext(CachedTablesContext);
 
-    const cards =
+    const bookshelfCards =
         bookshelfResults &&
         uniqueNamesAtThisLevel.sort().map((nextLevel: string) => {
             const imageName = nameToImageMap.get(nextLevel) ?? nextLevel;
@@ -86,7 +83,7 @@ export const BookshelfGroup: React.FunctionComponent<IProps> = props => {
                     title={bookshelf.displayName || ""}
                     bookCount="??"
                     filter={{
-                        bookshelf: fullBookshelfKey
+                        bookshelf: fullBookshelfKey,
                     }}
                     pageType={props.bookShelfCategory}
                     img={
@@ -98,5 +95,30 @@ export const BookshelfGroup: React.FunctionComponent<IProps> = props => {
             );
         });
 
+    // enhance: once we get the Publisher field filled in, we can switch to getting a full list of publishers
+    // and then us the following group
+    const publishers = ["Little Zebra Books"]; // temporary until we switch over instead of hard-coding "Little Zebra"
+    const cardsFromPublisherField =
+        bookshelfResults &&
+        publishers.sort().map((publisher) => {
+            return (
+                <CategoryCard
+                    key={publisher}
+                    //preTitle={publisher}
+                    title={publisher}
+                    bookCount="??"
+                    filter={{
+                        publisher,
+                    }}
+                    pageType={props.bookShelfCategory}
+                    img={
+                        "https://share.bloomlibrary.org/bookshelf-images/" +
+                        encodeUrl(publisher) +
+                        ".png"
+                    }
+                />
+            );
+        });
+    const cards = bookshelfCards.concat(cardsFromPublisherField);
     return <CategoryCardGroup {...props}>{cards}</CategoryCardGroup>;
 };

src/components/BulkEdit/AddTagPanel.tsx

@@ -1,9 +1,3 @@
-// this engages a babel macro that does cool emotion stuff (like source maps). See https://emotion.sh/docs/babel-macros
-import css from "@emotion/css/macro";
-// these two lines make the css prop work on react elements
-import { jsx } from "@emotion/core";
-/** @jsx jsx */
-
 import React from "react";
 import { IFilter } from "../../IFilter";
 import { observer } from "mobx-react";
@@ -15,7 +9,7 @@ export const AddTagPanel: React.FunctionComponent<{
     filterHolder: FilterHolder;
     refresh: () => void;
     backgroundColor: string;
-}> = observer(props => {
+}> = observer((props) => {
     return (
         <BulkEditPanel
             panelLabel="Add Tag"

src/components/BulkEdit/AssignPublisherPanel.tsx

@@ -1,9 +1,3 @@
-// this engages a babel macro that does cool emotion stuff (like source maps). See https://emotion.sh/docs/babel-macros
-import css from "@emotion/css/macro";
-// these two lines make the css prop work on react elements
-import { jsx } from "@emotion/core";
-/** @jsx jsx */
-
 import React from "react";
 import { IFilter } from "../../IFilter";
 import { observer } from "mobx-react";
@@ -15,7 +9,7 @@ export const AssignPublisherPanel: React.FunctionComponent<{
     filterHolder: FilterHolder;
     backgroundColor: string;
     refresh: () => void;
-}> = observer(props => {
+}> = observer((props) => {
     return (
         <BulkEditPanel
             panelLabel="Change Publisher"

src/components/BulkEdit/BulkEditPanel.tsx

@@ -11,7 +11,7 @@ import {
     Checkbox,
     FormControlLabel,
     Select,
-    MenuItem
+    MenuItem,
 } from "@material-ui/core";
 
 import { IFilter } from "../../IFilter";
@@ -33,7 +33,7 @@ export const BulkEditPanel: React.FunctionComponent<{
     ) => void;
     filterHolder: FilterHolder;
     refresh: () => void;
-}> = observer(props => {
+}> = observer((props) => {
     const [valueToSet, setValueToSet] = useState<string | undefined>("");
     const [armed, setArmed] = useState(false);
     const user = useGetLoggedInUser();
@@ -44,6 +44,8 @@ export const BulkEditPanel: React.FunctionComponent<{
     const notFilteredYet = !(
         !!props.filterHolder.completeFilter.bookshelf ||
         !!props.filterHolder.completeFilter.language ||
+        !!props.filterHolder.completeFilter.publisher ||
+        !!props.filterHolder.completeFilter.originalPublisher ||
         // lots of other fields, e.g. copyright, end up as part of search (e.g. search:"copyright:foo")
         !!props.filterHolder.completeFilter.search
     );
@@ -78,7 +80,7 @@ export const BulkEditPanel: React.FunctionComponent<{
                         control={
                             <Checkbox
                                 checked={armed}
-                                onChange={e => {
+                                onChange={(e) => {
                                     setArmed(e.target.checked);
                                 }}
                             />
@@ -101,11 +103,11 @@ export const BulkEditPanel: React.FunctionComponent<{
                             css={css`
                                 width: 400px;
                             `}
-                            onChange={e => {
+                            onChange={(e) => {
                                 setValueToSet(e.target.value as string);
                             }}
                         >
-                            {props.choices.map(c => (
+                            {props.choices.map((c) => (
                                 <MenuItem key={c} value={c}>
                                     {c}
                                 </MenuItem>
@@ -121,7 +123,7 @@ export const BulkEditPanel: React.FunctionComponent<{
                                 width: 600px;
                             `}
                             defaultValue={valueToSet}
-                            onChange={evt => {
+                            onChange={(evt) => {
                                 const v = evt.target.value.trim();
                                 setValueToSet(v.length ? v : undefined);
                             }}