Convert gists list to use resource request

Author: jamesplease

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "lodash": "^4.17.4",
     "react": "^16.0.0",
+    "react-composer": "^2.1.0",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.5",
     "react-redux-resource": "0.0.1",

src/components/App.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { Link } from 'react-router-dom';
 import './App.css';
 import login from '../personal-access-token';
-import { ReadGist } from '../request-components/Gist';
 
 const isLoggedIn = Boolean(login.username && login.token);
 
@@ -25,22 +24,7 @@ class App extends Component {
         {!isLoggedIn &&
           `Please provide a GitHub Personal Access Token to use this application.
           For more, refer to this project's documentation on GitHub.`}
-        {isLoggedIn && (
-          <ReadGist gistId="a6396779d28ed91eb1a55d54a5d228c9">
-            {stuff => {
-              console.log('the stuff', stuff);
-              const { status } = stuff;
-
-              return (
-                <div>
-                  {status.pending && <div>Loading...</div>}
-                  {status.error && <div>Here is an error</div>}
-                  {status.succeeded && <div>Got it!</div>}
-                </div>
-              );
-            }}
-          </ReadGist>
-        )}
+        {isLoggedIn && children}
       </div>
     );
   }

src/components/Gist2.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { ReadGist } from '../request-components/Gists';
+
+export default class Gist extends Component {
+  render() {
+    const {gistId} = this.props.match.params;
+
+    return (<ReadGist gistId={gistId}>
+      {stuff => {
+        const { status, doFetch } = stuff;
+        const { description, files } = this.state;
+
+        return (
+          <div>
+            {status.pending && ('Loading gist...')}
+            {status.failed && (
+              <span>
+                There was an error while retrieving this gist. <button onClick={() => doFetch()}>Try again.</button>
+              </span>
+            )}
+            {status.succeeded && (
+              <form>
+              <div>
+                <div className="Gist-description">
+                  <div className="Gist-descriptionLabel">
+                    Description:
+                  </div>
+                  <input
+                    id="gist-description"
+                    type="text"
+                    className="gist_descriptionInput"
+                    value={description}
+                    placeholder="Gist description..."
+                    onChange={this.onDescriptionChange}/>
+                </div>
+                <div>
+                  {_.map(files, (file, originalFilename) => {
+                    return (
+                      <div className="Gist-file" key={originalFilename}>
+                        <input
+                          type="text"
+                          className="gist_fileNameInput"
+                          value={file.filename}
+                          onChange={(event) => this.onFileNameChange(originalFilename, event)}/>
+                        <textarea
+                          className="Gist-textarea"
+                          value={file.content}
+                          onChange={(event) => this.onFileContentsChange(originalFilename, event)}/>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </form>
+            )}
+          </div>
+        );
+      }}
+    </ReadGist>);
+  }
+
+  constructor(props) {
+    super(props);
+
+    const gist = this.props.gist || {};
+    const {
+      description = '',
+      files = []
+    } = gist;
+
+    this.state = {
+      description,
+      files
+    };
+  }
+}

src/components/Gists2.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import './Gists.css';
+import { ReadUsersGists } from '../request-components/Gists';
+import login from '../personal-access-token';
+
+const username = login.username;
+
+export default function Gists() {
+  return (
+    <ReadUsersGists username={username}>
+      {({ status, resources, doFetch }) => (
+        <div>
+          {status.pending && ('Loading gists...')}
+          {status.failed && (
+            <span>
+              There was an error loading gists. <button onClick={() => doFetch()}>Try again.</button>
+            </span>
+          )}
+          {status.succeeded && (
+            <ul className="Gists-list">
+              {resources.map(gist => (
+                <li key={gist.id} className="Gists-listItem">
+                  {username}&nbsp;/&nbsp;
+                  <Link to={`/${gist.id}`}>
+                    {Object.keys(gist.files)[0]}
+                  </Link>
+                  &nbsp;
+                  {!gist.public && '🔒'}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </ReadUsersGists>
+  );
+}

src/index.js

@@ -4,8 +4,8 @@ import { Provider } from 'react-redux';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import './index.css';
 import App from './components/App';
-import Gists from './components/Gists';
-import Gist from './components/Gist';
+import Gists from './components/Gists2';
+import Gist from './components/Gist2';
 import CreateGist from './components/CreateGist';
 import store from './state/store';
 

src/request-components/Gist.js src/request-components/Gists.jssrc/request-components/Gist.js renamed to src/request-components/Gists.js

@@ -2,8 +2,23 @@ import React from 'react';
 import { ResourceRequest, Fetch } from 'react-redux-resource';
 import headers from '../utils/headers';
 
+export function ReadUsersGists({ username, children }) {
+  const request = (
+    <Fetch url={`https://api.github.com/users/${username}/gists`} headers={headers} />
+  );
+
+  return (
+    <ResourceRequest
+      treatNullAsPending
+      resourceName="gists"
+      request={request}
+      children={children}
+    />
+  );
+}
+
 export function ReadGist({ gistId, children }) {
-  const ReadGistRequest = (
+  const request = (
     <Fetch url={`https://api.github.com/gists/${gistId}`} headers={headers} />
   );
 
@@ -12,7 +27,7 @@ export function ReadGist({ gistId, children }) {
       treatNullAsPending
       transformData={gist => [gist]}
       resourceName="gists"
-      request={ReadGistRequest}
+      request={request}
       children={children}
     />
   );