From eabff7cd396d1f37ceb929e666f082ce57f07919 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Fri, 2 Feb 2018 15:23:20 -0500 Subject: updateS --- frontend/.vscode/settings.json | 3 ++ frontend/components/CreateItem.js | 14 ++++---- frontend/components/Header.js | 16 ++++----- frontend/components/Item.js | 32 ++++++++++++------ frontend/components/Items.js | 48 ++++++++++++-------------- frontend/components/Nav.js | 7 ++-- frontend/components/Page.js | 14 ++++---- frontend/components/Pagination.js | 25 +++++++------- frontend/config.js | 2 +- frontend/enhancers/enhancers.js | 13 +++++++ frontend/pages/index.js | 15 +++++---- frontend/pages/items.js | 3 +- frontend/queries/fragments.js | 6 ---- frontend/queries/index.js | 71 +++++++++++++++++++++++++-------------- 14 files changed, 155 insertions(+), 114 deletions(-) create mode 100644 frontend/.vscode/settings.json create mode 100644 frontend/enhancers/enhancers.js (limited to 'frontend') diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json new file mode 100644 index 0000000..a92f73f --- /dev/null +++ b/frontend/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "eslint.enable": false +} \ No newline at end of file diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js index 27b62e5..e4aa77c 100644 --- a/frontend/components/CreateItem.js +++ b/frontend/components/CreateItem.js @@ -7,10 +7,10 @@ import { fileEndpoint } from '../config'; class CreateLink extends Component { state = { - description: '', - title: '', + description: 'test', + title: 'testing title', image: '', - price: 0, + price: 500, fullPrice: 0, loading: false, error: { @@ -41,20 +41,19 @@ class CreateLink extends Component { _createLink = async e => { e.preventDefault(); // pull the values from state - const { description, title, image, price, fullPrice } = this.state; + const { description, title, price } = 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, price: parseInt(price), - fullPrice, - imageId: image, }, }); } catch (error) { @@ -98,7 +97,7 @@ class CreateLink extends Component { type="text" placeholder="The desc for this item" /> - @@ -117,6 +116,7 @@ export default graphql(CREATE_ITEM_MUTATION, { // This is much Better / efficient // Notice how the variable is called createItem - that is because createItem is the name of the query! update: (proxy, { data: { createItem } }) => { + console.log('UPDATING'); const data = proxy.readQuery({ query: ALL_ITEMS_QUERY }); // data is our store, allItems is our sub-"state", it's just an array. We can just add it to console.log({ createItem }); diff --git a/frontend/components/Header.js b/frontend/components/Header.js index cc4cca7..5624fb5 100644 --- a/frontend/components/Header.js +++ b/frontend/components/Header.js @@ -19,19 +19,18 @@ class Header extends Component { // 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); + // setTimeout(this.props.currentUserQuery.refetch, 1); } render() { - const user = this.props.currentUserQuery.user || {}; - const { email = '' } = user; + // const user = this.props.currentUserQuery.user || {}; + // const { email = '' } = user; return (
-

+ {/*

Signed in as {email} -

- - +

*/} + {/* */}
); @@ -39,4 +38,5 @@ class Header extends Component { } const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' }); -export default compose(userEnhancer)(Header); +// export default compose(userEnhancer)(Header); +export default Header; diff --git a/frontend/components/Item.js b/frontend/components/Item.js index 1b47fcf..eb19918 100644 --- a/frontend/components/Item.js +++ b/frontend/components/Item.js @@ -1,10 +1,10 @@ -import styled from 'styled-components'; -import slugify from 'slugify'; -import { Link } from '../routes'; -import AddToCart from './AddToCart'; -import makeImage from '../lib/image'; -import TakeMyMoney from './TakeMyMoney'; -import formatMoney from '../lib/formatMoney'; +import styled from "styled-components"; +import slugify from "slugify"; +import { Link } from "../routes"; +import AddToCart from "./AddToCart"; +import makeImage from "../lib/image"; +import TakeMyMoney from "./TakeMyMoney"; +import formatMoney from "../lib/formatMoney"; const Item = styled.div` background: #f3f3f3; @@ -16,13 +16,19 @@ const Item = styled.div` const ItemComponent = ({ item }) => ( - {item.image ? {item.title} : null} + {item.image ? ( + {item.title} + ) : null}

{item.title} @@ -54,7 +60,13 @@ const ItemComponent = ({ item }) => ( - + ); diff --git a/frontend/components/Items.js b/frontend/components/Items.js index 053c9af..3e2c738 100644 --- a/frontend/components/Items.js +++ b/frontend/components/Items.js @@ -1,21 +1,25 @@ -import { Component } from 'react'; -import { withApollo, graphql, compose } from 'react-apollo'; -import styled from 'styled-components'; -import Pagination from './Pagination'; -import Item from './Item'; +import { Component } from "react"; +import { withApollo, graphql, compose } from "react-apollo"; +import styled from "styled-components"; +import Pagination from "./Pagination"; +import Item from "./Item"; +import { itemEnhancer } from "../enhancers/enhancers"; -import { ALL_ITEMS_QUERY, DELETE_ITEM_MUTATION } from '../queries'; +import { ALL_ITEMS_QUERY, DELETE_ITEM_MUTATION } from "../queries"; -const Title = styled.h1`font-size: 10px;`; +const Title = styled.h1` + font-size: 10px; +`; const Items = styled.div` display: grid; - grid-template-columns: repeat(4, calc(33% - 20px)); + grid-template-columns: repeat(4, 1fr); grid-gap: 20px; `; class ItemList extends Component { componentDidMount() { + console.log(this.props.allItemsQuery); this.prefetchNextItems(this.props.page); } @@ -32,8 +36,8 @@ class ItemList extends Component { this.props.client.query({ query: ALL_ITEMS_QUERY, variables: { - skip: page * 3 - 3, - }, + skip: page * 3 - 3 + } }); }; @@ -50,13 +54,15 @@ class ItemList extends Component { } // 3 - const itemsToRender = this.props.allItemsQuery.allItems; + const itemsToRender = this.props.allItemsQuery.items; return (
Items For Sale - {itemsToRender.map((item, i) => )} + + {itemsToRender.map((item, i) => )} +
); } @@ -66,20 +72,8 @@ class ItemList extends Component { // We export the graphQL HOC - this will fetch the data and inject it into the ItemList compeont via props -// Create some Enhancers -const itemEnhancer = graphql(ALL_ITEMS_QUERY, { - name: 'allItemsQuery', - options({ page }) { - return { - variables: { - skip: page * 3 - 3, - }, - }; - }, -}); - const deleteItemEnhancer = graphql(DELETE_ITEM_MUTATION, { - name: 'removeItemMutation', + name: "removeItemMutation", options: { update: (proxy, { data: { deleteItem } }) => { // grab the data from our cache @@ -90,8 +84,8 @@ const deleteItemEnhancer = graphql(DELETE_ITEM_MUTATION, { // and then "set state" (update cache), so it will update wherever we have used this data on the page proxy.writeQuery({ query: ALL_ITEMS_QUERY, data }); - }, - }, + } + } }); export default withApollo(compose(itemEnhancer, deleteItemEnhancer)(ItemList)); diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js index d1f341d..25965c2 100644 --- a/frontend/components/Nav.js +++ b/frontend/components/Nav.js @@ -1,5 +1,5 @@ -import Link from 'next/link'; -import styled from 'styled-components'; +import Link from "next/link"; +import styled from "styled-components"; const StyledUl = styled.ul` margin: 0; @@ -28,6 +28,9 @@ const Nav = () => ( Home + + Just Items + Sign Up diff --git a/frontend/components/Page.js b/frontend/components/Page.js index f45d421..ceb0939 100644 --- a/frontend/components/Page.js +++ b/frontend/components/Page.js @@ -1,8 +1,8 @@ -import styled from 'styled-components'; -import Header from './Header'; -import Meta from './Meta'; -import Nav from './Nav'; -import CartList from './CartList'; +import styled from "styled-components"; +import Header from "./Header"; +import Meta from "./Meta"; +import Nav from "./Nav"; +import CartList from "./CartList"; const StyledPage = styled.div` font-family: sans-serif; @@ -15,8 +15,8 @@ const Page = ({ children }) => (