diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/components/AddToCart.js | 2 | ||||
| -rw-r--r-- | frontend/components/Cart.js | 2 | ||||
| -rw-r--r-- | frontend/components/DeleteItem.js | 2 | ||||
| -rw-r--r-- | frontend/components/EditUser.js | 9 | ||||
| -rw-r--r-- | frontend/components/Item.js | 4 | ||||
| -rw-r--r-- | frontend/components/Items.js | 2 | ||||
| -rw-r--r-- | frontend/components/Nav.js | 2 | ||||
| -rw-r--r-- | frontend/components/Pagination.js | 2 | ||||
| -rw-r--r-- | frontend/components/Permissions.js | 2 | ||||
| -rw-r--r-- | frontend/components/PleaseSignIn.js | 2 | ||||
| -rw-r--r-- | frontend/components/RemoveFromCart.js | 2 | ||||
| -rw-r--r-- | frontend/components/SingleItem.js | 2 | ||||
| -rw-r--r-- | frontend/lib/withData.js | 2 | ||||
| -rw-r--r-- | frontend/notes.md | 32 | ||||
| -rw-r--r-- | frontend/queries/fragments.js | 12 | ||||
| -rw-r--r-- | frontend/queries/queries.js (renamed from frontend/queries/index.js) | 12 |
16 files changed, 32 insertions, 59 deletions
diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js index 18186d8..01f9dc1 100644 --- a/frontend/components/AddToCart.js +++ b/frontend/components/AddToCart.js @@ -1,7 +1,7 @@ import { Component } from 'react'; import { Mutation } from 'react-apollo'; import PropTypes from 'prop-types'; -import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY } from '../queries/index'; +import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY } from 'queries'; class AddToCart extends Component { static propTypes = { diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js index 7dbea8f..fb902a7 100644 --- a/frontend/components/Cart.js +++ b/frontend/components/Cart.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import TakeMyMoney from './TakeMyMoney'; import formatMoney from '../lib/formatMoney'; import CartItem from './CartItem'; -import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION } from '../queries/index'; +import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION } from '../queries/queries'; import calcTotalPrice from '../lib/calcTotalPrice'; const CartStyles = styled.div` diff --git a/frontend/components/DeleteItem.js b/frontend/components/DeleteItem.js index e854340..cf2daf5 100644 --- a/frontend/components/DeleteItem.js +++ b/frontend/components/DeleteItem.js @@ -1,7 +1,7 @@ import React from 'react'; import { Mutation } from 'react-apollo'; import PropTypes from 'prop-types'; -import { REMOVE_ITEM_MUTATION, ALL_ITEMS_QUERY } from '../queries/index'; +import { REMOVE_ITEM_MUTATION, ALL_ITEMS_QUERY } from '../queries/queries'; import Error from './ErrorMessage'; class DeleteItem extends React.Component { diff --git a/frontend/components/EditUser.js b/frontend/components/EditUser.js index a7a8f1c..9449ba7 100644 --- a/frontend/components/EditUser.js +++ b/frontend/components/EditUser.js @@ -1,7 +1,7 @@ import React from 'react'; import { Query, Mutation } from 'react-apollo'; import Form from './styles/Form'; -import { CURRENT_USER_QUERY, UPDATE_USER_MUTATION } from '../queries/index'; +import { CURRENT_USER_QUERY, UPDATE_USER_MUTATION } from '../queries/queries'; import Error from './ErrorMessage'; class EditUser extends React.Component { @@ -43,7 +43,12 @@ class EditUser extends React.Component { <fieldset disabled={loading} aria-busy={loading}> <label htmlFor="name"> Name: - <input type="text" name="name" defaultValue={me.name} onChange={this.handleChange} /> + <input + type="text" + name="name" + defaultValue={me.name} + onChange={this.handleChange} + /> </label> <button type="submit">Update</button> <strong>me:</strong> diff --git a/frontend/components/Item.js b/frontend/components/Item.js index 99d8d93..87d24c4 100644 --- a/frontend/components/Item.js +++ b/frontend/components/Item.js @@ -17,6 +17,8 @@ const Item = styled.div` grid-auto-rows: fit-content; img { width: 100%; + height: 400px; + object-fit: cover; } p { font-size: 14px; @@ -64,7 +66,7 @@ class ItemComponent extends React.Component { const item = this.props.item; return ( <Item key={item.id}> - {item.image ? <img src={item.image} alt={item.title} /> : null} + {item.image && <img src={item.image} alt={item.title} />} <Title> <Link href={{ diff --git a/frontend/components/Items.js b/frontend/components/Items.js index 22e2d75..5768b6b 100644 --- a/frontend/components/Items.js +++ b/frontend/components/Items.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import Pagination from './Pagination'; import Item from './Item'; import { perPage } from '../config'; -import { ALL_ITEMS_QUERY } from '../queries/index'; +import { ALL_ITEMS_QUERY } from '../queries/queries'; const Items = styled.div` display: grid; diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js index eea29cb..a0bed90 100644 --- a/frontend/components/Nav.js +++ b/frontend/components/Nav.js @@ -2,7 +2,7 @@ import React, { Fragment } from 'react'; import Link from 'next/link'; import styled from 'styled-components'; import { Query } from 'react-apollo'; -import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY } from '../queries/index'; +import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY } from '../queries/queries'; import CartCount from './CartCount'; import Signout from './Signout'; import { ApolloConsumer } from 'react-apollo'; diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js index 64e749a..53ad36f 100644 --- a/frontend/components/Pagination.js +++ b/frontend/components/Pagination.js @@ -4,7 +4,7 @@ import styled from 'styled-components'; import Link from 'next/link'; import PropTypes from 'prop-types'; import { perPage } from '../config'; -import { ALL_ITEMS_QUERY, ITEM_COUNT_QUERY } from '../queries/index'; +import { ALL_ITEMS_QUERY, ITEM_COUNT_QUERY } from '../queries/queries'; const PaginationStyles = styled.div` text-align: center; diff --git a/frontend/components/Permissions.js b/frontend/components/Permissions.js index 69a621b..96c6408 100644 --- a/frontend/components/Permissions.js +++ b/frontend/components/Permissions.js @@ -1,6 +1,6 @@ import React from 'react'; import { Query, Mutation } from 'react-apollo'; -import { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION } from '../queries/index'; +import { ALL_USERS_QUERY, UPDATE_PERMISSIONS_MUTATION } from '../queries/queries'; import Error from './ErrorMessage'; import SickButton from './styles/SickButton'; import Table from './styles/Table'; diff --git a/frontend/components/PleaseSignIn.js b/frontend/components/PleaseSignIn.js index ff3b956..4a2eabe 100644 --- a/frontend/components/PleaseSignIn.js +++ b/frontend/components/PleaseSignIn.js @@ -1,5 +1,5 @@ import { Query } from 'react-apollo'; -import { CURRENT_USER_QUERY } from '../queries/index'; +import { CURRENT_USER_QUERY } from '../queries/queries'; import Signin from './Signin'; import Dump from './Dump'; diff --git a/frontend/components/RemoveFromCart.js b/frontend/components/RemoveFromCart.js index 752f0a8..9cd3a07 100644 --- a/frontend/components/RemoveFromCart.js +++ b/frontend/components/RemoveFromCart.js @@ -2,7 +2,7 @@ import { Component } from 'react'; import { Mutation } from 'react-apollo'; import styled from 'styled-components'; import PropTypes from 'prop-types'; -import { REMOVE_FROM_CART_MUTATION, CURRENT_USER_QUERY } from '../queries/index'; +import { REMOVE_FROM_CART_MUTATION, CURRENT_USER_QUERY } from '../queries/queries'; const BigButton = styled.button` font-size: 3rem; diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js index 53d5b9f..1c0cfce 100644 --- a/frontend/components/SingleItem.js +++ b/frontend/components/SingleItem.js @@ -1,6 +1,6 @@ import { Query } from 'react-apollo'; import PropTypes from 'prop-types'; -import { SINGLE_ITEM_QUERY } from '../queries/index'; +import { SINGLE_ITEM_QUERY } from '../queries/queries'; import Dump from './Dump'; import styled from 'styled-components'; import Link from 'next/link'; diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js index 93a0db1..e419078 100644 --- a/frontend/lib/withData.js +++ b/frontend/lib/withData.js @@ -1,6 +1,6 @@ import withApollo from 'next-with-apollo'; import ApolloClient from 'apollo-boost'; -import { LOCAL_STATE_QUERY } from '../queries/index'; +import { LOCAL_STATE_QUERY } from '../queries/queries'; // can also be a function that accepts a `headers` object (SSR only) and returns a config const client = new ApolloClient({ diff --git a/frontend/notes.md b/frontend/notes.md index 3b8c1da..9ea38ef 100644 --- a/frontend/notes.md +++ b/frontend/notes.md @@ -1,37 +1,5 @@ -## Link - -Before we use next-routes, our links look like this: - -```js - <Link - href={{ - pathname: 'item', - query: { - slug: slugify(item.title), - itemId: item.id, - }, - }} - > -``` - -Once we switch to next routes, our links look like this: - -```js -import { Link } from '../routes'; - -<Link - route="item" - params={{ - slug: slugify(item.title), - itemId: item.id, - }} -> -``` - ## Commonly Used Terms -Enhancer - These are just high order components that "infuse" the data we want into our components via props - Mutation Query diff --git a/frontend/queries/fragments.js b/frontend/queries/fragments.js deleted file mode 100644 index 74948d3..0000000 --- a/frontend/queries/fragments.js +++ /dev/null @@ -1,12 +0,0 @@ -import gql from 'graphql-tag'; - -export const itemDetails = gql` - fragment itemDetails on Item { - id - title - price - description - image - largeImage - } -`; diff --git a/frontend/queries/index.js b/frontend/queries/queries.js index f4442b1..22f77fb 100644 --- a/frontend/queries/index.js +++ b/frontend/queries/queries.js @@ -1,7 +1,17 @@ import gql from 'graphql-tag'; -import { itemDetails } from './fragments'; import { perPage } from '../config'; +const itemDetails = gql` + fragment itemDetails on Item { + id + title + price + description + image + largeImage + } +`; + export const CREATE_ITEM_MUTATION = gql` ${itemDetails} mutation createItem($description: String!, $title: String!, $price: Int!, $image: String, $largeImage: String) { |
