From 4ca6d82ab5288632dfd9879e724b3a4831d54fe4 Mon Sep 17 00:00:00 2001 From: Vijayaraghavan M Date: Fri, 22 Jan 2021 13:22:42 +0530 Subject: [PATCH 1/3] Fetch and display categories dynamically --- pages/index.js | 19 +++++--- src/components/home/Categories.js | 76 +++++++++---------------------- src/queries/fragments/category.js | 14 ++++++ src/queries/get-categories.js | 13 ++++++ src/queries/index.js | 3 +- src/styles/sass/categories.scss | 46 +++++++++++++++++++ src/styles/sass/styles.scss | 1 + 7 files changed, 111 insertions(+), 61 deletions(-) create mode 100644 src/queries/fragments/category.js create mode 100644 src/queries/get-categories.js create mode 100644 src/styles/sass/categories.scss diff --git a/pages/index.js b/pages/index.js index 1c1bc97..32dee62 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,7 +3,8 @@ 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 { PRODUCTS_QUERY } from '../src/queries'; +import Categories from '../src/components/home/Categories'; +import { PRODUCTS_QUERY, CATEGORIES_QUERY } from '../src/queries'; const NewProducts = ({ products }) => { return ( @@ -47,24 +48,30 @@ const NewProducts = ({ products }) => { }; const Index = (props) => { - const { products } = props; - + const { products, categories } = props; + console.log(products, categories) return ( - {/**/} + ); }; export async function getStaticProps() { - const { data } = await client.query({ + const { data: products_data } = await client.query({ query: PRODUCTS_QUERY }); + + const { data: categories_data } = await client.query({ + query: CATEGORIES_QUERY + }); + console.log(products_data, categories_data); return { props: { - products: data.products.nodes + products: products_data.products.nodes, + categories: categories_data.productCategories.nodes }, revalidate: 1 }; diff --git a/src/components/home/Categories.js b/src/components/home/Categories.js index 991ae79..e3865c3 100644 --- a/src/components/home/Categories.js +++ b/src/components/home/Categories.js @@ -1,63 +1,31 @@ import Link from 'next/link'; -const Categories = () => { +const Categories = ({ categories }) => { return (

Shop by Category

- +
+ { + categories.map(category => ( +
+ + + {category.name} +
+ {category.name} ({category.count}) +
+ + +
+ )) + } +
); diff --git a/src/queries/fragments/category.js b/src/queries/fragments/category.js new file mode 100644 index 0000000..b00459b --- /dev/null +++ b/src/queries/fragments/category.js @@ -0,0 +1,14 @@ +import ImageFragment from './image'; + +const CategoryFragment = ` + fragment CategoryFragment on ProductCategory { + name + count + image { + ...ImageFragment + } + slug + } + ${ImageFragment} +`; +export default CategoryFragment; \ No newline at end of file diff --git a/src/queries/get-categories.js b/src/queries/get-categories.js new file mode 100644 index 0000000..828171d --- /dev/null +++ b/src/queries/get-categories.js @@ -0,0 +1,13 @@ +import { gql } from '@apollo/client'; +import CategoryFragment from './fragments/category'; + +export default gql` + query { + productCategories { + nodes { + ...CategoryFragment + } + } + } + ${CategoryFragment} +`; \ No newline at end of file diff --git a/src/queries/index.js b/src/queries/index.js index d8784bc..edb1723 100644 --- a/src/queries/index.js +++ b/src/queries/index.js @@ -2,4 +2,5 @@ export { default as PRODUCTS_QUERY } from './get-products'; export { default as PRODUCT_QUERY } from './get-product'; export { default as LOGIN_USER } from './auth/login'; export { default as REGISTER_USER } from './auth/register'; -export { default as PRODUCT_SLUGS } from './get-product-slug'; \ No newline at end of file +export { default as PRODUCT_SLUGS } from './get-product-slug'; +export { default as CATEGORIES_QUERY } from './get-categories'; \ No newline at end of file diff --git a/src/styles/sass/categories.scss b/src/styles/sass/categories.scss new file mode 100644 index 0000000..c430a51 --- /dev/null +++ b/src/styles/sass/categories.scss @@ -0,0 +1,46 @@ +.wd-content { + padding: 24px 10px 10px 14px; +} + +.category-container { + text-align: center; +} + +@media screen and ( max-width: 500px ) { + .category-container { + min-width: 400px; + } +} + +@media screen and ( max-width: 400px ) { + .category-container { + min-width: 300px; + } +} + +.category-link { + cursor: pointer; + color: #333333; +} + +.category-image { + max-width: 240px; +} +.category-name { + margin: 16px; +} + +.category-view-link { + text-decoration: none; + color: #555; + border: 1px solid #555; + padding: 10px 16px; + background-color: #fff; + margin-top: 10px; +} + +.category-description { + max-width: 500px; + margin-top: 24px; + text-align: left; +} \ No newline at end of file diff --git a/src/styles/sass/styles.scss b/src/styles/sass/styles.scss index 283df9f..ff2e46d 100644 --- a/src/styles/sass/styles.scss +++ b/src/styles/sass/styles.scss @@ -6,6 +6,7 @@ @import "navbar"; @import "home"; @import "products"; +@import "categories"; @import "cart"; @import "checkout"; @import "layouts/my-account"; From 70216cc5db0769f76910c135d045e9cb1191949f Mon Sep 17 00:00:00 2001 From: Vijayaraghavan M Date: Mon, 25 Jan 2021 14:10:13 +0530 Subject: [PATCH 2/3] Remove unused classes from HTML and CSS --- pages/index.js | 2 +- src/components/home/Categories.js | 2 +- src/styles/sass/categories.scss | 15 --------------- 3 files changed, 2 insertions(+), 17 deletions(-) diff --git a/pages/index.js b/pages/index.js index daa9afc..0c3147f 100644 --- a/pages/index.js +++ b/pages/index.js @@ -48,7 +48,7 @@ const NewProducts = ({ products }) => { const Index = (props) => { const { products, categories } = props; - console.log(products, categories) + return ( diff --git a/src/components/home/Categories.js b/src/components/home/Categories.js index 94a32e6..e9ab973 100644 --- a/src/components/home/Categories.js +++ b/src/components/home/Categories.js @@ -5,7 +5,7 @@ const Categories = ({ categories }) => {

Shop by Category

-
+
{ categories.map(category => ( category && category.count ? ( diff --git a/src/styles/sass/categories.scss b/src/styles/sass/categories.scss index c430a51..4930a23 100644 --- a/src/styles/sass/categories.scss +++ b/src/styles/sass/categories.scss @@ -29,18 +29,3 @@ .category-name { margin: 16px; } - -.category-view-link { - text-decoration: none; - color: #555; - border: 1px solid #555; - padding: 10px 16px; - background-color: #fff; - margin-top: 10px; -} - -.category-description { - max-width: 500px; - margin-top: 24px; - text-align: left; -} \ No newline at end of file From 56c7194122fb8f83b294ad7f6f8fdd33f2b0df70 Mon Sep 17 00:00:00 2001 From: Vijayaraghavan M Date: Mon, 25 Jan 2021 14:18:19 +0530 Subject: [PATCH 3/3] Remove console logs --- pages/index.js | 2 +- src/components/Image.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/index.js b/pages/index.js index 0c3147f..ba2ecbe 100644 --- a/pages/index.js +++ b/pages/index.js @@ -66,7 +66,7 @@ export async function getStaticProps() { const { data: categories_data } = await client.query({ query: CATEGORIES_QUERY }); - console.log(products_data, categories_data); + return { props: { products: products_data.products.nodes, diff --git a/src/components/Image.js b/src/components/Image.js index 688359c..6792cc2 100644 --- a/src/components/Image.js +++ b/src/components/Image.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; const Image = (props) => { const [error, setError] = useState(false); - console.log(props); + const { src, width,