From a846b33ba5f09e4dd920f69eb597cb5a2e07a112 Mon Sep 17 00:00:00 2001
From: neopostmodern <clemens@neopostmodern.com>
Date: Sun, 7 Aug 2022 23:27:47 +0200
Subject: [PATCH] fix(client): show errors in UI on `TagPage`

---
 client/src/renderer/containers/TagPage.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/src/renderer/containers/TagPage.tsx b/client/src/renderer/containers/TagPage.tsx
index 7827207..1b1a7c1 100644
--- a/client/src/renderer/containers/TagPage.tsx
+++ b/client/src/renderer/containers/TagPage.tsx
@@ -2,6 +2,7 @@ import { useMutation, useQuery } from '@apollo/client';
 import gql from 'graphql-tag';
 import React, { useCallback } from 'react';
 import { useParams } from 'react-router';
+import FatalApolloError from '../components/FatalApolloError';
 import NetworkOperationsIndicator from '../components/NetworkOperationsIndicator';
 import NotesList from '../components/NotesList';
 import TagForm from '../components/TagForm';
@@ -102,19 +103,26 @@ const TagPage: React.FC<{}> = () => {
     [updateTag]
   );
 
+  if (tagQuery.state === DataState.LOADING) {
+    return <ComplexLayout loading />;
+  }
+  if (tagQuery.state === DataState.ERROR) {
+    return (
+      <ComplexLayout>
+        <FatalApolloError query={tagQuery} />
+      </ComplexLayout>
+    );
+  }
+
   return (
-    <ComplexLayout loading={tagQuery.state === DataState.LOADING}>
+    <ComplexLayout>
       <NetworkOperationsIndicator
         query={tagQuery}
         mutation={updateTagMutation}
       />
-      {tagQuery.state === DataState.DATA && (
-        <>
-          <TagForm tag={tagQuery.data.tag} onSubmit={handleSubmit} />
+      <TagForm tag={tagQuery.data.tag} onSubmit={handleSubmit} />
 
-          <NotesList notes={tagQuery.data.tag.notes} />
-        </>
-      )}
+      <NotesList notes={tagQuery.data.tag.notes} />
     </ComplexLayout>
   );
 };