We can now display products from a single category

Author: w3bdesign

components/Category/Categories.component.jsx

@@ -12,19 +12,16 @@ const Categories = ({ categories }) => {
       <section className="container mx-auto bg-white">
         <div className="flex ">
           {categories.map(({ id, name, slug }) => (
-            <div
-              key={uuidv4()}
-              className="flex flex-col justify-around p-6 cursor-pointer xs:w-1/2 md:w-1/3 xl:w-1/4"
-            >
-              <div className="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
-                <Link
-                  as={`/kategori/${slug}-${id}`}
-                  href={`/kategori?slug=${slug}-${id}`}
-                >
+            <Link as={`/kategori/${slug}?id=${id}`} href="/kategori/[id]">
+              <div
+                key={uuidv4()}
+                className="flex flex-col justify-around p-6 cursor-pointer xs:w-1/2 md:w-1/3 xl:w-1/4"
+              >
+                <div className="flex items-center justify-center w-full h-16 text-center border border-gray-300 rounded-lg shadow hover:shadow-outline">
                   <p className="text-lg">{name}</p>
-                </Link>
+                </div>
               </div>
-            </div>
+            </Link>
           ))}
         </div>
       </section>

pages/kategori/[slug].js

@@ -1,22 +1,28 @@
 import { withRouter } from 'next/router';
 
-import SingleProduct from 'components/Product/SingleProduct.component';
+import IndexProducts from 'components/Product/IndexProducts.component';
+import PageTitle from 'components/Header/PageTitle.component';
+
 import client from 'utils/apollo/ApolloClient';
 
 import { GET_PRODUCTS_FROM_CATEGORY } from 'utils/const/GQL_QUERIES';
 
 /**
  * Display a single product with dynamic pretty urls
  */
-const Produkt = (props) => {
-  const { product } = props;
+const Produkt = ({ categoryName, products }) => {
+ 
 
   const error = false;
 
   return (
     <>
-      {product ? (
-        <SingleProduct product={product} />
+      {products ? (
+        <>
+          <PageTitle title={categoryName} marginleft="50" />
+
+          <IndexProducts products={products} />
+        </>
       ) : (
         <div className="mt-8 text-2xl text-center">Laster produkt ...</div>
       )}
@@ -32,19 +38,20 @@ const Produkt = (props) => {
 
 export default withRouter(Produkt);
 
-export async function getStaticProps(context) {
+export async function getServerSideProps(context) {
   let {
-    query: { slug, productId },
+    query: { id },
   } = context;
 
-  const id = productId;
-
   const res = await client.query({
     query: GET_PRODUCTS_FROM_CATEGORY,
     variables: { id },
   });
 
   return {
-    props: { product: res.data.product },
+    props: {
+      categoryName: res.data.productCategory.name,
+      products: res.data.productCategory.products.nodes,
+    },
   };
 }