23 files changed, 333 insertions, 135 deletions

diff --git a/backend/database/datamodel.graphql b/backend/database/datamodel.graphql
index 605e242..c383b23 100644
--- a/backend/database/datamodel.graphql
+++ b/backend/database/datamodel.graphql
@@ -16,6 +16,7 @@ type User {
   posts: [Post!]!
   website: String
   age: Int
+  dummy: String
 }
 
 type Item {
diff --git a/backend/database/prisma.yml b/backend/database/prisma.yml
index 6570be2..ce652ef 100644
--- a/backend/database/prisma.yml
+++ b/backend/database/prisma.yml
@@ -1,12 +1,12 @@
 # the name for the service (will be part of the service's HTTP endpoint)
-service: my-own
+service: sick-fits
 
 # the cluster and stage the service is deployed to
 stage: ${env:PRISMA_STAGE}
 
 # to disable authentication:
-# disableAuth: true
-secret: ${env:PRISMA_SECRET}
+disableAuth: true
+# secret: ${env:PRISMA_SECRET}
 
 # the file path pointing to your data model
 datamodel: datamodel.graphql
@@ -17,5 +17,3 @@ datamodel: datamodel.graphql
 
 cluster: ${env:PRISMA_CLUSTER}
 
-
-disableAuth: true
\ No newline at end of file
diff --git a/backend/package.json b/backend/package.json
index ca26206..86ad2b6 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -2,9 +2,11 @@
   "name": "my-own",
   "scripts": {
     "start": "nodemon -e js,graphql -x node -r dotenv/config src/index.js",
-    "debug": "nodemon -e js,graphql -x node --inspect -r dotenv/config src/index.js",
+    "debug":
+      "nodemon -e js,graphql -x node --inspect -r dotenv/config src/index.js",
     "playground": "graphql playground",
-    "dev": "npm-run-all --parallel start playground"
+    "dev": "npm-run-all --parallel start playground",
+    "test": "jest"
   },
   "dependencies": {
     "bcryptjs": "2.4.3",
@@ -15,6 +17,8 @@
   "devDependencies": {
     "dotenv": "4.0.0",
     "graphql-cli": "2.13.0",
+    "graphql-request": "^1.4.1",
+    "jest-cli": "^22.1.4",
     "nodemon": "1.14.11",
     "npm-run-all": "4.1.2",
     "prisma": "1.0.11"
diff --git a/backend/src/generated/prisma.graphql b/backend/src/generated/prisma.graphql
index 50aaa97..e59a1c9 100644
--- a/backend/src/generated/prisma.graphql
+++ b/backend/src/generated/prisma.graphql
@@ -30,6 +30,7 @@ type User implements Node {
   posts(where: PostWhereInput, orderBy: PostOrderByInput, skip: Int, after: String, before: String, first: Int, last: Int): [Post!]
   website: String
   age: Int
+  dummy: String
 }
 
 
@@ -420,6 +421,7 @@ input UserCreateInput {
   name: String!
   website: String
   age: Int
+  dummy: String
   posts: PostCreateManyWithoutAuthorInput
 }
 
@@ -434,6 +436,7 @@ input UserCreateWithoutPostsInput {
   name: String!
   website: String
   age: Int
+  dummy: String
 }
 
 type UserEdge {
@@ -454,6 +457,8 @@ enum UserOrderByInput {
   website_DESC
   age_ASC
   age_DESC
+  dummy_ASC
+  dummy_DESC
   updatedAt_ASC
   updatedAt_DESC
   createdAt_ASC
@@ -467,6 +472,7 @@ type UserPreviousValues {
   name: String!
   website: String
   age: Int
+  dummy: String
 }
 
 type UserSubscriptionPayload {
@@ -492,6 +498,7 @@ input UserUpdateInput {
   name: String
   website: String
   age: Int
+  dummy: String
   posts: PostUpdateManyWithoutAuthorInput
 }
 
@@ -510,6 +517,7 @@ input UserUpdateWithoutPostsDataInput {
   name: String
   website: String
   age: Int
+  dummy: String
 }
 
 input UserUpdateWithoutPostsInput {
@@ -604,6 +612,20 @@ input UserWhereInput {
   age_lte: Int
   age_gt: Int
   age_gte: Int
+  dummy: String
+  dummy_not: String
+  dummy_in: [String!]
+  dummy_not_in: [String!]
+  dummy_lt: String
+  dummy_lte: String
+  dummy_gt: String
+  dummy_gte: String
+  dummy_contains: String
+  dummy_not_contains: String
+  dummy_starts_with: String
+  dummy_not_starts_with: String
+  dummy_ends_with: String
+  dummy_not_ends_with: String
   posts_every: PostWhereInput
   posts_some: PostWhereInput
   posts_none: PostWhereInput
diff --git a/backend/src/index.js b/backend/src/index.js
index c73cb74..fefe598 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -24,10 +24,10 @@ const server = new GraphQLServer({
   }),
 });
 
-// This is an example of custom express middlware
-server.express.use((req, res, next) => {
-  console.log("Hi I'm middlware");
-  next();
-});
+// // This is an example of custom express middlware
+// server.express.use((req, res, next) => {
+//   // console.log("Hi I'm middlware");
+//   next();
+// });
 
 server.start(() => console.log('Server is running on http://localhost:4000'));
diff --git a/backend/src/resolvers/Mutation.js b/backend/src/resolvers/Mutation.js
index 2796cf8..fbae6fe 100644
--- a/backend/src/resolvers/Mutation.js
+++ b/backend/src/resolvers/Mutation.js
@@ -35,8 +35,35 @@ const mutations = {
   },
 
   // Creation of Post Mutations
-  createItem: forwardTo('db'),
-  deleteItem: forwardTo('db'),
+  async createItem(parent, args, ctx, info) {
+    return ctx.db.mutation.createItem({ data: { ...args } }, info);
+  },
+
+  async deleteItem(parent, args, ctx, info) {
+    console.log('gonna delete one');
+    console.log(args);
+    return ctx.db.mutation.deleteItem(
+      {
+        where: {
+          id: args.id,
+        },
+      },
+      info
+    );
+  },
+
+  async updateItem(parent, args, ctx, info) {
+    console.log('Updating an item');
+    const updates = { ...args };
+    delete updates.id;
+    return ctx.db.mutation.updateItem({
+      where: { id: args.id },
+      data: {
+        ...updates,
+      },
+    });
+  },
+
   async createDraft(parent, { title, text }, ctx, info) {
     // const userId = getUserId(ctx);
     const userId = getUserId(ctx);
diff --git a/backend/src/resolvers/Query.js b/backend/src/resolvers/Query.js
index 9d9d142..a2eb749 100644
--- a/backend/src/resolvers/Query.js
+++ b/backend/src/resolvers/Query.js
@@ -1,18 +1,26 @@
 const { getUserId, Context } = require('../utils');
+const { forwardTo } = require('prisma-binding');
 
 const Query = {
+  items(parent, args, ctx, info) {
+    // check auth
+    return ctx.db.query.items({ ...args }, info);
+  },
+
+  itemsConnection: forwardTo('db'),
+
   feed(parent, args, ctx, info) {
-    return ctx.db.query.posts({ where: { isPublished: true } }, info);
+    return ctx.db.query.posts({}, info);
   },
 
   drafts(parent, args, ctx, info) {
-    const id = getUserId(ctx);
+    // const id = getUserId(ctx);
 
     const where = {
       isPublished: false,
-      author: {
-        id,
-      },
+      // author: {
+      //   id,
+      // },
     };
 
     return ctx.db.query.posts({ where }, info);
diff --git a/backend/src/schema.graphql b/backend/src/schema.graphql
index 788d490..993236e 100644
--- a/backend/src/schema.graphql
+++ b/backend/src/schema.graphql
@@ -1,10 +1,25 @@
-# import Post, Item, ItemCreateInput from './generated/prisma.graphql'
+# import ItemWhereInput, ItemOrderByInput, allItems, Post, Item, ItemCreateInput, ItemOrderByInput, ItemWhereInput from './generated/prisma.graphql'
 
 type Query {
   feed: [Post!]!
   drafts: [Post!]!
   post(id: ID!): Post!
   me: User
+  itemsConnection(
+    where: ItemWhereInput
+    orderBy: ItemOrderByInput
+    skip: Int
+    after: String
+    before: String
+    first: Int
+    last: Int
+  ): ItemConnection!
+  items(
+    where: ItemWhereInput
+    orderBy: ItemOrderByInput
+    skip: Int
+    first: Int
+  ): [Item]!
 }
 
 # import Mutation from './generated/prisma.graphql'
@@ -16,8 +31,9 @@ type Mutation {
   publish(id: ID!): Post!
   deletePost(id: ID!): Post!
   updatePost(id: ID!, title: String, text: String): Post!
-  createItem(data: ItemCreateInput): Item!
+  createItem(title: String, description: String, price: Int): Item!
   deleteItem(id: ID!): Item!
+  updateItem(id: ID!, title: String, description: String, price: Int): Item!
 }
 
 type AuthPayload {
diff --git a/backend/tests/item.test.js b/backend/tests/item.test.js
new file mode 100644
index 0000000..0e47419
--- /dev/null
+++ b/backend/tests/item.test.js
@@ -0,0 +1,81 @@
+const { request } = require('graphql-request');
+
+let id;
+
+test('Creating an item', async () => {
+  const query = `
+    mutation createItem {
+      createItem(title: "wes", description:"Bos", price: 500) {
+        title
+        description
+        price
+        id
+      }
+    }
+  `;
+
+  const { createItem } = await request('http://localhost:4000', query);
+
+  expect(createItem.title).toEqual('wes');
+  expect(createItem.description).toEqual('Bos');
+  expect(createItem).toHaveProperty('id');
+  expect(createItem.price).toEqual(500);
+  id = createItem.id;
+});
+
+test('Get an array of items', async () => {
+  const query = `
+    query getAllItems {
+      items {
+        title
+        id
+        description
+        price
+      }
+    }
+  `;
+
+  const { items } = await request('http://localhost:4000', query);
+  expect(items.length).toBeGreaterThan(0);
+});
+
+test('Query a specific item', async () => {
+  const query = `
+    query findAnItem {
+      items(where: {
+        id: "${id}"
+      }) {
+        title
+        id
+        description
+        price
+      }
+    }
+  `;
+
+  const { items } = await request('http://localhost:4000', query);
+  const item = items[0];
+  expect(item.title).toEqual('wes');
+  expect(item.description).toEqual('Bos');
+  expect(item.price).toEqual(500);
+});
+
+// Test Delete that item
+test('delete an item', async () => {
+  const query = `
+  mutation remove {
+    deleteItem(id: "${id}") {
+      id
+    }
+  }
+  `;
+  const res = await request('http://localhost:4000', query);
+  expect(res.deleteItem.id).toEqual(id);
+});
+
+// mutation updateItem {
+//   updateItem(id: "cjd21afpr47m00172nigtlkw8", title: "WES from playground") {
+//     id
+//     title
+//   }
+// }
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