summaryrefslogtreecommitdiffstats
path: root/frontend/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/components')
-rw-r--r--frontend/components/CreateItem.js14
-rw-r--r--frontend/components/Header.js16
-rw-r--r--frontend/components/Item.js32
-rw-r--r--frontend/components/Items.js48
-rw-r--r--frontend/components/Nav.js7
-rw-r--r--frontend/components/Page.js14
-rw-r--r--frontend/components/Pagination.js25
7 files changed, 83 insertions, 73 deletions
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"
/>
- <button disabled={!this.state.loading} type="submit">
+ <button disabledx={!this.state.loading} type="submit">
Submit
</button>
</form>
@@ -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 (
<div>
- <p>
+ {/* <p>
Signed in as <strong>{email}</strong>
- </p>
- <Login />
- <Cart />
+ </p> */}
+ {/* <Cart /> */}
<Search />
</div>
);
@@ -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 key={item.id}>
- {item.image ? <img key={item.image.secret} src={makeImage(item.image)} alt={item.title} /> : null}
+ {item.image ? (
+ <img
+ key={item.image.secret}
+ src={makeImage(item.image)}
+ alt={item.title}
+ />
+ ) : null}
<h3>
<Link
route="item"
params={{
slug: slugify(item.title),
- itemId: item.id,
+ itemId: item.id
}}
>
<a>{item.title}</a>
@@ -54,7 +60,13 @@ const ItemComponent = ({ item }) => (
</TakeMyMoney>
<AddToCart id={item.id} />
- <button onClick={() => this.props.removeItemMutation({ variables: { id: item.id } })}>&times; Delete item</button>
+ <button
+ onClick={() =>
+ this.props.removeItemMutation({ variables: { id: item.id } })
+ }
+ >
+ &times; Delete item
+ </button>
</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 (
<div>
<Pagination page={this.props.page} />
<Title>Items For Sale</Title>
- <Items key={this.props.page}>{itemsToRender.map((item, i) => <Item key={item.id} item={item} />)}</Items>
+ <Items key={this.props.page}>
+ {itemsToRender.map((item, i) => <Item key={item.id} item={item} />)}
+ </Items>
</div>
);
}
@@ -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 = () => (
<Link prefetch href="/">
<a>Home</a>
</Link>
+ <Link prefetch href="/items">
+ <a>Just Items</a>
+ </Link>
<Link prefetch href="/signup">
<a>Sign Up</a>
</Link>
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 }) => (
<StyledPage className="main">
<Meta />
<Nav />
- <Header />
- <CartList />
+ {/* <Header /> */}
+ {/* <CartList /> */}
{children}
</StyledPage>
);
diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index dedd231..28785be 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -1,17 +1,19 @@
-import React, { Component } from 'react';
-import { graphql, gql, compose } from 'react-apollo';
-import { ALL_ITEMS_QUERY } from '../queries';
-import withData from '../lib/withData';
-import { Link } from '../routes';
+import React, { Component } from "react";
+import { graphql, gql, compose } from "react-apollo";
+import { ALL_ITEMS_QUERY } from "../queries";
+import withData from "../lib/withData";
+import { Link } from "../routes";
+import { itemEnhancer } from "../enhancers/enhancers";
const Pagination = props => {
const { loading, error } = props.allItemsQuery;
if (loading) return <p>Loading Item...</p>;
- const meta = props.allItemsQuery._allItemsMeta;
+ const { aggregate, pageInfo } = props.allItemsQuery.itemsConnection;
+
const { page } = props;
- const pages = Math.floor(meta.count / 3);
+ const pages = Math.floor(aggregate.count / 3);
return (
<div>
<p>
@@ -19,17 +21,16 @@ const Pagination = props => {
of
<strong>{pages} </strong>
-
- <strong>{meta.count} </strong>
+ <strong>{aggregate.count} </strong>
total
</p>
-
- {page > 1 ? (
+ {pageInfo.hasPreviousPage ? (
<Link prefetch route="items" params={{ page: page - 1 }}>
<a>←Prev</a>
</Link>
) : null}
- {page < pages ? (
+ {pageInfo.hasNextPage ? (
<Link prefetch route="items" params={{ page: page + 1 }}>
<a>Next →</a>
</Link>
@@ -38,6 +39,6 @@ const Pagination = props => {
);
};
-const ComponentWithMutations = compose(graphql(ALL_ITEMS_QUERY, { name: 'allItemsQuery' }))(Pagination);
+const ComponentWithMutations = compose(itemEnhancer)(Pagination);
export default ComponentWithMutations;

Want to contribute? Host your changes somewhere and send me the link: jan (at) sydanviita.fi. Also, check out my website.


forge.jan.systems — powered by cgit