From 8a5825d52271d712ec7c8348447d433067e13ef2 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 13 Sep 2018 14:18:56 -0400
Subject: DONE

---
 .../frontend/components/AddToCart.js               |  68 ----------
 finished-application/frontend/components/Cart.js   |  74 -----------
 .../frontend/components/CartCount.js               |  64 ---------
 .../frontend/components/CartItem.js                |  53 --------
 .../frontend/components/CreateItem.js              | 148 ---------------------
 .../frontend/components/DeleteItem.js              |  71 ----------
 finished-application/frontend/components/Dump.js   |  19 ---
 .../frontend/components/EditUser.js                |  81 -----------
 .../frontend/components/ErrorMessage.js            |  51 -------
 finished-application/frontend/components/Header.js |  71 ----------
 finished-application/frontend/components/Item.js   |  53 --------
 finished-application/frontend/components/Items.js  |  74 -----------
 .../frontend/components/LoadingItem.js             |  22 ---
 finished-application/frontend/components/Meta.js   |  16 ---
 finished-application/frontend/components/Nav.js    |  59 --------
 finished-application/frontend/components/Order.js  |  98 --------------
 .../frontend/components/OrderList.js               |  93 -------------
 finished-application/frontend/components/Page.js   |  67 ----------
 .../frontend/components/Pagination.js              |  76 -----------
 .../frontend/components/Permissions.js             | 133 ------------------
 .../frontend/components/PleaseSignIn.js            |  46 -------
 .../frontend/components/RemoveFromCart.js          |  57 --------
 finished-application/frontend/components/Reset.js  |  85 ------------
 .../frontend/components/ResetRequest.js            |  55 --------
 finished-application/frontend/components/Search.js |  99 --------------
 finished-application/frontend/components/Signin.js |  79 -----------
 .../frontend/components/Signout.js                 |  25 ----
 finished-application/frontend/components/Signup.js |  93 -------------
 .../frontend/components/SingleItem.js              |  77 -----------
 .../frontend/components/TakeMyMoney.js             |  83 ------------
 .../frontend/components/UpdateItem.js              | 105 ---------------
 finished-application/frontend/components/User.js   |  45 -------
 .../frontend/components/styles/CartStyles.js       |  47 -------
 .../frontend/components/styles/CloseButton.js      |  13 --
 .../frontend/components/styles/DropDown.js         |  47 -------
 .../frontend/components/styles/Form.js             |  71 ----------
 .../frontend/components/styles/ItemStyles.js       |  39 ------
 .../frontend/components/styles/NavStyles.js        |  64 ---------
 .../frontend/components/styles/OrderItemStyles.js  |  44 ------
 .../frontend/components/styles/OrderStyles.js      |  38 ------
 .../frontend/components/styles/PaginationStyles.js |  27 ----
 .../frontend/components/styles/PriceTag.js         |  17 ---
 .../frontend/components/styles/SickButton.js       |  20 ---
 .../frontend/components/styles/Supreme.js          |  13 --
 .../frontend/components/styles/Table.js            |  31 -----
 .../frontend/components/styles/Title.js            |  20 ---
 46 files changed, 2731 deletions(-)
 delete mode 100644 finished-application/frontend/components/AddToCart.js
 delete mode 100644 finished-application/frontend/components/Cart.js
 delete mode 100644 finished-application/frontend/components/CartCount.js
 delete mode 100644 finished-application/frontend/components/CartItem.js
 delete mode 100644 finished-application/frontend/components/CreateItem.js
 delete mode 100644 finished-application/frontend/components/DeleteItem.js
 delete mode 100644 finished-application/frontend/components/Dump.js
 delete mode 100644 finished-application/frontend/components/EditUser.js
 delete mode 100644 finished-application/frontend/components/ErrorMessage.js
 delete mode 100644 finished-application/frontend/components/Header.js
 delete mode 100644 finished-application/frontend/components/Item.js
 delete mode 100644 finished-application/frontend/components/Items.js
 delete mode 100644 finished-application/frontend/components/LoadingItem.js
 delete mode 100644 finished-application/frontend/components/Meta.js
 delete mode 100644 finished-application/frontend/components/Nav.js
 delete mode 100644 finished-application/frontend/components/Order.js
 delete mode 100644 finished-application/frontend/components/OrderList.js
 delete mode 100644 finished-application/frontend/components/Page.js
 delete mode 100644 finished-application/frontend/components/Pagination.js
 delete mode 100644 finished-application/frontend/components/Permissions.js
 delete mode 100644 finished-application/frontend/components/PleaseSignIn.js
 delete mode 100644 finished-application/frontend/components/RemoveFromCart.js
 delete mode 100644 finished-application/frontend/components/Reset.js
 delete mode 100644 finished-application/frontend/components/ResetRequest.js
 delete mode 100644 finished-application/frontend/components/Search.js
 delete mode 100644 finished-application/frontend/components/Signin.js
 delete mode 100644 finished-application/frontend/components/Signout.js
 delete mode 100644 finished-application/frontend/components/Signup.js
 delete mode 100644 finished-application/frontend/components/SingleItem.js
 delete mode 100644 finished-application/frontend/components/TakeMyMoney.js
 delete mode 100644 finished-application/frontend/components/UpdateItem.js
 delete mode 100644 finished-application/frontend/components/User.js
 delete mode 100644 finished-application/frontend/components/styles/CartStyles.js
 delete mode 100644 finished-application/frontend/components/styles/CloseButton.js
 delete mode 100644 finished-application/frontend/components/styles/DropDown.js
 delete mode 100644 finished-application/frontend/components/styles/Form.js
 delete mode 100644 finished-application/frontend/components/styles/ItemStyles.js
 delete mode 100644 finished-application/frontend/components/styles/NavStyles.js
 delete mode 100644 finished-application/frontend/components/styles/OrderItemStyles.js
 delete mode 100644 finished-application/frontend/components/styles/OrderStyles.js
 delete mode 100644 finished-application/frontend/components/styles/PaginationStyles.js
 delete mode 100644 finished-application/frontend/components/styles/PriceTag.js
 delete mode 100644 finished-application/frontend/components/styles/SickButton.js
 delete mode 100644 finished-application/frontend/components/styles/Supreme.js
 delete mode 100644 finished-application/frontend/components/styles/Table.js
 delete mode 100644 finished-application/frontend/components/styles/Title.js

(limited to 'finished-application/frontend/components')

diff --git a/finished-application/frontend/components/AddToCart.js b/finished-application/frontend/components/AddToCart.js
deleted file mode 100644
index 03242a4..0000000
--- a/finished-application/frontend/components/AddToCart.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { Component } from 'react';
-import { Mutation } from 'react-apollo';
-import PropTypes from 'prop-types';
-import gql from 'graphql-tag';
-import User, { CURRENT_USER_QUERY } from './User';
-
-const ADD_TO_CART_MUTATION = gql`
-  mutation addToCart($id: ID!) {
-    addToCart(id: $id) {
-      id
-      quantity
-      item {
-        id
-        price
-        description
-        image
-        title
-      }
-    }
-  }
-`;
-
-class AddToCart extends Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-  };
-
-  update = (cache, payload) => {
-    const newCartItem = payload.data.addToCart;
-    const data = cache.readQuery({ query: CURRENT_USER_QUERY });
-
-    const existingIndex = data.me.cart.findIndex(cartItem => cartItem.id === newCartItem.id);
-    if (existingIndex >= 0) {
-      // already in cache, just replace it
-      data.me.cart = [
-        ...data.me.cart.slice(0, existingIndex),
-        newCartItem,
-        ...data.me.cart.slice(existingIndex + 1),
-      ];
-    } else {
-      data.me.cart = [...data.me.cart, newCartItem];
-    }
-    cache.writeQuery({ query: CURRENT_USER_QUERY, data });
-  };
-
-  render() {
-    const { id } = this.props;
-    return (
-      <User>
-        {({ data: { me }, loading }) => {
-          if (!me || loading) return null;
-          return (
-            <Mutation mutation={ADD_TO_CART_MUTATION} variables={{ id }} update={this.update}>
-              {(addToCart, { loading }) => (
-                <button disabled={loading} onClick={addToCart}>
-                  🛒 Add{loading && 'ing'} To Cart
-                </button>
-              )}
-            </Mutation>
-          );
-        }}
-      </User>
-    );
-  }
-}
-
-export default AddToCart;
-export { ADD_TO_CART_MUTATION };
diff --git a/finished-application/frontend/components/Cart.js b/finished-application/frontend/components/Cart.js
deleted file mode 100644
index 7e8a9c5..0000000
--- a/finished-application/frontend/components/Cart.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { Mutation, Query } from 'react-apollo';
-import { adopt } from 'react-adopt';
-import gql from 'graphql-tag';
-import TakeMyMoney from './TakeMyMoney';
-import formatMoney from '../lib/formatMoney';
-import CartItem from './CartItem';
-import { CURRENT_USER_QUERY } from './User';
-import calcTotalPrice from '../lib/calcTotalPrice';
-import Error from './ErrorMessage';
-import CartStyles from './styles/CartStyles';
-import Supreme from './styles/Supreme';
-import CloseButton from './styles/CloseButton';
-import SickButton from './styles/SickButton';
-
-const LOCAL_STATE_QUERY = gql`
-  query {
-    cartOpen @client
-  }
-`;
-
-const TOGGLE_CART_MUTATION = gql`
-  mutation {
-    toggleCart @client
-  }
-`;
-
-const Composed = adopt({
-  toggleCart: ({ render }) => (
-    <Mutation mutation={TOGGLE_CART_MUTATION}>
-      {(mutate, result) => render({ mutate, result })}
-    </Mutation>
-  ),
-  localState: ({ render }) => <Query query={LOCAL_STATE_QUERY} children={render} />,
-  currentUser: ({ render }) => (
-    <Query children={render} query={CURRENT_USER_QUERY} data-test="cart" />
-  ),
-});
-
-const Cart = () => (
-  <Composed>
-    {({ toggleCart, localState, currentUser }) => {
-      const { data: { me }, error, loading } = currentUser;
-      if (loading) return <p>Loading...</p>;
-      if (error) return <Error error={error} />;
-      if (!me) return null;
-      return (
-        <CartStyles open={localState.data.cartOpen}>
-          <header>
-            <CloseButton title="close" onClick={toggleCart.mutate}>
-              &times;
-            </CloseButton>
-
-            <Supreme>{me.name}'s Cart.</Supreme>
-            <p>
-              You have {me.cart.length} item{me.cart.length === 1 ? '' : 's'} in your cart.
-            </p>
-          </header>
-
-          <ul>{me.cart.map(cartItem => <CartItem key={cartItem.id} cartItem={cartItem} />)}</ul>
-          <footer>
-            <p>{formatMoney(calcTotalPrice(me.cart))}</p>
-            <TakeMyMoney>
-              <SickButton>Checkout</SickButton>
-            </TakeMyMoney>
-          </footer>
-        </CartStyles>
-      );
-    }}
-  </Composed>
-);
-
-export default Cart;
-export { LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION };
diff --git a/finished-application/frontend/components/CartCount.js b/finished-application/frontend/components/CartCount.js
deleted file mode 100644
index ae51f20..0000000
--- a/finished-application/frontend/components/CartCount.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import styled from 'styled-components';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import PropTypes from 'prop-types';
-
-const Dot = styled.div`
-  background: ${props => props.theme.red};
-  color: white;
-  border-radius: 50%;
-  padding: 0.5rem;
-  line-height: 2rem;
-  min-width: 3rem;
-  margin-left: 1rem;
-  font-weight: 100;
-  font-feature-settings: 'tnum';
-  font-variant-numeric: tabular-nums;
-`;
-
-const AnimationStyles = styled.span`
-  position: relative;
-  .count {
-    display: block;
-    position: relative;
-    transition: all 0.4s;
-    backface-visibility: hidden;
-  }
-  .count-enter {
-    transform: rotateX(0.5turn);
-  }
-
-  .count-enter-active {
-    transform: rotateX(0);
-  }
-
-  .count-exit {
-    top: 0;
-    position: absolute;
-    transform: rotateX(0);
-  }
-
-  .count-exit-active {
-    transform: rotateX(0.5turn);
-  }
-`;
-
-const CartCount = ({ count }) => (
-  <AnimationStyles>
-    <TransitionGroup>
-      <CSSTransition
-        unmountOnExit
-        className="count"
-        classNames="count"
-        key={count}
-        timeout={{ enter: 400, exit: 400 }}
-      >
-        <Dot>{count}</Dot>
-      </CSSTransition>
-    </TransitionGroup>
-  </AnimationStyles>
-);
-
-CartCount.propTypes = {
-  count: PropTypes.number.isRequired,
-};
-export default CartCount;
diff --git a/finished-application/frontend/components/CartItem.js b/finished-application/frontend/components/CartItem.js
deleted file mode 100644
index 6c6d575..0000000
--- a/finished-application/frontend/components/CartItem.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import formatMoney from '../lib/formatMoney';
-import RemoveFromCart from './RemoveFromCart';
-
-const CartItemStyles = styled.li`
-  padding: 1rem 0;
-  border-bottom: 1px solid ${props => props.theme.lightgrey};
-  display: grid;
-  align-items: center;
-  grid-template-columns: auto 1fr auto;
-  img {
-    margin-right: 10px;
-  }
-  h3 {
-    margin: 0;
-  }
-  p {
-    margin: 0;
-  }
-`;
-
-const CartItem = ({ cartItem }) => {
-  if (!cartItem.item)
-    return (
-      <CartItemStyles key={cartItem.id}>
-        <p>Ack! That Item is gone!</p>
-        <RemoveFromCart id={cartItem.id} />
-      </CartItemStyles>
-    );
-  return (
-    <CartItemStyles key={cartItem.id}>
-      <img width="100" src={cartItem.item.image} alt={cartItem.item.title} />
-      <div className="cart-item-details">
-        <h3>{cartItem.item.title}</h3>
-        <p>
-          {formatMoney(cartItem.quantity * cartItem.item.price)}
-          {' — '}
-          <em>
-            {cartItem.quantity} &times; {formatMoney(cartItem.item.price)} each
-          </em>
-        </p>
-      </div>
-      <RemoveFromCart id={cartItem.id} />
-    </CartItemStyles>
-  );
-};
-
-CartItem.propTypes = {
-  cartItem: PropTypes.object.isRequired,
-};
-
-export default CartItem;
diff --git a/finished-application/frontend/components/CreateItem.js b/finished-application/frontend/components/CreateItem.js
deleted file mode 100644
index 503b3cb..0000000
--- a/finished-application/frontend/components/CreateItem.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { Component } from 'react';
-import { Mutation } from 'react-apollo';
-import Router from 'next/router';
-import wait from 'waait';
-import gql from 'graphql-tag';
-import Error from './ErrorMessage';
-import Form from './styles/Form';
-import formatMoney from '../lib/formatMoney';
-import { ALL_ITEMS_QUERY } from './Items';
-import { PAGINATION_QUERY } from './Pagination';
-
-const CREATE_ITEM_MUTATION = gql`
-  mutation CREATE_ITEM_MUTATION(
-    $description: String!
-    $title: String!
-    $price: Int!
-    $image: String
-    $largeImage: String
-  ) {
-    createItem(
-      description: $description
-      title: $title
-      price: $price
-      image: $image
-      largeImage: $largeImage
-    ) {
-      id
-    }
-  }
-`;
-
-class CreateItem extends Component {
-  state = {
-    title: '',
-    description: '',
-    image: '',
-    largeImage: '',
-    price: 0,
-  };
-
-  handleChange = e => {
-    const { name, value, type } = e.target;
-    const val = type === 'number' ? parseFloat(value) : value;
-    this.setState({ [name]: val });
-  };
-
-  uploadFile = async e => {
-    this.setState({ loading: true });
-    const files = e.currentTarget.files;
-    const data = new FormData();
-    data.append('file', files[0]);
-    data.append('upload_preset', 'sickfits');
-
-    // use the file endpoint
-    const res = await fetch('https://api.cloudinary.com/v1_1/wesbos/image/upload', {
-      method: 'POST',
-      body: data,
-    });
-    const file = await res.json();
-    this.setState({
-      image: file.secure_url,
-      largeImage: file.eager[0].secure_url,
-      loading: false,
-    });
-  };
-
-  render() {
-    return (
-      <Mutation
-        mutation={CREATE_ITEM_MUTATION}
-        variables={this.state}
-        refetchQueries={[{ query: ALL_ITEMS_QUERY }, { query: PAGINATION_QUERY }]}
-      >
-        {(createItem, { loading, error }) => (
-          <Form
-            data-test
-            onSubmit={async e => {
-              e.preventDefault();
-              const { data: { createItem: item } } = await createItem();
-              // we wait 0 ms so  it puts the router push at the end of the call stack. This ensures that refetchQueries runs before we unmount the component :)
-              await wait();
-              Router.push({
-                pathname: `/item`,
-                query: { id: item.id },
-              });
-            }}
-          >
-            <h2>Sell an Item.</h2>
-            <Error error={error} />
-            <fieldset disabled={loading} aria-busy={loading}>
-              <label htmlFor="file">
-                Image
-                <input
-                  required
-                  id="file"
-                  onChange={this.uploadFile}
-                  type="file"
-                  accept=".png, .jpg, .jpeg"
-                />
-                {this.state.image ? (
-                  <img src={this.state.image} width="100" alt={this.state.title} />
-                ) : null}
-              </label>
-              <label htmlFor="title">
-                Title
-                <input
-                  required
-                  value={this.state.title}
-                  onChange={this.handleChange}
-                  type="text"
-                  name="title"
-                  id="title"
-                  placeholder="Title"
-                />
-              </label>
-              <label htmlFor="price">
-                Price {this.state.price && formatMoney(this.state.price)}
-                <input
-                  required
-                  type="number"
-                  id="price"
-                  name="price"
-                  min="0"
-                  value={this.state.price}
-                  onChange={this.handleChange}
-                />
-              </label>
-              <textarea
-                id="description"
-                required
-                name="description"
-                value={this.state.description}
-                onChange={this.handleChange}
-                placeholder="The desc for this item"
-              />
-              <button disabled={this.state.loading} type="submit">
-                Submit
-              </button>
-            </fieldset>
-          </Form>
-        )}
-      </Mutation>
-    );
-  }
-}
-
-export default CreateItem;
-export { CREATE_ITEM_MUTATION };
diff --git a/finished-application/frontend/components/DeleteItem.js b/finished-application/frontend/components/DeleteItem.js
deleted file mode 100644
index 4d68d5e..0000000
--- a/finished-application/frontend/components/DeleteItem.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import { Mutation } from 'react-apollo';
-import PropTypes, { number } from 'prop-types';
-import gql from 'graphql-tag';
-import { withRouter } from 'next/router';
-import { ALL_ITEMS_QUERY } from './Items';
-import { PAGINATION_QUERY } from './Pagination';
-import { perPage } from '../config';
-
-const DELETE_ITEM_MUTATION = gql`
-  mutation deleteItem($id: ID!) {
-    deleteItem(id: $id) {
-      id
-      title
-      description
-    }
-  }
-`;
-
-class DeleteItem extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-  };
-
-  update = (cache, payload) => {
-    const deletedItem = payload.data.deleteItem;
-    let { page = 1 } = this.props.router.query;
-    page = parseFloat(page);
-    const skip = page * perPage - perPage;
-    const variables = { skip };
-    const data = cache.readQuery({ query: ALL_ITEMS_QUERY, variables });
-    // filter this one out
-    data.items = data.items.filter(item => item.id !== deletedItem.id);
-    // write the data back to the cache
-    console.log(data.items);
-    cache.writeQuery({ query: ALL_ITEMS_QUERY, data, variables });
-    // FYI Pagination is broken with Apollo currently - will make a followup video
-  };
-
-  render() {
-    return (
-      <Mutation
-        mutation={DELETE_ITEM_MUTATION}
-        variables={{ id: this.props.id }}
-        refetchQueries={[
-          {
-            query: ALL_ITEMS_QUERY,
-            variables: { skip: (this.props.router.query.page || 1) * perPage - perPage },
-          },
-          { query: PAGINATION_QUERY },
-        ]}
-        update={this.update}
-      >
-        {(removeItem, { error }) => (
-          <button
-            onClick={() => {
-              if (confirm('Are you sure you want to delete this item?')) {
-                removeItem();
-              }
-            }}
-          >
-            {error ? error.message : '× Delete Item'}
-          </button>
-        )}
-      </Mutation>
-    );
-  }
-}
-
-export default withRouter(DeleteItem);
-export { DELETE_ITEM_MUTATION };
diff --git a/finished-application/frontend/components/Dump.js b/finished-application/frontend/components/Dump.js
deleted file mode 100644
index f281281..0000000
--- a/finished-application/frontend/components/Dump.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const Dump = props => (
-  <div
-    style={{
-      fontSize: 20,
-      border: '1px solid #efefef',
-      padding: 10,
-      background: 'white',
-    }}
-  >
-    {Object.keys(props).map(prop => (
-      <pre key={prop}>
-        <strong style={{ color: 'white', background: 'red' }}>{prop} 💩</strong>
-        {JSON.stringify(props[prop], '', ' ')}
-      </pre>
-    ))}
-  </div>
-);
-
-export default Dump;
diff --git a/finished-application/frontend/components/EditUser.js b/finished-application/frontend/components/EditUser.js
deleted file mode 100644
index 1bb8e5b..0000000
--- a/finished-application/frontend/components/EditUser.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-import { Query, Mutation } from 'react-apollo';
-import gql from 'graphql-tag';
-import Form from './styles/Form';
-import { CURRENT_USER_QUERY } from './User';
-import Error from './ErrorMessage';
-import User from './User';
-
-const UPDATE_USER_MUTATION = gql`
-  mutation updateUser($name: String!) {
-    updateUser(name: $name) {
-      name
-    }
-  }
-`;
-
-class EditUser extends React.Component {
-  state = {
-    changes: {},
-  };
-
-  handleChange = e => {
-    const { name, value } = e.target;
-    const changes = {
-      ...this.state.changes,
-      [name]: value,
-    };
-    this.setState({ changes });
-  };
-
-  handleSubmit = async (e, updateUser) => {
-    e.preventDefault();
-    // only submit if there are real changes
-    if (Object.keys(this.state.changes).length === 0) return;
-    await updateUser();
-    this.setState({ changes: {} });
-  };
-
-  render() {
-    return (
-      <User>
-        {({ data: { me }, loading }) => {
-          if (loading) return <p>Loading...</p>;
-          return (
-            <Mutation
-              mutation={UPDATE_USER_MUTATION}
-              refetchQueries={[{ query: CURRENT_USER_QUERY }]}
-              variables={this.state.changes}
-            >
-              {(updateUser, { error, called }) => (
-                <Form onSubmit={e => this.handleSubmit(e, updateUser)}>
-                  <Error error={error} />
-                  <fieldset disabled={loading} aria-busy={loading}>
-                    {called && !error && <p data-test="updated">Updated!</p>}
-                    <label htmlFor="name">
-                      Name:
-                      <input
-                        type="text"
-                        name="name"
-                        defaultValue={me.name}
-                        onChange={this.handleChange}
-                      />
-                    </label>
-                    <button type="submit">Update</button>
-                    <strong>me:</strong>
-                    <pre>{JSON.stringify(me.name)}</pre>
-                    <strong>Change:</strong>
-                    <pre data-test="change">{JSON.stringify(this.state.changes)}</pre>
-                  </fieldset>
-                </Form>
-              )}
-            </Mutation>
-          );
-        }}
-      </User>
-    );
-  }
-}
-
-export default EditUser;
-export { UPDATE_USER_MUTATION };
diff --git a/finished-application/frontend/components/ErrorMessage.js b/finished-application/frontend/components/ErrorMessage.js
deleted file mode 100644
index 52d59a8..0000000
--- a/finished-application/frontend/components/ErrorMessage.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import styled from 'styled-components';
-import React from 'react';
-
-import PropTypes from 'prop-types';
-
-const ErrorStyles = styled.div`
-  padding: 2rem;
-  background: white;
-  margin: 2rem 0;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-left: 5px solid red;
-  p {
-    margin: 0;
-    font-weight: 100;
-  }
-  strong {
-    margin-right: 1rem;
-  }
-`;
-
-const DisplayError = ({ error }) => {
-  if (!error || !error.message) return null;
-  if (error.networkError && error.networkError.result && error.networkError.result.errors.length) {
-    return error.networkError.result.errors.map((error, i) => (
-      <ErrorStyles key={i}>
-        <p data-test="graphql-error">
-          <strong>Shoot!</strong>
-          {error.message.replace('GraphQL error: ', '')}
-        </p>
-      </ErrorStyles>
-    ));
-  }
-  return (
-    <ErrorStyles>
-      <p data-test="graphql-error">
-        <strong>Shoot!</strong>
-        {error.message.replace('GraphQL error: ', '')}
-      </p>
-    </ErrorStyles>
-  );
-};
-
-DisplayError.defaultProps = {
-  error: {},
-};
-
-DisplayError.propTypes = {
-  error: PropTypes.object,
-};
-
-export default DisplayError;
diff --git a/finished-application/frontend/components/Header.js b/finished-application/frontend/components/Header.js
deleted file mode 100644
index bb05c34..0000000
--- a/finished-application/frontend/components/Header.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-import NProgress from 'nprogress';
-import Router from 'next/router';
-import styled from 'styled-components';
-import Link from 'next/link';
-import Cart from './Cart';
-import Search from './Search';
-import Nav from './Nav';
-
-Router.onRouteChangeStart = () => {
-  NProgress.start();
-};
-Router.onRouteChangeComplete = () => NProgress.done();
-Router.onRouteChangeError = () => NProgress.done();
-
-const StyledHeader = styled.header`
-  .bar {
-    border-bottom: 10px solid ${props => props.theme.black};
-    display: grid;
-    grid-template-columns: auto 1fr;
-    justify-content: space-between;
-    align-items: stretch;
-    @media (max-width: 1300px) {
-      grid-template-columns: 1fr;
-      justify-content: center;
-    }
-  }
-  .sub-bar {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    border-bottom: 1px solid ${props => props.theme.lightgrey};
-  }
-`;
-
-const Logo = styled.h1`
-  font-size: 4rem;
-  margin-left: 2rem;
-  position: relative;
-  z-index: 2;
-  transform: skew(-7deg);
-  a {
-    padding: 0.5rem 1rem;
-    background: ${props => props.theme.red};
-    color: white;
-    letter-spacing: -2px;
-    text-transform: uppercase;
-  }
-  @media (max-width: 1300px) {
-    margin: 0;
-    text-align: center;
-  }
-`;
-
-const Header = () => (
-  <StyledHeader>
-    <div className="bar">
-      <Logo>
-        <Link href="/">
-          <a>Sick&nbsp;Fits!</a>
-        </Link>
-      </Logo>
-      <Nav />
-    </div>
-    <div className="sub-bar">
-      <Search />
-    </div>
-    <Cart />
-  </StyledHeader>
-);
-
-export default Header;
diff --git a/finished-application/frontend/components/Item.js b/finished-application/frontend/components/Item.js
deleted file mode 100644
index d6b339e..0000000
--- a/finished-application/frontend/components/Item.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Link from 'next/link';
-import Title from './styles/Title';
-import AddToCart from './AddToCart';
-import DeleteItem from './DeleteItem';
-import formatMoney from '../lib/formatMoney';
-import ItemStyles from './styles/ItemStyles';
-import PriceTag from './styles/PriceTag';
-
-class Item extends React.Component {
-  static propTypes = {
-    item: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const item = this.props.item;
-    return (
-      <ItemStyles key={item.id}>
-        {item.image && <img src={item.image} alt={item.title} />}
-        <Title>
-          <Link
-            href={{
-              pathname: '/item',
-              query: { id: item.id },
-            }}
-          >
-            <a>{item.title}</a>
-          </Link>
-        </Title>
-
-        <PriceTag>{formatMoney(item.price)}</PriceTag>
-
-        <p>{item.description}</p>
-
-        <div className="buttonList">
-          <Link
-            href={{
-              pathname: '/update',
-              query: { id: item.id },
-            }}
-          >
-            <a>Edit ✏️</a>
-          </Link>
-          <AddToCart id={item.id} />
-          <DeleteItem id={item.id} />
-        </div>
-      </ItemStyles>
-    );
-  }
-}
-
-export default Item;
diff --git a/finished-application/frontend/components/Items.js b/finished-application/frontend/components/Items.js
deleted file mode 100644
index 5694d0b..0000000
--- a/finished-application/frontend/components/Items.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from 'react';
-import { Query } from 'react-apollo';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import gql from 'graphql-tag';
-import Pagination from './Pagination';
-import Item from './Item';
-import LoadingItem from './LoadingItem';
-import { perPage } from '../config';
-
-const ALL_ITEMS_QUERY = gql`
-  query ALL_ITEMS_QUERY($skip: Int = 0, $first: Int = ${perPage}) {
-    items(orderBy: createdAt_DESC, first: $first, skip: $skip) {
-      __typename
-      id
-      title
-      price
-      description
-      image
-      largeImage
-    }
-  }
-`;
-
-const Items = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 60px;
-  max-width: ${props => props.theme.maxWidth};
-  margin: 0 auto;
-`;
-
-const Center = styled.div`
-  text-align: center;
-`;
-
-class ItemList extends React.Component {
-  static propTypes = {
-    page: PropTypes.number.isRequired,
-  };
-  render() {
-    return (
-      <Center key={this.props.page}>
-        <Pagination page={this.props.page} />
-        <Query
-          query={ALL_ITEMS_QUERY}
-          variables={{
-            skip: this.props.page * perPage - perPage,
-            first: perPage,
-          }}
-          // fetchPolicy="network-only"
-        >
-          {({ data, error, loading }) => {
-            if (loading) {
-              return (
-                <Items>
-                  {Array.from({ length: 4 })
-                    .map((x, id) => ({ id }))
-                    .map(x => <LoadingItem key={x.id} />)}
-                </Items>
-              );
-            }
-            if (error) return <div>Error</div>;
-            return <Items>{data.items.map(item => <Item key={item.id} item={item} />)}</Items>;
-          }}
-        </Query>
-        <Pagination page={this.props.page} />
-      </Center>
-    );
-  }
-}
-
-export default ItemList;
-export { ALL_ITEMS_QUERY };
diff --git a/finished-application/frontend/components/LoadingItem.js b/finished-application/frontend/components/LoadingItem.js
deleted file mode 100644
index 5736337..0000000
--- a/finished-application/frontend/components/LoadingItem.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import Title from './styles/Title';
-import ItemStyles from './styles/ItemStyles';
-
-class LoadingItem extends React.Component {
-  render() {
-    return (
-      <ItemStyles>
-        <img
-          src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-          alt="Loading..."
-        />>
-        <Title>
-          <a>Loading...</a>
-        </Title>
-        <p>Please Wait</p>
-      </ItemStyles>
-    );
-  }
-}
-
-export default LoadingItem;
diff --git a/finished-application/frontend/components/Meta.js b/finished-application/frontend/components/Meta.js
deleted file mode 100644
index fe9c29f..0000000
--- a/finished-application/frontend/components/Meta.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import Head from 'next/head';
-
-const Meta = () => (
-  <div>
-    <Head>
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <meta charSet="utf-8" />
-      <link rel="shortcut icon" href="/static/favicon.png" />
-      <link rel="stylesheet" type="text/css" href="/static/nprogress.css" />
-      <title>Sick Fits!</title>
-    </Head>
-  </div>
-);
-
-export default Meta;
diff --git a/finished-application/frontend/components/Nav.js b/finished-application/frontend/components/Nav.js
deleted file mode 100644
index 5f3495a..0000000
--- a/finished-application/frontend/components/Nav.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Fragment } from 'react';
-import Link from 'next/link';
-import { Query, Mutation } from 'react-apollo';
-import { TOGGLE_CART_MUTATION } from './Cart';
-import User from './User';
-import CartCount from './CartCount';
-import Signout from './Signout';
-import NavStyles from './styles/NavStyles';
-
-class Nav extends React.Component {
-  render() {
-    // below we set the fetchPolicy to network only so it forces re-fetch on the server
-    return (
-      <User>
-        {({ data: { me } }) => (
-          <NavStyles data-test="nav">
-            <Link href="/items">
-              <a>Shop</a>
-            </Link>
-            <Link href="/sell">
-              <a>Sell</a>
-            </Link>
-
-            {!me && (
-              <Link href="/signup">
-                <a>Sign In</a>
-              </Link>
-            )}
-
-            {me && (
-              <Fragment>
-                <Link href="/orders">
-                  <a>Orders</a>
-                </Link>
-                <Link href="/me">
-                  <a>My Account</a>
-                </Link>
-                <Signout />
-                <Mutation mutation={TOGGLE_CART_MUTATION}>
-                  {toggleCart => (
-                    <button onClick={toggleCart}>
-                      My Cart
-                      <CartCount
-                        className="cart-count"
-                        count={me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0)}
-                      />
-                    </button>
-                  )}
-                </Mutation>
-              </Fragment>
-            )}
-          </NavStyles>
-        )}
-      </User>
-    );
-  }
-}
-
-export default Nav;
diff --git a/finished-application/frontend/components/Order.js b/finished-application/frontend/components/Order.js
deleted file mode 100644
index b4a0a0e..0000000
--- a/finished-application/frontend/components/Order.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Component } from 'react';
-import { Query } from 'react-apollo';
-import { format } from 'date-fns';
-import Head from 'next/head';
-import PropTypes from 'prop-types';
-import gql from 'graphql-tag';
-import formatMoney from '../lib/formatMoney';
-import Error from './ErrorMessage';
-import OrderStyles from './styles/OrderStyles';
-
-const SINGLE_ORDER_QUERY = gql`
-  query SINGLE_ORDER_QUERY($id: ID!) {
-    order(id: $id) {
-      id
-      charge
-      total
-      createdAt
-      user {
-        id
-      }
-      items {
-        id
-        title
-        price
-        description
-        image
-        quantity
-      }
-    }
-  }
-`;
-
-class Order extends Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-  };
-
-  render() {
-    return (
-      <Query
-        query={SINGLE_ORDER_QUERY}
-        variables={{ id: this.props.id }}
-        fetchPolicy="network-only"
-      >
-        {({ data, error, loading, refetch }) => {
-          if (loading) return <p>Loading...</p>;
-          if (error) return <Error error={error} refetch={refetch} />;
-          const order = data.order;
-          return (
-            <OrderStyles data-test="order">
-              <Head>
-                <title>Sick Fits - Order {order.id}</title>
-              </Head>
-              <p>
-                <span>Order Id:</span>
-                <span>{order.id}</span>
-              </p>
-              <p>
-                <span>Charge</span>
-                <span>{order.charge}</span>
-              </p>
-              <p>
-                <span>Date</span>
-                <span>{format(order.createdAt, 'MMMM D, YYYY h:mm A')}</span>
-              </p>
-              <p>
-                <span>Order Total</span>
-                <span>{formatMoney(order.total)}</span>
-              </p>
-              <p>
-                <span>Item Count</span>
-                <span>{order.items.length}</span>
-              </p>
-              <div className="items">
-                {order.items.map(item => (
-                  <div className="order-item" key={item.id}>
-                    <img src={item.image} alt={item.title} />
-                    <div className="item-details">
-                      <h2> {item.title} </h2>
-                      <p>Qty: {item.quantity}</p>
-                      <p>Each: {formatMoney(item.price)}</p>
-                      <p>Subtotal: {formatMoney(item.price * item.quantity)}</p>
-                      <p>SubTotal: {item.description}</p>
-                      <p>{item.description}</p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </OrderStyles>
-          );
-        }}
-      </Query>
-    );
-  }
-}
-
-export default Order;
-export { SINGLE_ORDER_QUERY };
diff --git a/finished-application/frontend/components/OrderList.js b/finished-application/frontend/components/OrderList.js
deleted file mode 100644
index 5886ad7..0000000
--- a/finished-application/frontend/components/OrderList.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React from 'react';
-import { Query } from 'react-apollo';
-import { formatDistance } from 'date-fns';
-import Link from 'next/link';
-import styled from 'styled-components';
-import gql from 'graphql-tag';
-import formatMoney from '../lib/formatMoney';
-import OrderItemStyles from './styles/OrderItemStyles';
-
-const USER_ORDERS_QUERY = gql`
-  query orders {
-    orders(orderBy: createdAt_DESC) {
-      id
-      total
-      createdAt
-      updatedAt
-      items {
-        id
-        title
-        price
-        description
-        quantity
-        image
-      }
-    }
-  }
-`;
-
-const OrderUl = styled.ul`
-  display: grid;
-  grid-gap: 4rem;
-  grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
-`;
-
-class OrderList extends React.Component {
-  render() {
-    return (
-      <Query query={USER_ORDERS_QUERY}>
-        {({ data: { orders }, loading, error }) => {
-          if (loading) return <p>Loading...</p>;
-          if (error) return <p>Error...</p>;
-          if (!orders || !orders.length) return <p>No Orders Yet!</p>;
-          return (
-            <div>
-              <h2>You have {orders.length} Orders</h2>
-              <OrderUl>
-                {orders.map(order => (
-                  <OrderItemStyles key={order.id}>
-                    <Link
-                      href={{
-                        pathname: '/order',
-                        query: { id: order.id },
-                      }}
-                    >
-                      <a>
-                        <div className="order-meta">
-                          <p>
-                            <strong>{order.items.reduce((a, b) => a + b.quantity, 0)}</strong>
-                            Items
-                          </p>
-                          <p>
-                            <strong>{order.items.length}</strong>
-                            Products
-                          </p>
-                          <p>
-                            <strong>{formatDistance(order.createdAt, new Date())}</strong>
-                            ago
-                          </p>
-                          <p>
-                            <strong>{formatMoney(order.total)}</strong>
-                            Total
-                          </p>
-                        </div>
-                        <div className="images">
-                          {order.items.map(item => (
-                            <img key={item.id} src={item.image} alt={item.title} />
-                          ))}
-                        </div>
-                      </a>
-                    </Link>
-                  </OrderItemStyles>
-                ))}
-              </OrderUl>
-            </div>
-          );
-        }}
-      </Query>
-    );
-  }
-}
-
-export default OrderList;
-export { USER_ORDERS_QUERY };
diff --git a/finished-application/frontend/components/Page.js b/finished-application/frontend/components/Page.js
deleted file mode 100644
index c3e04ac..0000000
--- a/finished-application/frontend/components/Page.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import styled, { ThemeProvider, injectGlobal } from 'styled-components';
-import PropTypes from 'prop-types';
-import Header from './Header';
-import Meta from './Meta';
-
-const theme = {
-  red: '#FF0000',
-  black: '#393939',
-  grey: '#3A3A3A',
-  lightgrey: '#E1E1E1',
-  offWhite: '#EDEDED',
-  maxWidth: '1300px',
-  bs: '0 12px 24px 0 rgba(0, 0, 0, 0.09)',
-};
-
-injectGlobal`
-  html {
-   box-sizing: border-box;
-   font-size: 10px;
-  }
-  body {
-   font-family: 'radnika next', sans-serif;
-   padding: 0;
-   background-color: #ffffff;
-   margin: 0;
-   font-size: 1.5rem;
-   line-height: 2;
-  }
-  *, *:before, *:after {
-    box-sizing: inherit;
-  }
-  a {
-    color: ${theme.black};
-    text-decoration: none;
-  }
-`;
-
-const Inner = styled.div`
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 2rem;
-`;
-
-const StyledPage = styled.div`
-  color: ${props => props.theme.black};
-  background: white;
-`;
-
-class Page extends React.Component {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-  };
-  render() {
-    return (
-      <ThemeProvider theme={theme}>
-        <StyledPage>
-          <Meta />
-          <Header />
-          <Inner>{this.props.children}</Inner>
-        </StyledPage>
-      </ThemeProvider>
-    );
-  }
-}
-
-export default Page;
diff --git a/finished-application/frontend/components/Pagination.js b/finished-application/frontend/components/Pagination.js
deleted file mode 100644
index f684840..0000000
--- a/finished-application/frontend/components/Pagination.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { Query } from 'react-apollo';
-import styled from 'styled-components';
-import Link from 'next/link';
-import PropTypes from 'prop-types';
-import gql from 'graphql-tag';
-import Head from 'next/head';
-import { perPage } from '../config';
-import PaginationStyles from './styles/PaginationStyles';
-
-
-
-const PAGINATION_QUERY = gql`
-  query itemsConnection($skip: Int = 0, $first: Int = 4) {
-    itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) {
-      aggregate {
-        count
-      }
-    }
-  }
-`;
-
-const Pagination = props => (
-  <Query query={PAGINATION_QUERY}>
-    {({ data, loading, error }) => {
-      if (loading || error) return null;
-      const { aggregate } = data.itemsConnection;
-      const { page } = props;
-      const pages = Math.ceil(aggregate.count / perPage);
-      return (
-        <PaginationStyles data-test="pagination">
-          <Head>
-            <title>
-              Sick Fits! — Page {page} of {pages}
-            </title>
-          </Head>
-          <Link
-            prefetch
-            href={{
-              pathname: 'items',
-              query: { page: page - 1 },
-            }}
-          >
-            <a className="prev" aria-disabled={page <= 1}>
-              ←Prev
-            </a>
-          </Link>
-          <p>
-            Page <strong>{page} </strong> of <strong className="totalPages">{pages}</strong>
-          </p>
-          <p>
-            <strong>{aggregate.count}</strong> Items Total
-          </p>
-          <Link
-            prefetch
-            href={{
-              pathname: 'items',
-              query: { page: page + 1 },
-            }}
-          >
-            <a className="next" aria-disabled={page >= pages}>
-              Next →
-            </a>
-          </Link>
-        </PaginationStyles>
-      );
-    }}
-  </Query>
-);
-
-Pagination.propTypes = {
-  page: PropTypes.number.isRequired,
-};
-
-export default Pagination;
-export { PAGINATION_QUERY };
diff --git a/finished-application/frontend/components/Permissions.js b/finished-application/frontend/components/Permissions.js
deleted file mode 100644
index 52a6acf..0000000
--- a/finished-application/frontend/components/Permissions.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React from 'react';
-import { Query, Mutation } from 'react-apollo';
-import PropTypes from 'prop-types';
-import gql from 'graphql-tag';
-import Error from './ErrorMessage';
-import SickButton from './styles/SickButton';
-import Table from './styles/Table';
-
-const ALL_USERS_QUERY = gql`
-  query {
-    users {
-      id
-      name
-      email
-      permissions
-    }
-  }
-`;
-
-const UPDATE_PERMISSIONS_MUTATION = gql`
-  mutation updatePermissions($permissions: [Permission], $userId: ID!) {
-    updatePermissions(permissions: $permissions, userId: $userId) {
-      id
-      permissions
-      name
-      email
-    }
-  }
-`;
-
-const possiblePermissions = [
-  'ADMIN',
-  'USER',
-  'ITEMCREATE',
-  'ITEMUPDATE',
-  'ITEMDELETE',
-  'PERMISSIONUPDATE',
-];
-
-class User extends React.Component {
-  static propTypes = {
-    user: PropTypes.shape({
-      permissions: PropTypes.array.isRequired,
-      id: PropTypes.string.isRequired,
-    }).isRequired,
-  };
-  state = {
-    permissions: this.props.user.permissions,
-  };
-  handlePermissionsChange = e => {
-    const checkbox = e.target;
-    let updatedPermissions = [...this.state.permissions];
-    if (checkbox.checked) {
-      // add it in
-      updatedPermissions.push(checkbox.value);
-    } else {
-      updatedPermissions = updatedPermissions.filter(permission => permission !== checkbox.value);
-    }
-    this.setState({ permissions: updatedPermissions });
-  };
-  render() {
-    const { user } = this.props;
-    return (
-      <Mutation mutation={UPDATE_PERMISSIONS_MUTATION}>
-        {(updatePermissions, { loading, error }) => (
-          <tr key={user.id} className="user">
-            <Error error={error} />
-            <td>{user.name}</td>
-            <td>{user.email}</td>
-            {possiblePermissions.map(permission => (
-              <td>
-                <label key={permission} htmlFor={`${user.id}-permission-${permission}`}>
-                  <input
-                    type="checkbox"
-                    checked={this.state.permissions.includes(permission)}
-                    name={`permission-${permission}`}
-                    id={`${user.id}-permission-${permission}`}
-                    onChange={this.handlePermissionsChange}
-                    value={permission}
-                  />
-                </label>
-              </td>
-            ))}
-            <td>
-              <SickButton
-                type="button"
-                disabled={loading}
-                onClick={async () => {
-                  await updatePermissions({
-                    variables: {
-                      permissions: this.state.permissions,
-                      userId: this.props.user.id,
-                    },
-                  });
-                }}
-              >
-                Updat{loading ? 'ing' : 'e'}
-              </SickButton>
-            </td>
-          </tr>
-        )}
-      </Mutation>
-    );
-  }
-}
-
-const Permissions = () => (
-  <Query query={ALL_USERS_QUERY}>
-    {({ data, error, loading }) => {
-      if (loading) return <div>Loading</div>;
-      if (error) return <Error error={error} />;
-      return (
-        <div>
-          <h1>Manage User Permissions</h1>
-          <Table>
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Email</th>
-                {possiblePermissions.map(p => <th>{p}</th>)}
-                <th>👇🏻</th>
-              </tr>
-            </thead>
-            <tbody>{data.users.map(user => <User key={user.id} user={user} />)}</tbody>
-          </Table>
-        </div>
-      );
-    }}
-  </Query>
-);
-
-export default Permissions;
-export { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION };
diff --git a/finished-application/frontend/components/PleaseSignIn.js b/finished-application/frontend/components/PleaseSignIn.js
deleted file mode 100644
index 3cd7267..0000000
--- a/finished-application/frontend/components/PleaseSignIn.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { Query } from 'react-apollo';
-import PropTypes from 'prop-types';
-import { CURRENT_USER_QUERY } from './User';
-import Signin from './Signin';
-
-const PleaseSignIn = props => (
-  <Query query={CURRENT_USER_QUERY}>
-    {({ data, loading }) => {
-      if (loading) return <p>Loading...</p>;
-      // check if they are signed in
-      if (!data.me) {
-        return (
-          <div>
-            <p>Please sign in before continuing!</p>
-            <Signin />
-          </div>
-        );
-      }
-      // check if they need permissions
-      if (props.allowedPermissions) {
-        // check if they have NO permissions, or they don't meet the requmrenets
-        if (
-          !data.me.permissions ||
-          !props.allowedPermissions.some(permission => data.me.permissions.includes(permission))
-        ) {
-          return (
-            <p>
-              Insufficient Permissions. You have:
-              <strong>{data.me.permissions}</strong>
-              and you need
-              <strong>{props.allowedPermissions.join(' OR ')}</strong>
-            </p>
-          );
-        }
-      }
-      return props.children;
-    }}
-  </Query>
-);
-
-PleaseSignIn.propTypes = {
-  allowedPermissions: PropTypes.array,
-  children: PropTypes.any.isRequired,
-};
-
-export default PleaseSignIn;
diff --git a/finished-application/frontend/components/RemoveFromCart.js b/finished-application/frontend/components/RemoveFromCart.js
deleted file mode 100644
index cf5b6fd..0000000
--- a/finished-application/frontend/components/RemoveFromCart.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { Component } from 'react';
-import { Mutation } from 'react-apollo';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import gql from 'graphql-tag';
-import { CURRENT_USER_QUERY } from './User';
-
-const REMOVE_FROM_CART_MUTATION = gql`
-  mutation removeFromCart($id: ID!) {
-    removeFromCart(id: $id) {
-      id
-    }
-  }
-`;
-
-const BigButton = styled.button`
-  font-size: 3rem;
-  background: none;
-  border: 0;
-  &:hover {
-    color: ${props => props.theme.red};
-    cursor: pointer;
-  }
-`;
-
-class RemoveFromCart extends Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-  };
-
-  update = (cache, payload) => {
-    const data = cache.readQuery({ query: CURRENT_USER_QUERY });
-    // console.log(data.me.cart[0]);
-    const cartItemId = payload.data.removeFromCart.id;
-    data.me.cart = data.me.cart.filter(cartItem => cartItem.id !== cartItemId);
-    cache.writeQuery({ query: CURRENT_USER_QUERY, data });
-  };
-
-  render() {
-    return (
-      <Mutation
-        mutation={REMOVE_FROM_CART_MUTATION}
-        variables={{ id: this.props.id }}
-        update={this.update}
-      >
-        {(removeFromCart, { loading }) => (
-          <BigButton disabled={loading} title="Remove From Cart" onClick={removeFromCart}>
-            ×
-          </BigButton>
-        )}
-      </Mutation>
-    );
-  }
-}
-
-export default RemoveFromCart;
-export { REMOVE_FROM_CART_MUTATION };
diff --git a/finished-application/frontend/components/Reset.js b/finished-application/frontend/components/Reset.js
deleted file mode 100644
index bb2ece0..0000000
--- a/finished-application/frontend/components/Reset.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { Mutation } from 'react-apollo';
-import PropTypes from 'prop-types';
-import gql from 'graphql-tag';
-import Form from './styles/Form';
-import Error from './ErrorMessage';
-import { CURRENT_USER_QUERY } from './User';
-
-const RESET_MUTATION = gql`
-  mutation RESET_MUTATION($resetToken: String!, $password: String!, $confirmPassword: String!) {
-    resetPassword(resetToken: $resetToken, password: $password, confirmPassword: $confirmPassword) {
-      id
-      email
-      name
-    }
-  }
-`;
-
-class Reset extends React.Component {
-  static propTypes = {
-    resetToken: PropTypes.string.isRequired,
-  };
-
-  state = {
-    confirmPassword: '',
-    password: '',
-  };
-
-  saveToState = e => {
-    const { name, value } = e.target;
-    this.setState({ [name]: value });
-  };
-
-  resetPassword = async (e, resetMutation) => {
-    e.preventDefault();
-    await resetMutation();
-  };
-
-  render() {
-    return (
-      <Mutation
-        mutation={RESET_MUTATION}
-        variables={{
-          resetToken: this.props.resetToken,
-          password: this.state.password,
-          confirmPassword: this.state.confirmPassword,
-        }}
-        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
-      >
-        {(resetMutation, { error, loading }) => (
-          <Form onSubmit={e => this.resetPassword(e, resetMutation)}>
-            <Error error={error} />
-            <fieldset disabled={loading} aria-busy={loading}>
-              <label htmlFor="password">
-                password
-                <input
-                  value={this.state.password}
-                  onChange={this.saveToState}
-                  name="password"
-                  type="password"
-                  id="password"
-                />
-              </label>
-              <label htmlFor="confirm">
-                Confirm:
-                <input
-                  value={this.state.confirmPassword}
-                  onChange={this.saveToState}
-                  name="confirmPassword"
-                  type="password"
-                  id="confirmPassword"
-                />
-              </label>
-
-              <button type="submit">Request Reset!</button>
-            </fieldset>
-          </Form>
-        )}
-      </Mutation>
-    );
-  }
-}
-
-export default Reset;
-export { RESET_MUTATION };
diff --git a/finished-application/frontend/components/ResetRequest.js b/finished-application/frontend/components/ResetRequest.js
deleted file mode 100644
index 6aedcc1..0000000
--- a/finished-application/frontend/components/ResetRequest.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import { Mutation } from 'react-apollo';
-import gql from 'graphql-tag';
-import Form from './styles/Form';
-import Error from './ErrorMessage';
-
-const REQUEST_RESET_MUTATION = gql`
-  mutation requestReset($email: String!) {
-    requestReset(email: $email) {
-      id
-    }
-  }
-`;
-
-class ResetRequest extends React.Component {
-  state = {
-    email: '',
-  };
-
-  render() {
-    return (
-      <Mutation mutation={REQUEST_RESET_MUTATION} variables={this.state}>
-        {(resetMutation, { loading, error, called }) => (
-          <Form
-            onSubmit={async e => {
-              e.preventDefault();
-              await resetMutation();
-            }}
-            data-test="ResetRequest"
-          >
-            <Error error={error} />
-            {!error && called && !loading && <p>Success! Check Your Email!</p>}
-            <fieldset disabled={loading} aria-busy={loading}>
-              <label htmlFor="email">
-                Email
-                <input
-                  value={this.state.email}
-                  onChange={e => this.setState({ email: e.target.value })}
-                  name="email"
-                  type="text"
-                  placeholder="email"
-                />
-              </label>
-
-              <button type="submit">Request Reset!</button>
-            </fieldset>
-          </Form>
-        )}
-      </Mutation>
-    );
-  }
-}
-
-export default ResetRequest;
-export { REQUEST_RESET_MUTATION };
diff --git a/finished-application/frontend/components/Search.js b/finished-application/frontend/components/Search.js
deleted file mode 100644
index dc1bfea..0000000
--- a/finished-application/frontend/components/Search.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import React from 'react';
-import Downshift from 'downshift';
-import Router from 'next/router';
-import { ApolloConsumer } from 'react-apollo';
-import gql from 'graphql-tag';
-import debounce from 'lodash.debounce';
-import { DropDown, DropDownItem, SearchStyles } from './styles/DropDown';
-
-const SEARCH_ITEMS_QUERY = gql`
-  query SEARCH_ITEMS_QUERY($searchTerm: String!) {
-    items(where: { OR: [{ title_contains: $searchTerm }, { description_contains: $searchTerm }] }) {
-      id
-      image
-      title
-    }
-  }
-`;
-function routeToItem(item) {
-  Router.push({
-    pathname: '/item',
-    query: {
-      id: item.id,
-    },
-  });
-}
-
-class AutoComplete extends React.Component {
-  state = {
-    items: [],
-    loading: false,
-  };
-  onChange = async (e, client) => {
-    if (!e.target.value) {
-      return this.setState({ items: [] });
-    }
-    this.setState({ loading: true });
-    this.search(client, e.target.value);
-  };
-
-  search = debounce(async (client, searchTerm) => {
-    const res = await client.query({
-      query: SEARCH_ITEMS_QUERY,
-      variables: { searchTerm },
-    });
-    this.setState({ items: res.data.items, loading: false });
-  }, 350);
-
-  render() {
-    return (
-      <SearchStyles>
-        <Downshift onChange={routeToItem} itemToString={i => (i === null ? '' : i.title)}>
-          {({ getInputProps, getItemProps, isOpen, inputValue, highlightedIndex }) => (
-            <div>
-              {/* This is the searchInput */}
-              <ApolloConsumer>
-                {client => (
-                  <input
-                    {...getInputProps({
-                      placeholder: 'Search For Item',
-                      id: 'search',
-                      className: this.state.loading ? 'loading' : '',
-                      onChange: e => {
-                        e.persist();
-                        this.onChange(e, client);
-                      },
-                    })}
-                  />
-                )}
-              </ApolloConsumer>
-              {/* This is the Dropdown */}
-              {isOpen && (
-                <DropDown>
-                  {this.state.items.map((item, index) => (
-                    <DropDownItem
-                      {...getItemProps({ item })}
-                      key={item.id}
-                      highlighted={highlightedIndex === index}
-                    >
-                      <img width="50" src={item.image} alt={item.title} />
-                      {item.title}
-                    </DropDownItem>
-                  ))}
-                  {/* Found Nothing State */}
-                  {!this.state.items.length &&
-                    !this.state.loading && (
-                      <DropDownItem>Nothing Found for {inputValue}...</DropDownItem>
-                    )}
-                </DropDown>
-              )}
-            </div>
-          )}
-        </Downshift>
-      </SearchStyles>
-    );
-  }
-}
-
-export default AutoComplete;
-export { SEARCH_ITEMS_QUERY };
diff --git a/finished-application/frontend/components/Signin.js b/finished-application/frontend/components/Signin.js
deleted file mode 100644
index 53cdb76..0000000
--- a/finished-application/frontend/components/Signin.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { Component } from 'react';
-import { Mutation } from 'react-apollo';
-import gql from 'graphql-tag';
-import { CURRENT_USER_QUERY } from './User';
-import Error from './ErrorMessage';
-import Form from './styles/Form';
-
-const SIGNIN_MUTATION = gql`
-  mutation SIGNIN_MUTATION($email: String!, $password: String!) {
-    signin(email: $email, password: $password) {
-      id
-      email
-      name
-    }
-  }
-`;
-
-class Signin extends Component {
-  state = {
-    email: '',
-    password: '',
-  };
-
-  saveToState = e => {
-    const { name, value } = e.target;
-    this.setState({ [name]: value });
-  };
-
-  render() {
-    return (
-      <Mutation
-        mutation={SIGNIN_MUTATION}
-        variables={this.state}
-        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
-      >
-        {(signin, { loading, error }) => (
-          <Form
-            onSubmit={e => {
-              e.preventDefault();
-              signin();
-            }}
-          >
-            <Error error={error} />
-            <fieldset disabled={loading} aria-busy={loading}>
-              <label htmlFor="email">
-                Email
-                <input
-                  value={this.state.email}
-                  onChange={this.saveToState}
-                  name="email"
-                  type="text"
-                  placeholder="email"
-                />
-              </label>
-
-              <label htmlFor="password">
-                Password
-                <input
-                  type="password"
-                  name="password"
-                  id="password"
-                  className="password"
-                  placeholder="password"
-                  value={this.state.password}
-                  onChange={this.saveToState}
-                />
-              </label>
-
-              <button type="submit">Sign In!</button>
-            </fieldset>
-          </Form>
-        )}
-      </Mutation>
-    );
-  }
-}
-
-export default Signin;
-export { SIGNIN_MUTATION };
diff --git a/finished-application/frontend/components/Signout.js b/finished-application/frontend/components/Signout.js
deleted file mode 100644
index ae87631..0000000
--- a/finished-application/frontend/components/Signout.js
+++ /dev/null
@@ -1,25 +0,0 @@
-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
-    }
-  }
-`;
-
-class Signout extends Component {
-  render() {
-    return (
-      <Mutation mutation={SIGN_OUT_MUTATION} refetchQueries={[{ query: CURRENT_USER_QUERY }]}>
-        {signout => <button onClick={signout}>Sign Out</button>}
-      </Mutation>
-    );
-  }
-}
-
-export default Signout;
-export { SIGN_OUT_MUTATION };
diff --git a/finished-application/frontend/components/Signup.js b/finished-application/frontend/components/Signup.js
deleted file mode 100644
index 9164e67..0000000
--- a/finished-application/frontend/components/Signup.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { Component } from 'react';
-import { Mutation } from 'react-apollo';
-import gql from 'graphql-tag';
-import { CURRENT_USER_QUERY } from './User';
-import Form from './styles/Form';
-import Error from './ErrorMessage';
-
-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 = {
-    email: '',
-    name: '',
-    password: '',
-  };
-
-  saveToState = e => {
-    const { name, value } = e.target;
-    this.setState({ [name]: value });
-  };
-
-  render() {
-    return (
-      <Mutation
-        mutation={SIGNUP_MUTATION}
-        variables={this.state}
-        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
-      >
-        {(signup, { loading, error }) => (
-          <Form
-            method="post"
-            onSubmit={async e => {
-              e.preventDefault();
-              const res = await signup();
-            }}
-          >
-            <fieldset disabled={loading} aria-busy={loading}>
-              <Error error={error} />
-              <h2>Sign Up for an Account</h2>
-              <label htmlFor="email">
-                Email
-                <input
-                  value={this.state.email}
-                  onChange={this.saveToState}
-                  name="email"
-                  type="text"
-                  placeholder="email"
-                />
-              </label>
-
-              <label htmlFor="name">
-                Name
-                <input
-                  type="text"
-                  name="name"
-                  placeholder="name"
-                  value={this.state.name}
-                  onChange={this.saveToState}
-                />
-              </label>
-
-              <label htmlFor="signupPassword">
-                Password
-                <input
-                  type="password"
-                  name="password"
-                  id="signupPassword"
-                  className="password"
-                  placeholder="password"
-                  value={this.state.password}
-                  onChange={this.saveToState}
-                />
-              </label>
-
-              <button type="submit">Submit</button>
-            </fieldset>
-          </Form>
-        )}
-      </Mutation>
-    );
-  }
-}
-
-export default Signup;
-export { SIGNUP_MUTATION };
diff --git a/finished-application/frontend/components/SingleItem.js b/finished-application/frontend/components/SingleItem.js
deleted file mode 100644
index 83ef8a0..0000000
--- a/finished-application/frontend/components/SingleItem.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Query } from 'react-apollo';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import Head from 'next/head';
-import Link from 'next/link';
-import gql from 'graphql-tag';
-import Error from './ErrorMessage';
-import AddToCart from './AddToCart';
-
-const SINGLE_ITEM_QUERY = gql`
-  query SINGLE_ITEM_QUERY($id: ID!) {
-    items(where: { id: $id }) {
-      id
-      title
-      description
-      largeImage
-      image
-    }
-  }
-`;
-
-const SingleItemStyles = styled.div`
-  max-width: 1200px;
-  margin: 2rem auto;
-  box-shadow: ${props => props.theme.bs};
-  display: grid;
-  grid-auto-columns: 1fr;
-  grid-auto-flow: column;
-  min-height: 800px;
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-  .details {
-    margin: 3rem;
-    font-size: 2rem;
-  }
-`;
-
-const SingleItem = props => (
-  <Query query={SINGLE_ITEM_QUERY} variables={{ id: props.id }}>
-    {({ data, loading, error }) => {
-      if (loading) return <p>Loading...</p>;
-      if (error) return <Error error={error} />;
-      const [item] = data.items;
-      return (
-        <SingleItemStyles data-test="SingleItem">
-          <Head>
-            <title>{item.title}</title>
-          </Head>
-          <img src={item.largeImage || item.image} alt={item.title} />
-          <div className="details">
-            <h2>Viewing {item.title}</h2>
-            <p>{item.description}</p>
-            <Link
-              href={{
-                pathname: '/update',
-                query: { id: item.id },
-              }}
-            >
-              <a>Edit ✏️</a>
-            </Link>
-            <AddToCart id={item.id} />
-          </div>
-        </SingleItemStyles>
-      );
-    }}
-  </Query>
-);
-
-SingleItem.propTypes = {
-  id: PropTypes.string.isRequired,
-};
-
-export default SingleItem;
-export { SINGLE_ITEM_QUERY };
diff --git a/finished-application/frontend/components/TakeMyMoney.js b/finished-application/frontend/components/TakeMyMoney.js
deleted file mode 100644
index b9e42ea..0000000
--- a/finished-application/frontend/components/TakeMyMoney.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Component } from 'react';
-import StripeCheckout from 'react-stripe-checkout';
-import { Mutation, Query } from 'react-apollo';
-import Router from 'next/router';
-import NProgress from 'nprogress';
-import PropTypes from 'prop-types';
-import gql from 'graphql-tag';
-import calcTotalPrice from '../lib/calcTotalPrice';
-import Error from './ErrorMessage';
-import User, { CURRENT_USER_QUERY } from './User';
-
-const CREATE_ORDER_MUTATION = gql`
-  mutation createOrder($token: String!) {
-    createOrder(token: $token) {
-      id
-      charge
-      total
-      items {
-        id
-        title
-      }
-    }
-  }
-`;
-
-function totalItems(cart) {
-  return cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0);
-}
-
-class TakeMyMoney extends Component {
-  onToken = async (res, createOrder) => {
-    NProgress.start();
-    const order = await createOrder({
-      variables: {
-        token: res.id,
-      },
-    });
-    console.log(order);
-    // Route them to that order page
-    const { id } = order.data.createOrder;
-    Router.push({
-      pathname: `/order`,
-      query: { id },
-    });
-  };
-  render() {
-    return (
-      <User>
-        {({ data: { me }, error }) => {
-          if (!me || !me.cart.length) return null;
-          if (error) return <Error error={error} />;
-          return (
-            <Mutation
-              mutation={CREATE_ORDER_MUTATION}
-              refetchQueries={[{ query: CURRENT_USER_QUERY }]}
-            >
-              {createOrder => (
-                <StripeCheckout
-                  amount={calcTotalPrice(me.cart)}
-                  name="Sick Fits Haul"
-                  description={`Order of ${totalItems(me.cart)} Items From Sick Fits`}
-                  image={me.cart[0].item && me.cart[0].item.image}
-                  token={res => this.onToken(res, createOrder)}
-                  stripeKey="pk_lclTtThFp8CnO3QtEZSd8HA9mFUps"
-                  currency="USD"
-                  email={me.email}
-                >
-                  {this.props.children}
-                </StripeCheckout>
-              )}
-            </Mutation>
-          );
-        }}
-      </User>
-    );
-  }
-}
-
-TakeMyMoney.propTypes = {
-  children: PropTypes.any,
-};
-
-export default TakeMyMoney;
diff --git a/finished-application/frontend/components/UpdateItem.js b/finished-application/frontend/components/UpdateItem.js
deleted file mode 100644
index 08ba254..0000000
--- a/finished-application/frontend/components/UpdateItem.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import React, { Component } from 'react';
-import { Query, Mutation } from 'react-apollo';
-import PropTypes from 'prop-types';
-import gql from 'graphql-tag';
-import { SINGLE_ITEM_QUERY } from './SingleItem';
-import Form from './styles/Form';
-import Error from './ErrorMessage';
-
-const UPDATE_ITEM_MUTATION = gql`
-  mutation updateItem($id: ID!, $title: String, $description: String, $price: Int) {
-    updateItem(id: $id, description: $description, title: $title, price: $price) {
-      id
-    }
-  }
-`;
-
-class UpdateItem extends Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-  };
-  state = {
-    item: {},
-  };
-
-  saveToState = e => {
-    let { name, value, type } = e.target;
-    if (type === 'number') {
-      value = parseInt(value);
-    }
-    const item = { ...this.state.item };
-    item[name] = value;
-    this.setState({ item });
-  };
-
-  updateItem = async (e, updateItemMutation) => {
-    console.log('Updating Item');
-    e.preventDefault();
-
-    const res = await updateItemMutation({
-      // pass in those variables from state
-      variables: {
-        id: this.props.id,
-        ...this.state.item,
-      },
-    });
-    console.log(res);
-  };
-
-  render() {
-    return (
-      <Query query={SINGLE_ITEM_QUERY} variables={{ id: this.props.id }}>
-        {({ data: { items }, loading }) => {
-          if (loading) return <p>Loading...</p>;
-          if (!items || !items.length) return <p>Item Not Found</p>;
-          const [item] = items;
-          return (
-            <Mutation mutation={UPDATE_ITEM_MUTATION}>
-              {(updateItemMutation, { error }) => (
-                <Form onSubmit={e => this.updateItem(e, updateItemMutation)}>
-                  <Error error={error} />
-                  <h2>Edit {item.title}</h2>
-                  <fieldset disabled={loading} aria-busy={loading}>
-                    <label htmlFor="title">
-                      Title
-                      <input
-                        id="title"
-                        defaultValue={item.title}
-                        name="title"
-                        onChange={this.saveToState}
-                        type="text"
-                      />
-                    </label>
-
-                    <label htmlFor="description">
-                      Description
-                      <textarea
-                        defaultValue={item.description}
-                        name="description"
-                        onChange={this.saveToState}
-                      />
-                    </label>
-
-                    <label htmlFor="price">
-                      Price
-                      <input
-                        type="number"
-                        name="price"
-                        onChange={this.saveToState}
-                        defaultValue={item.price}
-                      />
-                    </label>
-                    <button type="submit">Save...</button>
-                  </fieldset>
-                </Form>
-              )}
-            </Mutation>
-          );
-        }}
-      </Query>
-    );
-  }
-}
-
-export default UpdateItem;
-export { UPDATE_ITEM_MUTATION };
diff --git a/finished-application/frontend/components/User.js b/finished-application/frontend/components/User.js
deleted file mode 100644
index 19c568d..0000000
--- a/finished-application/frontend/components/User.js
+++ /dev/null
@@ -1,45 +0,0 @@
-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
-      orders {
-        id
-        charge
-        total
-      }
-      cart {
-        id
-        quantity
-        item {
-          __typename
-          id
-          title
-          price
-          description
-          image
-          largeImage
-        }
-      }
-    }
-  }
-`;
-
-const User = props => (
-  <Query {...props} query={CURRENT_USER_QUERY}>
-    {result => props.children(result)}
-  </Query>
-);
-
-User.propTypes = {
-  children: PropTypes.func.isRequired,
-};
-
-export default User;
-export { CURRENT_USER_QUERY };
diff --git a/finished-application/frontend/components/styles/CartStyles.js b/finished-application/frontend/components/styles/CartStyles.js
deleted file mode 100644
index d5ee93a..0000000
--- a/finished-application/frontend/components/styles/CartStyles.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled from 'styled-components';
-
-const CartStyles = styled.div`
-  padding: 20px;
-  position: relative;
-  background: white;
-  position: fixed;
-  height: 100%;
-  top: 0;
-  right: 0;
-  width: 40%;
-  min-width: 500px;
-  bottom: 0;
-  transform: translateX(100%);
-  transition: all 0.3s;
-  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
-  z-index: 5;
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  ${props => props.open && `transform: translateX(0);`};
-  header {
-    border-bottom: 5px solid ${props => props.theme.black};
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
-  }
-  footer {
-    border-top: 10px double ${props => props.theme.black};
-    margin-top: 2rem;
-    padding-top: 2rem;
-    display: grid;
-    grid-template-columns: auto auto;
-    align-items: center;
-    font-size: 3rem;
-    font-weight: 900;
-    p {
-      margin: 0;
-    }
-  }
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    overflow: scroll;
-  }
-`;
-
-export default CartStyles;
diff --git a/finished-application/frontend/components/styles/CloseButton.js b/finished-application/frontend/components/styles/CloseButton.js
deleted file mode 100644
index 69fd55c..0000000
--- a/finished-application/frontend/components/styles/CloseButton.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const CloseButton = styled.button`
-  background: black;
-  color: white;
-  font-size: 3rem;
-  border: 0;
-  position: absolute;
-  z-index: 2;
-  right: 0;
-`;
-
-export default CloseButton;
diff --git a/finished-application/frontend/components/styles/DropDown.js b/finished-application/frontend/components/styles/DropDown.js
deleted file mode 100644
index df86aee..0000000
--- a/finished-application/frontend/components/styles/DropDown.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-const DropDown = styled.div`
-  position: absolute;
-  width: 100%;
-  z-index: 2;
-  border: 1px solid ${props => props.theme.lightgrey};
-`;
-
-const DropDownItem = styled.div`
-  border-bottom: 1px solid ${props => props.theme.lightgrey};
-  background: ${props => (props.highlighted ? '#f7f7f7' : 'white')};
-  padding: 1rem;
-  transition: all 0.2s;
-  ${props => (props.highlighted ? 'padding-left: 2rem;' : null)};
-  display: flex;
-  align-items: center;
-  border-left: 10px solid ${props => (props.highlighted ? props.theme.lightgrey : 'white')};
-  img {
-    margin-right: 10px;
-  }
-`;
-
-const glow = keyframes`
-  from {
-    box-shadow: 0 0 0px yellow;
-  }
-
-  to {
-    box-shadow: 0 0 10px 1px yellow;
-  }
-`;
-
-const SearchStyles = styled.div`
-  position: relative;
-  input {
-    width: 100%;
-    padding: 10px;
-    border: 0;
-    font-size: 2rem;
-    &.loading {
-      animation: ${glow} 0.5s ease-in-out infinite alternate;
-    }
-  }
-`;
-
-export { DropDown, DropDownItem, SearchStyles };
diff --git a/finished-application/frontend/components/styles/Form.js b/finished-application/frontend/components/styles/Form.js
deleted file mode 100644
index 5717130..0000000
--- a/finished-application/frontend/components/styles/Form.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-const loading = keyframes`
-  from {
-    background-position: 0 0;
-    /* rotate: 0; */
-  }
-
-  to {
-    background-position: 100% 100%;
-    /* rotate: 360deg; */
-  }
-`;
-
-const Form = styled.form`
-  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05);
-  background: rgba(0, 0, 0, 0.02);
-  border: 5px solid white;
-  padding: 20px;
-  font-size: 1.5rem;
-  line-height: 1.5;
-  font-weight: 600;
-  label {
-    display: block;
-    margin-bottom: 1rem;
-  }
-  input,
-  textarea,
-  select {
-    width: 100%;
-    padding: 0.5rem;
-    font-size: 1rem;
-    border: 1px solid black;
-    &:focus {
-      outline: 0;
-      border-color: ${props => props.theme.red};
-    }
-  }
-  button,
-  input[type='submit'] {
-    width: auto;
-    background: red;
-    color: white;
-    border: 0;
-    font-size: 2rem;
-    font-weight: 600;
-    padding: 0.5rem 1.2rem;
-  }
-  fieldset {
-    border: 0;
-    padding: 0;
-
-    &[disabled] {
-      opacity: 0.5;
-    }
-    &::before {
-      height: 10px;
-      content: '';
-      display: block;
-      background-image: linear-gradient(to right, #ff3019 0%, #e2b04a 50%, #ff3019 100%);
-    }
-    &[aria-busy='true']::before {
-      background-size: 50% auto;
-      animation: ${loading} 0.5s linear infinite;
-    }
-  }
-`;
-
-Form.displayName = 'Form';
-
-export default Form;
diff --git a/finished-application/frontend/components/styles/ItemStyles.js b/finished-application/frontend/components/styles/ItemStyles.js
deleted file mode 100644
index b117d5f..0000000
--- a/finished-application/frontend/components/styles/ItemStyles.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import styled from 'styled-components';
-
-const Item = styled.div`
-  background: white;
-  border: 1px solid ${props => props.theme.offWhite};
-  box-shadow: ${props => props.theme.bs};
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  img {
-    width: 100%;
-    height: 400px;
-    object-fit: cover;
-  }
-  p {
-    font-size: 12px;
-    line-height: 2;
-    font-weight: 300;
-    flex-grow: 1;
-    padding: 0 3rem;
-    font-size: 1.5rem;
-  }
-  .buttonList {
-    display: grid;
-    width: 100%;
-    border-top: 1px solid ${props => props.theme.lightgrey};
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    grid-gap: 1px;
-    background: ${props => props.theme.lightgrey};
-    & > * {
-      background: white;
-      border: 0;
-      font-size: 1rem;
-      padding: 1rem;
-    }
-  }
-`;
-
-export default Item;
diff --git a/finished-application/frontend/components/styles/NavStyles.js b/finished-application/frontend/components/styles/NavStyles.js
deleted file mode 100644
index 41523df..0000000
--- a/finished-application/frontend/components/styles/NavStyles.js
+++ /dev/null
@@ -1,64 +0,0 @@
-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;
-    @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/finished-application/frontend/components/styles/OrderItemStyles.js b/finished-application/frontend/components/styles/OrderItemStyles.js
deleted file mode 100644
index 292c75d..0000000
--- a/finished-application/frontend/components/styles/OrderItemStyles.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from 'styled-components';
-
-const OrderItemStyles = styled.li`
-  box-shadow: ${props => props.theme.bs};
-  list-style: none;
-  padding: 2rem;
-  border: 1px solid ${props => props.theme.offWhite};
-  h2 {
-    border-bottom: 2px solid red;
-    margin-top: 0;
-    margin-bottom: 2rem;
-    padding-bottom: 2rem;
-  }
-
-  .images {
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    margin-top: 1rem;
-    img {
-      height: 200px;
-      object-fit: cover;
-      width: 100%;
-    }
-  }
-  .order-meta {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
-    display: grid;
-    grid-gap: 1rem;
-    text-align: center;
-    & > * {
-      margin: 0;
-      background: rgba(0, 0, 0, 0.03);
-      padding: 1rem 0;
-    }
-    strong {
-      display: block;
-      margin-bottom: 1rem;
-    }
-  }
-`;
-
-export default OrderItemStyles;
diff --git a/finished-application/frontend/components/styles/OrderStyles.js b/finished-application/frontend/components/styles/OrderStyles.js
deleted file mode 100644
index 4a2d804..0000000
--- a/finished-application/frontend/components/styles/OrderStyles.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-const OrderStyles = styled.div`
-  max-width: 1000px;
-  margin: 0 auto;
-  border: 1px solid ${props => props.theme.offWhite};
-  box-shadow: ${props => props.theme.bs};
-  padding: 2rem;
-  border-top: 10px solid red;
-  & > p {
-    display: grid;
-    grid-template-columns: 1fr 5fr;
-    margin: 0;
-    border-bottom: 1px solid ${props => props.theme.offWhite};
-    span {
-      padding: 1rem;
-      &:first-child {
-        font-weight: 900;
-        text-align: right;
-      }
-    }
-  }
-  .order-item {
-    border-bottom: 1px solid ${props => props.theme.offWhite};
-    display: grid;
-    grid-template-columns: 300px 1fr;
-    align-items: center;
-    grid-gap: 2rem;
-    margin: 2rem 0;
-    padding-bottom: 2rem;
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-`;
-export default OrderStyles;
diff --git a/finished-application/frontend/components/styles/PaginationStyles.js b/finished-application/frontend/components/styles/PaginationStyles.js
deleted file mode 100644
index 30753af..0000000
--- a/finished-application/frontend/components/styles/PaginationStyles.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-const PaginationStyles = styled.div`
-  text-align: center;
-  display: inline-grid;
-  grid-template-columns: repeat(4, auto);
-  align-items: stretch;
-  justify-content: center;
-  align-content: center;
-  margin: 2rem 0;
-  border: 1px solid ${props => props.theme.lightgrey};
-  border-radius: 10px;
-  & > * {
-    margin: 0;
-    padding: 15px 30px;
-    border-right: 1px solid ${props => props.theme.lightgrey};
-    &:last-child {
-      border-right: 0;
-    }
-  }
-  a[aria-disabled='true'] {
-    color: grey;
-    pointer-events: none;
-  }
-`;
-
-export default PaginationStyles;
diff --git a/finished-application/frontend/components/styles/PriceTag.js b/finished-application/frontend/components/styles/PriceTag.js
deleted file mode 100644
index 9116681..0000000
--- a/finished-application/frontend/components/styles/PriceTag.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-const PriceTag = styled.span`
-  background: ${props => props.theme.red};
-  transform: rotate(3deg);
-  color: white;
-  font-weight: 600;
-  padding: 5px;
-  line-height: 1;
-  font-size: 3rem;
-  display: inline-block;
-  position: absolute;
-  top: -3px;
-  right: -3px;
-`;
-
-export default PriceTag;
diff --git a/finished-application/frontend/components/styles/SickButton.js b/finished-application/frontend/components/styles/SickButton.js
deleted file mode 100644
index 5b5352e..0000000
--- a/finished-application/frontend/components/styles/SickButton.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-const SickButton = styled.button`
-  background: red;
-  color: white;
-  font-weight: 500;
-  border: 0;
-  border-radius: 0;
-  text-transform: uppercase;
-  font-size: 2rem;
-  padding: 0.8rem 1.5rem;
-  transform: skew(-2deg);
-  display: inline-block;
-  transition: all 0.5s;
-  &[disabled] {
-    opacity: 0.5;
-  }
-`;
-
-export default SickButton;
diff --git a/finished-application/frontend/components/styles/Supreme.js b/finished-application/frontend/components/styles/Supreme.js
deleted file mode 100644
index d946ccd..0000000
--- a/finished-application/frontend/components/styles/Supreme.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const Supreme = styled.h3`
-  background: ${props => props.theme.red};
-  color: white;
-  display: inline-block;
-  padding: 4px 5px;
-  transform: skew(-3deg);
-  margin: 0;
-  font-size: 4rem;
-`;
-
-export default Supreme;
diff --git a/finished-application/frontend/components/styles/Table.js b/finished-application/frontend/components/styles/Table.js
deleted file mode 100644
index e9d0673..0000000
--- a/finished-application/frontend/components/styles/Table.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-const Table = styled.table`
-  border-spacing: 0;
-  width: 100%;
-  border: 1px solid ${props => props.theme.offWhite};
-  thead {
-    font-size: 10px;
-  }
-  td,
-  th {
-    border-bottom: 1px solid ${props => props.theme.offWhite};
-    border-right: 1px solid ${props => props.theme.offWhite};
-    padding: 10px 5px;
-    position: relative;
-    &:last-child {
-      border-right: none;
-      width: 150px;
-      button {
-        width: 100%;
-      }
-    }
-  }
-  tr {
-    &:hover {
-      background: ${props => props.theme.offWhite};
-    }
-  }
-`;
-
-export default Table;
diff --git a/finished-application/frontend/components/styles/Title.js b/finished-application/frontend/components/styles/Title.js
deleted file mode 100644
index e1901ec..0000000
--- a/finished-application/frontend/components/styles/Title.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-const Title = styled.h3`
-  margin: 0 1rem;
-  text-align: center;
-  transform: skew(-5deg) rotate(-1deg);
-  margin-top: -3rem;
-  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
-  a {
-    background: ${props => props.theme.red};
-    display: inline;
-    line-height: 1.3;
-    font-size: 4rem;
-    text-align: center;
-    color: white;
-    padding: 0 1rem;
-  }
-`;
-
-export default Title;
-- 
cgit v1.3