From 752bee3c3926d6b5c6576717918add5bd75f89a2 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Tue, 27 Feb 2024 12:03:23 -0800
Subject: [PATCH] Use MajorErrorMessage for search result errors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It'd be nice to customize the message a bit, but this should be rare
and I'd prefer the simplicity of just going with the default text.

I ran into this when I made a mistake in how I process the return value
of search results, so React Query caught and raised the error via
React, as intended! And I was annoyed that it wasn't logged anywhere,
so that's my motivation for this change—but also, the old message is
pretty meh and has some layout problems anyway.
---
 .../wardrobe-2020/WardrobePage/SearchPanel.js        | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js b/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js
index 772823a3..99eef2aa 100644
--- a/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js
+++ b/app/javascript/wardrobe-2020/WardrobePage/SearchPanel.js
@@ -4,6 +4,7 @@ import { Box, Text, useColorModeValue, VisuallyHidden } from "@chakra-ui/react";
 import Item, { ItemListContainer, ItemListSkeleton } from "./Item";
 import PaginationToolbar from "../components/PaginationToolbar";
 import { useSearchResults } from "./useSearchResults";
+import { MajorErrorMessage } from "../util";
 
 export const SEARCH_PER_PAGE = 30;
 
@@ -134,17 +135,8 @@ function SearchResults({
 
   const searchPanelBackground = useColorModeValue("white", "gray.900");
 
-  // If the results aren't ready, we have some special case UI!
   if (error) {
-    return (
-      <Text>
-        We hit an error trying to load your search results{" "}
-        <span role="img" aria-label="(sweat emoji)">
-          😓
-        </span>{" "}
-        Try again?
-      </Text>
-    );
+    return <MajorErrorMessage error={error} variant="network" />;
   }
 
   // Finally, render the item list, with checkboxes and Item components!