From 46a0ba30ef54a7e36206481a4f5b2bf1f9702fca Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Mon, 12 Mar 2018 14:06:25 -0400 Subject: wip --- frontend/components/AddToCart.js | 2 - frontend/components/Cart.js | 46 +- frontend/components/CartCount.js | 52 + frontend/components/CartList.js | 2 +- frontend/components/CreateItem.js | 38 +- frontend/components/EditUser.js | 51 + frontend/components/Header.js | 2 - frontend/components/Item.js | 10 +- frontend/components/Items.js | 51 +- frontend/components/Nav.js | 89 +- frontend/components/OrderList.js | 7 +- frontend/components/Page.js | 20 +- frontend/components/Pagination.js | 76 +- frontend/components/RequestReset.js | 19 +- frontend/components/Reset.js | 5 +- frontend/components/Signin.js | 6 +- frontend/components/Signout.js | 2 +- frontend/components/Signup.js | 5 +- frontend/components/SingleItem.js | 3 +- frontend/components/TakeMyMoney.js | 2 +- frontend/components/ToggleCart.js | 22 - frontend/components/UIContext.js | 23 + frontend/components/UpdateItem.js | 9 +- frontend/components/styles/Form.js | 40 + frontend/config.js | 1 + frontend/enhancers/enhancers.js | 9 +- frontend/jest.setup.js | 4 + frontend/lib/initApollo-OLD.js | 92 + frontend/lib/initApollo.js | 76 +- frontend/lib/withData.js | 6 +- frontend/package-lock.json | 4292 ++++++++++++++++------------------- frontend/package.json | 78 +- frontend/pages/item.js | 2 +- frontend/pages/me.js | 17 + frontend/pages/order.js | 2 +- frontend/pages/signup.js | 1 - frontend/queries/fragments.js | 1 + frontend/queries/index.js | 17 +- frontend/queries/mutations.js | 0 39 files changed, 2473 insertions(+), 2707 deletions(-) create mode 100644 frontend/components/CartCount.js create mode 100644 frontend/components/EditUser.js delete mode 100644 frontend/components/ToggleCart.js create mode 100644 frontend/components/UIContext.js create mode 100644 frontend/components/styles/Form.js create mode 100644 frontend/jest.setup.js create mode 100644 frontend/lib/initApollo-OLD.js create mode 100644 frontend/pages/me.js delete mode 100644 frontend/queries/mutations.js (limited to 'frontend') diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js index 6cab321..b87d4e9 100644 --- a/frontend/components/AddToCart.js +++ b/frontend/components/AddToCart.js @@ -6,8 +6,6 @@ import PropTypes from 'prop-types'; import { CURRENT_USER_QUERY, SINGLE_ITEM_QUERY } from '../queries'; import { removeFromCartEnhancer, userEnhancer, addtoCartEnhancer } from '../enhancers/enhancers'; -console.log(addtoCartEnhancer); - const JumpImg = styled.img` border: 0 solid black; max-width: 100px; diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js index 78e0d88..f270b80 100644 --- a/frontend/components/Cart.js +++ b/frontend/components/Cart.js @@ -5,9 +5,8 @@ import Title from './styles/Title'; import { updateUIEnhancer, userEnhancer, uiEnhancer } from '../enhancers/enhancers'; import RemoveFromCart from './RemoveFromCart'; import TakeMyMoney from './TakeMyMoney'; -import ToggleCart from './ToggleCart'; import formatMoney from '../lib/formatMoney'; - +import { UIContext } from './UIContext'; import CartItem from './CartItem'; const CartStyles = styled.div` @@ -91,31 +90,32 @@ class Cart extends Component { const totalPrice = me.cart.reduce((tally, cartItem) => tally + cartItem.quantity * cartItem.item.price, 0); return ( - -
- ( - + + {context => ( + +
+ × - )} - /> - Your Cart. -

- You have {itemCount} item{itemCount === 1 ? '' : 's'} in your cart. S{'I'.repeat(quantityCount)}CK -

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

{formatMoney(totalPrice)}

- - - -
- + {me.name}'s Cart. +

+ You have {itemCount} item{itemCount === 1 ? '' : 's'} in your cart. +

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

{formatMoney(totalPrice)}

+ + + +
+ + )} + ); } } -export default compose(userEnhancer, uiEnhancer)(Cart); +export default compose(userEnhancer)(Cart); diff --git a/frontend/components/CartCount.js b/frontend/components/CartCount.js new file mode 100644 index 0000000..245b07b --- /dev/null +++ b/frontend/components/CartCount.js @@ -0,0 +1,52 @@ +import styled from 'styled-components'; +import { TransitionGroup, CSSTransition } from 'react-transition-group'; + +const Dot = styled.div` + background: ${props => props.theme.red}; + color: white; + border-radius: 50%; + padding: 5px; + 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 }) => ( + + + + {count} + + + +); + +export default CartCount; diff --git a/frontend/components/CartList.js b/frontend/components/CartList.js index 1a44012..8464398 100644 --- a/frontend/components/CartList.js +++ b/frontend/components/CartList.js @@ -88,4 +88,4 @@ class CartList extends Component { } } -export default compose(userEnhancer, removeFromCartEnhancer, uiEnhancer)(CartList); +export default compose(userEnhancer, removeFromCartEnhancer)(CartList); diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js index 0d43c68..26b2c88 100644 --- a/frontend/components/CreateItem.js +++ b/frontend/components/CreateItem.js @@ -3,12 +3,14 @@ import { graphql, gql } from 'react-apollo'; import { ALL_ITEMS_QUERY, CREATE_ITEM_MUTATION } from '../queries'; import ErrorMessage from './ErrorMessage'; import { fileEndpoint } from '../config'; +import Form from './styles/Form'; class CreateLink extends Component { state = { description: 'test', title: 'testing title', image: '', + largeImage: '', price: 500, fullPrice: 0, loading: false, @@ -37,13 +39,13 @@ class CreateLink extends Component { }); const file = await res.json(); console.log(file); - this.setState({ image: file.secure_url, loading: false }); + this.setState({ image: file.secure_url, largeImage: file.eager[0].secure_url, loading: false }); }; - _createLink = async e => { + createItem = async e => { e.preventDefault(); // pull the values from state - const { description, title, price, image } = this.state; + const { description, title, price, image, largeImage } = this.state; // create a mutation // TODO: handle any errors // turn loading on @@ -56,6 +58,7 @@ class CreateLink extends Component { description, title, image, + largeImage, price: parseInt(price), }, }); @@ -69,10 +72,9 @@ class CreateLink extends Component { render() { return (
- {this.state.loading ? 'LOADING...' : 'Ready!'} - - this.setState({ error: {} })} /> -
+ + {this.state.loading ? 'LOADING...' : null} + this.setState({ error: {} })} />

Image @@ -101,34 +103,18 @@ class CreateLink extends Component { type="text" placeholder="The desc for this item" /> - -

+
); } } -// TODO: The create item should only be allowed - -// When we submit this mutation, we need to update our store - we have a few ways to do that: -// One - we can go nucular and run refetchQueries() which will just go get everything - this is easy, but at the cost of efficiency. export default graphql(CREATE_ITEM_MUTATION, { name: 'createItemMutation', options: { - // Easy, but slow - // refetchQueries: ['AllLinksQuery'] - // This is much Better / efficient - // Notice how the variable is called createItem - that is because createItem is the name of the query! - update: (proxy, { data: { createItem } }) => { - console.log('UPDATING'); - const data = proxy.readQuery({ query: ALL_ITEMS_QUERY }); - // data is our store, allItems is our sub-"state", it's just an array. We can just add it to - console.log({ createItem }); - data.allItems = [createItem, ...data.allItems.slice(1, 3)]; - // and then "set state", so it will update on the page. This will update the cache for us! - proxy.writeQuery({ query: ALL_ITEMS_QUERY, data }); - }, + refetchQueries: ['AllItemsQuery'], }, })(CreateLink); diff --git a/frontend/components/EditUser.js b/frontend/components/EditUser.js new file mode 100644 index 0000000..e763616 --- /dev/null +++ b/frontend/components/EditUser.js @@ -0,0 +1,51 @@ +import React from 'react'; +import Form from './styles/Form'; +import { userEnhancer, updateUserEnhancer } from '../enhancers/enhancers'; +import { compose } from 'react-apollo'; + +class EditUser extends React.Component { + state = { + changes: {}, + }; + handleChange = e => { + const { name, value } = e.target; + const { me } = this.props.currentUser; + const changes = { + ...this.state.changes, + [name]: value, + }; + if (value === me[e.target.name]) { + delete changes[name]; + } + this.setState({ changes }); + }; + + handleSubmit = async e => { + e.preventDefault(); + const user = await this.props.updateUser({ + variables: this.state.changes, + }); + this.props.currentUser.refetch(); + this.setState({ changes: {} }); + }; + + render() { + const { me } = this.props.currentUser; + if (!me) return

You must be logged in

; + return ( +
+ + + me: + 
{JSON.stringify(me.name)}
+ Change: + 
{JSON.stringify(this.state.changes)}
+
+ ); + } +} + +export default compose(userEnhancer, updateUserEnhancer)(EditUser); diff --git a/frontend/components/Header.js b/frontend/components/Header.js index 0183e4a..0b815f9 100644 --- a/frontend/components/Header.js +++ b/frontend/components/Header.js @@ -5,7 +5,6 @@ import NProgress from 'nprogress'; import Router from 'next/router'; import styled from 'styled-components'; import Link from 'next/link'; -import Signout from './Signout'; import Cart from './Cart'; import Search from './Search'; import Nav from './Nav'; @@ -56,7 +55,6 @@ const Header = props => (
-
diff --git a/frontend/components/Item.js b/frontend/components/Item.js index 87fb0b9..935930d 100644 --- a/frontend/components/Item.js +++ b/frontend/components/Item.js @@ -3,7 +3,8 @@ import Title from './styles/Title'; import styled from 'styled-components'; import slugify from 'slugify'; import { compose } from 'react-apollo'; -import { Link } from '../routes'; +// import { Link } from '../routes'; +import Link from 'next/link'; import AddToCart from './AddToCart'; import formatMoney from '../lib/formatMoney'; import { removeItemMutation } from '../enhancers/enhancers'; @@ -70,10 +71,9 @@ class ItemComponent extends React.Component { {item.image ? {item.title} : null} <Link - route="item" - params={{ - slug: slugify(item.title), - itemId: item.id, + href={{ + pathname: '/item', + query: { id: item.id }, }} > <a>{item.title}</a> diff --git a/frontend/components/Items.js b/frontend/components/Items.js index 6206592..01d9786 100644 --- a/frontend/components/Items.js +++ b/frontend/components/Items.js @@ -1,16 +1,10 @@ -import { Component } from 'react'; -import { withApollo, graphql, compose } from 'react-apollo'; +import React from 'react'; +import { compose } from 'react-apollo'; import styled from 'styled-components'; import Pagination from './Pagination'; import Item from './Item'; import { itemEnhancer } from '../enhancers/enhancers'; -import { ALL_ITEMS_QUERY, DELETE_ITEM_MUTATION } from '../queries'; - -const Title = styled.h1` - font-size: 10px; -`; - const Items = styled.div` display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); @@ -19,38 +13,21 @@ const Items = styled.div` margin: 0 auto; `; -class ItemList extends Component { - componentDidMount() { - this.prefetchNextItems(this.props.page); - } - - componentWillReceiveProps(nextProps) { - // update the next items if the page prop changed - if (this.props.page !== nextProps.page) { - this.prefetchNextItems(nextProps.page); - } - } - - prefetchNextItems = currentPage => { - const page = currentPage + 1; - console.log(`Prefetching Next items! Page ${page}`); - this.props.client.query({ - query: ALL_ITEMS_QUERY, - variables: { - skip: page * 3 - 3, - }, - }); - }; +const Center = styled.div` + text-align: center; +`; +class ItemList extends React.Component { + something() { } render() { - console.log(this.props); + const { loading, error } = this.props.itemsQuery; // 1 - if (this.props.itemsQuery && this.props.itemsQuery.loading) { + if (loading) { return <div>Loading</div>; } // 2 - if (this.props.itemsQuery && this.props.itemsQuery.error) { + if (error) { console.log(this.props.itemsQuery.error); return <div>Error</div>; } @@ -59,13 +36,13 @@ class ItemList extends Component { const itemsToRender = this.props.itemsQuery.items; return ( - <div> + <Center> <Pagination page={this.props.page} /> - <Title>Items For Sale {itemsToRender.map((item, i) => )} - + + ); } } -export default withApollo(compose(itemEnhancer)(ItemList)); +export default compose(itemEnhancer)(ItemList); diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js index 9793087..aa0300b 100644 --- a/frontend/components/Nav.js +++ b/frontend/components/Nav.js @@ -1,8 +1,11 @@ import Link from 'next/link'; import styled from 'styled-components'; +import { Fragment } from 'react'; import { userEnhancer } from '../enhancers/enhancers'; import { compose } from 'react-apollo'; -import ToggleCart from './ToggleCart'; +import CartCount from './CartCount'; +import Signout from './Signout'; +import { UIContext } from './UIContext'; const StyledUl = styled.ul` margin: 0; @@ -20,6 +23,7 @@ const StyledUl = styled.ul` font-size: 2rem; background: none; border: 0; + cursor: pointer; &:before { content: ''; width: 1px; @@ -51,45 +55,54 @@ const StyledUl = styled.ul` } } } - .cart-count { - background: ${props => props.theme.red}; - color: white; - border-radius: 50%; - padding: 5px; - margin-left: 1rem; - font-weight: 100; - font-feature-settings: 'tnum'; - font-variant-numeric: tabular-nums; - } `; -const Nav = ({ currentUser }) => ( - - - Shop - - - Sell - - - Sign Up - - - Orders - - {currentUser.me ? ( - ( - +class Nav extends React.Component { + componentDidMount() { + this.props.currentUser.refetch(); + } + render() { + const { currentUser } = this.props; + return ( + + + Shop + + + Sell + + + {!currentUser.me && ( + + Sign In + )} - /> - ) : null} - -); + + {currentUser.me && ( + + + Orders + + + My Account + + + + {context => ( + + )} + + + )} + + ); + } +} export default compose(userEnhancer)(Nav); diff --git a/frontend/components/OrderList.js b/frontend/components/OrderList.js index cf12dc8..6a1ad67 100644 --- a/frontend/components/OrderList.js +++ b/frontend/components/OrderList.js @@ -31,7 +31,12 @@ class OrderList extends Component {

    - + {order.id}