Task: Implement Offer page

Simply007 · Nov 1, 2019 · fb2e4d4 · fb2e4d4
1 parent 9a477f4
commit fb2e4d4
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 64 deletions.
diff --git a/src/routes/offer/index.json.js b/src/routes/offer/index.json.js
@@ -2,48 +2,31 @@ import send from '@polka/send';
 import {getProducts} from '../../cms';
 
 export async function get(req, res) {
-  // const productsResponse = await getProducts();
-  const itemsByCategory = {
-    Desserts: [
-      {
-        name: 'Double Chocolate Cupcakes ',
-        image: {
-          dimensions: {
-            width: 640,
-            height: 640,
-          },
-          alt: null,
-          copyright: null,
-          url:
-            'https://sapperweb.cdn.prismic.io/sapperweb/bfc8a1d91fce6c4c7152c97069830fcb8f5f80b5_chocolate-cupcakes-2-400x400.jpg',
-          Snipcart: {
-            dimensions: {
-              width: 50,
-              height: 50,
-            },
-            alt: null,
-            copyright: null,
-            url:
-              'https://sapperweb.cdn.prismic.io/sapperweb/d03b32034a0ce6bbab9063128c4ca3de01cb1ded_chocolate-cupcakes-2-400x400.jpg',
-          },
-          Listing: {
-            dimensions: {
-              width: 300,
-              height: 300,
-            },
-            alt: null,
-            copyright: null,
-            url:
-              'https://sapperweb.cdn.prismic.io/sapperweb/fb54d5adc8feb5578cb9e84f95d41008aed8784e_chocolate-cupcakes-2-400x400.jpg',
-          },
-        },
-        price: 7,
-        description: 'Chocolate, eggs, vanilla, milk',
-      },
-    ],
-  };
+  const productsResponse = await getProducts();
+  const itemsByCategory = productsResponse.results.reduce(reduceCategories, {});
   send(res, 200, JSON.stringify(itemsByCategory), {
     'Cache-Control': `max-age=0, s-max-age=${600}`, // 10 minutes
     'Content-Type': 'application/json',
   });
 }
+
+function reduceCategories(list, {data}) {
+  if (!data.categories[0].link.data) {
+    console.log('malformed', data);
+    return list;
+  }
+  const {categories, title, image, price, description} = data;
+  const categoryName = categories[0].link.data.title[0].text;
+  const mealName = title[0].text;
+  const descriptionText = description[0].text;
+
+  return {
+    ...list,
+    [categoryName]: (list[categoryName] || []).concat({
+      name: mealName,
+      image,
+      price,
+      description: descriptionText,
+    }),
+  };
+}
diff --git a/src/routes/offer/index.svelte b/src/routes/offer/index.svelte
@@ -16,9 +16,12 @@
 </script>
 
 <script>
+  import {fade} from 'svelte/transition';
   import PageTitle from '../../components/PageTitle.svelte';
   import HeroBanner from '../../components/HeroBanner.svelte';
   export let itemsPerCategory;
+
+  let selectedCategory;
 </script>
 
 <style>
@@ -231,7 +234,7 @@
   bannerImg="offer" />
 
 <section>
-  <div class="container">
+  <div class="container" transition:fade>
     <PageTitle title="Discover" subTitle="Our Menu" theme="title-dark" />
 
     <p>
@@ -241,29 +244,37 @@
     </p>
 
     <ul class="category">
-      <li class="category__item category__item--active">
-        <h4 class="category__title">Desserts</h4>
-        <div class="category__content">
-          <ul class="items">
-            <li class="item">
-              <img
-                src="https://sapperweb.cdn.prismic.io/sapperweb/bfc8a1d91fce6c4c7152c97069830fcb8f5f80b5_chocolate-cupcakes-2-400x400.jpg"
-                class="item-img"
-                alt="" />
-              <div>
-                <p class="item-name">
-                  <span class="item-name__title">
-                    Double Chocolate Cupcakes
-                  </span>
-                  <span class="item-name__dots" />
-                  <span class="item-name__price">$&nbsp;7</span>
-                </p>
-                <p class="item-ingredients">Chocolate, eggs, vanilla, milk</p>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </li>
+      {#each itemsPerCategory as [category, items]}
+        <li
+          class="category__item"
+          class:category__item--active={selectedCategory === category}>
+          <h4
+            class="category__title"
+            on:click={() => (selectedCategory === category ? (selectedCategory = null) : (selectedCategory = category))}
+            aria-expanded={selectedCategory === category}
+            role="button"
+            tabindex="0">
+            {category}
+          </h4>
+          <div class="category__content">
+            <ul class="items">
+              {#each items as item}
+                <li class="item">
+                  <img src={item.image.url} class="item-img" alt="" />
+                  <div>
+                    <p class="item-name">
+                      <span class="item-name__title">{item.name}</span>
+                      <span class="item-name__dots" />
+                      <span class="item-name__price">$&nbsp;{item.price}</span>
+                    </p>
+                    <p class="item-ingredients">{item.description}</p>
+                  </div>
+                </li>
+              {/each}
+            </ul>
+          </div>
+        </li>
+      {/each}
     </ul>
   </div>
 </section>