diff --git a/next.config.js b/next.config.js index 4b8c4f6..7d33e3c 100644 --- a/next.config.js +++ b/next.config.js @@ -12,6 +12,8 @@ const workBoxOptions = { } }; +const backend_hostname = new URL(process.env.NEXT_PUBLIC_WOO_SITE_URL).hostname; + module.exports = withOffline( withCss( withSass({ @@ -21,7 +23,13 @@ module.exports = withOffline( generateSw: false, globPatterns: ['static/**/*'], globDirectory: '.', - target: 'serverless' + target: 'serverless', + images: { + domains: [ + backend_hostname, + 'https://via.placeholder.com' + ], + }, }) ) ); diff --git a/package.json b/package.json index 6e99e5e..b20e2e7 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "next-offline": "^4.0.6", "node-fetch": "^2.6.1", "nprogress": "^0.2.0", + "prop-types": "^15.7.2", "react": "^17.0.1", "react-bootstrap": "^1.4.3", "react-dom": "^17.0.1", diff --git a/pages/index.js b/pages/index.js index 1c1bc97..bd0cd35 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,6 +3,7 @@ import Link from 'next/link'; import client from '../src/apollo/ApolloClient'; import AddToCartButton from '../src/components/cart/AddToCartButton'; import Hero from '../src/components/home/Hero'; +import Image from '../src/components/Image'; import { PRODUCTS_QUERY } from '../src/queries'; const NewProducts = ({ products }) => { @@ -20,11 +21,9 @@ const NewProducts = ({ products }) => { - {item.name}
{item.name}

{item.price}

diff --git a/pages/product/[slug].js b/pages/product/[slug].js index 4ce82e3..1926ce6 100644 --- a/pages/product/[slug].js +++ b/pages/product/[slug].js @@ -1,6 +1,7 @@ import Layout from '../../src/components/layouts/Layout'; import AddToCartButton from '../../src/components/cart/AddToCartButton'; import client from '../../src/apollo/ApolloClient'; +import Image from '../../src/components/Image'; import { PRODUCT_QUERY, PRODUCT_SLUGS @@ -16,11 +17,9 @@ const Product = ({data}) => {
- {product?.name}
diff --git a/public/static/placeholder.png b/public/static/placeholder.png new file mode 100644 index 0000000..09639d4 Binary files /dev/null and b/public/static/placeholder.png differ diff --git a/src/apollo/ApolloClient.js b/src/apollo/ApolloClient.js index 2baba7e..bfcf280 100644 --- a/src/apollo/ApolloClient.js +++ b/src/apollo/ApolloClient.js @@ -23,7 +23,8 @@ const link = createHttpLink({ const client = new ApolloClient({ link, cache, - defaultOptions + defaultOptions, + connectToDevTools: true }); export default client; diff --git a/src/components/Image.js b/src/components/Image.js new file mode 100644 index 0000000..da5b1d7 --- /dev/null +++ b/src/components/Image.js @@ -0,0 +1,60 @@ +import { useState } from 'react'; +import Img from 'next/image'; +import PropTypes from 'prop-types'; + +const Image = (props) => { + + const [error, setError] = useState(false); + + const { + src, + width, + height, + alt, + ...otherProps + } = props; + + // URL to use if the actual image fails to load. + const fallBackUrl = '/static/placeholder.png'; + + /** + * Handles any error when loading the image. + * + * @return {void} + */ + const errorHandler = () => { + setError(true); + } + + return ( + {alt} + ); +}; + +Image.propTypes = { + src: PropTypes.string.isRequired, + width: PropTypes.number, + height: PropTypes.number, + alt: PropTypes.string, + layout: PropTypes.oneOf(['fixed', 'intrinsic', 'responsive', 'fill']), + sizes: PropTypes.string, + quality: PropTypes.number, + priority: PropTypes.bool, + objectFit: PropTypes.string, + objectPosition: PropTypes.string, + className: PropTypes.string, + id: PropTypes.string +} + +Image.defaultProps = { + width: 240, + height: 240, +} + +export default Image; diff --git a/src/components/cart/cart-page/CartItem.js b/src/components/cart/cart-page/CartItem.js index 944d91e..ed22082 100644 --- a/src/components/cart/cart-page/CartItem.js +++ b/src/components/cart/cart-page/CartItem.js @@ -1,6 +1,6 @@ import { useState } from 'react'; import { updateCart } from '../../../utils/cart-functions'; - +import Image from '../../Image'; const CartItem = ({ item, handleRemoveProductClick, setCart }) => { const [productCount, setProductCount] = useState(item.qty); @@ -40,11 +40,11 @@ const CartItem = ({ item, handleRemoveProductClick, setCart }) => { - {item.image.title} {item.name} diff --git a/src/components/checkout/CheckoutCartItem.js b/src/components/checkout/CheckoutCartItem.js index eb8fed8..f5228d7 100644 --- a/src/components/checkout/CheckoutCartItem.js +++ b/src/components/checkout/CheckoutCartItem.js @@ -2,11 +2,11 @@ const CheckoutCartItem = ({ item }) => { return ( - {item.image.title} {item.name} diff --git a/src/components/home/Categories.js b/src/components/home/Categories.js index 991ae79..c0eac34 100644 --- a/src/components/home/Categories.js +++ b/src/components/home/Categories.js @@ -9,12 +9,11 @@ const Categories = () => {
  • - Accessories

    @@ -26,12 +25,11 @@ const Categories = () => {
  • - Hoodies

    @@ -43,12 +41,11 @@ const Categories = () => {
  • - Tshirts

    diff --git a/src/styles/sass/products.scss b/src/styles/sass/products.scss index 49f8e0b..3191aca 100644 --- a/src/styles/sass/products.scss +++ b/src/styles/sass/products.scss @@ -23,9 +23,7 @@ color: #333333; } -.product-image { - max-width: 240px; -} + .product-name { margin: 16px; }