From 9b755900a3245607108afc2775da31531220b743 Mon Sep 17 00:00:00 2001
From: ccabo1 <ccabo@seas.upenn.edu>
Date: Sat, 8 Sep 2018 16:10:39 -0400
Subject: [PATCH] more setup

---
 README.md                   | 11 ++++++++++-
 src/App.css                 | 12 ++++++------
 src/App.js                  | 11 ++++-------
 src/components/Workshop.js  |  2 ++
 src/components/Workshops.js | 14 ++++++++------
 5 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index e444f26..47e3c63 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,18 @@
 # React-GraphQL
 
-How to follow along:
+Hi there! Let's learn some more about React and GraphQL. If you want to follow along, do the following:
 
+0. Check out [this Apollo Launchpad](https://launchpad.graphql.com/0vp11m31k5). We will use this as our server to pull data.
 1. Clone this repository
 2. `yarn install` or `npm install`
 3. `yarn start` or `npm start`
 4. Go to `localhost:3000` in your browser
 5. Follow along or forge your own path :)
+
+--------------------
+
+### More about this repo
+
+* This is effectively `creat-react-app` with a little clean up, some styles, and some packages to make getting up and running with GraphQL easier.
+* All code regarding making queries and rendering stuff goes down in the `/components` folder.
+* All code regarding setting up the app goes down in `index.js` and `App.js`.
diff --git a/src/App.css b/src/App.css
index ba49c82..8ba363b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,17 +1,17 @@
-.App {
+.app {
   text-align: center;
 }
 
-.App-header {
+.header {
   background-color: #222;
   padding: 2rem 0rem;
   color: white;
 }
 
-.App-title {
-  font-size: 1.5em;
+.title {
+  font-size: 2em;
 }
 
-.App-intro {
-  font-size: 1.25em;
+p {
+  font-size: 2em;
 }
diff --git a/src/App.js b/src/App.js
index 79a5651..f00ce56 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import ApolloClient from 'apollo-boost';
 import { ApolloProvider } from 'react-apollo';
 
@@ -12,13 +12,10 @@ const client = new ApolloClient({
 
 const App = () => (
   <ApolloProvider client={client}>
-    <div className="App">
-      <header className="App-header">
-        <h1 className="App-title">Welcome to React with GraphQL</h1>
+    <div className="app">
+      <header className="header">
+        <h1 className="title">Welcome to React with GraphQL</h1>
       </header>
-      <p className="App-intro">
-        This should be fun!
-      </p>
       <Workshops />
     </div>
   </ApolloProvider>
diff --git a/src/components/Workshop.js b/src/components/Workshop.js
index ff3a186..8f6e2da 100644
--- a/src/components/Workshop.js
+++ b/src/components/Workshop.js
@@ -1,5 +1,7 @@
 import React from 'react';
 
+// 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>
 );
diff --git a/src/components/Workshops.js b/src/components/Workshops.js
index ae0ec73..811be4f 100644
--- a/src/components/Workshops.js
+++ b/src/components/Workshops.js
@@ -1,19 +1,21 @@
 import React from 'react';
+
+// This is a component we import to make queries with GraphQL
 import { Query } from 'react-apollo';
+
+// We use this to actually type and format our query
 import gql from 'graphql-tag';
 
 const Workshops = () => (
   <Query query={gql`
     {
-      workshops {
-        title
-      }
+      hello
     }
   `}>
     {({ loading, error, data }) => {
-      if (loading) return (<p>Loading...</p>);
-      if (error) return (<p>There was an error :(</p>);
-      return (<p>We have some data! 🧚‍🐄🍻</p>)
+      if (loading) return (<p>Loading... 😕</p>);
+      if (error) return (<p>There was an error 😩</p>);
+      return (<p>{data.hello} 🤠</p>)
     }}
   </Query>
 );