selectedBook can be null

Author: RoyEJohnson

src/app/pages/errata-form/errata-form-context.tsx

@@ -6,7 +6,7 @@ import {useLocation} from 'react-router-dom';
 import {useDataFromPromise, useDataFromSlug} from '~/helpers/page-data-utils';
 
 type ContextValue = {
-    selectedBook: Book;
+    selectedBook: Book | null;
     books: Book[] | null | undefined;
     hasError: string | null;
     setHasError: (error: string | null) => void;
@@ -30,10 +30,10 @@ function useContextValue(): ContextValue {
     const [title, setTitle] = useState<string | null>(initialTitle);
     const books = useDataFromPromise(fetchBooks);
     const selectedBook = React.useMemo(
-        () => books?.find((b: Book) => b.title === title) || {} as Book,
+        () => books?.find((b) => b.title === title) || null,
         [books, title]
     );
-    const bookInfo = useDataFromSlug<Book>(selectedBook.slug) || selectedBook;
+    const bookInfo = useDataFromSlug<Book>(selectedBook ? selectedBook.slug : null) || selectedBook;
     const [hasError, setHasError] = useState<string | null>('You have not completed the form');
     const [hideErrors, setHideErrors] = useState(true);
     const [submitting, setSubmitting] = useState(false);

src/app/pages/errata-form/form/ErrorLocationSelector/toc-selector.tsx

@@ -104,7 +104,7 @@ function ChapterOrPageOption(passThruOptions: ChapterOptionProps) {
     );
 }
 
-function useTocTree(slug: string, chapterFilter: string | undefined) {
+function useTocTree(slug: string | undefined, chapterFilter: string | undefined) {
     const [tree, updateTree] = useState<TreeEntry[]>([]);
     const filteredTree = useMemo(
         () => {
@@ -138,7 +138,8 @@ export default function TocSelector({required=true, updateValue}: TocSelectorPro
     const inputRef = useRef<HTMLSelectElement>(null);
     const [InvalidMessage, updateInvalidMessage] = managedInvalidMessage(inputRef);
     const [chapterFilter, updateChapterFilter] = useState<string>();
-    const filteredTree = useTocTree(selectedBook.slug, chapterFilter);
+    const slug = selectedBook ? selectedBook.slug : undefined;
+    const filteredTree = useTocTree(slug, chapterFilter);
     const deselect = React.useCallback(
         () => {
             if (inputRef.current) {

src/app/pages/errata-form/form/ErrorSourceSelector.tsx

@@ -101,7 +101,7 @@ function useSourceTypes() {
     const initialSource = source && sourceNames[source.toLowerCase()];
     const [sourceTypes, updateSourceTypes] = useState<string[]>([]);
     const filteredSourceTypes = useMemo(
-        () => sourceTypes.filter(filterForBook(selectedBook)),
+        () => sourceTypes.filter(filterForBook(selectedBook ?? {} as Book)),
         [sourceTypes, selectedBook]
     );
     const [selectedSource, updateSelectedSource] = useState(initialSource);

src/app/pages/errata-form/form/form.tsx

@@ -79,11 +79,12 @@ function RevisionSchedule() {
 function FormFields() {
     const {selectedBook} = useErrataFormContext();
     const {accountId: submittedBy} = useUserContext();
+    const id = selectedBook ? selectedBook.id : '';
 
     return (
         <React.Fragment>
             <input type="hidden" name="submitted_by_account_id" value={submittedBy} />
-            <input type="hidden" name="book" value={selectedBook.id} />
+            <input type="hidden" name="book" value={id} />
             <ErrorTypeSelector />
             <ErrorSourceSelector />
             <ErrorLocationSelector />