Completed demo

src/App.css

@@ -12,6 +12,10 @@
   font-size: 2em;
 }
 
-p {
+h4 {
   font-size: 2em;
 }
+
+p {
+  font-size: 1.5em;
+}

src/components/Workshop.js

@@ -1,9 +1,82 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { Query } from 'react-apollo';
+import gql from 'graphql-tag';
+
+import Loading from './shared/Loading';
+import Error from './shared/Error';
 
 // Let's build this out some more
 // Doesn't do too much at the moment
-const Workshop = () => (
-  <p>This is the best workshop ever!</p>
-);
+class Workshop extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      clicked: false,
+    }
+
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(event) {
+    if (this.state.clicked) return;
+
+    this.setState({
+      clicked: true,
+    });
+  }
+
+  render() {
+    const {
+      title,
+      author,
+      id,
+    } = this.props.workshop;
+
+    const {
+      clicked,
+    } = this.state;
+
+    return (
+      <div>
+        <h4>{title}</h4>
+        <p>{author}</p>
+        {
+          clicked ? (
+            <Query query={gql`
+              {
+                workshop(id: ${id}) {
+                  description
+                  url
+                }
+              }
+            `}>
+              {({ loading, error, data }) => {
+                if (loading) return (<Loading />);
+                if (error) return (<Error />);
+
+                const {
+                  description,
+                  url,
+                } = data.workshop;
+
+                return (
+                  <div>
+                    <p>{description}</p>
+                    <a href={url}>RSVP</a>
+                  </div>
+                )
+              }}
+            </Query>
+          ) : (
+            <div onClick={this.handleClick}>
+              Learn more
+            </div>
+          )
+        }
+      </div>
+    );
+  }
+}
 
 export default Workshop;

src/components/Workshops.js

@@ -3,19 +3,31 @@ import React from 'react';
 // This is a component we import to make queries with GraphQL
 import { Query } from 'react-apollo';
 
+import Workshop from './Workshop';
+import Loading from './shared/Loading';
+import Error from './shared/Error';
+
 // We use this to actually type and format our query
 import gql from 'graphql-tag';
 
 const Workshops = () => (
   <Query query={gql`
     {
-      hello
+      workshops {
+        title
+        author
+        id
+      }
     }
   `}>
     {({ loading, error, data }) => {
-      if (loading) return (<p>Loading... 😕</p>);
-      if (error) return (<p>There was an error 😩</p>);
-      return (<p>{data.hello} 🤠</p>)
+      if (loading) return (<Loading />);
+      if (error) return (<Error />);
+      return (
+        data.workshops.map(workshop => (
+          <Workshop workshop={workshop} key={workshop.id} />
+        ))
+      )
     }}
   </Query>
 );

src/components/shared/Error.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Error = () => (
+  <p>There was an error <span role="img" aria-label="anguish">😩</span></p>
+);
+
+export default Error;

src/components/shared/Loading.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Loading = () => (
+  <p>Loading... <span role="img" aria-label="confused">😕</span></p>
+);
+
+export default Loading;