Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create custom image component #64

Merged
merged 6 commits into from
Jan 25, 2021
Merged

Create custom image component #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
32784d9
Create custom image component
VijayaRaghavanM Jan 21, 2021
f097035
Replace all img tags with custom image component
VijayaRaghavanM Jan 21, 2021
32fbbf0
Add API hostnames to Next config file
VijayaRaghavanM Jan 21, 2021
5334120
Add PropTypes to the image component
VijayaRaghavanM Jan 22, 2021
bc73e72
Add Optional chaining and use static placeholder
VijayaRaghavanM Jan 22, 2021
114da7c
Merge branch 'master' into feature/custom-image-component
VijayaRaghavanM Jan 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion next.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ const workBoxOptions = {
}
};

const backend_hostname = new URL(process.env.NEXT_PUBLIC_WOO_SITE_URL).hostname;

module.exports = withOffline(
withCss(
withSass({
Expand All @@ -21,7 +23,13 @@ module.exports = withOffline(
generateSw: false,
globPatterns: ['static/**/*'],
globDirectory: '.',
target: 'serverless'
target: 'serverless',
images: {
domains: [
backend_hostname,
'https://via.placeholder.com'
],
},
})
)
);
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
9 changes: 4 additions & 5 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => {
Expand All @@ -20,11 +21,9 @@ const NewProducts = ({ products }) => {
<Link href={`/product/${item.slug}`}>
<a>
<span className="product-link">
<img
className="product-image"
src={item.image.sourceUrl}
srcSet={item.image.srcSet}
alt={item.name}
<Image
src={item?.image?.sourceUrl}
alt={item?.image?.altText || item?.name}
/>
<h5 className="product-name">{item.name}</h5>
<p className="product-price">{item.price}</p>
Expand Down
7 changes: 3 additions & 4 deletions pages/product/[slug].js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -16,11 +17,9 @@ const Product = ({data}) => {
<div className="mx-auto mt-5">
<div className="row">
<div className="col-md-6">
<img
className="product-image"
<Image
src={product?.image?.sourceUrl}
srcSet={product?.image?.srcSet}
alt={product?.name}
alt={product?.image?.altText || product?.name}
/>
</div>
<div className="col-md-6">
Expand Down
Binary file added public/static/placeholder.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/apollo/ApolloClient.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ const link = createHttpLink({
const client = new ApolloClient({
link,
cache,
defaultOptions
defaultOptions,
connectToDevTools: true
});

export default client;
60 changes: 60 additions & 0 deletions src/components/Image.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Img
src={error ? fallBackUrl : src}
width={width}
height={height}
onError={errorHandler}
alt={alt}
{...otherProps}/>
);
};

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;
12 changes: 6 additions & 6 deletions src/components/cart/cart-page/CartItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

Expand Down Expand Up @@ -40,11 +40,11 @@ const CartItem = ({ item, handleRemoveProductClick, setCart }) => {
</span>
</th>
<td className="wd-cart-element">
<img
width="64"
src={item.image.sourceUrl}
srcSet={item.image.srcSet}
alt={item.image.title}
<Image
width={64}
height={64}
src={item?.image?.sourceUrl}
alt={item?.image?.altText || item?.name}
/>
</td>
<td className="wd-cart-element">{item.name}</td>
Expand Down
10 changes: 5 additions & 5 deletions src/components/checkout/CheckoutCartItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ const CheckoutCartItem = ({ item }) => {
return (
<tr className="wd-cart-item" key={item.databaseId}>
<td className="wd-cart-element">
<img
width="64"
src={item.image.sourceUrl}
srcSet={item.image.srcSet}
alt={item.image.title}
<Image
width={64}
height={64}
src={item?.image?.sourceUrl}
alt={item?.image?.altText || item?.name}
/>
</td>
<td className="wd-cart-element">{item.name}</td>
Expand Down
21 changes: 9 additions & 12 deletions src/components/home/Categories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,11 @@ const Categories = () => {
<li className="product-category product first col-md-4">
<Link as={`/`} href={`/`}>
<a className="">
<img
<Image
src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories.jpg"
alt="Accessories"
width="324"
height="324"
srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories.jpg 801w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/accessories-768x768.jpg 768w"
width={324}
height={324}
sizes="(max-width: 324px) 100vw, 324px"
/>
<h2 className="woocommerce-loop-category__title">
Expand All @@ -26,12 +25,11 @@ const Categories = () => {
<li className="product-category product col-md-4">
<Link as={`/`} href={`/`}>
<a className="">
<img
<Image
src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies.jpg"
alt="Hoodies"
width="324"
height="324"
srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies.jpg 800w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/hoodies-768x768.jpg 768w"
width={324}
height={324}
sizes="(max-width: 324px) 100vw, 324px"
/>
<h2 className="woocommerce-loop-category__title">
Expand All @@ -43,12 +41,11 @@ const Categories = () => {
<li className="product-category product last col-md-4">
<Link as={`/`} href={`/`}>
<a className="">
<img
<Image
src="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg"
alt="Tshirts"
width="324"
height="324"
srcSet="https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts.jpg 801w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-150x150.jpg 150w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-300x300.jpg 300w, https://woo-vsf.dev5.rt.gw/wp-content/uploads/2019/05/tshirts-768x768.jpg 768w"
width={324}
height={324}
sizes="(max-width: 324px) 100vw, 324px"
/>
<h2 className="woocommerce-loop-category__title">
Expand Down
4 changes: 1 addition & 3 deletions src/styles/sass/products.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,7 @@
color: #333333;
}

.product-image {
max-width: 240px;
}

.product-name {
margin: 16px;
}
Expand Down