From ebb84f1f01396cf75e7fb70bb0e2987bbc0b14b2 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 10 Aug 2018 13:14:27 -0400
Subject: 30

---
 stepped-solutions/28/frontend/components/Nav.js    | 36 +++++++++
 stepped-solutions/28/frontend/components/Signin.js | 76 +++++++++++++++++++
 stepped-solutions/28/frontend/components/Signup.js | 86 ++++++++++++++++++++++
 stepped-solutions/28/frontend/components/User.js   | 27 +++++++
 4 files changed, 225 insertions(+)
 create mode 100755 stepped-solutions/28/frontend/components/Nav.js
 create mode 100755 stepped-solutions/28/frontend/components/Signin.js
 create mode 100755 stepped-solutions/28/frontend/components/Signup.js
 create mode 100755 stepped-solutions/28/frontend/components/User.js

(limited to 'stepped-solutions/28/frontend/components')

diff --git a/stepped-solutions/28/frontend/components/Nav.js b/stepped-solutions/28/frontend/components/Nav.js
new file mode 100755
index 0000000..28e94d3
--- /dev/null
+++ b/stepped-solutions/28/frontend/components/Nav.js
@@ -0,0 +1,36 @@
+import Link from 'next/link';
+import NavStyles from './styles/NavStyles';
+import User from './User';
+
+const Nav = () => (
+  <User>
+    {({ data: { me } }) => (
+      <NavStyles>
+        <Link href="/items">
+          <a>Shop</a>
+        </Link>
+        {me && (
+          <>
+            <Link href="/sell">
+              <a>Sell</a>
+            </Link>
+            <Link href="/orders">
+              <a>Orders</a>
+            </Link>
+            <Link href="/me">
+              <a>Account</a>
+            </Link>
+          </>
+        )}
+        {!me && (
+          <Link href="/signup">
+            <a>Sign In</a>
+          </Link>
+
+        )}
+      </NavStyles>
+    )}
+  </User>
+);
+
+export default Nav;
diff --git a/stepped-solutions/28/frontend/components/Signin.js b/stepped-solutions/28/frontend/components/Signin.js
new file mode 100755
index 0000000..4fd3013
--- /dev/null
+++ b/stepped-solutions/28/frontend/components/Signin.js
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import Form from './styles/Form';
+import Error from './ErrorMessage';
+import { CURRENT_USER_QUERY } from './User';
+
+const SIGNIN_MUTATION = gql`
+  mutation SIGNIN_MUTATION($email: String!, $password: String!) {
+    signin(email: $email, password: $password) {
+      id
+      email
+      name
+    }
+  }
+`;
+
+class Signin extends Component {
+  state = {
+    name: '',
+    password: '',
+    email: '',
+  };
+  saveToState = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+  render() {
+    return (
+      <Mutation
+        mutation={SIGNIN_MUTATION}
+        variables={this.state}
+        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+      >
+        {(signup, { error, loading }) => (
+          <Form
+            method="post"
+            onSubmit={async e => {
+              e.preventDefault();
+              await signup();
+              this.setState({ name: '', email: '', password: '' });
+            }}
+          >
+            <fieldset disabled={loading} aria-busy={loading}>
+              <h2>Sign into your account</h2>
+              <Error error={error} />
+              <label htmlFor="email">
+                Email
+                <input
+                  type="email"
+                  name="email"
+                  placeholder="email"
+                  value={this.state.email}
+                  onChange={this.saveToState}
+                />
+              </label>
+              <label htmlFor="password">
+                Password
+                <input
+                  type="password"
+                  name="password"
+                  placeholder="password"
+                  value={this.state.password}
+                  onChange={this.saveToState}
+                />
+              </label>
+
+              <button type="submit">Sign In!</button>
+            </fieldset>
+          </Form>
+        )}
+      </Mutation>
+    );
+  }
+}
+
+export default Signin;
diff --git a/stepped-solutions/28/frontend/components/Signup.js b/stepped-solutions/28/frontend/components/Signup.js
new file mode 100755
index 0000000..3e59a2b
--- /dev/null
+++ b/stepped-solutions/28/frontend/components/Signup.js
@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import Form from './styles/Form';
+import Error from './ErrorMessage';
+import { CURRENT_USER_QUERY } from './User';
+
+const SIGNUP_MUTATION = gql`
+  mutation SIGNUP_MUTATION($email: String!, $name: String!, $password: String!) {
+    signup(email: $email, name: $name, password: $password) {
+      id
+      email
+      name
+    }
+  }
+`;
+
+class Signup extends Component {
+  state = {
+    name: '',
+    password: '',
+    email: '',
+  };
+  saveToState = e => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+  render() {
+    return (
+      <Mutation
+        mutation={SIGNUP_MUTATION}
+        variables={this.state}
+        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+      >
+        {(signup, { error, loading }) => (
+          <Form
+            method="post"
+            onSubmit={async e => {
+              e.preventDefault();
+              await signup();
+              this.setState({ name: '', email: '', password: '' });
+            }}
+          >
+            <fieldset disabled={loading} aria-busy={loading}>
+              <h2>Sign Up for An Account</h2>
+              <Error error={error} />
+              <label htmlFor="email">
+                Email
+                <input
+                  type="email"
+                  name="email"
+                  placeholder="email"
+                  value={this.state.email}
+                  onChange={this.saveToState}
+                />
+              </label>
+              <label htmlFor="name">
+                Name
+                <input
+                  type="text"
+                  name="name"
+                  placeholder="name"
+                  value={this.state.name}
+                  onChange={this.saveToState}
+                />
+              </label>
+              <label htmlFor="password">
+                Password
+                <input
+                  type="password"
+                  name="password"
+                  placeholder="password"
+                  value={this.state.password}
+                  onChange={this.saveToState}
+                />
+              </label>
+
+              <button type="submit">Sign Up!</button>
+            </fieldset>
+          </Form>
+        )}
+      </Mutation>
+    );
+  }
+}
+
+export default Signup;
diff --git a/stepped-solutions/28/frontend/components/User.js b/stepped-solutions/28/frontend/components/User.js
new file mode 100755
index 0000000..af074c0
--- /dev/null
+++ b/stepped-solutions/28/frontend/components/User.js
@@ -0,0 +1,27 @@
+import { Query } from 'react-apollo';
+import gql from 'graphql-tag';
+import PropTypes from 'prop-types';
+
+const CURRENT_USER_QUERY = gql`
+  query {
+    me {
+      id
+      email
+      name
+      permissions
+    }
+  }
+`;
+
+const User = props => (
+  <Query {...props} query={CURRENT_USER_QUERY}>
+    {payload => console.log(payload) || props.children(payload)}
+  </Query>
+);
+
+User.PropTypes = {
+  children: PropTypes.func.isRequired,
+};
+
+export default User;
+export { CURRENT_USER_QUERY };
-- 
cgit v1.3