Merge pull request #5 from imranhsayed/feature/display-products

Display products

Author: imranhsayed

.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' ],
+},
+}

nextjs.config.js

@@ -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"

package-lock.json

@@ -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

package.json

@@ -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;

pages/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/components/image/index.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`;