30

21 files changed, 915 insertions, 1 deletions

diff --git a/finished-application/backend/src/resolvers/Mutation.js b/finished-application/backend/src/resolvers/Mutation.js
index 80ff3f2..2027494 100644
--- a/finished-application/backend/src/resolvers/Mutation.js
+++ b/finished-application/backend/src/resolvers/Mutation.js
@@ -140,6 +140,7 @@ const mutations = {
           .FRONTEND_URL}/reset?resetToken=${resetToken}">Click Here to reset</a>`
       ),
     });
+
     return res.updateUser;
   },
 
diff --git a/finished-application/frontend/components/Nav.js b/finished-application/frontend/components/Nav.js
index b483376..5f3495a 100644
--- a/finished-application/frontend/components/Nav.js
+++ b/finished-application/frontend/components/Nav.js
@@ -12,7 +12,7 @@ class Nav extends React.Component {
     // below we set the fetchPolicy to network only so it forces re-fetch on the server
     return (
       <User>
-        {({ data: { me }, error }) => (
+        {({ data: { me } }) => (
           <NavStyles data-test="nav">
             <Link href="/items">
               <a>Shop</a>
diff --git a/stepped-solutions/27/backend/src/index.js b/stepped-solutions/27/backend/src/index.js
new file mode 100755
index 0000000..d95ec58
--- /dev/null
+++ b/stepped-solutions/27/backend/src/index.js
@@ -0,0 +1,33 @@
+const cookieParser = require('cookie-parser');
+const jwt = require('jsonwebtoken');
+
+require('dotenv').config({ path: 'variables.env' });
+const createServer = require('./createServer');
+const db = require('./db');
+
+const server = createServer();
+
+server.express.use(cookieParser());
+
+// decode the JWT so we can get the user Id on each request
+server.express.use((req, res, next) => {
+  const { token } = req.cookies;
+  if (token) {
+    const { userId } = jwt.verify(token, process.env.APP_SECRET);
+    // put the userId onto the req for future requests to access
+    req.userId = userId;
+  }
+  next();
+});
+
+server.start(
+  {
+    cors: {
+      credentials: true,
+      origin: process.env.FRONTEND_URL,
+    },
+  },
+  deets => {
+    console.log(`Server is now running on port http://localhost:${deets.port}`);
+  }
+);
diff --git a/stepped-solutions/27/backend/src/resolvers/Query.js b/stepped-solutions/27/backend/src/resolvers/Query.js
new file mode 100755
index 0000000..8055122
--- /dev/null
+++ b/stepped-solutions/27/backend/src/resolvers/Query.js
@@ -0,0 +1,21 @@
+const { forwardTo } = require('prisma-binding');
+
+const Query = {
+  items: forwardTo('db'),
+  item: forwardTo('db'),
+  itemsConnection: forwardTo('db'),
+  me(parent, args, ctx, info) {
+    // check if there is a current user ID
+    if (!ctx.request.userId) {
+      return null;
+    }
+    return ctx.db.query.user(
+      {
+        where: { id: ctx.request.userId },
+      },
+      info
+    );
+  },
+};
+
+module.exports = Query;
diff --git a/stepped-solutions/27/backend/src/schema.graphql b/stepped-solutions/27/backend/src/schema.graphql
new file mode 100755
index 0000000..f2cc283
--- /dev/null
+++ b/stepped-solutions/27/backend/src/schema.graphql
@@ -0,0 +1,15 @@
+# import * from './generated/prisma.graphql'
+
+type Mutation {
+  createItem(title: String, description: String, price: Int, image: String, largeImage: String): Item!
+  updateItem(id: ID!, title: String, description: String, price: Int): Item!
+  deleteItem(id: ID!): Item
+  signup(email: String!, password: String!, name: String!): User!
+}
+
+type Query {
+  items(where: ItemWhereInput, orderBy: ItemOrderByInput, skip: Int, first: Int): [Item]!
+  item(where: ItemWhereUniqueInput!): Item
+  itemsConnection(where: ItemWhereInput): ItemConnection!
+  me: User
+}
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 };
diff --git a/stepped-solutions/28/backend/src/resolvers/Mutation.js b/stepped-solutions/28/backend/src/resolvers/Mutation.js
new file mode 100755
index 0000000..7bcbb9c
--- /dev/null
+++ b/stepped-solutions/28/backend/src/resolvers/Mutation.js
@@ -0,0 +1,95 @@
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+
+const Mutations = {
+  async createItem(parent, args, ctx, info) {
+    // TODO: Check if they are logged in
+
+    const item = await ctx.db.mutation.createItem(
+      {
+        data: {
+          ...args,
+        },
+      },
+      info
+    );
+
+    console.log(item);
+
+    return item;
+  },
+  updateItem(parent, args, ctx, info) {
+    // first take a copy of the updates
+    const updates = { ...args };
+    // remove the ID from the updates
+    delete updates.id;
+    // run the update method
+    return ctx.db.mutation.updateItem(
+      {
+        data: updates,
+        where: {
+          id: args.id,
+        },
+      },
+      info
+    );
+  },
+  async deleteItem(parent, args, ctx, info) {
+    const where = { id: args.id };
+    // 1. find the item
+    const item = await ctx.db.query.item({ where }, `{ id title}`);
+    // 2. Check if they own that item, or have the permissions
+    // TODO
+    // 3. Delete it!
+    return ctx.db.mutation.deleteItem({ where }, info);
+  },
+  async signup(parent, args, ctx, info) {
+    // lowercase their email
+    args.email = args.email.toLowerCase();
+    // hash their password
+    const password = await bcrypt.hash(args.password, 10);
+    // create the user in the database
+    const user = await ctx.db.mutation.createUser(
+      {
+        data: {
+          ...args,
+          password,
+          permissions: { set: ['USER'] },
+        },
+      },
+      info
+    );
+    // create the JWT token for them
+    const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET);
+    // We set the jwt as a cookie on the response
+    ctx.response.cookie('token', token, {
+      httpOnly: true,
+      maxAge: 1000 * 60 * 60 * 24 * 365, // 1 year cookie
+    });
+    // Finalllllly we return the user to the browser
+    return user;
+  },
+  async signin(parent, { email, password }, ctx, info) {
+    // 1. check if there is a user with that email
+    const user = await ctx.db.query.user({ where: { email } });
+    if (!user) {
+      throw new Error(`No such user found for email ${email}`);
+    }
+    // 2. Check if their password is correct
+    const valid = await bcrypt.compare(password, user.password);
+    if (!valid) {
+      throw new Error('Invalid Password!');
+    }
+    // 3. generate the JWT Token
+    const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET);
+    // 4. Set the cookie with the token
+    ctx.response.cookie('token', token, {
+      httpOnly: true,
+      maxAge: 1000 * 60 * 60 * 24 * 365,
+    });
+    // 5. Return the user
+    return user;
+  },
+};
+
+module.exports = Mutations;
diff --git a/stepped-solutions/28/backend/src/schema.graphql b/stepped-solutions/28/backend/src/schema.graphql
new file mode 100755
index 0000000..a8ad765
--- /dev/null
+++ b/stepped-solutions/28/backend/src/schema.graphql
@@ -0,0 +1,17 @@
+# import * from './generated/prisma.graphql'
+
+type Mutation {
+  createItem(title: String, description: String, price: Int, image: String, largeImage: String): Item!
+  updateItem(id: ID!, title: String, description: String, price: Int): Item!
+  deleteItem(id: ID!): Item
+  signup(email: String!, password: String!, name: String!): User!
+  signin(email: String!, password: String!): User!
+}
+
+type Query {
+  items(where: ItemWhereInput, orderBy: ItemOrderByInput, skip: Int, first: Int): [Item]!
+  item(where: ItemWhereUniqueInput!): Item
+  itemsConnection(where: ItemWhereInput): ItemConnection!
+  me: User
+
+}
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 };
diff --git a/stepped-solutions/28/frontend/pages/signup.js b/stepped-solutions/28/frontend/pages/signup.js
new file mode 100755
index 0000000..28ed2f4
--- /dev/null
+++ b/stepped-solutions/28/frontend/pages/signup.js
@@ -0,0 +1,18 @@
+import Signup from '../components/Signup';
+import Signin from '../components/Signin';
+import styled from 'styled-components';
+
+const Columns = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 20px;
+`;
+
+const SignupPage = props => (
+  <Columns>
+    <Signup />
+    <Signin />
+  </Columns>
+);
+
+export default SignupPage;
diff --git a/stepped-solutions/29/backend/src/resolvers/Mutation.js b/stepped-solutions/29/backend/src/resolvers/Mutation.js
new file mode 100755
index 0000000..6c34b8c
--- /dev/null
+++ b/stepped-solutions/29/backend/src/resolvers/Mutation.js
@@ -0,0 +1,99 @@
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+
+const Mutations = {
+  async createItem(parent, args, ctx, info) {
+    // TODO: Check if they are logged in
+
+    const item = await ctx.db.mutation.createItem(
+      {
+        data: {
+          ...args,
+        },
+      },
+      info
+    );
+
+    console.log(item);
+
+    return item;
+  },
+  updateItem(parent, args, ctx, info) {
+    // first take a copy of the updates
+    const updates = { ...args };
+    // remove the ID from the updates
+    delete updates.id;
+    // run the update method
+    return ctx.db.mutation.updateItem(
+      {
+        data: updates,
+        where: {
+          id: args.id,
+        },
+      },
+      info
+    );
+  },
+  async deleteItem(parent, args, ctx, info) {
+    const where = { id: args.id };
+    // 1. find the item
+    const item = await ctx.db.query.item({ where }, `{ id title}`);
+    // 2. Check if they own that item, or have the permissions
+    // TODO
+    // 3. Delete it!
+    return ctx.db.mutation.deleteItem({ where }, info);
+  },
+  async signup(parent, args, ctx, info) {
+    // lowercase their email
+    args.email = args.email.toLowerCase();
+    // hash their password
+    const password = await bcrypt.hash(args.password, 10);
+    // create the user in the database
+    const user = await ctx.db.mutation.createUser(
+      {
+        data: {
+          ...args,
+          password,
+          permissions: { set: ['USER'] },
+        },
+      },
+      info
+    );
+    // create the JWT token for them
+    const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET);
+    // We set the jwt as a cookie on the response
+    ctx.response.cookie('token', token, {
+      httpOnly: true,
+      maxAge: 1000 * 60 * 60 * 24 * 365, // 1 year cookie
+    });
+    // Finalllllly we return the user to the browser
+    return user;
+  },
+  async signin(parent, { email, password }, ctx, info) {
+    // 1. check if there is a user with that email
+    const user = await ctx.db.query.user({ where: { email } });
+    if (!user) {
+      throw new Error(`No such user found for email ${email}`);
+    }
+    // 2. Check if their password is correct
+    const valid = await bcrypt.compare(password, user.password);
+    if (!valid) {
+      throw new Error('Invalid Password!');
+    }
+    // 3. generate the JWT Token
+    const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET);
+    // 4. Set the cookie with the token
+    ctx.response.cookie('token', token, {
+      httpOnly: true,
+      maxAge: 1000 * 60 * 60 * 24 * 365,
+    });
+    // 5. Return the user
+    return user;
+  },
+  signout(parent, args, ctx, info) {
+    ctx.response.clearCookie('token');
+    return { message: 'Goodbye!' };
+  },
+};
+
+module.exports = Mutations;
diff --git a/stepped-solutions/29/backend/src/schema.graphql b/stepped-solutions/29/backend/src/schema.graphql
new file mode 100755
index 0000000..40916a1
--- /dev/null
+++ b/stepped-solutions/29/backend/src/schema.graphql
@@ -0,0 +1,22 @@
+# import * from './generated/prisma.graphql'
+
+type SuccessMessage {
+  message: String
+}
+
+type Mutation {
+  createItem(title: String, description: String, price: Int, image: String, largeImage: String): Item!
+  updateItem(id: ID!, title: String, description: String, price: Int): Item!
+  deleteItem(id: ID!): Item
+  signup(email: String!, password: String!, name: String!): User!
+  signin(email: String!, password: String!): User!
+  signout: SuccessMessage
+}
+
+type Query {
+  items(where: ItemWhereInput, orderBy: ItemOrderByInput, skip: Int, first: Int): [Item]!
+  item(where: ItemWhereUniqueInput!): Item
+  itemsConnection(where: ItemWhereInput): ItemConnection!
+  me: User
+
+}
diff --git a/stepped-solutions/29/frontend/components/Nav.js b/stepped-solutions/29/frontend/components/Nav.js
new file mode 100755
index 0000000..12abde5
--- /dev/null
+++ b/stepped-solutions/29/frontend/components/Nav.js
@@ -0,0 +1,38 @@
+import Link from 'next/link';
+import NavStyles from './styles/NavStyles';
+import User from './User';
+import Signout from './Signout';
+
+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>
+            <Signout />
+          </>
+        )}
+        {!me && (
+          <Link href="/signup">
+            <a>Sign In</a>
+          </Link>
+
+        )}
+      </NavStyles>
+    )}
+  </User>
+);
+
+export default Nav;
diff --git a/stepped-solutions/29/frontend/components/Signout.js b/stepped-solutions/29/frontend/components/Signout.js
new file mode 100755
index 0000000..f852531
--- /dev/null
+++ b/stepped-solutions/29/frontend/components/Signout.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
+
+const SIGN_OUT_MUTATION = gql`
+  mutation SIGN_OUT_MUTATION {
+    signout {
+      message
+    }
+  }
+`;
+
+const Signout = props => (
+  <Mutation mutation={SIGN_OUT_MUTATION} refetchQueries={[{ query: CURRENT_USER_QUERY }]}>
+    {signout => <button onClick={signout}>Sign Out</button>}
+  </Mutation>
+);
+export default Signout;
diff --git a/stepped-solutions/29/frontend/components/styles/NavStyles.js b/stepped-solutions/29/frontend/components/styles/NavStyles.js
new file mode 100755
index 0000000..fe4abda
--- /dev/null
+++ b/stepped-solutions/29/frontend/components/styles/NavStyles.js
@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+
+const NavStyles = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-self: end;
+  font-size: 2rem;
+  a,
+  button {
+    padding: 1rem 3rem;
+    display: flex;
+    align-items: center;
+    position: relative;
+    text-transform: uppercase;
+    font-weight: 900;
+    font-size: 1em;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    color: ${props => props.theme.black};
+    font-weight: 800;
+    @media (max-width: 700px) {
+      font-size: 10px;
+      padding: 0 10px;
+    }
+    &:before {
+      content: '';
+      width: 2px;
+      background: ${props => props.theme.lightgrey};
+      height: 100%;
+      left: 0;
+      position: absolute;
+      transform: skew(-20deg);
+      top: 0;
+      bottom: 0;
+    }
+    &:after {
+      height: 2px;
+      background: red;
+      content: '';
+      width: 0;
+      position: absolute;
+      transform: translateX(-50%);
+      transition: width 0.4s;
+      transition-timing-function: cubic-bezier(1, -0.65, 0, 2.31);
+      left: 50%;
+      margin-top: 2rem;
+    }
+    &:hover,
+    &:focus {
+      outline: none;
+      &:after {
+        width: calc(100% - 60px);
+      }
+    }
+  }
+  @media (max-width: 1300px) {
+    border-top: 1px solid ${props => props.theme.lightgrey};
+    width: 100%;
+    justify-content: center;
+    font-size: 1.5rem;
+  }
+`;
+
+export default NavStyles;
diff --git a/stepped-solutions/30/src/resolvers/Mutation.js b/stepped-solutions/30/src/resolvers/Mutation.js
new file mode 100755
index 0000000..7f43b1a
--- /dev/null
+++ b/stepped-solutions/30/src/resolvers/Mutation.js
@@ -0,0 +1,156 @@
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+const { randomBytes } = require('crypto');
+const { promisify } = require('util');
+
+const Mutations = {
+  async createItem(parent, args, ctx, info) {
+    // TODO: Check if they are logged in
+
+    const item = await ctx.db.mutation.createItem(
+      {
+        data: {
+          ...args,
+        },
+      },
+      info
+    );
+
+    console.log(item);
+
+    return item;
+  },
+  updateItem(parent, args, ctx, info) {
+    // first take a copy of the updates
+    const updates = { ...args };
+    // remove the ID from the updates
+    delete updates.id;
+    // run the update method
+    return ctx.db.mutation.updateItem(
+      {
+        data: updates,
+        where: {
+          id: args.id,
+        },
+      },
+      info
+    );
+  },
+  async deleteItem(parent, args, ctx, info) {
+    const where = { id: args.id };
+    // 1. find the item
+    const item = await ctx.db.query.item({ where }, `{ id title}`);
+    // 2. Check if they own that item, or have the permissions
+    // TODO
+    // 3. Delete it!
+    return ctx.db.mutation.deleteItem({ where }, info);
+  },
+  async signup(parent, args, ctx, info) {
+    // lowercase their email
+    args.email = args.email.toLowerCase();
+    // hash their password
+    const password = await bcrypt.hash(args.password, 10);
+    // create the user in the database
+    const user = await ctx.db.mutation.createUser(
+      {
+        data: {
+          ...args,
+          password,
+          permissions: { set: ['USER'] },
+        },
+      },
+      info
+    );
+    // create the JWT token for them
+    const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET);
+    // We set the jwt as a cookie on the response
+    ctx.response.cookie('token', token, {
+      httpOnly: true,
+      maxAge: 1000 * 60 * 60 * 24 * 365, // 1 year cookie
+    });
+    // Finalllllly we return the user to the browser
+    return user;
+  },
+  async signin(parent, { email, password }, ctx, info) {
+    // 1. check if there is a user with that email
+    const user = await ctx.db.query.user({ where: { email } });
+    if (!user) {
+      throw new Error(`No such user found for email ${email}`);
+    }
+    // 2. Check if their password is correct
+    const valid = await bcrypt.compare(password, user.password);
+    if (!valid) {
+      throw new Error('Invalid Password!');
+    }
+    // 3. generate the JWT Token
+    const token = jwt.sign({ userId: user.id }, process.env.APP_SECRET);
+    // 4. Set the cookie with the token
+    ctx.response.cookie('token', token, {
+      httpOnly: true,
+      maxAge: 1000 * 60 * 60 * 24 * 365,
+    });
+    // 5. Return the user
+    return user;
+  },
+  signout(parent, args, ctx, info) {
+    ctx.response.clearCookie('token');
+    return { message: 'Goodbye!' };
+  },
+  async requestReset(parent, args, ctx, info) {
+    // 1. Check if this is a real user
+    const user = await ctx.db.query.user({ where: { email: args.email } });
+    if (!user) {
+      throw new Error(`No such user found for email ${args.email}`);
+    }
+    // 2. Set a reset token and expiry on that user
+    const randomBytesPromiseified = promisify(randomBytes);
+    const resetToken = (await randomBytesPromiseified(20)).toString('hex');
+    const resetTokenExpiry = Date.now() + 3600000; // 1 hour from now
+    const res = await ctx.db.mutation.updateUser({
+      where: { email: args.email },
+      data: { resetToken, resetTokenExpiry },
+    });
+    console.log(res);
+    return { message: 'Thanks!' };
+    // 3. Email them that reset token
+  },
+  async resetPassword(parent, args, ctx, info) {
+    // 1. check if the passwords match
+    if (args.password !== args.confirmPassword) {
+      throw new Error("Yo Passwords don't match!");
+    }
+    // 2. check if its a legit reset token
+    // 3. Check if its expired
+    const [user] = await ctx.db.query.users({
+      where: {
+        resetToken: args.resetToken,
+        resetTokenExpiry_gte: Date.now() - 3600000,
+      },
+    });
+    if (!user) {
+      throw new Error('This token is either invalid or expired!');
+    }
+    // 4. Hash their new password
+    const password = await bcrypt.hash(args.password, 10);
+    // 5. Save the new password to the user and remove old resetToken fields
+    const updatedUser = await ctx.db.mutation.updateUser({
+      where: { email: user.email },
+      data: {
+        password,
+        resetToken: null,
+        resetTokenExpiry: null,
+      },
+    });
+    // 6. Generate JWT
+    const token = jwt.sign({ userId: updatedUser.id }, process.env.APP_SECRET);
+    // 7. Set the JWT cookie
+    ctx.response.cookie('token', token, {
+      httpOnly: true,
+      maxAge: 1000 * 60 * 60 * 24 * 365,
+    });
+    // 8. return the new user
+    return updatedUser;
+  },
+};
+
+module.exports = Mutations;
diff --git a/stepped-solutions/30/src/schema.graphql b/stepped-solutions/30/src/schema.graphql
new file mode 100755
index 0000000..d1db1ba
--- /dev/null
+++ b/stepped-solutions/30/src/schema.graphql
@@ -0,0 +1,30 @@
+# import * from './generated/prisma.graphql'
+
+type SuccessMessage {
+  message: String
+}
+
+type Mutation {
+  createItem(title: String, description: String, price: Int, image: String, largeImage: String): Item!
+  updateItem(id: ID!, title: String, description: String, price: Int): Item!
+  deleteItem(id: ID!): Item
+  signup(email: String!, password: String!, name: String!): User!
+  signin(email: String!, password: String!): User!
+  signout: SuccessMessage
+  requestReset(email: String!): SuccessMessage
+  resetPassword(resetToken: String!, password: String!, confirmPassword: String!): User!
+}
+
+type Query {
+  items(where: ItemWhereInput, orderBy: ItemOrderByInput, skip: Int, first: Int): [Item]!
+  item(where: ItemWhereUniqueInput!): Item
+  itemsConnection(where: ItemWhereInput): ItemConnection!
+  me: User
+}
+
+type User{
+  id: ID!
+  name: String!
+  email: String!
+  permissions: [Permission!]!
+}