Merge pull request #168 from w3bdesign/development

Finish category page

Author: w3bdesign

components/Category/Categories.component.jsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { v4 as uuidv4 } from 'uuid';
 
 /**
@@ -10,15 +11,17 @@ const Categories = ({ categories }) => {
     <>
       <section className="container mx-auto bg-white">
         <div className="flex ">
-          {categories.map(({ name }) => (
-            <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>
+          {categories.map(({ id, name, slug }) => (
+            <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>
+                </div>
               </div>
-            </div>
+            </Link>
           ))}
         </div>
       </section>

pages/kategori/[slug].js

@@ -0,0 +1,57 @@
+import { withRouter } from 'next/router';
+
+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 = ({ categoryName, products }) => {
+ 
+
+  const error = false;
+
+  return (
+    <>
+      {products ? (
+        <>
+          <PageTitle title={categoryName} marginleft="50" />
+
+          <IndexProducts products={products} />
+        </>
+      ) : (
+        <div className="mt-8 text-2xl text-center">Laster produkt ...</div>
+      )}
+      {/* Display error message if error occured */}
+      {error && (
+        <div className="mt-8 text-2xl text-center">
+          Feil under lasting av produkt ...
+        </div>
+      )}
+    </>
+  );
+};
+
+export default withRouter(Produkt);
+
+export async function getServerSideProps(context) {
+  let {
+    query: { id },
+  } = context;
+
+  const res = await client.query({
+    query: GET_PRODUCTS_FROM_CATEGORY,
+    variables: { id },
+  });
+
+  return {
+    props: {
+      categoryName: res.data.productCategory.name,
+      products: res.data.productCategory.products.nodes,
+    },
+  };
+}

utils/const/GQL_QUERIES.js

@@ -118,6 +118,56 @@ export const FETCH_ALL_CATEGORIES_QUERY = gql`
   }
 `;
 
+export const GET_PRODUCTS_FROM_CATEGORY = gql`
+  query ProductsFromCategory($id: ID!) {
+    productCategory(id: $id) {
+      id
+      name
+      products(first: 50) {
+        nodes {
+          id
+          productId
+          averageRating
+          slug
+          description
+          image {
+            id
+            uri
+            title
+            srcSet
+            sourceUrl
+          }
+          name
+          ... on SimpleProduct {
+            price
+            id
+          }
+          ... on VariableProduct {
+            price
+            id
+          }
+          ... on ExternalProduct {
+            price
+            id
+            externalUrl
+          }
+          ... on GroupProduct {
+            products {
+              nodes {
+                ... on SimpleProduct {
+                  id
+                  price
+                }
+              }
+            }
+            id
+          }
+        }
+      }
+    }
+  }
+`;
+
 export const GET_CART = gql`
   query GET_CART {
     cart {