From c3bbebfcfeed7a9b8c7470d7b48e12046d834e59 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 17 Aug 2018 15:51:02 -0400
Subject: suuuup everyone

---
 stepped-solutions/40/frontend/components/Cart.js   | 47 ++++++++++++++
 stepped-solutions/40/frontend/components/Header.js | 74 ++++++++++++++++++++++
 stepped-solutions/40/frontend/components/Nav.js    | 45 +++++++++++++
 stepped-solutions/40/frontend/lib/withData.js      | 42 ++++++++++++
 4 files changed, 208 insertions(+)
 create mode 100755 stepped-solutions/40/frontend/components/Cart.js
 create mode 100755 stepped-solutions/40/frontend/components/Header.js
 create mode 100755 stepped-solutions/40/frontend/components/Nav.js
 create mode 100755 stepped-solutions/40/frontend/lib/withData.js

(limited to 'stepped-solutions/40')

diff --git a/stepped-solutions/40/frontend/components/Cart.js b/stepped-solutions/40/frontend/components/Cart.js
new file mode 100755
index 0000000..a273b39
--- /dev/null
+++ b/stepped-solutions/40/frontend/components/Cart.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Query, Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+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 Cart = () => (
+  <Mutation mutation={TOGGLE_CART_MUTATION}>
+    {toggleCart => (
+      <Query query={LOCAL_STATE_QUERY}>
+        {({ data }) => (
+          <CartStyles open={data.cartOpen}>
+            <header>
+              <CloseButton onClick={toggleCart} title="close">
+                &times;
+              </CloseButton>
+              <Supreme>Your Cart</Supreme>
+              <p>You Have __ Items in your cart.</p>
+            </header>
+
+            <footer>
+              <p>$10.10</p>
+              <SickButton>Checkout</SickButton>
+            </footer>
+          </CartStyles>
+        )}
+      </Query>
+    )}
+  </Mutation>
+);
+
+export default Cart;
+export { LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION };
diff --git a/stepped-solutions/40/frontend/components/Header.js b/stepped-solutions/40/frontend/components/Header.js
new file mode 100755
index 0000000..5910309
--- /dev/null
+++ b/stepped-solutions/40/frontend/components/Header.js
@@ -0,0 +1,74 @@
+import Link from 'next/link';
+import styled from 'styled-components';
+import NProgress from 'nprogress';
+import Router from 'next/router';
+import Nav from './Nav';
+import Cart from './Cart';
+
+Router.onRouteChangeStart = () => {
+  NProgress.start();
+};
+Router.onRouteChangeComplete = () => {
+  NProgress.done();
+};
+
+Router.onRouteChangeError = () => {
+  NProgress.done();
+};
+
+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;
+    text-transform: uppercase;
+    text-decoration: none;
+  }
+  @media (max-width: 1300px) {
+    margin: 0;
+    text-align: center;
+  }
+`;
+
+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 Header = () => (
+  <StyledHeader>
+    <div className="bar">
+      <Logo>
+        <Link href="/">
+          <a>Sick Fits</a>
+        </Link>
+      </Logo>
+      <Nav />
+    </div>
+    <div className="sub-bar">
+      <p>Search</p>
+    </div>
+    <Cart />
+  </StyledHeader>
+);
+
+export default Header;
diff --git a/stepped-solutions/40/frontend/components/Nav.js b/stepped-solutions/40/frontend/components/Nav.js
new file mode 100755
index 0000000..aebbcb2
--- /dev/null
+++ b/stepped-solutions/40/frontend/components/Nav.js
@@ -0,0 +1,45 @@
+import Link from 'next/link';
+import { Mutation } from 'react-apollo';
+import { TOGGLE_CART_MUTATION } from './Cart';
+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 />
+            <Mutation mutation={TOGGLE_CART_MUTATION}>
+              {(toggleCart) => (
+                <button onClick={toggleCart}>My Cart</button>
+              )}
+            </Mutation>
+          </>
+        )}
+        {!me && (
+          <Link href="/signup">
+            <a>Sign In</a>
+          </Link>
+
+        )}
+      </NavStyles>
+    )}
+  </User>
+);
+
+export default Nav;
diff --git a/stepped-solutions/40/frontend/lib/withData.js b/stepped-solutions/40/frontend/lib/withData.js
new file mode 100755
index 0000000..33908d6
--- /dev/null
+++ b/stepped-solutions/40/frontend/lib/withData.js
@@ -0,0 +1,42 @@
+import withApollo from 'next-with-apollo';
+import ApolloClient from 'apollo-boost';
+import { endpoint } from '../config';
+import { LOCAL_STATE_QUERY } from '../components/Cart';
+
+function createClient({ headers }) {
+  return new ApolloClient({
+    uri: process.env.NODE_ENV === 'development' ? endpoint : endpoint,
+    request: operation => {
+      operation.setContext({
+        fetchOptions: {
+          credentials: 'include',
+        },
+        headers,
+      });
+    },
+    // local data
+    clientState: {
+      resolvers: {
+        Mutation: {
+          toggleCart(_, variables, { cache }) {
+            // read the cartOpen value from the cache
+            const { cartOpen } = cache.readQuery({
+              query: LOCAL_STATE_QUERY,
+            });
+            // Write the cart State to the opposite
+            const data = {
+              data: { cartOpen: !cartOpen },
+            };
+            cache.writeData(data);
+            return data;
+          },
+        },
+      },
+      defaults: {
+        cartOpen: true,
+      },
+    },
+  });
+}
+
+export default withApollo(createClient);
-- 
cgit v1.3