login

components/App.js

@@ -1,56 +1,29 @@
-import { QueryRenderer, graphql } from 'react-relay';
-import {
-  Environment,
-  Network,
-  RecordSource,
-  Store,
-  RecordSourceInspector,
-} from 'relay-runtime';
-import LocationsList from './LocationsList';
-
-async function fetchQuery(operation, variables) {
-  const response = await fetch(
-    'https://mh67geuwe5.execute-api.eu-west-1.amazonaws.com/dev/',
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        query: operation.text,
-        variables,
-      }),
-    },
-  );
-
-  return response.json();
-}
-
-const source = new RecordSource();
-const inspector = new RecordSourceInspector(source);
-const modernEnvironment = new Environment({
-  network: Network.create(fetchQuery),
-  store: new Store(source),
-});
+import { QueryRenderer, graphql } from "react-relay";
+import environment from "./Environment";
+import LocationsList from "./LocationsList";
+import Login from "./Login";
 
 export default () =>
-  <QueryRenderer
-    environment={modernEnvironment}
-    query={graphql`
-      query AppQuery {
-        ...LocationsList
-      }
-    `}
-    variables={{}}
-    render={({ error, props }) => {
-      if (props) {
-        return (
-          <div>
-            <LocationsList data={props} />
-          </div>
-        );
-      } else {
-        return <div>Loading</div>;
-      }
-    }}
-  />;
+  <div>
+    <QueryRenderer
+      environment={environment}
+      query={graphql`
+        query AppQuery {
+          ...LocationsList
+        }
+      `}
+      variables={{}}
+      render={({ error, props }) => {
+        if (props) {
+          return (
+            <div>
+              <LocationsList data={props} />
+            </div>
+          );
+        } else {
+          return <div>Loading</div>;
+        }
+      }}
+    />
+    <Login />
+  </div>;

components/Environment.js

@@ -0,0 +1,42 @@
+import {
+  Environment,
+  Network,
+  RecordSource,
+  Store,
+  RecordSourceInspector
+} from "relay-runtime";
+
+import Location from "./Location";
+import Login from "./Login";
+
+async function fetchQuery(operation, variables) {
+  const token = localStorage ? localStorage.getItem("token") : "";
+
+  const response = await fetch(
+    "https://mh67geuwe5.execute-api.eu-west-1.amazonaws.com/dev/",
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: token
+      },
+      body: JSON.stringify({
+        query: operation.text,
+        variables
+      })
+    }
+  );
+
+  return response.json();
+}
+
+const source = new RecordSource();
+
+export const inspector = new RecordSourceInspector(source);
+
+const environment = new Environment({
+  network: Network.create(fetchQuery),
+  store: new Store(source)
+});
+
+export default environment;

components/Location.js

@@ -1,5 +1,5 @@
-import { createFragmentContainer, graphql } from 'react-relay';
-import City from './City';
+import { createFragmentContainer, graphql } from "react-relay";
+import City from "./City";
 
 const Location = ({ data }) => {
   return (
@@ -20,5 +20,5 @@ export default createFragmentContainer(
         ...City
       }
     }
-  `,
+  `
 );

components/LocationsList.js

@@ -1,13 +1,13 @@
-import { createFragmentContainer, graphql } from 'react-relay';
-import Location from './Location';
+import { createFragmentContainer, queryRenderer, graphql } from "react-relay";
+import Location from "./Location";
 
 const LocationsList = ({ data }) => {
   return (
     <div>
       Loaded: {data.allLocations.edges.length}
       <ol>
         {data.allLocations.edges.map(({ node, cursor }) =>
-          <Location data={node} key={cursor} />,
+          <Location data={node} key={cursor} />
         )}
       </ol>
     </div>
@@ -27,5 +27,5 @@ export default createFragmentContainer(
         }
       }
     }
-  `,
+  `
 );

components/Login.js

@@ -0,0 +1,29 @@
+import React, { Component } from "react";
+import environment from "./Environment";
+import { QueryRenderer, graphql } from "react-relay";
+import UserInfo from "./UserInfo";
+import LoginButton from "./LoginButton";
+
+export default () =>
+  <QueryRenderer
+    environment={environment}
+    query={graphql`
+      query LoginQuery {
+        currentUser {
+          ...UserInfo_user
+        }
+      }
+    `}
+    render={({ error, props }) => {
+      if (error) {
+        return (
+          <div>
+            {error.message}
+          </div>
+        );
+      } else if (props && props.currentUser) {
+        return <UserInfo user={props.currentUser} />;
+      }
+      return <LoginButton />;
+    }}
+  />;

components/LoginButton.js

@@ -0,0 +1,14 @@
+import React, { Component } from "react";
+import LoginMutation from "./mutations/LoginMutation";
+import environment from "./Environment";
+
+class LoginButton extends Component {
+  handleLogin = () => {
+    LoginMutation.commit(environment, "[email protected]", "bflmpsvz");
+  };
+  render() {
+    return <button onClick={this.handleLogin}>Login</button>;
+  }
+}
+
+export default LoginButton;

components/UserInfo.js

@@ -0,0 +1,23 @@
+import React, { Component } from "react";
+import { createFragmentContainer, graphql } from "react-relay";
+
+class UserInfo extends Component {
+  render() {
+    return (
+      <div>
+        Logged in as: {this.props.user.lastName}
+      </div>
+    );
+  }
+}
+
+export default createFragmentContainer(
+  UserInfo,
+  graphql`
+    fragment UserInfo_user on Identity {
+      id
+      email
+      lastName
+    }
+  `
+);