summaryrefslogtreecommitdiffstats
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/.vscode/settings.json3
-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
-rw-r--r--frontend/config.js2
-rw-r--r--frontend/enhancers/enhancers.js13
-rw-r--r--frontend/pages/index.js15
-rw-r--r--frontend/pages/items.js3
-rw-r--r--frontend/queries/fragments.js6
-rw-r--r--frontend/queries/index.js71
14 files changed, 155 insertions, 114 deletions
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"
/>
- <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;
diff --git a/frontend/config.js b/frontend/config.js
index c2b78cb..7d5ebad 100644
--- a/frontend/config.js
+++ b/frontend/config.js
@@ -1,5 +1,5 @@
// This is client side config only - don't put anything in here that shouldn't be public!
export const projectId = `cj99zm6ye06sb01325ic751ww`;
-export const endpoint = `https://api.graph.cool/simple/v1/${projectId}`;
+export const endpoint = `http://localhost:4000`;
export const imageEndpoint = `https://images.graph.cool/v1/${projectId}`;
export const fileEndpoint = `https://api.graph.cool/file/v1/${projectId}`;
diff --git a/frontend/enhancers/enhancers.js b/frontend/enhancers/enhancers.js
new file mode 100644
index 0000000..525c720
--- /dev/null
+++ b/frontend/enhancers/enhancers.js
@@ -0,0 +1,13 @@
+import { ALL_ITEMS_QUERY } from "../queries/index";
+import { graphql } from "react-apollo";
+
+export const itemEnhancer = graphql(ALL_ITEMS_QUERY, {
+ name: "allItemsQuery",
+ options({ page }) {
+ return {
+ variables: {
+ skip: page * 3 - 3
+ }
+ };
+ }
+});
diff --git a/frontend/pages/index.js b/frontend/pages/index.js
index 24fe584..128ccf1 100644
--- a/frontend/pages/index.js
+++ b/frontend/pages/index.js
@@ -1,21 +1,22 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import Items from '../components/Items';
-import Header from '../components/Header';
-import Page from '../components/Page';
-import withData from '../lib/withData';
+import { Component } from "react";
+import PropTypes from "prop-types";
+import Items from "../components/Items";
+import Header from "../components/Header";
+import Page from "../components/Page";
+import withData from "../lib/withData";
const Home = props => {
const page = parseInt(props.url.query.page) || 1;
return (
<Page>
+ <p>Hello</p>
<Items page={page} />
</Page>
);
};
Home.propTypes = {
- url: PropTypes.object,
+ url: PropTypes.object
};
export default withData(Home);
diff --git a/frontend/pages/items.js b/frontend/pages/items.js
index 52f9f86..3426f4b 100644
--- a/frontend/pages/items.js
+++ b/frontend/pages/items.js
@@ -1,2 +1,3 @@
-import Index from './index'
+import Index from './index';
+
export default Index;
diff --git a/frontend/queries/fragments.js b/frontend/queries/fragments.js
index 019992e..1708d78 100644
--- a/frontend/queries/fragments.js
+++ b/frontend/queries/fragments.js
@@ -5,12 +5,6 @@ export const itemDetails = gql`
id
title
price
- fullPrice
description
- image {
- id
- url
- secret
- }
}
`;
diff --git a/frontend/queries/index.js b/frontend/queries/index.js
index 8b7897f..fb7445e 100644
--- a/frontend/queries/index.js
+++ b/frontend/queries/index.js
@@ -1,23 +1,26 @@
-import gql from 'graphql-tag';
-import { itemDetails } from './fragments';
+import gql from "graphql-tag";
+import { itemDetails } from "./fragments";
export const CREATE_ITEM_MUTATION = gql`
${itemDetails}
- mutation CreateLinkMutation($description: String!, $title: String!, $imageId: ID, $price: Int!) {
- createItem(
- description: $description,
- title: $title,
- imageId: $imageId
- price: $price
- ) {
+ mutation createItem($description: String!, $title: String!, $price: Int!) {
+ createItem(description: $description, title: $title, price: $price) {
...itemDetails
}
}
`;
export const CREATE_USER_MUTATION = gql`
- mutation CreateUserMutation($email: String!, $name: String!, $idToken: String!) {
- createUser(email: $email, name: $name, authProvider: { auth0: { idToken: $idToken } }) {
+ mutation CreateUserMutation(
+ $email: String!
+ $name: String!
+ $idToken: String!
+ ) {
+ createUser(
+ email: $email
+ name: $name
+ authProvider: { auth0: { idToken: $idToken } }
+ ) {
id
email
name
@@ -52,11 +55,19 @@ export const CREATE_ORDER_MUTATION = gql`
export const ALL_ITEMS_QUERY = gql`
# Import the Fragment
${itemDetails}
- query AllLinksQuery($skip: Int = 0, $first: Int = 3) {
- _allItemsMeta {
- count
+ query AllItemsQuery($skip: Int = 0, $first: Int = 3) {
+ itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+ pageInfo {
+ hasNextPage
+ hasPreviousPage
+ startCursor
+ endCursor
+ }
+ aggregate {
+ count
+ }
}
- allItems(orderBy: createdAt_DESC, first: $first, skip: $skip) {
+ items(orderBy: createdAt_DESC, first: $first, skip: $skip) {
...itemDetails
}
}
@@ -74,12 +85,14 @@ export const SINGLE_ITEM_QUERY = gql`
export const SEARCH_ITEMS_QUERY = gql`
${itemDetails}
query SearchItems($searchTerm: String!) {
- allItems(filter:{
- OR:[
- { title_contains: $searchTerm },
- { description_contains: $searchTerm },
- ]
- }) {
+ allItems(
+ filter: {
+ OR: [
+ { title_contains: $searchTerm }
+ { description_contains: $searchTerm }
+ ]
+ }
+ ) {
...itemDetails
}
}
@@ -97,12 +110,18 @@ export const DELETE_ITEM_MUTATION = gql`
export const UPDATE_LINK_MUTATION = gql`
${itemDetails}
- mutation UpdateItem($id: ID!, $title: String!, $description: String!, $price: Int!, $fullPrice: Int!) {
+ mutation UpdateItem(
+ $id: ID!
+ $title: String!
+ $description: String!
+ $price: Int!
+ $fullPrice: Int!
+ ) {
updateItem(
- id: $id,
- description: $description,
- title: $title,
- price: $price,
+ id: $id
+ description: $description
+ title: $title
+ price: $price
fullPrice: $fullPrice
) {
...itemDetails

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