Added CRNA Frontend

client/package.json

@@ -3,7 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "apollo-boost": "^0.1.6",
+    "graphql": "^0.13.2",
+    "graphql-tag": "^2.9.2",
     "react": "^16.3.2",
+    "react-apollo": "^2.1.4",
     "react-dom": "^16.3.2",
     "react-scripts": "1.1.4"
   },
@@ -13,4 +17,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
+}

client/src/App.js

@@ -1,14 +1,21 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from "react";
+import { compose, graphql } from "react-apollo";
+
+import { GET_TWEETS } from "./graphql/queries";
+import logo from "./logo.svg";
+import "./App.css";
 
 class App extends Component {
   render() {
+    console.log(this.props);
+    const { loading, data: { getTweets } } = this.props;
+    console.log(getTweets);
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <h1 className="App-title">Welcome to React</h1>
+          <h2>hey there!</h2>
         </header>
         <p className="App-intro">
           To get started, edit <code>src/App.js</code> and save to reload.
@@ -18,4 +25,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default compose(graphql(GET_TWEETS))(App);

client/src/graphql/queries.js

@@ -0,0 +1,11 @@
+import { gql } from "apollo-boost";
+
+export const GET_TWEETS = gql`
+  {
+    getTweets {
+      text
+      _id
+      createdAt
+    }
+  }
+`;

client/src/index.js

@@ -1,8 +1,20 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import ApolloClient from "apollo-boost";
+import { ApolloProvider } from "react-apollo";
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import "./index.css";
+import App from "./App";
+import registerServiceWorker from "./registerServiceWorker";
+
+const client = new ApolloClient({
+  uri: "http://localhost:5000/graphql"
+});
+
+ReactDOM.render(
+  <ApolloProvider client={client}>
+    <App />
+  </ApolloProvider>,
+  document.getElementById("root")
+);
 registerServiceWorker();

package.json

@@ -1,21 +1,20 @@
 {
   "private": true,
-  "main": "./src/server.js",
+  "main": "./src/index.js",
   "scripts": {
-    "start": "babel-node ./src/server.js",
+    "start": "babel-node ./src/index.js",
     "client": "npm run start --prefix client",
-    "server":
-      "cross-env NODE_ENV=dev nodemon --exec babel-node ./src/server.js",
+    "server": "cross-env NODE_ENV=dev nodemon --exec babel-node ./src/index.js",
     "dev": "concurrently \"npm run server\" \"npm run client\"",
-    "prettier":
-      "prettier --single-quote --print-width 80 --trailing-comma all --write 'src/**/*.js'"
+    "prettier": "prettier --single-quote --print-width 80 --trailing-comma all --write 'src/**/*.js'"
   },
   "dependencies": {
     "apollo-engine": "^1.0.1",
     "apollo-server-express": "1.3.2",
     "bcrypt-nodejs": "0.0.3",
     "body-parser": "^1.17.1",
     "concurrently": "^3.5.1",
+    "cors": "^2.8.4",
     "cross-env": "^5.1.4",
     "dotenv": "^5.0.1",
     "express": "^4.15.2",

src/graphql/resolvers/index.js

@@ -18,10 +18,11 @@ const resolveFilms = person => {
 export const resolvers = {
   Date: GraphQLDate,
   Query: {
-    getTweets: async (root, args, { user }) => {
+    getTweets: async (root, args, { user, secrets }) => {
       try {
-        await requireAuth(user);
         // console.log("USER", user);
+        // console.log("secrets", secrets);
+        // await requireAuth(user);
         const tweets = Tweet.find({}).sort({ createdAt: -1 });
         return tweets;
       } catch (error) {

src/server.js → src/index.js

@@ -3,6 +3,7 @@ import { graphqlExpress, graphiqlExpress } from "apollo-server-express";
 import bodyParser from "body-parser";
 import { ApolloEngine } from "apollo-engine";
 import { makeExecutableSchema } from "graphql-tools";
+import cors from "cors";
 
 import "./config/db";
 import constants from "../src/config/constants";
@@ -12,6 +13,7 @@ import middlewares from "../src/config/middlewares";
 
 const app = express();
 
+app.use(cors());
 middlewares(app);
 
 require("dotenv").config();
@@ -53,7 +55,7 @@ app.post(
 const gql = String.raw;
 
 // Using Route Handlers
-app.get("/thank", (req, res) => {
+app.get("/thanks", (req, res) => {
   res.send({ greeting: "Hey friend!" });
 });
 
@@ -110,7 +112,7 @@ const engine = new ApolloEngine({
   }
 });
 
-// Start the app
+// // Start the app
 engine.listen(
   {
     port: constants.PORT,