From 632af35d8a0871ca8c1041d0e14d63e2b457d168 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 10 May 2018 16:02:07 -0400
Subject: Styles

---
 frontend/components/CartCount.js    |  4 ++++
 frontend/components/CreateItem.js   | 19 ++++++++++++-------
 frontend/components/DeleteItem.js   |  1 -
 frontend/components/EditUser.js     |  2 +-
 frontend/components/ErrorMessage.js | 11 +++++++----
 frontend/components/Header.js       |  4 ++--
 frontend/components/LoadingItem.js  |  6 ------
 frontend/components/Nav.js          |  4 +---
 frontend/components/Permissions.js  |  9 ++++++++-
 frontend/components/PleaseSignIn.js |  7 ++++++-
 frontend/components/Reset.js        |  3 +--
 frontend/components/ResetRequest.js |  4 ++--
 frontend/components/Search.js       |  3 ++-
 frontend/components/Signin.js       |  4 ++--
 frontend/components/SingleItem.js   |  3 +--
 frontend/components/TakeMyMoney.js  |  5 +++++
 frontend/components/UpdateItem.js   |  7 +++++--
 17 files changed, 59 insertions(+), 37 deletions(-)

(limited to 'frontend/components')

diff --git a/frontend/components/CartCount.js b/frontend/components/CartCount.js
index 525ed22..ae51f20 100644
--- a/frontend/components/CartCount.js
+++ b/frontend/components/CartCount.js
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import PropTypes from 'prop-types';
 
 const Dot = styled.div`
   background: ${props => props.theme.red};
@@ -57,4 +58,7 @@ const CartCount = ({ count }) => (
   </AnimationStyles>
 );
 
+CartCount.propTypes = {
+  count: PropTypes.number.isRequired,
+};
 export default CartCount;
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index 2aabb5b..b40932c 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
 import { Mutation } from 'react-apollo';
-import { CREATE_ITEM_MUTATION, ALL_ITEMS_QUERY } from '../queries/queries';
+import Router from 'next/router';
+import { CREATE_ITEM_MUTATION } from '../queries/queries';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
-import PropTypes from 'prop-types';
-import Router from 'next/router';
 import formatMoney from '../lib/formatMoney';
 
 class CreateItem extends Component {
@@ -66,14 +65,20 @@ class CreateItem extends Component {
             <h2>Sell an Item.</h2>
             <Error error={error} />
             <fieldset disabled={loading} aria-busy={loading}>
-              <label>
+              <label htmlFor="file">
                 Image
-                <input required onChange={this.uploadFile} type="file" accept=".png, .jpg, .jpeg" />
+                <input
+                  required
+                  id="file"
+                  onChange={this.uploadFile}
+                  type="file"
+                  accept=".png, .jpg, .jpeg"
+                />
                 {this.state.image ? (
                   <img src={this.state.image} width="100" alt={this.state.title} />
                 ) : null}
               </label>
-              <label>
+              <label htmlFor="title">
                 Title
                 <input
                   required
@@ -85,7 +90,7 @@ class CreateItem extends Component {
                   placeholder="Title"
                 />
               </label>
-              <label>
+              <label htmlFor="price">
                 Price {this.state.price && formatMoney(this.state.price)}
                 <input
                   required
diff --git a/frontend/components/DeleteItem.js b/frontend/components/DeleteItem.js
index cf2daf5..0f00d8d 100644
--- a/frontend/components/DeleteItem.js
+++ b/frontend/components/DeleteItem.js
@@ -2,7 +2,6 @@ import React from 'react';
 import { Mutation } from 'react-apollo';
 import PropTypes from 'prop-types';
 import { REMOVE_ITEM_MUTATION, ALL_ITEMS_QUERY } from '../queries/queries';
-import Error from './ErrorMessage';
 
 class DeleteItem extends React.Component {
   static propTypes = {
diff --git a/frontend/components/EditUser.js b/frontend/components/EditUser.js
index 506966b..aea890c 100644
--- a/frontend/components/EditUser.js
+++ b/frontend/components/EditUser.js
@@ -37,7 +37,7 @@ class EditUser extends React.Component {
               refetchQueries={[{ query: CURRENT_USER_QUERY }]}
               variables={this.state.changes}
             >
-              {(updateUser, { loading, error, called, data }) => (
+              {(updateUser, { error, called }) => (
                 <Form onSubmit={e => this.handleSubmit(e, updateUser)}>
                   <Error error={error} />
                   <fieldset disabled={loading} aria-busy={loading}>
diff --git a/frontend/components/ErrorMessage.js b/frontend/components/ErrorMessage.js
index d65f51d..52d59a8 100644
--- a/frontend/components/ErrorMessage.js
+++ b/frontend/components/ErrorMessage.js
@@ -18,7 +18,7 @@ const ErrorStyles = styled.div`
   }
 `;
 
-const DisplayError = ({ error, refetch }) => {
+const DisplayError = ({ error }) => {
   if (!error || !error.message) return null;
   if (error.networkError && error.networkError.result && error.networkError.result.errors.length) {
     return error.networkError.result.errors.map((error, i) => (
@@ -31,16 +31,19 @@ const DisplayError = ({ error, refetch }) => {
     ));
   }
   return (
-    <StyledError>
+    <ErrorStyles>
       <p data-test="graphql-error">
         <strong>Shoot!</strong>
         {error.message.replace('GraphQL error: ', '')}
-        <button onClick={refetch}>Try Again</button>
       </p>
-    </StyledError>
+    </ErrorStyles>
   );
 };
 
+DisplayError.defaultProps = {
+  error: {},
+};
+
 DisplayError.propTypes = {
   error: PropTypes.object,
 };
diff --git a/frontend/components/Header.js b/frontend/components/Header.js
index 4e631a0..bb05c34 100644
--- a/frontend/components/Header.js
+++ b/frontend/components/Header.js
@@ -7,7 +7,7 @@ import Cart from './Cart';
 import Search from './Search';
 import Nav from './Nav';
 
-Router.onRouteChangeStart = url => {
+Router.onRouteChangeStart = () => {
   NProgress.start();
 };
 Router.onRouteChangeComplete = () => NProgress.done();
@@ -51,7 +51,7 @@ const Logo = styled.h1`
   }
 `;
 
-const Header = props => (
+const Header = () => (
   <StyledHeader>
     <div className="bar">
       <Logo>
diff --git a/frontend/components/LoadingItem.js b/frontend/components/LoadingItem.js
index 5ba78d8..5736337 100644
--- a/frontend/components/LoadingItem.js
+++ b/frontend/components/LoadingItem.js
@@ -1,12 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import Link from 'next/link';
 import Title from './styles/Title';
-import AddToCart from './AddToCart';
-import DeleteItem from './DeleteItem';
-import formatMoney from '../lib/formatMoney';
 import ItemStyles from './styles/ItemStyles';
-import PriceTag from './styles/PriceTag';
 
 class LoadingItem extends React.Component {
   render() {
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index 89a7c4c..718884a 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -1,11 +1,9 @@
 import React, { Fragment } from 'react';
 import Link from 'next/link';
-import styled from 'styled-components';
-import { Query } from 'react-apollo';
+import { Query, ApolloConsumer } from 'react-apollo';
 import { CURRENT_USER_QUERY } from '../queries/queries';
 import CartCount from './CartCount';
 import Signout from './Signout';
-import { ApolloConsumer } from 'react-apollo';
 
 import NavStyles from './styles/NavStyles';
 
diff --git a/frontend/components/Permissions.js b/frontend/components/Permissions.js
index 96c6408..dc5b246 100644
--- a/frontend/components/Permissions.js
+++ b/frontend/components/Permissions.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Query, Mutation } from 'react-apollo';
+import PropTypes from 'prop-types';
 import { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION } from '../queries/queries';
 import Error from './ErrorMessage';
 import SickButton from './styles/SickButton';
@@ -15,6 +16,12 @@ const possiblePermissions = [
 ];
 
 class User extends React.Component {
+  static propTypes = {
+    user: PropTypes.shape({
+      permissions: PropTypes.array.isRequired,
+      id: PropTypes.string.isRequired,
+    }).isRequired,
+  };
   state = {
     permissions: this.props.user.permissions,
   };
@@ -57,7 +64,7 @@ class User extends React.Component {
                 type="button"
                 disabled={loading}
                 onClick={async () => {
-                  const res = await updatePermissions({
+                  await updatePermissions({
                     variables: {
                       permissions: this.state.permissions,
                       userId: this.props.user.id,
diff --git a/frontend/components/PleaseSignIn.js b/frontend/components/PleaseSignIn.js
index 6be17cb..9933d49 100644
--- a/frontend/components/PleaseSignIn.js
+++ b/frontend/components/PleaseSignIn.js
@@ -1,7 +1,7 @@
 import { Query } from 'react-apollo';
+import PropTypes from 'prop-types';
 import { CURRENT_USER_QUERY } from '../queries/queries';
 import Signin from './Signin';
-import Dump from './Dump';
 
 const PleaseSignIn = props => (
   <Query query={CURRENT_USER_QUERY}>
@@ -38,4 +38,9 @@ const PleaseSignIn = props => (
   </Query>
 );
 
+PleaseSignIn.propTypes = {
+  allowedPermissions: PropTypes.array.isRequired,
+  children: PropTypes.any.isRequired,
+};
+
 export default PleaseSignIn;
diff --git a/frontend/components/Reset.js b/frontend/components/Reset.js
index 94a2ba2..4c20cd2 100644
--- a/frontend/components/Reset.js
+++ b/frontend/components/Reset.js
@@ -23,7 +23,6 @@ class Reset extends React.Component {
   resetPassword = async (e, resetMutation) => {
     e.preventDefault();
     const res = await resetMutation();
-    console.log(res);
     // sign them in!
     localStorage.setItem('token', res.data.resetPassword.token);
     // TODO: Manually call refresh on a Query
@@ -40,7 +39,7 @@ class Reset extends React.Component {
         }}
         refetchQueries={[{ query: CURRENT_USER_QUERY }]}
       >
-        {(resetMutation, { error, loading, called }) => (
+        {(resetMutation, { error, loading }) => (
           <Form onSubmit={e => this.resetPassword(e, resetMutation)}>
             <Error error={error} />
             <fieldset disabled={loading} aria-busy={loading}>
diff --git a/frontend/components/ResetRequest.js b/frontend/components/ResetRequest.js
index d25e94a..e655148 100644
--- a/frontend/components/ResetRequest.js
+++ b/frontend/components/ResetRequest.js
@@ -12,11 +12,11 @@ class ResetRequest extends React.Component {
   render() {
     return (
       <Mutation mutation={REQUEST_RESET_MUTATION} variables={this.state}>
-        {(resetMutation, { loading, error, called, data }) => (
+        {(resetMutation, { loading, error, called }) => (
           <Form
             onSubmit={async e => {
               e.preventDefault();
-              const res = await resetMutation();
+              await resetMutation();
             }}
             data-test="ResetRequest"
           >
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index b9ed409..74aa410 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -1,9 +1,10 @@
+import React from 'react';
 import Downshift from 'downshift';
 import Router from 'next/router';
+import { ApolloConsumer } from 'react-apollo';
 import styled, { keyframes } from 'styled-components';
 import debounce from 'lodash.debounce';
 import { SEARCH_ITEMS_QUERY } from '../queries/queries';
-import { ApolloConsumer } from 'react-apollo';
 
 function routeToItem(item) {
   Router.push({
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index 78da284..77acc47 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Mutation, Query, ApolloConsumer } from 'react-apollo';
+import { Mutation, ApolloConsumer } from 'react-apollo';
 import { SIGNIN_MUTATION, CURRENT_USER_QUERY } from '../queries/queries';
 import Error from './ErrorMessage';
 import Form from './styles/Form';
@@ -28,7 +28,7 @@ class Signin extends Component {
       <ApolloConsumer>
         {client => (
           <Mutation mutation={SIGNIN_MUTATION} variables={this.state}>
-            {(signin, { data, loading, error }) => (
+            {(signin, { loading, error }) => (
               <Form onSubmit={e => this.loginUser(e, signin, client)}>
                 <Error error={error} />
                 <fieldset disabled={loading} aria-busy={loading}>
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index 4550b84..c619486 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -1,9 +1,8 @@
 import { Query } from 'react-apollo';
 import PropTypes from 'prop-types';
-import { SINGLE_ITEM_QUERY } from '../queries/queries';
 import styled from 'styled-components';
 import Link from 'next/link';
-import Dump from './Dump';
+import { SINGLE_ITEM_QUERY } from '../queries/queries';
 import Error from './ErrorMessage';
 
 const SingleItemStyles = styled.div`
diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js
index fb5f727..cadcabb 100644
--- a/frontend/components/TakeMyMoney.js
+++ b/frontend/components/TakeMyMoney.js
@@ -3,6 +3,7 @@ import StripeCheckout from 'react-stripe-checkout';
 import { Mutation, Query } from 'react-apollo';
 import Router from 'next/router';
 import NProgress from 'nprogress';
+import PropTypes from 'prop-types';
 import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries/queries';
 import calcTotalPrice from '../lib/calcTotalPrice';
 import Error from './ErrorMessage';
@@ -60,4 +61,8 @@ class TakeMyMoney extends Component {
   }
 }
 
+TakeMyMoney.propTypes = {
+  children: PropTypes.any.isRequired,
+};
+
 export default TakeMyMoney;
diff --git a/frontend/components/UpdateItem.js b/frontend/components/UpdateItem.js
index 31b094c..7639518 100644
--- a/frontend/components/UpdateItem.js
+++ b/frontend/components/UpdateItem.js
@@ -1,11 +1,14 @@
 import React, { Component } from 'react';
 import { Query, Mutation } from 'react-apollo';
+import PropTypes from 'prop-types';
 import { SINGLE_ITEM_QUERY, UPDATE_ITEM_MUTATION } from '../queries/queries';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
-import Dump from './Dump';
 
 class UpdateItem extends Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+  };
   state = {
     item: {},
   };
@@ -44,7 +47,7 @@ class UpdateItem extends Component {
           const [item] = items;
           return (
             <Mutation mutation={UPDATE_ITEM_MUTATION}>
-              {(updateItemMutation, { error, loading }) => (
+              {(updateItemMutation, { error }) => (
                 <Form onSubmit={e => this.updateItem(e, updateItemMutation)}>
                   <Error error={error} />
                   <h2>Edit {item.title}</h2>
-- 
cgit v1.3