Merge pull request #1014 from rust-lang/plumb-gist-error

Plumb through errors when loading/saving gists fail

Author: shepmaster

ui/frontend/Output/Gist.tsx

@@ -13,14 +13,23 @@ import styles from './Gist.module.css';
 
 const Gist: React.FC = () => {
   const showLoader = useSelector(selectors.showGistLoaderSelector);
+  const error = useSelector((state: State) => state.output.gist.error);
 
-  return (
-    <div>
-      { showLoader ? <Loader /> : <Links />}
-    </div>
-  );
+  if (showLoader) {
+    return <Loader />;
+  }
+
+  if (error) {
+    return <Error error={error} />;
+  }
+
+  return <Links />;
 };
 
+const Error: React.FC<{error: string}> = ({ error }) => (
+  <Section kind="error" label="Errors">{error}</Section>
+);
+
 interface CopiedProps {
   children: React.ReactNode;
   href: string;

ui/frontend/reducers/output/gist.ts

@@ -1,4 +1,10 @@
-import { Draft, PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import {
+  Draft,
+  PayloadAction,
+  SerializedError,
+  createAsyncThunk,
+  createSlice,
+} from '@reduxjs/toolkit';
 import * as z from 'zod';
 
 import { jsonGet, jsonPost, routes } from '../../api';
@@ -22,6 +28,7 @@ interface State {
   channel?: Channel;
   mode?: Mode;
   edition?: Edition;
+  error?: string;
 }
 
 interface SuccessProps {
@@ -81,6 +88,7 @@ export const performGistSave = createAsyncThunk<SuccessProps, void, { state: Roo
 );
 
 const pending = (state: Draft<State>) => {
+  delete state.error;
   state.requestsInProgress += 1;
 };
 
@@ -89,6 +97,14 @@ const fulfilled = (state: Draft<State>, action: PayloadAction<SuccessProps>) =>
   Object.assign(state, action.payload);
 };
 
+const rejected = (
+  state: Draft<State>,
+  action: PayloadAction<unknown, string, unknown, SerializedError>,
+) => {
+  state.requestsInProgress -= 1;
+  state.error = action.error.message;
+};
+
 const slice = createSlice({
   name: sliceName,
   initialState,
@@ -97,8 +113,10 @@ const slice = createSlice({
     builder
       .addCase(performGistLoad.pending, pending)
       .addCase(performGistLoad.fulfilled, fulfilled)
+      .addCase(performGistLoad.rejected, rejected)
       .addCase(performGistSave.pending, pending)
-      .addCase(performGistSave.fulfilled, fulfilled);
+      .addCase(performGistSave.fulfilled, fulfilled)
+      .addCase(performGistSave.rejected, rejected);
   },
 });