Merge pull request #15 from jmeas/404

Add Not Found page for Gists

Author: jamesplease

package-lock.json

@@ -13,6 +13,7 @@
     "react-scripts": "1.0.10",
     "redux": "^3.7.1",
     "redux-resource": "^2.2.0",
+    "redux-resource-plugins": "^2.0.0",
     "redux-resource-xhr": "^2.0.0",
     "redux-thunk": "^2.2.0",
     "xhr": "^2.4.0"

package.json

@@ -9,7 +9,7 @@ import { readGist, updateGist, deleteGist } from '../state/gists/action-creators
 class Gist extends Component {
   render() {
     const {
-      readGistStatus, deleteGistStatus, updateGistStatus
+      readGistStatus, deleteGistStatus, updateGistStatus, gistNotFound
     } = this.props;
     const { description, files } = this.state;
 
@@ -25,7 +25,8 @@ class Gist extends Component {
     return (
       <div className="Gist">
         {readGistStatus.pending && ('Loading gist...')}
-        {readGistStatus.failed && ('There was an error while retrieving this gist')}
+        {readGistStatus.failed && !gistNotFound && ('There was an error while retrieving this gist')}
+        {readGistStatus.failed && gistNotFound && ('This gist could not be found.')}
         {readGistStatus.succeeded && (
           <form>
             <div>
@@ -213,6 +214,13 @@ function mapStateToProps(state, props) {
   // documentation:
   // https://redux-resource.js.org/docs/api-reference/get-status.html#tips
   const readGistStatus = getStatus(state, `gists.meta.${gistId}.readStatus`, true);
+  
+  // We're using the HTTP Status Code plugin to determine if the error is a 404. Typically,
+  // if you're using standard HTTP requests in your application, you'll want to include the
+  // HTTP Status Codes plugin. You can see how this is set up by referring to the gists
+  // reducer file. For more on the HTTP Status Codes plugin, see the docs at:
+  // https://redux-resource.js.org/docs/extras/http-status-codes-plugin.html
+  const gistNotFound = _.get(state, `gists.meta.${gistId}.readStatusCode`) === 404;
 
   // These requests are initiated by a user's action, so we do not pass `treatNullAsPending`
   // as `true`. Otherwise, the interface would always display a loading indicator to the user.
@@ -224,6 +232,7 @@ function mapStateToProps(state, props) {
     gists,
     gistId,
     gist,
+    gistNotFound,
     readGistStatus,
     deleteGistStatus,
     updateGistStatus

src/components/Gist.js

@@ -1,3 +1,15 @@
 import { resourceReducer } from 'redux-resource';
+import { httpStatusCodes } from 'redux-resource-plugins';
 
-export default resourceReducer('gists');
+export default resourceReducer('gists', {
+  plugins: [
+    // This plugin gives us access to the HTTP Status Codes from our requests. The primary
+    // use case for this is differentiating different failed requests. For instance,
+    // did the request fail because the user was unauthorized, or because the resource
+    // was not found? For more on the HTTP Status Codes plugin, see the documentation at:
+    // https://redux-resource.js.org/docs/extras/http-status-codes-plugin.html
+    // If you're using, say, gRPC, then you would want to write a similar plugin that
+    // handles the gRPC status codes.
+    httpStatusCodes
+  ]
+});