03-GraphQL Query with Apollo Client in React

Author: rwieruch

src/App/index.js

@@ -1,9 +1,11 @@
 import React, { Component } from 'react';
 
+import Profile from '../Profile';
+
 class App extends Component {
   render() {
-    return <div>Hello World</div>;
+    return <Profile />;
   }
 }
 
-export default App;
+export default App;

src/Link/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const Link = ({ children, ...props }) => (
+  <a {...props} target="_blank" rel="noopener noreferrer">
+    {children}
+  </a>
+);
+
+export default Link;

src/Loading/index.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+
+import './style.css';
+
+const TICK_RATE = 500;
+
+class Loading extends Component {
+  state = {
+    dots: 0,
+  };
+
+  componentDidMount() {
+    this.interval = setInterval(this.onTick, TICK_RATE);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  onTick = () => {
+    this.setState(prevState => ({ dots: (prevState.dots + 1) % 4 }));
+  };
+
+  render() {
+    const { isCenter } = this.props;
+    const { dots } = this.state;
+
+    const classNames = ['Loading'];
+
+    if (isCenter) {
+      classNames.push('Loading_center');
+    }
+
+    return (
+      <div className={classNames.join(' ')}>
+        <small>
+          Loading {new Array(dots).fill(0).map(dot => '.')}
+        </small>
+      </div>
+    );
+  }
+}
+
+export default Loading;

src/Profile/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import gql from 'graphql-tag';
+import { Query } from 'react-apollo';
+
+import RepositoryList from '../Repository';
+import Loading from '../Loading';
+
+const GET_REPOSITORIES_OF_CURRENT_USER = gql`
+  {
+    viewer {
+      repositories(
+        first: 5
+        orderBy: { direction: DESC, field: STARGAZERS }
+      ) {
+        edges {
+          node {
+            id
+            name
+            url
+            descriptionHTML
+            primaryLanguage {
+              name
+            }
+            owner {
+              login
+              url
+            }
+            stargazers {
+              totalCount
+            }
+            viewerHasStarred
+            watchers {
+              totalCount
+            }
+            viewerSubscription
+          }
+        }
+      }
+    }
+  }
+`;
+
+const Profile = () => (
+  <Query query={GET_REPOSITORIES_OF_CURRENT_USER}>
+    {({ data, loading }) => {
+      const { viewer } = data;
+
+      if (loading || !viewer) {
+        return <Loading />;
+      }
+
+      return <RepositoryList repositories={viewer.repositories} />;
+    }}
+  </Query>
+);
+
+export default Profile;

src/Repository/RepositoryItem/index.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import Link from '../../Link';
+
+import '../style.css';
+
+const RepositoryItem = ({
+  name,
+  url,
+  descriptionHTML,
+  primaryLanguage,
+  owner,
+  stargazers,
+  watchers,
+  viewerSubscription,
+  viewerHasStarred,
+}) => (
+  <div>
+    <div className="RepositoryItem-title">
+      <h2>
+        <Link href={url}>{name}</Link>
+      </h2>
+
+      <div className="RepositoryItem-title-action">
+        {stargazers.totalCount} Stars
+      </div>
+    </div>
+
+    <div className="RepositoryItem-description">
+      <div
+        className="RepositoryItem-description-info"
+        dangerouslySetInnerHTML={{ __html: descriptionHTML }}
+      />
+      <div className="RepositoryItem-description-details">
+        <div>
+          {primaryLanguage && (
+            <span>Language: {primaryLanguage.name}</span>
+          )}
+        </div>
+        <div>
+          {owner && (
+            <span>
+              Owner: <a href={owner.url}>{owner.login}</a>
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default RepositoryItem;

src/Repository/RepositoryList/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import RepositoryItem from '../RepositoryItem';
+
+import '../style.css';
+
+const RepositoryList = ({ repositories }) =>
+  repositories.edges.map(({ node }) => (
+    <div key={node.id} className="RepositoryItem">
+      <RepositoryItem {...node} />
+    </div>
+  ));
+
+export default RepositoryList;

src/Repository/index.js

@@ -0,0 +1,3 @@
+import RepositoryList from './RepositoryList';
+
+export default RepositoryList;