2 files changed, 59 insertions, 0 deletions
diff --git a/stepped-solutions/27/frontend/components/Nav.js b/stepped-solutions/27/frontend/components/Nav.js
new file mode 100755
index 0000000..df6e47f
--- /dev/null
+++ b/stepped-solutions/27/frontend/components/Nav.js
@@ -0,0 +1,32 @@
+import Link from 'next/link';
+import NavStyles from './styles/NavStyles';
+import User from './User';
+
+const Nav = () => (
+  <NavStyles>
+    <User>
+      {({ data: { me } }) => {
+        console.log(me);
+        if (me) return <p>{me.name}</p>;
+        return null;
+      }}
+    </User>
+    <Link href="/items">
+      <a>Shop</a>
+    </Link>
+    <Link href="/sell">
+      <a>Sell</a>
+    </Link>
+    <Link href="/signup">
+      <a>Signup</a>
+    </Link>
+    <Link href="/orders">
+      <a>Orders</a>
+    </Link>
+    <Link href="/me">
+      <a>Account</a>
+    </Link>
+  </NavStyles>
+);
+
+export default Nav;
diff --git a/stepped-solutions/27/frontend/components/User.js b/stepped-solutions/27/frontend/components/User.js
new file mode 100755
index 0000000..addd79d
--- /dev/null
+++ b/stepped-solutions/27/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 => props.children(payload)}
+  </Query>
+);
+
+User.PropTypes = {
+  children: PropTypes.func.isRequired,
+};
+
+export default User;
+export { CURRENT_USER_QUERY };