From 19c9683e2126c68cb9d231293162c756d69c51fb Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 8 Feb 2018 10:41:16 -0500 Subject: WIP --- frontend/components/Header.js | 16 ++--- frontend/components/Item.js | 114 +++++++++++++++---------------- frontend/components/Items.js | 56 +++++----------- frontend/components/Page.js | 40 ++++++++--- frontend/components/Pagination.js | 16 ++--- frontend/components/RequestReset.js | 71 ++++++++++++++++++++ frontend/components/Signin.js | 76 +++++++++++++++++++++ frontend/components/Signout.js | 20 ++++++ frontend/components/Signup.js | 130 ++++++++++++++++++------------------ frontend/components/SingleItem.js | 26 ++------ frontend/components/TakeMyMoney.js | 24 +++---- frontend/components/UpdateItem.js | 67 +++++++++++-------- 12 files changed, 405 insertions(+), 251 deletions(-) create mode 100644 frontend/components/RequestReset.js create mode 100644 frontend/components/Signin.js create mode 100644 frontend/components/Signout.js (limited to 'frontend/components') diff --git a/frontend/components/Header.js b/frontend/components/Header.js index 5624fb5..5e1a620 100644 --- a/frontend/components/Header.js +++ b/frontend/components/Header.js @@ -6,6 +6,7 @@ import Login from './LoginAuth0'; import Search from './Search'; import NProgress from 'nprogress'; import Router from 'next/router'; +import Signout from './Signout'; Router.onRouteChangeStart = url => { console.log(`Loading: ${url}`); @@ -23,20 +24,17 @@ class Header extends Component { } render() { - // const user = this.props.currentUserQuery.user || {}; - // const { email = '' } = user; return (
- {/*

- Signed in as {email} -

*/} + {this.props.currentUser.me ? this.props.currentUser.me.email : 'Not Signed in'} + {/* */} - + {/* */}
); } } -const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUserQuery' }); -// export default compose(userEnhancer)(Header); -export default Header; +const userEnhancer = graphql(CURRENT_USER_QUERY, { name: 'currentUser' }); +export default compose(userEnhancer)(Header); +// export default Header; diff --git a/frontend/components/Item.js b/frontend/components/Item.js index eb19918..d19af0e 100644 --- a/frontend/components/Item.js +++ b/frontend/components/Item.js @@ -1,10 +1,13 @@ -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 React from 'react'; +import styled from 'styled-components'; +import slugify from 'slugify'; +import { compose } from 'react-apollo'; +import { Link } from '../routes'; +import AddToCart from './AddToCart'; +import makeImage from '../lib/image'; +import TakeMyMoney from './TakeMyMoney'; +import formatMoney from '../lib/formatMoney'; +import { removeItemMutation } from '../enhancers/enhancers'; const Item = styled.div` background: #f3f3f3; @@ -14,60 +17,53 @@ const Item = styled.div` } `; -const ItemComponent = ({ item }) => ( - - {item.image ? ( - {item.title} - ) : null} -

- - {item.title} - -

+class ItemComponent extends React.Component { + removeItem = () => { + this.props.removeItem({ variables: { id: this.props.item.id } }); + }; + render() { + const item = this.props.item; + return ( + + {item.image ? {item.title} : null} +

+ + {item.title} + +

-

{item.description}

- {/* { +

{item.description}

- - Edit ✏️ - + + Edit ✏️ + - } */} + + + - - - - - - - -); + {/* */} + + + ); + } +} -export default ItemComponent; +export default compose(removeItemMutation)(ItemComponent); diff --git a/frontend/components/Items.js b/frontend/components/Items.js index 3e2c738..a3f98c9 100644 --- a/frontend/components/Items.js +++ b/frontend/components/Items.js @@ -1,11 +1,11 @@ -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 { 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; @@ -19,7 +19,6 @@ const Items = styled.div` class ItemList extends Component { componentDidMount() { - console.log(this.props.allItemsQuery); this.prefetchNextItems(this.props.page); } @@ -36,56 +35,35 @@ class ItemList extends Component { this.props.client.query({ query: ALL_ITEMS_QUERY, variables: { - skip: page * 3 - 3 - } + skip: page * 3 - 3, + }, }); }; render() { + console.log(this.props); // 1 - if (this.props.allItemsQuery && this.props.allItemsQuery.loading) { + if (this.props.itemsQuery && this.props.itemsQuery.loading) { return
Loading
; } // 2 - if (this.props.allItemsQuery && this.props.allItemsQuery.error) { - console.log(this.props.allItemsQuery.error); + if (this.props.itemsQuery && this.props.itemsQuery.error) { + console.log(this.props.itemsQuery.error); return
Error
; } - + console.log(this.props); // 3 - const itemsToRender = this.props.allItemsQuery.items; + const itemsToRender = this.props.itemsQuery.items; return (
Items For Sale - - {itemsToRender.map((item, i) => )} - + {itemsToRender.map((item, i) => )}
); } } -// 1 - -// We export the graphQL HOC - this will fetch the data and inject it into the ItemList compeont via props - -const deleteItemEnhancer = graphql(DELETE_ITEM_MUTATION, { - name: "removeItemMutation", - options: { - update: (proxy, { data: { deleteItem } }) => { - // grab the data from our cache - const data = proxy.readQuery({ query: ALL_ITEMS_QUERY }); - - // filter out the deleted item - data.allItems = data.allItems.filter(item => item.id !== deleteItem.id); - - // 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)); +export default withApollo(compose(itemEnhancer)(ItemList)); diff --git a/frontend/components/Page.js b/frontend/components/Page.js index ceb0939..291bdcd 100644 --- a/frontend/components/Page.js +++ b/frontend/components/Page.js @@ -1,8 +1,26 @@ -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'; +import { Component } from 'react'; + +class ErrorBoundary extends Component { + state = { + error: null, + errorInfo: null, + }; + componentDidCatch(error, errorInfo) { + console.log('Caught an erorrror!'); + this.setState({ error, errorInfo }); + } + render() { + if (this.state.error) { + return

Shit! AN error!

; + } + return this.props.children; + } +} const StyledPage = styled.div` font-family: sans-serif; @@ -13,11 +31,13 @@ const StyledPage = styled.div` const Page = ({ children }) => ( - -