Handle search errors with a message

Author: captbaritone

packages/skin-museum-client/src/SkinTable.js

@@ -18,6 +18,7 @@ const SkinTable = ({
   getSkinData,
   searchQuery,
   loadingSearchQuery,
+  searchResultsError,
 }) => {
   function itemKey({ columnIndex, rowIndex }) {
     const { requestToken, data: skin } = getSkinData({
@@ -90,7 +91,7 @@ const SkinTable = ({
             paddingTop: 40,
           }}
         >
-          No skins matching "{searchQuery}"
+          {searchResultsError ?? `No skins matching "${searchQuery}"`}
         </div>
       )}
     </div>
@@ -103,6 +104,7 @@ const mapStateToProps = (state) => ({
   getSkinData: Selectors.getSkinDataGetter(state),
   searchQuery: Selectors.getSearchQuery(state),
   loadingSearchQuery: Selectors.getLoadingSearchQuery(state),
+  searchResultsError: Selectors.getSearchResultsError(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({

packages/skin-museum-client/src/redux/actionCreators.js

@@ -35,6 +35,10 @@ export function gotNewMatchingSkins(skins) {
   return { type: "GOT_NEW_MATCHING_SKINS", skins };
 }
 
+export function gotSearchError() {
+  return { type: "GOT_SEARCH_ERROR" };
+}
+
 export function gotSkinData(hash, data) {
   return { type: "GOT_SKIN_DATA", hash, data };
 }

packages/skin-museum-client/src/redux/epics.js

@@ -157,6 +157,9 @@ const searchEpic = (actions) =>
             nsfw: hit.nsfw === true || hit.nsfw === 1,
           }));
           return Actions.gotNewMatchingSkins(matchingSkins);
+        }),
+        catchError((e) => {
+          return of(Actions.gotSearchError());
         })
       );
     })

packages/skin-museum-client/src/redux/reducer.js

@@ -3,6 +3,7 @@ import { CHUNK_SIZE, UPLOAD_PAGE } from "../constants";
 const defaultState = {
   searchQuery: null,
   loadingSearchResults: false,
+  searchResultsError: null,
   selectedSkinPosition: null,
   matchingSkins: null,
   defaultSkins: [],
@@ -216,11 +217,21 @@ export default function reducer(state = defaultState, action) {
       return {
         ...state,
         loadingSearchResults: true,
+        searchResultsError: null,
         searchQuery: action.query,
         selectedSkinHash: null,
         selectedSkinPosition: null,
         focusedSkinFile: null,
       };
+    case "GOT_SEARCH_ERROR": {
+      return {
+        ...state,
+        loadingSearchResults: false,
+        searchResultsError:
+          "Error: We likely exceeded our search quota. Please try again later.",
+        matchingSkins: [],
+      };
+    }
     case "GOT_NEW_MATCHING_SKINS":
       let newSkins = state.skins;
       if (action.skins != null) {
@@ -235,6 +246,7 @@ export default function reducer(state = defaultState, action) {
       return {
         ...state,
         loadingSearchResults: false,
+        searchResultsError: null,
         matchingSkins: action.skins,
         skins: newSkins,
       };

packages/skin-museum-client/src/redux/selectors.js

@@ -31,6 +31,10 @@ export function getLoadingSearchQuery(state) {
   return state.loadingSearchResults;
 }
 
+export function getSearchResultsError(state) {
+  return state.searchResultsError;
+}
+
 export function getMatchingSkins(state) {
   return state.matchingSkins;
 }