Expand the view model type to be able to isolate a component's failure …

…#3342

src/read-side/html-pages/search-page/construct-view-model/construct-view-model.ts

@@ -11,4 +11,5 @@ export const constructViewModel = (dependencies: Dependencies): TE.TaskEither<DE
     title,
     href: `https://labs.sciety.org/categories/articles?category=${title}`,
   }))),
+  TE.map((categories) => ({ categories })),
 );

src/read-side/html-pages/search-page/render-as-html/render-page.ts

@@ -5,15 +5,15 @@ import { renderListItems } from '../../shared-components/list-items';
 import { renderSearchForm } from '../../shared-components/search-form';
 import { ViewModel } from '../view-model';
 
-const renderSearchCategories = (viewModel: ViewModel) => pipe(
-  viewModel,
+const renderSearchCategories = (categories: ViewModel['categories']) => pipe(
+  categories,
   RA.map((category) => toHtmlFragment(`<a href="${category.href}" class="search-categories-list__link">${category.title}</a>`)),
   renderListItems,
-  (categories) => `
+  (listContent) => `
     <section class="search-categories">
     <h2>Browse by category</h2>
       <ul role="list" class="search-categories-list">
-        ${categories}
+        ${listContent}
       </ul>
     </section>
   `,
@@ -25,7 +25,7 @@ export const renderPage = (viewModel: ViewModel): HtmlFragment => pipe(
       <h1>Search Sciety</h1>
     </header>
     ${renderSearchForm('', true)}
-    ${renderSearchCategories(viewModel)}
+    ${renderSearchCategories(viewModel.categories)}
   `,
   toHtmlFragment,
 );

src/read-side/html-pages/search-page/view-model.ts

@@ -3,4 +3,4 @@ type Category = {
   href: string,
 };
 
-export type ViewModel = ReadonlyArray<Category>;
+export type ViewModel = { categories: ReadonlyArray<Category> };