Remove placeholder "Gists2" file; remove old Gists list

Author: jamesplease

src/components/Gist2.js

@@ -1,79 +1,37 @@
 import React, { Component } from 'react';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { getResources, getStatus } from 'react-redux-resource';
 import './Gists.css';
-import { readManyUsersGists } from '../state/gists/action-creators';
+import { ReadUsersGists } from '../request-components/Gists';
 import login from '../personal-access-token';
 
 const username = login.username;
 
-class Gists extends Component {
-  render() {
-    const { usersGists, usersGistsStatus } = this.props;
-
-    return (
-      <div className="Gists">
-        {usersGistsStatus.pending && ('Loading gists...')}
-        {usersGistsStatus.failed && (
-          <span>
-            There was an error loading gists. <button onClick={this.fetchUsersGists}>Try again.</button>
-          </span>
-        )}
-        {usersGistsStatus.succeeded && (
-          <ul className="Gists-list">
-            {usersGists.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>
-    );
-  }
-
-  componentDidMount() {
-    this.fetchUsersGists();
-  }
-
-  componentWillUnmount() {
-    if (this.readManyUsersGistsXhr) {
-      this.readManyUsersGistsXhr.abort();
-    }
-  }
-
-  fetchUsersGists = () => {
-    const { readManyUsersGists } = this.props;
-
-    if (this.readManyUsersGistsXhr) {
-      this.readManyUsersGistsXhr.abort();
-    }
-
-    this.readManyUsersGistsXhr = readManyUsersGists(username);
-  }
+export default function Gists() {
+  return (
+    <ReadUsersGists username={username}>
+      {({ status, lists, 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">
+              {lists.usersGists.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>
+  );
 }
-
-function mapStateToProps(state) {
-  const usersGists = getResources(state.gists, 'usersGists');
-  const usersGistsStatus = getStatus(state, 'gists.requests.getUsersGists.status', true);
-
-  return {
-    usersGists,
-    usersGistsStatus
-  };
-}
-
-function mapDispatchToProps(dispatch) {
-  return bindActionCreators({
-    readManyUsersGists
-  }, dispatch);
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Gists);

src/components/Gists.js

@@ -5,22 +5,26 @@ import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import './index.css';
 import App from './components/App';
 import Gists from './components/Gists2';
-import Gist from './components/Gist2';
+import Gist from './components/Gist';
 import CreateGist from './components/CreateGist';
 import store from './state/store';
 
-ReactDOM.render((
+ReactDOM.render(
   <Provider store={store}>
     <BrowserRouter>
-      <Route path="/" render={({ location }) => (
-        <App location={location}>
-          <Switch>
-            <Route exact path="/" component={Gists}/>
-            <Route exact path="/new" component={CreateGist}/>
-            <Route exact path="/:gistId" component={Gist}/>
-          </Switch>
-        </App>
-      )}/>
+      <Route
+        path="/"
+        render={({ location }) => (
+          <App location={location}>
+            <Switch>
+              <Route exact path="/" component={Gists} />
+              <Route exact path="/new" component={CreateGist} />
+              <Route exact path="/:gistId" component={Gist} />
+            </Switch>
+          </App>
+        )}
+      />
     </BrowserRouter>
-  </Provider>
-), document.getElementById('root'));
+  </Provider>,
+  document.getElementById('root')
+);

src/components/Gists2.js

@@ -14,22 +14,8 @@ export function ReadUsersGists({ username, children }) {
     <ResourceRequest
       treatNullAsPending
       resourceName="gists"
-      request={request}
-      children={children}
-    />
-  );
-}
-
-export function ReadGist({ gistId, children }) {
-  const request = (
-    <Fetch url={`https://api.github.com/gists/${gistId}`} headers={headers} />
-  );
-
-  return (
-    <ResourceRequest
-      treatNullAsPending
-      transformData={gist => [gist]}
-      resourceName="gists"
+      list="usersGists"
+      mergeListIds={false}
       request={request}
       children={children}
     />