summaryrefslogtreecommitdiffstats
path: root/frontend/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/components')
-rw-r--r--frontend/components/AddToCart.js41
-rw-r--r--frontend/components/CartCount.js1
-rw-r--r--frontend/components/Count.js4
-rw-r--r--frontend/components/CreateItem.js70
-rw-r--r--frontend/components/Item.js5
-rw-r--r--frontend/components/Items.js3
-rw-r--r--frontend/components/Nav.js9
-rw-r--r--frontend/components/Pagination.js32
-rw-r--r--frontend/components/Search.js10
-rw-r--r--frontend/components/SingleItem.js18
-rw-r--r--frontend/components/styles/Form.js3
11 files changed, 91 insertions, 105 deletions
diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index b87d4e9..9c52f83 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -1,37 +1,8 @@
import { Component } from 'react';
import { graphql, compose } from 'react-apollo';
-import Transition from 'react-transition-group/Transition';
import styled from 'styled-components';
import PropTypes from 'prop-types';
-import { CURRENT_USER_QUERY, SINGLE_ITEM_QUERY } from '../queries';
-import { removeFromCartEnhancer, userEnhancer, addtoCartEnhancer } from '../enhancers/enhancers';
-
-const JumpImg = styled.img`
- border: 0 solid black;
- max-width: 100px;
- transition: all 0.5s;
- position: fixed;
- left: ${props => props.x}px;
- top: -100%;
- &.jump-entered {
- border-color: green;
- transform-origin: 0 0;
- transform: scale(0);
- top: ${props => props.y}px;
- left: ${props => props.x}px;
- }
- &.jump-entering {
- border-color: yellow;
- top: ${props => props.y}px;
- left: ${props => props.x}px;
- }
- &.jump-exited {
- border-color: red;
- }
- &.jump-exiting {
- border-color: yellow;
- }
-`;
+import { removeFromCartEnhancer, userEnhancer, addToCartEnhancer, singleItemEnhancer } from '../enhancers/enhancers';
class AddToCart extends Component {
static propTypes = {
@@ -57,12 +28,4 @@ class AddToCart extends Component {
}
}
-const singleItemEnhancer = graphql(SINGLE_ITEM_QUERY, {
- name: 'singleItemQuery',
- options: ({ id }) => ({
- variables: {
- id,
- },
- }),
-});
-export default compose(userEnhancer, addtoCartEnhancer, removeFromCartEnhancer, singleItemEnhancer)(AddToCart);
+export default compose(userEnhancer, addToCartEnhancer)(AddToCart);
diff --git a/frontend/components/CartCount.js b/frontend/components/CartCount.js
index 245b07b..7949307 100644
--- a/frontend/components/CartCount.js
+++ b/frontend/components/CartCount.js
@@ -50,3 +50,4 @@ const CartCount = ({ count }) => (
);
export default CartCount;
+export { CartCount };
diff --git a/frontend/components/Count.js b/frontend/components/Count.js
index 800a902..7dfd33f 100644
--- a/frontend/components/Count.js
+++ b/frontend/components/Count.js
@@ -1,3 +1,4 @@
+// TODO THis is not needed
import React, { Component } from 'react'
import { graphql, gql } from 'react-apollo'
@@ -33,5 +34,4 @@ class Count extends Component {
// We export the graphQL HOC - this will fetch the data and inject it into the Count compeont via props
-export { ALL_ITEMS_QUERY }
-export default graphql(ALL_ITEMS_QUERY, { name: 'allLinksQuery' }) (Count)
+export default graphql(ALL_ITEMS_QUERY, { name: 'allLinksQuery' })(Count)
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index 26b2c88..74a6cee 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -1,33 +1,41 @@
import React, { Component } from 'react';
import { graphql, gql } from 'react-apollo';
-import { ALL_ITEMS_QUERY, CREATE_ITEM_MUTATION } from '../queries';
+import { CREATE_ITEM_MUTATION } from '../queries';
import ErrorMessage from './ErrorMessage';
-import { fileEndpoint } from '../config';
import Form from './styles/Form';
+import PropTypes from 'prop-types';
+
+class CreateItem extends Component {
+ static propTypes = {
+ createItemMutation: PropTypes.func.isRequired,
+ };
-class CreateLink extends Component {
state = {
- description: 'test',
- title: 'testing title',
- image: '',
- largeImage: '',
- price: 500,
- fullPrice: 0,
+ item: {
+ title: '',
+ description: '',
+ image: '',
+ largeImage: '',
+ price: 0,
+ },
loading: false,
error: {
- message: '',
+ message: null,
},
};
- componentWillReceiveProps(nextProps) {
- console.log(nextProps);
- }
+ handleChange = e => {
+ const { name, value, type } = e.target;
+ const updatedItem = {
+ ...this.state.item,
+ [name]: type === 'number' ? parseFloat(value) : value,
+ };
+ this.setState({ item: updatedItem });
+ };
uploadFile = async e => {
this.setState({ loading: true });
-
const files = e.currentTarget.files;
-
const data = new FormData();
data.append('file', files[0]);
data.append('upload_preset', 'sickfits');
@@ -38,33 +46,23 @@ class CreateLink extends Component {
body: data,
});
const file = await res.json();
- console.log(file);
this.setState({ image: file.secure_url, largeImage: file.eager[0].secure_url, loading: false });
};
createItem = async e => {
e.preventDefault();
- // pull the values from state
- const { description, title, price, image, largeImage } = 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,
- image,
- largeImage,
- price: parseInt(price),
+ ...this.state.item,
},
});
} catch (error) {
this.setState({ error });
- console.log(error);
}
this.setState({ loading: false });
};
@@ -84,23 +82,29 @@ class CreateLink extends Component {
Title
<input
value={this.state.title}
- onChange={e => this.setState({ title: e.target.value })}
+ onChange={this.handleChange}
type="text"
+ name="title"
+ id="title"
placeholder="Title"
/>
</p>
<label>
- Price<input
+ Price
+ <input
type="number"
+ id="price"
+ name="price"
min="0"
value={this.state.price}
- onChange={e => this.setState({ price: e.target.value })}
+ onChange={this.handleChange}
/>
</label>
<textarea
+ id="description"
+ name="description"
value={this.state.description}
- onChange={e => this.setState({ description: e.target.value })}
- type="text"
+ onChange={this.handleChange}
placeholder="The desc for this item"
/>
<button disabled={this.state.loading} type="submit">
@@ -117,4 +121,6 @@ export default graphql(CREATE_ITEM_MUTATION, {
options: {
refetchQueries: ['AllItemsQuery'],
},
-})(CreateLink);
+})(CreateItem);
+
+export { CreateItem };
diff --git a/frontend/components/Item.js b/frontend/components/Item.js
index 935930d..33b3951 100644
--- a/frontend/components/Item.js
+++ b/frontend/components/Item.js
@@ -1,10 +1,8 @@
import React from 'react';
-import Title from './styles/Title';
import styled from 'styled-components';
-import slugify from 'slugify';
import { compose } from 'react-apollo';
-// import { Link } from '../routes';
import Link from 'next/link';
+import Title from './styles/Title';
import AddToCart from './AddToCart';
import formatMoney from '../lib/formatMoney';
import { removeItemMutation } from '../enhancers/enhancers';
@@ -101,4 +99,5 @@ class ItemComponent extends React.Component {
}
}
+export { ItemComponent };
export default compose(removeItemMutation)(ItemComponent);
diff --git a/frontend/components/Items.js b/frontend/components/Items.js
index 01d9786..1b0c8bb 100644
--- a/frontend/components/Items.js
+++ b/frontend/components/Items.js
@@ -18,7 +18,7 @@ const Center = styled.div`
`;
class ItemList extends React.Component {
- something() { }
+ something() {}
render() {
const { loading, error } = this.props.itemsQuery;
// 1
@@ -31,7 +31,6 @@ class ItemList extends React.Component {
console.log(this.props.itemsQuery.error);
return <div>Error</div>;
}
- console.log(this.props);
// 3
const itemsToRender = this.props.itemsQuery.items;
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index aa0300b..3d7f0f6 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -1,8 +1,9 @@
+import React, { Fragment } from 'react';
import Link from 'next/link';
import styled from 'styled-components';
-import { Fragment } from 'react';
-import { userEnhancer } from '../enhancers/enhancers';
import { compose } from 'react-apollo';
+import PropTypes from 'prop-types';
+import { userEnhancer } from '../enhancers/enhancers';
import CartCount from './CartCount';
import Signout from './Signout';
import { UIContext } from './UIContext';
@@ -58,6 +59,9 @@ const StyledUl = styled.ul`
`;
class Nav extends React.Component {
+ static propTypes = {
+ currentUser: PropTypes.object.isRequired,
+ };
componentDidMount() {
this.props.currentUser.refetch();
}
@@ -106,3 +110,4 @@ class Nav extends React.Component {
}
export default compose(userEnhancer)(Nav);
+export { Nav };
diff --git a/frontend/components/Pagination.js b/frontend/components/Pagination.js
index dab7084..abc22d0 100644
--- a/frontend/components/Pagination.js
+++ b/frontend/components/Pagination.js
@@ -2,6 +2,7 @@ import React from 'react';
import { compose } from 'react-apollo';
import styled from 'styled-components';
import Link from 'next/link';
+import PropTypes from 'prop-types';
import { itemEnhancer } from '../enhancers/enhancers';
import { perPage } from '../config';
@@ -30,12 +31,11 @@ const PaginationStyles = styled.div`
`;
const Pagination = props => {
- if (props.loading) return <p>Loading Item...</p>;
- const { aggregate, pageInfo } = props.itemsQuery.itemsConnection;
+ if (props.loading) return <p>Loading...</p>;
+ const { aggregate } = props.itemsQuery.itemsConnection;
const { page } = props;
-
const pages = Math.ceil(aggregate.count / perPage);
- console.log({ pageInfo });
+
return (
<PaginationStyles>
<Link
@@ -45,10 +45,12 @@ const Pagination = props => {
query: { page: page - 1 },
}}
>
- <a aria-disabled={page <= 1}>←Prev</a>
+ <a className="prev" aria-disabled={page <= 1}>
+ ←Prev
+ </a>
</Link>
<p>
- Page <strong>{page} </strong> of <strong>{pages} </strong>
+ Page <strong>{page} </strong> of <strong className="totalPages">{pages}</strong>
</p>
<p>
<strong>{aggregate.count}</strong> Items Total
@@ -60,12 +62,24 @@ const Pagination = props => {
query: { page: page + 1 },
}}
>
- <a aria-disabled={page >= pages}>Next →</a>
+ <a className="next" aria-disabled={page >= pages}>
+ Next →
+ </a>
</Link>
</PaginationStyles>
);
};
-const ComponentWithMutations = compose(itemEnhancer)(Pagination);
+Pagination.propTypes = {
+ itemsQuery: PropTypes.shape({
+ itemsConnection: PropTypes.shape({
+ aggregate: PropTypes.shape({
+ count: PropTypes.number.isRequired,
+ }),
+ }),
+ }).isRequired,
+ page: PropTypes.number.isRequired,
+};
-export default ComponentWithMutations;
+export default compose(itemEnhancer)(Pagination);
+export { Pagination };
diff --git a/frontend/components/Search.js b/frontend/components/Search.js
index 33017dd..d30789c 100644
--- a/frontend/components/Search.js
+++ b/frontend/components/Search.js
@@ -1,15 +1,15 @@
import Downshift from 'downshift';
import { graphql, compose } from 'react-apollo';
-import slugify from 'slugify';
import styled from 'styled-components';
import { SEARCH_ITEMS_QUERY } from '../queries';
import { Router } from '../routes';
function routeToItem(item) {
- Router.pushRoute('item', {
- slug: slugify(item.title),
- itemId: item.id,
- });
+ console.log('TODO: UPdate routeToItem function');
+ // Router.pushRoute('item', {
+ // slug: slugify(item.title),
+ // itemId: item.id,
+ // });
}
const DropDown = styled.div`
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index add1707..f591f55 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -1,13 +1,11 @@
-import { graphql, compose } from 'react-apollo';
-import { SINGLE_ITEM_QUERY } from '../queries';
+import { compose } from 'react-apollo';
import { singleItemEnhancer } from '../enhancers/enhancers';
-const SingleItem = props => {
- console.log(props);
- if (props.loading) return <p>Loading...</p>;
- if (props.error) return <p>Error...</p>;
- const item = props.findItem.items[0];
- console.log(item);
+const SingleItem = ({ findItem: { error, loading, items } }) => {
+ if (loading) return <p>Loading...</p>;
+ if (error) return <p>Error...</p>;
+ const item = items[0];
+
return (
<div>
<img src={item.largeImage || item.image} alt={item.title} />
@@ -17,6 +15,4 @@ const SingleItem = props => {
);
};
-const ComponentWithMutations = compose(singleItemEnhancer)(SingleItem);
-
-export default ComponentWithMutations;
+export default compose(singleItemEnhancer)(SingleItem);
diff --git a/frontend/components/styles/Form.js b/frontend/components/styles/Form.js
index db0eeb4..09085ad 100644
--- a/frontend/components/styles/Form.js
+++ b/frontend/components/styles/Form.js
@@ -37,4 +37,7 @@ const Form = styled.form`
padding: 1rem 2rem;
}
`;
+
+Form.displayName = 'Form';
+
export default Form;

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