Display products

.env-example

@@ -1,4 +1,8 @@
+#Backend WordPress Site URL.
 NEXT_PUBLIC_WORDPRESS_SITE_URL=https://example.com
 
+#Frontend Next.js Site URL
+NEXT_PUBLIC_SITE_URL=http://localhost:3000
+
 WC_CONSUMER_KEY=ck_xx
 WC_CONSUMER_SECRET=cs_xx

README.md

@@ -51,8 +51,9 @@ npm run dev
 
 ## Configuration :wrench:
 
-1. (Required) Create a `.env` file taking reference from `.env-example` and update your WordPressSite URL.
+1. (Required) Create a `.env` file taking reference from `.env-example` and update your WordPressSite URL and Frontend next.js URL.
 - `NEXT_PUBLIC_WORDPRESS_URL=https://example.com`
+- `NEXT_PUBLIC_SITE_URL=http://localhost.com` ( This will be your frontend Next.js URL)
 
 2. Add your `WC_CONSUMER_KEY` and `WC_CONSUMER_SECRET` to the `.env` by following [WooCommerce > Settings > Advanced > REST API](https://woocommerce.github.io/woocommerce-rest-api-docs/#authentication)
 

next.config.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const allowedImageWordPressDomain = new URL( process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL ).hostname;
+
+module.exports = {
+	trailingSlash: false,
+	webpackDevMiddleware: config => {
+		config.watchOptions = {
+			poll: 1000,
+			aggregateTimeout: 300
+		}
+
+		return config
+	},
+	sassOptions: {
+		includePaths: [path.join(__dirname, 'styles')]
+	},
+	/**
+	 * We specify which domains are allowed to be optimized.
+	 * This is needed to ensure that external urls can't be abused.
+	 * @see https://nextjs.org/docs/basic-features/image-optimization#domains
+	 */
+	images: {
+		domains: [ allowedImageWordPressDomain, 'via.placeholder.com' ],
+	},
+}

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "NODE_OPTIONS='--inspect' next dev",
     "build": "next build",
     "start": "next start",
     "svg": "svgr -d src/components/icons src/components/icons/svgs"
@@ -12,9 +12,11 @@
     "@svgr/cli": "^5.5.0",
     "@woocommerce/woocommerce-rest-api": "^1.0.1",
     "axios": "^0.21.1",
+    "classnames": "^2.3.1",
     "dompurify": "^2.3.1",
     "lodash": "^4.17.21",
     "next": "11.1.0",
+    "prop-types": "^15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "sass": "^1.38.0"

pages/index.js

@@ -3,24 +3,23 @@
  */
 import Header from '../src/components/layouts/header';
 import Footer from '../src/components/layouts/footer';
-import { HEADER_FOOTER_ENDPOINT } from '../src/utils/constants/endpoints';
+import Products from '../src/components/products';
+import { GET_PRODUCTS_ENDPOINT, HEADER_FOOTER_ENDPOINT } from '../src/utils/constants/endpoints';
 
 /**
  * External Dependencies.
  */
 import axios from 'axios';
 
-export default function Home({data}) {
-	const { header, footer } = data;
+export default function Home({ headerFooter, products }) {
+
+	const { header, footer } = headerFooter || {};
 
 	return (
 		<div >
 			<Header header={header}/>
-			<main >
-				<h1 >
-					Welcome to <a href="https://nextjs.org">Next.js!</a>
-				</h1>
-				<p className="text-green-500">Hello</p>
+			<main className="container mx-auto p-4">
+				<Products products={products}/>
 			</main>
 
 			<Footer footer={footer}/>
@@ -29,10 +28,15 @@ export default function Home({data}) {
 }
 
 export async function getStaticProps() {
-	const { data } = await axios.get( HEADER_FOOTER_ENDPOINT );
+
+	const { data: headerFooterData } = await axios.get( HEADER_FOOTER_ENDPOINT );
+	const { data: productsData } = await axios.get( GET_PRODUCTS_ENDPOINT );
 
 	return {
-		props: data || {},
+		props: {
+			headerFooter: headerFooterData?.data ?? {},
+			products: productsData?.products ?? {}
+		},
 
 		/**
 		 * Revalidate means that if a new request comes to server, then every 1 sec it will check

src/components/image/index.js

@@ -0,0 +1,76 @@
+import Img from 'next/image';
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import {DEFAULT_IMG_URL} from '../../utils/constants/images';
+
+/**
+ * Image Component.
+ * We don't need to add srcSet, as Next js will generate that.
+ * @see https://nextjs.org/docs/api-reference/next/image#other-props
+ * @see https://nextjs.org/docs/basic-features/image-optimization#device-sizes
+ *
+ * @param {Object} props Component props.
+ *
+ * @return {jsx}
+ */
+const Image = ( props ) => {
+	const {altText, title, width, height, sourceUrl, className, layout, objectFit, containerClassNames, showDefault, ...rest} = props;
+
+	if ( ! sourceUrl && ! showDefault ) {
+		return null;
+	}
+
+	/**
+	 * If we use layout = fill then, width and height of the image cannot be used.
+	 * and the image fills on the entire width and the height of its parent container.
+	 * That's we need to wrap our image in a container and give it a height and width.
+	 * Notice that in this case, the given height and width is being used for container and not img.
+	 */
+	if ( 'fill' === layout ) {
+		const attributes = {
+			alt: altText || title,
+			src: sourceUrl || ( showDefault ? DEFAULT_IMG_URL : '' ),
+			layout: 'fill',
+			className: cx( 'object-cover', className ),
+			...rest
+		};
+
+		return (
+			<div className={cx( 'relative', containerClassNames ) }>
+				<Img {...attributes}/>
+			</div>
+		);
+	} else {
+		const attributes = {
+			alt: altText || title,
+			src: sourceUrl || ( showDefault ? DEFAULT_IMG_URL : '' ),
+			width: width || 'auto',
+			height: height || 'auto',
+			className,
+			...rest
+		};
+		return <Img {...attributes} />;
+	}
+};
+
+Image.propTypes = {
+	altText: PropTypes.string,
+	title: PropTypes.string,
+	sourceUrl: PropTypes.string,
+	layout: PropTypes.string,
+	showDefault: PropTypes.bool,
+	containerClassName: PropTypes.string,
+	className: PropTypes.string
+};
+
+Image.defaultProps = {
+	altText: '',
+	title: '',
+	sourceUrl: '',
+	showDefault: true,
+	containerClassNames: '',
+	className: 'product__image',
+};
+
+export default Image;

src/components/products/index.js

@@ -0,0 +1,38 @@
+import { isArray, isEmpty } from 'lodash';
+import Link from 'next/link';
+import Image from '../image';
+
+const Products = ({ products }) => {
+
+	if ( isEmpty( products ) || !isArray( products ) ) {
+		return null;
+	}
+
+	return (
+		<div className="flex flex-wrap -mx-2 overflow-hidden">
+
+			{ products.length ? products.map( product => {
+				const img = product?.images?.[0] ?? {};
+				return (
+					<div key={ product?.id } className="my-2 px-2 w-full overflow-hidden sm:w-1/2 md:w-1/3 xl:w-1/4">
+						<Link href={product?.permalink ?? '/'}>
+							<a>
+								<Image
+									sourceUrl={ img?.src ?? '' }
+									altText={ img?.alt ?? ''}
+									title={ product?.name ?? '' }
+									width="380"
+									height="380"
+								/>
+								<h3 className="font-bold uppercase">{ product?.name ?? '' }</h3>
+							</a>
+						</Link>
+					</div>
+				)
+			} ) : null }
+
+		</div>
+	)
+}
+
+export default Products;

src/utils/constants/endpoints.js

@@ -1 +1,2 @@
 export const HEADER_FOOTER_ENDPOINT = `${ process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL }/wp-json/rae/v1/header-footer?header_location_id=hcms-menu-header&footer_location_id=hcms-menu-footer`;
+export const GET_PRODUCTS_ENDPOINT = `${process.env.NEXT_PUBLIC_SITE_URL}/api/get-products`;

src/utils/constants/images.js

@@ -0,0 +1 @@
+export const DEFAULT_IMG_URL = 'https://via.placeholder.com/380x380';