From fd01f1939b8db1e2da911b058f685cdb01bf3e71 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Fri, 13 Apr 2018 11:03:27 -0400 Subject: Death to index --- frontend/components/AddToCart.js | 2 +- frontend/components/Cart.js | 2 +- frontend/components/DeleteItem.js | 2 +- frontend/components/EditUser.js | 9 +- frontend/components/Item.js | 4 +- frontend/components/Items.js | 2 +- frontend/components/Nav.js | 2 +- frontend/components/Pagination.js | 2 +- frontend/components/Permissions.js | 2 +- frontend/components/PleaseSignIn.js | 2 +- frontend/components/RemoveFromCart.js | 2 +- frontend/components/SingleItem.js | 2 +- frontend/lib/withData.js | 2 +- frontend/notes.md | 32 ---- frontend/queries/fragments.js | 12 -- frontend/queries/index.js | 277 -------------------------------- frontend/queries/queries.js | 287 ++++++++++++++++++++++++++++++++++ 17 files changed, 308 insertions(+), 335 deletions(-) delete mode 100644 frontend/queries/fragments.js delete mode 100644 frontend/queries/index.js create mode 100644 frontend/queries/queries.js (limited to 'frontend') 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 {
me: 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.image ? {item.title} : null} + {item.image && {item.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/index.js deleted file mode 100644 index f4442b1..0000000 --- a/frontend/queries/index.js +++ /dev/null @@ -1,277 +0,0 @@ -import gql from 'graphql-tag'; -import { itemDetails } from './fragments'; -import { perPage } from '../config'; - -export const CREATE_ITEM_MUTATION = gql` - ${itemDetails} - mutation createItem($description: String!, $title: String!, $price: Int!, $image: String, $largeImage: String) { - createItem(description: $description, title: $title, price: $price, image: $image, largeImage: $largeImage) { - ...itemDetails - } - } -`; - -export const SIGNUP_MUTATION = gql` - mutation signup($email: String!, $name: String!, $password: String!) { - signup(email: $email, name: $name, password: $password) { - token - user { - id - email - name - } - } - } -`; - -export const SIGNIN_MUTATION = gql` - mutation signup($email: String!, $password: String!) { - signin(email: $email, password: $password) { - token - user { - id - email - name - } - } - } -`; - -export const REQUEST_RESET_MUTATION = gql` - mutation requestReset($email: String!) { - requestReset(email: $email) { - id - } - } -`; - -export const RESET_MUTATION = gql` - mutation resetPassword($resetToken: String!, $password: String!, $confirmPassword: String!) { - resetPassword(resetToken: $resetToken, password: $password, confirmPassword: $confirmPassword) { - token - user { - id - email - name - } - } - } -`; - -export const CREATE_ORDER_MUTATION = gql` - mutation CreateOrderMutation($token: String!) { - createOrder(token: $token) { - id - charge - total - items { - id - title - } - } - } -`; - -export const ALL_ITEMS_QUERY = gql` - # Import the Fragment - ${itemDetails} - query AllItemsQuery($skip: Int = 0, $first: Int = ${perPage}) { - itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) @connection(key: "itemsConnection") { - aggregate { - count - } - } - items(orderBy: createdAt_DESC, first: $first, skip: $skip) @connection(key: "items") { - ...itemDetails - } - } -`; - -export const SINGLE_ITEM_QUERY = gql` - ${itemDetails} - query FindItem($id: ID!) { - items(where: { id: $id }) { - user { - id - email - name - } - ...itemDetails - } - } -`; - -export const SINGLE_ORDER_QUERY = gql` - query order($id: ID!) { - order(id: $id) { - id - charge - total - createdAt - user { - id - } - items { - id - title - price - description - image - quantity - } - } - } -`; - -export const SEARCH_ITEMS_QUERY = gql` - ${itemDetails} - query SearchItems($searchTerm: String!) { - items( - where: { - OR: [ - { title_contains: $searchTerm } - { description_contains: $searchTerm } - ] - } - ) { - ...itemDetails - } - } -`; - -export const REMOVE_ITEM_MUTATION = gql` - mutation RemoveItem($id: ID!) { - deleteItem(id: $id) { - id - title - description - } - } -`; - -export const UPDATE_ITEM_MUTATION = gql` - ${itemDetails} - mutation UpdateItem( - $id: ID! - $title: String - $description: String - $price: Int - ) { - updateItem( - id: $id - description: $description - title: $title - price: $price - ) { - ...itemDetails - } - } -`; - -export const UPDATE_USER_MUTATION = gql` - mutation UpdateUser($name: String!) { - updateUser(name: $name) { - name - } - } -`; - -export const CURRENT_USER_QUERY = gql` - ${itemDetails} - query userQuery { - me { - id - email - name - permissions - orders { - charge - id - total - } - cart { - id - quantity - item { - ...itemDetails - } - } - } - } -`; - -export const USER_ORDERS_QUERY = gql` - query orders { - orders(orderBy: createdAt_DESC) { - id - total - createdAt - updatedAt - items { - id - title - price - description - quantity - image - } - } - } -`; - -export const ADD_TO_CART_MUTATION = gql` - mutation addToCart($id: ID!) { - addToCart(id: $id) { - id - quantity - item { - id - price - description - image - title - } - } - } -`; - -export const REMOVE_FROM_CART_MUTATION = gql` - mutation removeFromCart($id: ID!) { - removeFromCart(id: $id) { - id - } - } -`; - -export const ALL_USERS_QUERY = gql` - query Users { - users { - id - name - email - permissions - } - } -`; - -export const UPDATE_PERMISSIONS_MUTATION = gql` - mutation updatePermissions($permissions: [Permission], $userId: ID!) { - updatePermissions(permissions: $permissions, userId: $userId) { - id - permissions - name - email - } - } -`; - -export const LOCAL_STATE_QUERY = gql` - { - cartOpen @client - } -`; -export const TOGGLE_CART_MUTATION = gql` - mutation toggleCart { - toggleCart @client - } -`; diff --git a/frontend/queries/queries.js b/frontend/queries/queries.js new file mode 100644 index 0000000..22f77fb --- /dev/null +++ b/frontend/queries/queries.js @@ -0,0 +1,287 @@ +import gql from 'graphql-tag'; +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) { + createItem(description: $description, title: $title, price: $price, image: $image, largeImage: $largeImage) { + ...itemDetails + } + } +`; + +export const SIGNUP_MUTATION = gql` + mutation signup($email: String!, $name: String!, $password: String!) { + signup(email: $email, name: $name, password: $password) { + token + user { + id + email + name + } + } + } +`; + +export const SIGNIN_MUTATION = gql` + mutation signup($email: String!, $password: String!) { + signin(email: $email, password: $password) { + token + user { + id + email + name + } + } + } +`; + +export const REQUEST_RESET_MUTATION = gql` + mutation requestReset($email: String!) { + requestReset(email: $email) { + id + } + } +`; + +export const RESET_MUTATION = gql` + mutation resetPassword($resetToken: String!, $password: String!, $confirmPassword: String!) { + resetPassword(resetToken: $resetToken, password: $password, confirmPassword: $confirmPassword) { + token + user { + id + email + name + } + } + } +`; + +export const CREATE_ORDER_MUTATION = gql` + mutation CreateOrderMutation($token: String!) { + createOrder(token: $token) { + id + charge + total + items { + id + title + } + } + } +`; + +export const ALL_ITEMS_QUERY = gql` + # Import the Fragment + ${itemDetails} + query AllItemsQuery($skip: Int = 0, $first: Int = ${perPage}) { + itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) @connection(key: "itemsConnection") { + aggregate { + count + } + } + items(orderBy: createdAt_DESC, first: $first, skip: $skip) @connection(key: "items") { + ...itemDetails + } + } +`; + +export const SINGLE_ITEM_QUERY = gql` + ${itemDetails} + query FindItem($id: ID!) { + items(where: { id: $id }) { + user { + id + email + name + } + ...itemDetails + } + } +`; + +export const SINGLE_ORDER_QUERY = gql` + query order($id: ID!) { + order(id: $id) { + id + charge + total + createdAt + user { + id + } + items { + id + title + price + description + image + quantity + } + } + } +`; + +export const SEARCH_ITEMS_QUERY = gql` + ${itemDetails} + query SearchItems($searchTerm: String!) { + items( + where: { + OR: [ + { title_contains: $searchTerm } + { description_contains: $searchTerm } + ] + } + ) { + ...itemDetails + } + } +`; + +export const REMOVE_ITEM_MUTATION = gql` + mutation RemoveItem($id: ID!) { + deleteItem(id: $id) { + id + title + description + } + } +`; + +export const UPDATE_ITEM_MUTATION = gql` + ${itemDetails} + mutation UpdateItem( + $id: ID! + $title: String + $description: String + $price: Int + ) { + updateItem( + id: $id + description: $description + title: $title + price: $price + ) { + ...itemDetails + } + } +`; + +export const UPDATE_USER_MUTATION = gql` + mutation UpdateUser($name: String!) { + updateUser(name: $name) { + name + } + } +`; + +export const CURRENT_USER_QUERY = gql` + ${itemDetails} + query userQuery { + me { + id + email + name + permissions + orders { + charge + id + total + } + cart { + id + quantity + item { + ...itemDetails + } + } + } + } +`; + +export const USER_ORDERS_QUERY = gql` + query orders { + orders(orderBy: createdAt_DESC) { + id + total + createdAt + updatedAt + items { + id + title + price + description + quantity + image + } + } + } +`; + +export const ADD_TO_CART_MUTATION = gql` + mutation addToCart($id: ID!) { + addToCart(id: $id) { + id + quantity + item { + id + price + description + image + title + } + } + } +`; + +export const REMOVE_FROM_CART_MUTATION = gql` + mutation removeFromCart($id: ID!) { + removeFromCart(id: $id) { + id + } + } +`; + +export const ALL_USERS_QUERY = gql` + query Users { + users { + id + name + email + permissions + } + } +`; + +export const UPDATE_PERMISSIONS_MUTATION = gql` + mutation updatePermissions($permissions: [Permission], $userId: ID!) { + updatePermissions(permissions: $permissions, userId: $userId) { + id + permissions + name + email + } + } +`; + +export const LOCAL_STATE_QUERY = gql` + { + cartOpen @client + } +`; +export const TOGGLE_CART_MUTATION = gql` + mutation toggleCart { + toggleCart @client + } +`; -- cgit v1.3