From 5d4fca10187c8ffff19161ec2b3b02814789a3b2 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Tue, 21 Aug 2018 15:51:34 -0400 Subject: 49 --- stepped-solutions/47/frontend/components/Cart.js | 61 ++++++++++++++ stepped-solutions/48/frontend/components/Header.js | 75 +++++++++++++++++ stepped-solutions/48/frontend/components/Search.js | 67 ++++++++++++++++ stepped-solutions/49/frontend/components/Search.js | 93 ++++++++++++++++++++++ stepped-solutions/49/frontend/lib/withData.js | 42 ++++++++++ 5 files changed, 338 insertions(+) create mode 100755 stepped-solutions/47/frontend/components/Cart.js create mode 100755 stepped-solutions/48/frontend/components/Header.js create mode 100755 stepped-solutions/48/frontend/components/Search.js create mode 100755 stepped-solutions/49/frontend/components/Search.js create mode 100755 stepped-solutions/49/frontend/lib/withData.js diff --git a/stepped-solutions/47/frontend/components/Cart.js b/stepped-solutions/47/frontend/components/Cart.js new file mode 100755 index 0000000..e4eb375 --- /dev/null +++ b/stepped-solutions/47/frontend/components/Cart.js @@ -0,0 +1,61 @@ +import React from 'react'; +import { Query, Mutation } from 'react-apollo'; +import gql from 'graphql-tag'; +import { adopt } from 'react-adopt'; +import User from './User'; +import CartStyles from './styles/CartStyles'; +import Supreme from './styles/Supreme'; +import CloseButton from './styles/CloseButton'; +import SickButton from './styles/SickButton'; +import CartItem from './CartItem'; +import calcTotalPrice from '../lib/calcTotalPrice'; +import formatMoney from '../lib/formatMoney'; + +const LOCAL_STATE_QUERY = gql` + query { + cartOpen @client + } +`; + +const TOGGLE_CART_MUTATION = gql` + mutation { + toggleCart @client + } +`; +/* eslint-disable */ +const Composed = adopt({ + user: ({ render }) => {render}, + toggleCart: ({ render }) => {render}, + localState: ({ render }) => {render}, +}); +/* eslint-enable */ + +const Cart = () => ( + + {({ user, toggleCart, localState }) => { + const me = user.data.me; + if (!me) return null; + return ( + +
+ + × + + {me.name}'s Cart +

+ You Have {me.cart.length} Item{me.cart.length === 1 ? '' : 's'} in your cart. +

+
+
    {me.cart.map(cartItem => )}
+
+

{formatMoney(calcTotalPrice(me.cart))}

+ Checkout +
+ + ); + }} + +); + +export default Cart; +export { LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION }; diff --git a/stepped-solutions/48/frontend/components/Header.js b/stepped-solutions/48/frontend/components/Header.js new file mode 100755 index 0000000..797eb8e --- /dev/null +++ b/stepped-solutions/48/frontend/components/Header.js @@ -0,0 +1,75 @@ +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'; +import Search from './Search'; + +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 = () => ( + +
+ + + Sick Fits + + +
+
+ +
+ + +); + +export default Header; diff --git a/stepped-solutions/48/frontend/components/Search.js b/stepped-solutions/48/frontend/components/Search.js new file mode 100755 index 0000000..a725630 --- /dev/null +++ b/stepped-solutions/48/frontend/components/Search.js @@ -0,0 +1,67 @@ +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 + } + } +`; + +class AutoComplete extends React.Component { + state = { + items: [], + loading: false, + }; + onChange = debounce(async (e, client) => { + console.log('Searching...'); + // turn loading on + this.setState({ loading: true }); + // Manually query apollo client + const res = await client.query({ + query: SEARCH_ITEMS_QUERY, + variables: { searchTerm: e.target.value }, + }); + this.setState({ + items: res.data.items, + loading: false, + }); + }, 350); + render() { + return ( + +
+ + {client => ( + { + e.persist(); + this.onChange(e, client); + }} + /> + )} + + + {this.state.items.map(item => ( + + {item.title} + {item.title} + + ))} + +
+ + ); + } +} + +export default AutoComplete; diff --git a/stepped-solutions/49/frontend/components/Search.js b/stepped-solutions/49/frontend/components/Search.js new file mode 100755 index 0000000..a520f33 --- /dev/null +++ b/stepped-solutions/49/frontend/components/Search.js @@ -0,0 +1,93 @@ +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 = debounce(async (e, client) => { + console.log('Searching...'); + // turn loading on + this.setState({ loading: true }); + // Manually query apollo client + const res = await client.query({ + query: SEARCH_ITEMS_QUERY, + variables: { searchTerm: e.target.value }, + }); + this.setState({ + items: res.data.items, + loading: false, + }); + }, 350); + render() { + return ( + + (item === null ? '' : item.title)}> + {({ getInputProps, getItemProps, isOpen, inputValue, highlightedIndex }) => ( +
+ + {client => ( + { + e.persist(); + this.onChange(e, client); + }, + })} + /> + )} + + {isOpen && ( + + {this.state.items.map((item, index) => ( + + {item.title} + {item.title} + + ))} + {!this.state.items.length && + !this.state.loading && Nothing Found {inputValue}} + + )} +
+ )} + + + ); + } +} + +export default AutoComplete; diff --git a/stepped-solutions/49/frontend/lib/withData.js b/stepped-solutions/49/frontend/lib/withData.js new file mode 100755 index 0000000..27571e7 --- /dev/null +++ b/stepped-solutions/49/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: false, + }, + }, + }); +} + +export default withApollo(createClient); -- cgit v1.3