Hide the new component if a third partyquery fails #3342

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

@@ -1,4 +1,7 @@
+import * as E from 'fp-ts/Either';
+import * as O from 'fp-ts/Option';
 import * as RA from 'fp-ts/ReadonlyArray';
+import * as T from 'fp-ts/Task';
 import * as TE from 'fp-ts/TaskEither';
 import { pipe } from 'fp-ts/function';
 import { Dependencies } from './dependencies';
@@ -11,5 +14,10 @@ export const constructViewModel = (dependencies: Dependencies): TE.TaskEither<DE
     title,
     href: `https://labs.sciety.org/categories/articles?category=${title}`,
   }))),
-  TE.map((categories) => ({ categories })),
+  T.map((categories) => pipe(
+    categories,
+    O.fromEither,
+    (componentViewModel) => ({ categories: componentViewModel }),
+    E.right,
+  )),
 );

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

@@ -1,22 +1,29 @@
+import * as O from 'fp-ts/Option';
 import * as RA from 'fp-ts/ReadonlyArray';
 import { pipe } from 'fp-ts/function';
 import { HtmlFragment, toHtmlFragment } from '../../../../types/html-fragment';
 import { renderListItems } from '../../shared-components/list-items';
 import { renderSearchForm } from '../../shared-components/search-form';
 import { ViewModel } from '../view-model';
 
-const renderSearchCategories = (categories: ViewModel['categories']) => pipe(
-  categories,
-  RA.map((category) => toHtmlFragment(`<a href="${category.href}" class="search-categories-list__link">${category.title}</a>`)),
-  renderListItems,
-  (listContent) => `
+const renderSearchCategories = (viewModel: ViewModel['categories']) => pipe(
+  viewModel,
+  O.match(
+    () => '',
+    (categories) => pipe(
+      categories,
+      RA.map((category) => toHtmlFragment(`<a href="${category.href}" class="search-categories-list__link">${category.title}</a>`)),
+      renderListItems,
+      (listContent) => `
     <section class="search-categories">
     <h2>Browse by category</h2>
       <ul role="list" class="search-categories-list">
         ${listContent}
       </ul>
     </section>
   `,
+    ),
+  ),
 );
 
 export const renderPage = (viewModel: ViewModel): HtmlFragment => pipe(

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

@@ -1,6 +1,8 @@
+import * as O from 'fp-ts/Option';
+
 type Category = {
   title: string,
   href: string,
 };
 
-export type ViewModel = { categories: ReadonlyArray<Category> };
+export type ViewModel = { categories: O.Option<ReadonlyArray<Category>> };