Merge pull request #1 from gauravchl/develop

Build out front-end UI to make the calls to the backend

package.json

@@ -3,14 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/react-hooks": "^3.1.2",
+    "apollo-boost": "^0.4.4",
     "apollo-server-lambda": "2.9.3",
     "encoding": "0.1.12",
-    "graphql": "14.5.4",
+    "graphql": "^14.5.4",
     "graphql-tag-pluck": "0.8.4",
     "merge-graphql-schemas": "1.7.0",
     "netlify-lambda": "1.6.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.1.1"
   },
   "scripts": {

src/App.css → src/components/home.css

@@ -1,29 +1,29 @@
-.App {
+.home {
   text-align: center;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+.home-logo {
+  width: 320px;
+  margin-top: 32px;
+  margin-bottom: 28px
 }
 
-.App-header {
+.home-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   font-size: calc(10px + 2vmin);
   color: white;
 }
 
-.App-link {
+.home-link {
   color: #61dafb;
 }
 
-@keyframes App-logo-spin {
+@keyframes home-logo-spin {
   from {
     transform: rotate(0deg);
   }

src/components/home.js

@@ -0,0 +1,28 @@
+import React from "react";
+import "./home.css";
+
+function Home(props) {
+  const { loading, error, data } = props;
+  return (
+    <div className="home">
+      <header className="home-header">
+        <img
+          src="https://codebuddies.org/images/logo.svg"
+          className="home-logo"
+          alt="logo"
+        />
+
+        {loading ? <div>Loading Data from backend</div> : null}
+        {error ? <div>Error loading data</div> : null}
+
+        {data && data.resources && data.resources.map((r, i) => (
+          <div key={i}>
+            {r.title} : {r.description}
+          </div>
+        ))}
+      </header>
+    </div>
+  );
+}
+
+export default Home;

src/config.js

@@ -0,0 +1,13 @@
+// env: local || development || production
+
+const local = {
+  graphUrl: 'http://localhost:8888/.netlify/functions/graphql',
+  env: 'local',
+};
+
+const config = {
+  graphUrl: process.env.REACT_APP_GRAPH_URL || local.graphUrl,
+  env: process.env.REACT_APP_ENV || local.env,
+};
+
+export default config;

src/containers/home.js

@@ -0,0 +1,12 @@
+import React from "react";
+import Home from "../components/home.js";
+import { useQuery } from "@apollo/react-hooks";
+import { RESOURCES } from "../queries/resources";
+
+function HomeContainer() {
+  const { loading, error, data } = useQuery(RESOURCES);
+
+  return <Home loading={loading} error={error} data={data} />;
+}
+
+export default HomeContainer;

src/index.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import Routes from './router';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<Routes />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/lambda/graphql.js

@@ -4,6 +4,5 @@ const setup = require('./initializers/setup');
 exports.handler = async (request, context) => {
   await setup.run();
   const response = await handleRequest(request, context);
-
   return response;
 };

src/lambda/lib/apollo.js

@@ -10,7 +10,12 @@ exports.initialize = () => {
   };
 
   const server = new ApolloServer(apolloServerConfig);
-  exports.handler = server.createHandler();
+  exports.handler = server.createHandler({
+    cors: {
+      origin: '*',
+      credentials: true
+    }
+  });
 };
 
 exports.handleRequest = (request, context) => {

src/queries/resources.js

@@ -0,0 +1,11 @@
+import { gql } from 'apollo-boost';
+
+
+export const RESOURCES = gql`
+  {
+    resources {
+      title
+      description
+    }
+  }
+`;

src/router.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import HomeContainer from "./containers/home";
+import ApolloClient from "apollo-boost";
+import { ApolloProvider } from "@apollo/react-hooks";
+import config from './config'
+
+const client = new ApolloClient({
+  uri: config.graphUrl
+});
+
+const Routes = () => {
+  return (
+    <div>
+      <ApolloProvider client={client}>
+        <Router>
+          <Switch>
+            <Route path="/">
+              <HomeContainer />
+            </Route>
+          </Switch>
+        </Router>
+      </ApolloProvider>
+    </div>
+  );
+};
+
+export default Routes;