Merge pull request #74 from DataDog/dash-workshop-fixes

adds fixes for workshops

Author: arosenkranz

services/ads/java/src/main/java/adsjava/AdsJavaApplication.java

@@ -47,14 +47,14 @@ public String home() {
 	public HashMap[] ads(@RequestHeader HashMap<String, String> headers) {
 
         boolean errorFlag = false;
-        if(headers.get("X-Throw-Error") != null) {
-            errorFlag = Boolean.parseBoolean(headers.get("X-Throw-Error"));
+        if(headers.get("x-throw-error") != null) {
+            errorFlag = Boolean.parseBoolean(headers.get("x-throw-error"));
         }
 
         // if x-error-rate is present, set to variable errorRate (if missing, set to 1)
         double errorRate = 1;
-        if(headers.get("X-Error-Rate") != null) {
-            errorRate = Double.parseDouble(headers.get("X-Error-Rate"));
+        if(headers.get("x-error-rate") != null) {
+            errorRate = Double.parseDouble(headers.get("x-error-rate"));
         }
 
         if(errorFlag && Math.random() < errorRate) {

services/frontend/components/common/Ad/Ad.tsx

@@ -26,6 +26,12 @@ function Ad() {
         'X-Error-Rate': process.env.NEXT_PUBLIC_ADS_ERROR_RATE || '0.25',
       }
       fetch(`${adsPath}/ads`, { headers })
+        .then((res) => {
+          if (!res.ok) {
+            throw new Error('Error fetching ad')
+          }
+          return res
+        })
         .then((res) => res.json())
         .then((data) => {
           const index = getRandomArbitrary(0, data.length)

services/frontend/pages/taxonomies/[taxonomy]/[...slug].tsx

@@ -1,62 +1,42 @@
-import { useEffect, useState, useCallback } from 'react'
-import { useRouter } from 'next/router'
+import { Page } from '@customTypes/page'
+import { Taxon } from '@customTypes/taxons'
 import { ProductList } from '@components/product'
 import { Layout } from '@components/common'
 
-const TaxonomyPage = () => {
-  const router = useRouter()
-  const { taxonomy, slug } = router.query
+export const getServerSideProps = async ({ params }) => {
+  const baseUrl =
+    process.env.NODE_ENV === 'development'
+      ? 'http://localhost:3000/api'
+      : '/api'
 
-  const [products, setProducts] = useState([])
-  const [pages, setPages] = useState([])
-  const [taxons, setTaxons] = useState([])
-  const [taxon, setTaxon] = useState<{ id?: string }>({})
+  const { taxonomy, slug } = params
 
-  const fetchPages = useCallback(async () => {
-    const pages = await fetch(`/api/pages`).then((res) => res.json())
-    setPages(pages)
-  }, [])
-
-  const fetchTaxons = useCallback(async () => {
-    const taxons = await fetch(`/api/taxonomies`).then((res) => res.json())
-    setTaxons(taxons)
-  }, [])
-
-  const fetchTaxon = useCallback(async () => {
-    if (!slug) return
-
-    const taxon = await fetch(`/api/taxonomies/${taxonomy}/${slug}`).then(
-      (res) => res.json()
-    )
-    setTaxon(taxon)
-  }, [slug, taxonomy])
-
-  const fetchProducts = useCallback(async (taxonId) => {
-    if (!taxonId) return
-    const products = await fetch(`/api/products?taxons=${taxonId}`).then(
-      (res) => res.json()
-    )
-
-    if (products?.length === 0 || products?.error) {
-      console.log('No products found')
-      return
-    }
-
-    setProducts(products)
-  }, [])
+  const pages: Page[] = await fetch(`${baseUrl}/pages`).then((res) =>
+    res.json()
+  )
+  const taxon: Taxon = await fetch(
+    `${baseUrl}/taxonomies/${taxonomy}/${slug}`
+  ).then((res) => res.json())
 
-  useEffect(() => {
-    fetchPages()
-    fetchTaxons()
-    fetchTaxon()
-  }, [fetchPages, fetchTaxons, fetchTaxon])
+  const taxons: any = await fetch(`${baseUrl}/taxonomies`).then((res) =>
+    res.json()
+  )
 
-  useEffect(() => {
-    if (taxon.id) {
-      fetchProducts(taxon.id)
-    }
-  }, [taxon, fetchProducts])
+  const products: any = await fetch(
+    `${baseUrl}/products?taxons=${taxon.id}`
+  ).then((res) => res.json())
+
+  return {
+    props: {
+      pages,
+      taxon,
+      taxons,
+      products,
+    },
+  }
+}
 
+const TaxonomyPage = ({ pages, taxon, taxons, products }) => {
   return (
     <ProductList
       products={products}