diff --git a/pages/category/[slug].js b/pages/category/[slug].js new file mode 100644 index 0000000..f294a2b --- /dev/null +++ b/pages/category/[slug].js @@ -0,0 +1,60 @@ +import Layout from '../../src/components/layouts/Layout'; +import client from '../../src/apollo/ApolloClient'; +import { + CATEGORY_QUERY, + CATEGORY_SLUGS +} from '../../src/queries'; +import Products from '../../src/components/home/Products'; + +const Category = ({data}) => { + + const { category } = data || {} + + return ( + +
+

+ {category.name} ({category.count}) +

+
+ + + ); +}; + +export async function getStaticProps({ params }) { + let { slug } = params; + + const { data } = await client.query({ + query: CATEGORY_QUERY, + variables: { slug } + }); + + return { + props: { + data: { + category: data?.productCategory + } + } + }; +} + +export async function getStaticPaths() { + + const { data } = await client.query({ + query: CATEGORY_SLUGS + }); + + const pathsData = []; + data.productCategories.nodes.map((product) => { + console.log(product); + pathsData.push({ params: { slug: `${product.slug}` } }); + }); + + return { + paths: pathsData, + fallback: true + }; +} + +export default Category; diff --git a/pages/index.js b/pages/index.js index 1c1bc97..78bb164 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,70 +1,36 @@ import Layout from '../src/components/layouts/Layout'; -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 from '../src/components/home/Products'; +import { PRODUCTS_QUERY, CATEGORIES_QUERY } from '../src/queries'; -const NewProducts = ({ products }) => { - return ( -
-

Products

- {products.length ? ( -
-
- {products.map((item) => - // @TODO Need to add support for Group product. - undefined !== item && 'GroupProduct' !== item.__typename ? ( -
- {/* @TODO need to get rid of using databseId here. */} - - - - {item.name} -
{item.name}
-

{item.price}

- - - - -
- ) : ( - '' - ) - )} -
-
- ) : ( - '' - )} -
- ); -}; 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/pages/product/[slug].js b/pages/product/[slug].js index 4ce82e3..5863211 100644 --- a/pages/product/[slug].js +++ b/pages/product/[slug].js @@ -72,8 +72,8 @@ export async function getStaticPaths() { const pathsData = []; - data.products.edges.map((product) => { - pathsData.push({ params: { slug: `${product.node.slug}` } }); + data.products.nodes.map((product) => { + pathsData.push({ params: { slug: `${product.slug}` } }); }); return { diff --git a/src/components/home/Categories.js b/src/components/home/Categories.js index 991ae79..3d67b08 100644 --- a/src/components/home/Categories.js +++ b/src/components/home/Categories.js @@ -1,63 +1,35 @@ import Link from 'next/link'; -const Categories = () => { +const Categories = ({ categories }) => { return (

Shop by Category

- +
+ { + categories.map(category => ( + undefined !== category + && 0 !== category.count + && null !== category.count ? ( +
+ + + {category.name} +
+ {category.name} ({category.count}) +
+ + +
+ ) : null + )) + } +
); diff --git a/src/components/home/Products.js b/src/components/home/Products.js new file mode 100644 index 0000000..0e68842 --- /dev/null +++ b/src/components/home/Products.js @@ -0,0 +1,45 @@ +import Link from 'next/link'; +import AddToCartButton from '../cart/AddToCartButton'; + +const Products = ({ products }) => { + return ( +
+

Products

+ {products.length ? ( +
+
+ {products.map((item) => + // @TODO Need to add support for Group product. + undefined !== item && 'GroupProduct' !== item.__typename ? ( +
+ {/* @TODO need to get rid of using databseId here. */} + + + + {item.name} +
{item.name}
+

{item.price}

+ + + + +
+ ) : ( + '' + ) + )} +
+
+ ) : ( + '' + )} +
+ ); +}; + +export default Products; \ No newline at end of file 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/get-category-slug.js b/src/queries/get-category-slug.js new file mode 100644 index 0000000..af2e6a6 --- /dev/null +++ b/src/queries/get-category-slug.js @@ -0,0 +1,11 @@ +import { gql } from '@apollo/client'; + +export default gql` + query { + productCategories { + nodes { + slug + } + } + } +`; \ No newline at end of file diff --git a/src/queries/get-category.js b/src/queries/get-category.js new file mode 100644 index 0000000..0d60298 --- /dev/null +++ b/src/queries/get-category.js @@ -0,0 +1,18 @@ +import { gql } from '@apollo/client'; +import CategoryFragment from './fragments/category'; +import ProductFragment from './fragments/product'; + +export default gql` + query Category($slug: ID!) { + productCategory(id: $slug, idType: SLUG) { + ...CategoryFragment + products { + nodes { + ...ProductFragment + } + } + } + } + ${CategoryFragment} + ${ProductFragment} +`; \ No newline at end of file diff --git a/src/queries/get-product-slug.js b/src/queries/get-product-slug.js index c01adc6..fd5e31f 100644 --- a/src/queries/get-product-slug.js +++ b/src/queries/get-product-slug.js @@ -1,15 +1,11 @@ import { gql } from '@apollo/client'; -import ProductFragment from './fragments/product'; export default gql` query GET_PRODUCT_SLUGS { products: products { - edges { - node { - ...ProductFragment - } + nodes { + slug } } } - ${ProductFragment} `; \ No newline at end of file diff --git a/src/queries/index.js b/src/queries/index.js index d8784bc..ab06a9e 100644 --- a/src/queries/index.js +++ b/src/queries/index.js @@ -2,4 +2,7 @@ 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'; +export { default as CATEGORY_QUERY } from './get-category'; +export { default as CATEGORY_SLUGS } from './get-category-slug'; \ 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";