From 331da87bd53bc1fb79063d142764c75df9f32170 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 14 Mar 2018 12:19:54 -0400
Subject: tests

---
 frontend/components/AddToCart.js   | 41 ++--------------------
 frontend/components/CartCount.js   |  1 +
 frontend/components/Count.js       |  4 +--
 frontend/components/CreateItem.js  | 70 +++++++++++++++++++++-----------------
 frontend/components/Item.js        |  5 ++-
 frontend/components/Items.js       |  3 +-
 frontend/components/Nav.js         |  9 +++--
 frontend/components/Pagination.js  | 32 ++++++++++++-----
 frontend/components/Search.js      | 10 +++---
 frontend/components/SingleItem.js  | 18 ++++------
 frontend/components/styles/Form.js |  3 ++
 11 files changed, 91 insertions(+), 105 deletions(-)

(limited to 'frontend/components')

diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index b87d4e9..9c52f83 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -1,37 +1,8 @@
 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 { CURRENT_USER_QUERY, SINGLE_ITEM_QUERY } from '../queries';
-import { removeFromCartEnhancer, userEnhancer, addtoCartEnhancer } from '../enhancers/enhancers';
-
-const JumpImg = styled.img`
-  border: 0 solid black;
-  max-width: 100px;
-  transition: all 0.5s;
-  position: fixed;
-  left: ${props => props.x}px;
-  top: -100%;
-  &.jump-entered {
-    border-color: green;
-    transform-origin: 0 0;
-    transform: scale(0);
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-  }
-  &.jump-entering {
-    border-color: yellow;
-    top: ${props => props.y}px;
-    left: ${props => props.x}px;
-  }
-  &.jump-exited {
-    border-color: red;
-  }
-  &.jump-exiting {
-    border-color: yellow;
-  }
-`;
+import { removeFromCartEnhancer, userEnhancer, addToCartEnhancer, singleItemEnhancer } from '../enhancers/enhancers';
 
 class AddToCart extends Component {
   static propTypes = {
@@ -57,12 +28,4 @@ class AddToCart extends Component {
   }
 }
 
-const singleItemEnhancer = graphql(SINGLE_ITEM_QUERY, {
-  name: 'singleItemQuery',
-  options: ({ id }) => ({
-    variables: {
-      id,
-    },
-  }),
-});
-export default compose(userEnhancer, addtoCartEnhancer, removeFromCartEnhancer, singleItemEnhancer)(AddToCart);
+export default compose(userEnhancer, addToCartEnhancer)(AddToCart);
diff --git a/frontend/components/CartCount.js b/frontend/components/CartCount.js
index 245b07b..7949307 100644
--- a/frontend/components/CartCount.js
+++ b/frontend/components/CartCount.js
@@ -50,3 +50,4 @@ const CartCount = ({ count }) => (
 );
 
 export default CartCount;
+export { CartCount };
diff --git a/frontend/components/Count.js b/frontend/components/Count.js
index 800a902..7dfd33f 100644
--- a/frontend/components/Count.js
+++ b/frontend/components/Count.js
@@ -1,3 +1,4 @@
+// TODO THis is not needed
 import React, { Component } from 'react'
 import { graphql, gql } from 'react-apollo'
 
@@ -33,5 +34,4 @@ class Count extends Component {
 
 // We export the graphQL HOC - this will fetch the data and inject it into the Count compeont via props
 
-export { ALL_ITEMS_QUERY }
-export default graphql(ALL_ITEMS_QUERY, { name: 'allLinksQuery' }) (Count)
+export default graphql(ALL_ITEMS_QUERY, { name: 'allLinksQuery' })(Count)
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index 26b2c88..74a6cee 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -1,33 +1,41 @@
 import React, { Component } from 'react';
 import { graphql, gql } from 'react-apollo';
-import { ALL_ITEMS_QUERY, CREATE_ITEM_MUTATION } from '../queries';
+import { CREATE_ITEM_MUTATION } from '../queries';
 import ErrorMessage from './ErrorMessage';
-import { fileEndpoint } from '../config';
 import Form from './styles/Form';
+import PropTypes from 'prop-types';
+
+class CreateItem extends Component {
+  static propTypes = {
+    createItemMutation: PropTypes.func.isRequired,
+  };
 
-class CreateLink extends Component {
   state = {
-    description: 'test',
-    title: 'testing title',
-    image: '',
-    largeImage: '',
-    price: 500,
-    fullPrice: 0,
+    item: {
+      title: '',
+      description: '',
+      image: '',
+      largeImage: '',
+      price: 0,
+    },
     loading: false,
     error: {
-      message: '',
+      message: null,
     },
   };
 
-  componentWillReceiveProps(nextProps) {
-    console.log(nextProps);
-  }
+  handleChange = e => {
+    const { name, value, type } = e.target;
+    const updatedItem = {
+      ...this.state.item,
+      [name]: type === 'number' ? parseFloat(value) : value,
+    };
+    this.setState({ item: updatedItem });
+  };
 
   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');
@@ -38,33 +46,23 @@ class CreateLink extends Component {
       body: data,
     });
     const file = await res.json();
-    console.log(file);
     this.setState({ image: file.secure_url, largeImage: file.eager[0].secure_url, loading: false });
   };
 
   createItem = async e => {
     e.preventDefault();
-    // pull the values from state
-    const { description, title, price, image, largeImage } = this.state;
-    // create a mutation
     // TODO: handle any errors
     // turn loading on
     this.setState({ loading: true });
     try {
-      console.log('About to call create item mutation');
       const res = await this.props.createItemMutation({
         // pass in those variables from state
         variables: {
-          description,
-          title,
-          image,
-          largeImage,
-          price: parseInt(price),
+          ...this.state.item,
         },
       });
     } catch (error) {
       this.setState({ error });
-      console.log(error);
     }
     this.setState({ loading: false });
   };
@@ -84,23 +82,29 @@ class CreateLink extends Component {
             Title
             <input
               value={this.state.title}
-              onChange={e => this.setState({ title: e.target.value })}
+              onChange={this.handleChange}
               type="text"
+              name="title"
+              id="title"
               placeholder="Title"
             />
           </p>
           <label>
-            Price<input
+            Price
+            <input
               type="number"
+              id="price"
+              name="price"
               min="0"
               value={this.state.price}
-              onChange={e => this.setState({ price: e.target.value })}
+              onChange={this.handleChange}
             />
           </label>
           <textarea
+            id="description"
+            name="description"
             value={this.state.description}
-            onChange={e => this.setState({ description: e.target.value })}
-            type="text"
+            onChange={this.handleChange}
             placeholder="The desc for this item"
           />
           <button disabled={this.state.loading} type="submit">
@@ -117,4 +121,6 @@ export default graphql(CREATE_ITEM_MUTATION, {
   options: {
     refetchQueries: ['AllItemsQuery'],
   },
-})(CreateLink);
+})(CreateItem);
+
+export { CreateItem };
diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index 935930d..33b3951 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -1,10 +1,8 @@
 import React from 'react';
-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 'next/link';
+import Title from './styles/Title';
 import AddToCart from './AddToCart';
 import formatMoney from '../lib/formatMoney';
 import { removeItemMutation } from '../enhancers/enhancers';
@@ -101,4 +99,5 @@ class ItemComponent extends React.Component {
   }
 }
 
+export { ItemComponent };
 export default compose(removeItemMutation)(ItemComponent);
diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index 01d9786..1b0c8bb 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -18,7 +18,7 @@ const Center = styled.div`
 `;
 
 class ItemList extends React.Component {
-  something() { }
+  something() {}
   render() {
     const { loading, error } = this.props.itemsQuery;
     // 1
@@ -31,7 +31,6 @@ class ItemList extends React.Component {
       console.log(this.props.itemsQuery.error);
       return <div>Error</div>;
     }
-    console.log(this.props);
     // 3
     const itemsToRender = this.props.itemsQuery.items;
 
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index aa0300b..3d7f0f6 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -1,8 +1,9 @@
+import React, { Fragment } from 'react';
 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 PropTypes from 'prop-types';
+import { userEnhancer } from '../enhancers/enhancers';
 import CartCount from './CartCount';
 import Signout from './Signout';
 import { UIContext } from './UIContext';
@@ -58,6 +59,9 @@ const StyledUl = styled.ul`
 `;
 
 class Nav extends React.Component {
+  static propTypes = {
+    currentUser: PropTypes.object.isRequired,
+  };
   componentDidMount() {
     this.props.currentUser.refetch();
   }
@@ -106,3 +110,4 @@ class Nav extends React.Component {
 }
 
 export default compose(userEnhancer)(Nav);
+export { Nav };
diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index dab7084..abc22d0 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { compose } from 'react-apollo';
 import styled from 'styled-components';
 import Link from 'next/link';
+import PropTypes from 'prop-types';
 import { itemEnhancer } from '../enhancers/enhancers';
 import { perPage } from '../config';
 
@@ -30,12 +31,11 @@ const PaginationStyles = styled.div`
 `;
 
 const Pagination = props => {
-  if (props.loading) return <p>Loading Item...</p>;
-  const { aggregate, pageInfo } = props.itemsQuery.itemsConnection;
+  if (props.loading) return <p>Loading...</p>;
+  const { aggregate } = props.itemsQuery.itemsConnection;
   const { page } = props;
-
   const pages = Math.ceil(aggregate.count / perPage);
-  console.log({ pageInfo });
+
   return (
     <PaginationStyles>
       <Link
@@ -45,10 +45,12 @@ const Pagination = props => {
           query: { page: page - 1 },
         }}
       >
-        <a aria-disabled={page <= 1}>←Prev</a>
+        <a className="prev" aria-disabled={page <= 1}>
+          ←Prev
+        </a>
       </Link>
       <p>
-        Page <strong>{page} </strong> of <strong>{pages} </strong>
+        Page <strong>{page} </strong> of <strong className="totalPages">{pages}</strong>
       </p>
       <p>
         <strong>{aggregate.count}</strong> Items Total
@@ -60,12 +62,24 @@ const Pagination = props => {
           query: { page: page + 1 },
         }}
       >
-        <a aria-disabled={page >= pages}>Next →</a>
+        <a className="next" aria-disabled={page >= pages}>
+          Next →
+        </a>
       </Link>
     </PaginationStyles>
   );
 };
 
-const ComponentWithMutations = compose(itemEnhancer)(Pagination);
+Pagination.propTypes = {
+  itemsQuery: PropTypes.shape({
+    itemsConnection: PropTypes.shape({
+      aggregate: PropTypes.shape({
+        count: PropTypes.number.isRequired,
+      }),
+    }),
+  }).isRequired,
+  page: PropTypes.number.isRequired,
+};
 
-export default ComponentWithMutations;
+export default compose(itemEnhancer)(Pagination);
+export { Pagination };
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index 33017dd..d30789c 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -1,15 +1,15 @@
 import Downshift from 'downshift';
 import { graphql, compose } from 'react-apollo';
-import slugify from 'slugify';
 import styled from 'styled-components';
 import { SEARCH_ITEMS_QUERY } from '../queries';
 import { Router } from '../routes';
 
 function routeToItem(item) {
-  Router.pushRoute('item', {
-    slug: slugify(item.title),
-    itemId: item.id,
-  });
+  console.log('TODO: UPdate routeToItem function');
+  // Router.pushRoute('item', {
+  //   slug: slugify(item.title),
+  //   itemId: item.id,
+  // });
 }
 
 const DropDown = styled.div`
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index add1707..f591f55 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -1,13 +1,11 @@
-import { graphql, compose } from 'react-apollo';
-import { SINGLE_ITEM_QUERY } from '../queries';
+import { compose } from 'react-apollo';
 import { singleItemEnhancer } from '../enhancers/enhancers';
 
-const SingleItem = props => {
-  console.log(props);
-  if (props.loading) return <p>Loading...</p>;
-  if (props.error) return <p>Error...</p>;
-  const item = props.findItem.items[0];
-  console.log(item);
+const SingleItem = ({ findItem: { error, loading, items } }) => {
+  if (loading) return <p>Loading...</p>;
+  if (error) return <p>Error...</p>;
+  const item = items[0];
+
   return (
     <div>
       <img src={item.largeImage || item.image} alt={item.title} />
@@ -17,6 +15,4 @@ const SingleItem = props => {
   );
 };
 
-const ComponentWithMutations = compose(singleItemEnhancer)(SingleItem);
-
-export default ComponentWithMutations;
+export default compose(singleItemEnhancer)(SingleItem);
diff --git a/frontend/components/styles/Form.js b/frontend/components/styles/Form.js
index db0eeb4..09085ad 100644
--- a/frontend/components/styles/Form.js
+++ b/frontend/components/styles/Form.js
@@ -37,4 +37,7 @@ const Form = styled.form`
     padding: 1rem 2rem;
   }
 `;
+
+Form.displayName = 'Form';
+
 export default Form;
-- 
cgit v1.3