🆒

9 files changed, 158 insertions, 62 deletions

diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index e46a1f5..4522137 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -1,11 +1,13 @@
 import { Component } from 'react';
-import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY, SINGLE_ITEM_QUERY } from '../queries';
-import { removeFromCartEnhancer, userEnhancer } from '../enhancers';
 import { graphql, compose } from 'react-apollo';
 import Transition from 'react-transition-group/Transition';
-import makeImage from '../lib/image';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
+import { CURRENT_USER_QUERY, SINGLE_ITEM_QUERY } from '../queries';
+import { removeFromCartEnhancer, userEnhancer, addtoCartEnhancer } from '../enhancers/enhancers';
+
+console.log(addtoCartEnhancer);
+import makeImage from '../lib/image';
 
 const JumpImg = styled.img`
   border: 0 solid black;
@@ -36,59 +38,29 @@ const JumpImg = styled.img`
 
 class AddToCart extends Component {
   static propTypes = {
-    currentUserQuery: PropTypes.object,
+    currentUser: PropTypes.object,
   };
 
   componentDidMount() {
-    this.props.currentUserQuery.refetch();
+    this.props.currentUser.refetch();
   }
 
-  addToCart = async () => {
+  handleAddToCart = async () => {
+    console.log(`Gonna add this item to the cart! ${this.props.id}`);
     const res = await this.props.addToCart({
       variables: {
-        userId: this.props.currentUserQuery.user.id,
-        itemId: this.props.id,
-      },
-    });
-    this.props.currentUserQuery.refetch();
-    console.log(res);
-  };
-
-  removeFromCart = async () => {
-    const res = await this.props.removeFromCart({
-      variables: {
-        userId: this.props.currentUserQuery.user.id,
-        itemId: this.props.id,
+        id: this.props.id,
       },
     });
-    this.props.currentUserQuery.refetch();
-    console.log(res);
+    console.log({ realResponse: res });
+    this.props.currentUser.refetch();
   };
 
   render() {
-    const user = this.props.currentUserQuery.user;
-    // TODO WTF
-    if (!user || this.props.singleItemQuery.loading || !this.props.singleItemQuery.Item) return <p>Loading...</p>;
-    const cartIds = user.cart.map(item => item.id);
-    const image = this.props.singleItemQuery.Item.image || {};
-    const isInCart = cartIds.includes(this.props.id);
-    const { x, y } = document.querySelector('.cart').getBoundingClientRect();
-    return (
-      <div>
-        {isInCart ? (
-          <button onClick={this.removeFromCart}>❌ Remove From Cart</button>
-        ) : (
-          <button onClick={this.addToCart}>Add To Cart 👜</button>
-        )}
-        <Transition in={isInCart} timeout={1000}>
-          {status => <JumpImg x={x} y={y} src={makeImage(image)} className={`jump-${status}`} />}
-        </Transition>
-      </div>
-    );
+    return <button onClick={this.handleAddToCart}>🛒 Add To Cart</button>;
   }
 }
 
-const createOrderEnhancer = graphql(ADD_TO_CART_MUTATION, { name: 'addToCart' });
 const singleItemEnhancer = graphql(SINGLE_ITEM_QUERY, {
   name: 'singleItemQuery',
   options: ({ id }) => ({
@@ -97,4 +69,4 @@ const singleItemEnhancer = graphql(SINGLE_ITEM_QUERY, {
     },
   }),
 });
-export default compose(userEnhancer, createOrderEnhancer, removeFromCartEnhancer, singleItemEnhancer)(AddToCart);
+export default compose(userEnhancer, addtoCartEnhancer, removeFromCartEnhancer, singleItemEnhancer)(AddToCart);
diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js
index 88b072c..4153600 100644
--- a/frontend/components/Cart.js
+++ b/frontend/components/Cart.js
@@ -2,8 +2,7 @@ import { Component } from 'react';
 import { graphql, compose } from 'react-apollo';
 import styled from 'styled-components';
 import { CURRENT_USER_QUERY } from '../queries';
-import formatMoney from '../lib/formatMoney.js';
-import ChaChing from './ChaChing';
+import RemoveFromCart from './RemoveFromCart';
 
 const CartStyles = styled.div`
   background: white;
@@ -16,31 +15,44 @@ const CartStyles = styled.div`
 
 class Cart extends Component {
   componentDidMount() {
-    // This fetches the new data, but doesn't populate the user via props
-    // this.props.currentUserQuery.refetch();
-    // This fetches the new data, and populates the user via props
-    setTimeout(this.props.currentUserQuery.refetch, 1);
+    console.log('refetching..');
+    setTimeout(this.props.currentUser.refetch, 10);
   }
-
   render() {
+    if (!this.props.currentUser.me) {
+      return null;
+    }
     // Check for loading state..
-    const { loading, error } = this.props.currentUserQuery;
-    const { user } = this.props.currentUserQuery;
-    if (loading || error || !user) return <p>Cart Loading...</p>;
-    const total = user.cart.reduce((a, b) => a + b.price, 0);
+    // const { loading, error } = this.props.currentUserQuery;
+    // const { user } = this.props.currentUserQuery;
+    // if (loading || error || !user) return <p>Cart Loading...</p>;
+    // const total = user.cart.reduce((a, b) => a + b.price, 0);
 
+    const { me } = this.props.currentUser;
+    console.log(me);
     return (
       <CartStyles className="cart">
-        There
+        <p>🛒: {me.cart.length} Items</p>
+        <ul>
+          {me.cart.map(cartItem => (
+            <li key={cartItem.id}>
+              <strong>
+                {cartItem.quantity} of {cartItem.item.title}
+              </strong>
+              <RemoveFromCart id={cartItem.id} />
+            </li>
+          ))}
+        </ul>
+        {/* There
         {user.cart.length === 1 ? ' is ' : 'are '}
         <ChaChing amount={user.cart.length} />
         {user.cart.length === 1 ? ' item ' : ' items '}
-        in your cart totaling
-        <ChaChing amount={formatMoney(total)} />
+        in your cart totaling */}
+        {/* <ChaChing amount={formatMoney(total)} /> */}
       </CartStyles>
     );
   }
 }
 
-const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' });
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
 export default compose(userEnhancer)(Cart);
diff --git a/frontend/components/CartList.js b/frontend/components/CartList.js
index b54aa39..661d5ad 100644
--- a/frontend/components/CartList.js
+++ b/frontend/components/CartList.js
@@ -12,7 +12,7 @@ import styled from 'styled-components';
 import formatMoney from '../lib/formatMoney';
 import makeImage from '../lib/image';
 import TakeMyMoney from './TakeMyMoney';
-import { removeFromCartEnhancer } from '../enhancers';
+import { removeFromCartEnhancer } from '../enhancers/enhancers';
 import { CURRENT_USER_QUERY } from '../queries';
 import PropTypes from 'prop-types';
 
diff --git a/frontend/components/Header.js b/frontend/components/Header.js
index 5e1a620..774bd0b 100644
--- a/frontend/components/Header.js
+++ b/frontend/components/Header.js
@@ -28,7 +28,7 @@ class Header extends Component {
       <div>
         {this.props.currentUser.me ? this.props.currentUser.me.email : 'Not Signed in'}
         <Signout />
-        {/* <Cart /> */}
+        <Cart />
         {/* <Search /> */}
       </div>
     );
diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index d19af0e..2a0fc69 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -59,7 +59,7 @@ class ItemComponent extends React.Component {
           <button>Buy for {formatMoney(item.price)}</button>
         </TakeMyMoney>
 
-        {/* <AddToCart id={item.id} /> */}
+        <AddToCart id={item.id} />
         <button onClick={this.removeItem}>&times; Delete item</button>
       </Item>
     );
diff --git a/frontend/components/RemoveFromCart.js b/frontend/components/RemoveFromCart.js
new file mode 100644
index 0000000..e3eb919
--- /dev/null
+++ b/frontend/components/RemoveFromCart.js
@@ -0,0 +1,25 @@
+import { Component } from 'react';
+import { graphql, compose } from 'react-apollo';
+import Transition from 'react-transition-group/Transition';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { removeFromCartEnhancer } from '../enhancers/enhancers';
+
+class RemoveFromCart extends Component {
+  handleRemoveFromCart = async () => {
+    console.log(`gonna remove item from cart`);
+    const res = await this.props.removeFromCart({
+      variables: {
+        id: this.props.id,
+      },
+    });
+    console.log('This came back from removeFromCart:', res);
+    // this.props.currentUserQuery.refetch();
+  };
+
+  render() {
+    return <button onClick={this.handleRemoveFromCart}>&times; Remove</button>;
+  }
+}
+
+export default compose(removeFromCartEnhancer)(RemoveFromCart);
diff --git a/frontend/components/Reset.js b/frontend/components/Reset.js
new file mode 100644
index 0000000..7d36de7
--- /dev/null
+++ b/frontend/components/Reset.js
@@ -0,0 +1,87 @@
+import React, { Component } from 'react';
+import { graphql, compose } from 'react-apollo';
+import { RESET_MUTATION, CURRENT_USER_QUERY } from '../queries';
+
+class Reset extends Component {
+  state = {
+    confirmPassword: '',
+    password: '',
+    errors: [],
+  };
+
+  saveToState = e => {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  };
+
+  resetPassword = async e => {
+    console.log(e);
+    e.preventDefault();
+
+    if (this.state.password !== this.state.confirmPassword) {
+      this.setState({ errors: [{ message: 'Passwords Must Match!' }] });
+    }
+
+    const res = await this.props.resetPassword({
+      variables: {
+        resetToken: this.props.resetToken,
+        password: this.state.password,
+        confirmPassword: this.state.confirmPassword,
+      },
+    });
+
+    if (res.errors) {
+      this.setState({ errors: res.errors });
+      return;
+    }
+    console.log('Back!');
+    console.log(res);
+    // sign them in!
+    localStorage.setItem('token', res.data.resetPassword.token);
+    // refresh the current user query
+    this.props.currentUser.refetch();
+  };
+
+  render() {
+    return (
+      <div>
+        {this.state.loading ? 'LOADING...' : 'Ready!'}
+
+        {this.state.errors ? this.state.errors.map((err, i) => <p key={i}>{err.message}</p>) : null}
+
+        <form onSubmit={this.resetPassword}>
+          <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>
+        </form>
+      </div>
+    );
+  }
+}
+
+// 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.
+
+const restEnahncer = graphql(RESET_MUTATION, { name: 'resetPassword' });
+const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' });
+
+export default compose(restEnahncer, userEnhancer)(Reset);
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index aac1222..752199b 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -37,7 +37,7 @@ class Signin extends Component {
   render() {
     return (
       <div>
-        {this.state.loading ? 'LOADING...' : 'Ready!'}
+        {this.state.loading ? 'LOADING...' : null}
 
         {this.state.errors ? this.state.errors.map(err => <p>{err.message}</p>) : null}
 
diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js
index 746f1e4..e9d6737 100644
--- a/frontend/components/Signup.js
+++ b/frontend/components/Signup.js
@@ -42,7 +42,7 @@ class Signup extends Component {
   render() {
     return (
       <div>
-        {this.state.loading ? 'LOADING...' : 'Ready!'}
+        {this.state.loading ? 'LOADING...' : null}
 
         {this.state.error ? <p>{this.state.error.message}</p> : null}