updates and fixes for workshops

.env.template

@@ -15,10 +15,12 @@ ATTACK_GOBUSTER_INTERVAL=0
 ATTACK_HYDRA_INTERVAL=0
 
 # NEXT_PUBLIC_* are exposed to the web browser and the server #
+# FOR INSTRUQT: replace all localhost with the instruqt urls
 NEXT_PUBLIC_SPREE_API_HOST=http://web:4000
 NEXT_PUBLIC_SPREE_CLIENT_HOST=http://localhost:4000
 NEXT_PUBLIC_SPREE_IMAGE_HOST=http://localhost:4000
 NEXT_PUBLIC_SPREE_ALLOWED_IMAGE_DOMAIN=localhost
+NEXT_PUBLIC_FRONTEND_URL=http://frontend:3000
 # for local development (on localhost)
 NEXT_PUBLIC_ADS_PORT=3030
 NEXT_PUBLIC_DISCOUNTS_PORT=2814

docker-compose.yml

@@ -25,7 +25,7 @@ services:
   frontend:
     build:
       context: ./services/frontend
-    command: npm run dev
+    command: wait-for-it web:4000 -- npm run dev
     depends_on:
       - worker
       - dd-agent

services/frontend/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx

@@ -103,10 +103,16 @@ const CheckoutSidebarView: FC = () => {
       const res = await fetch(
         `${discountPath}/discount-code?discount_code=${discountCode}`
       )
+
+      if (!res.ok) {
+        const error = await res.json()
+        throw error
+      }
+
       const discount = await res.json()
 
       if (discount?.error) {
-        throw 'No discount found!'
+        throw discount.error
       }
 
       console.log('discount accepted', discount)
@@ -115,7 +121,9 @@ const CheckoutSidebarView: FC = () => {
 
       setDiscountInput('')
     } catch (err) {
-      console.error(err)
+      datadogRum.addError(err, {
+        discount_code: discountInput,
+      })
     }
   }
 

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

@@ -13,60 +13,46 @@ function Ad() {
   const adsPath =
     `${process.env.NEXT_PUBLIC_ADS_URL_FULL}` ||
     `${process.env.NEXT_PUBLIC_ADS_ROUTE}:${process.env.NEXT_PUBLIC_ADS_PORT}`
-  const [codeFlag, setCodeFlag] = useState<boolean>(false)
 
   const getRandomArbitrary = useCallback((min: number, max: number) => {
     return Math.floor(Math.random() * (max - min) + min)
   }, [])
 
-  const fetchAd = useCallback(
-    (flag: boolean) => {
-      const headers = {
-        'X-Throw-Error': `${flag}`,
-        '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)
-          setData(data[index])
-        })
-        .catch((e) => console.error(e.message))
-        .finally(() => {
-          setLoading(false)
-        })
-    },
-    [adsPath, getRandomArbitrary, setData, setLoading]
-  )
-
-  useEffect(() => {
+  const fetchAd = useCallback(async () => {
     setLoading(true)
-    //  check for config file, then grab feature flags
-    if (config) {
-      codeStash('error-tracking', { file: config })
-        .then((r: boolean) => {
-          setCodeFlag(r)
-        })
-        .catch((e: Error) => console.log(e))
+    const flag = (await codeStash('error-tracking', { file: config })) || false
+
+    const headers = {
+      'X-Throw-Error': `${flag}`,
+      'X-Error-Rate': process.env.NEXT_PUBLIC_ADS_ERROR_RATE || '0.25',
     }
 
-    // Fetch ad with error
-    codeFlag && fetchAd(true)
+    try {
+      const res = await fetch(`${adsPath}/ads`, { headers })
+      if (!res.ok) {
+        throw new Error('Error fetching ad')
+      }
+      const data = await res.json()
+      console.log(data)
+      const index = getRandomArbitrary(0, data.length)
+      setData(data[index])
+      setLoading(false)
+    } catch (e) {
+      console.error(e)
+      setLoading(false)
+    }
+  }, [adsPath, getRandomArbitrary, setData, setLoading])
 
-    // Fetch normal ad
-    !codeFlag && fetchAd(false)
-  }, [codeFlag, fetchAd])
+  useEffect(() => {
+    if (!data) fetchAd()
+  }, [data, fetchAd])
 
   if (isLoading)
     return <div className="flex flex-row justify-center h-10">AD HERE</div>
   if (!data)
-    return <div className="flex flex-row justify-center h-10">AD HERE</div>
+    return (
+      <div className="flex flex-row justify-center h-10">AD DIDN'T LOAD</div>
+    )
 
   return (
     <div className="flex flex-row justify-center py-4">

services/frontend/components/common/Discount/Discount.tsx

@@ -42,11 +42,13 @@ function Discount() {
         <span>GET FREE SHIPPING WITH DISCOUNT CODE</span>
       ) : !data ? (
         <span>
-          GET FREE SHIPPING WITH DISCOUNT CODE <strong>STOREDOG</strong>
+          GET FREE SHIPPING WITH DISCOUNT CODE{' '}
+          <strong id="discount-code">STOREDOG</strong>
         </span>
       ) : (
         <span>
-          GET FREE SHIPPING WITH DISCOUNT CODE &nbsp; <strong>{data}</strong>
+          GET FREE SHIPPING WITH DISCOUNT CODE &nbsp;{' '}
+          <strong id="discount-code">{data}</strong>
         </span>
       )}
     </div>

services/frontend/featureFlags.config.json

@@ -18,5 +18,10 @@
     "id": "4",
     "name": "api-errors",
     "active": false
+  },
+  {
+    "id": "5",
+    "name": "product-card-frustration",
+    "active": false
   }
 ]

services/frontend/pages/404.tsx

@@ -1,26 +1,6 @@
 import { Layout } from '@components/common'
 import { Text } from '@components/ui'
 
-import { Page } from '@customTypes/page'
-
-export async function getStaticProps() {
-  // get pages for the footer
-  const baseUrl =
-    process.env.NODE_ENV === 'development'
-      ? 'http://localhost:3000/api'
-      : '/api'
-
-  const pages: Page[] = await fetch(`${baseUrl}/pages`).then((res) =>
-    res.json()
-  )
-
-  return {
-    props: {
-      pages,
-    },
-  }
-}
-
 export default function NotFound() {
   return (
     <div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">

services/frontend/pages/[...pages].tsx

@@ -7,10 +7,9 @@ import { Page } from '@customTypes/page'
 export async function getServerSideProps({
   params,
 }: GetServerSidePropsContext<{ pages: string }>) {
-  const baseUrl =
-    process.env.NODE_ENV === 'development'
-      ? 'http://localhost:3000/api'
-      : '/api'
+  const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL
+    ? `${process.env.NEXT_PUBLIC_FRONTEND_URL}/api`
+    : 'http://localhost/api'
   const slug = params?.pages as string
 
   const pageRes = await fetch(`${baseUrl}/pages/${slug}`)

services/frontend/pages/index.tsx

@@ -3,22 +3,22 @@ import { Layout } from '@components/common'
 import Ad from '@components/common/Ad'
 import { ProductCard } from '@components/product'
 import { Grid, Marquee, Hero } from '@components/ui'
-import { getTaxons } from '@lib/api/taxons'
 import { Product } from '@customTypes/product'
 import { Page } from '@customTypes/page'
 
 export async function getServerSideProps() {
-  const baseUrl =
-    process.env.NODE_ENV === 'development'
-      ? 'http://localhost:3000/api'
-      : '/api'
+  const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL
+    ? `${process.env.NEXT_PUBLIC_FRONTEND_URL}/api`
+    : 'http://localhost/api'
 
   const products: Product[] = await fetch(`${baseUrl}/products`).then((res) =>
     res.json()
   )
 
-  // reverse the order of the products
-  products.reverse()
+  // if products exists and is an array, reverse it
+  if (products && Array.isArray(products)) {
+    products.reverse()
+  }
 
   const pages: Page[] = await fetch(`${baseUrl}/pages`).then((res) =>
     res.json()

services/frontend/pages/products/[slug].tsx

@@ -6,7 +6,6 @@ import { useRouter } from 'next/router'
 import { useEffect, useState, useCallback } from 'react'
 import { Layout } from '@components/common'
 import { ProductView } from '@components/product'
-import { getProducts, getProduct } from '@lib/api/products'
 import { getPages } from '@lib/api/pages'
 import { Product } from '@customTypes/product'
 
@@ -20,10 +19,9 @@ export async function getServerSideProps({
   req,
   params,
 }: GetServerSidePropsContext<{ slug: string }>) {
-  const baseUrl =
-    process.env.NODE_ENV === 'development'
-      ? 'http://localhost:3000/api'
-      : '/api'
+  const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL
+    ? `${process.env.NEXT_PUBLIC_FRONTEND_URL}/api`
+    : 'http://localhost/api'
 
   const product: Product = await fetch(
     `${baseUrl}/products/${params?.slug}?include=default_variant,variants,option_types,product_properties,taxons,images,primary_variant`

services/frontend/pages/products/index.tsx

@@ -2,12 +2,13 @@ import type { GetServerSidePropsContext } from 'next'
 import { ProductList } from '@components/product'
 import { Page } from '@customTypes/page'
 import { Product } from '@customTypes/product'
+import { codeStash } from 'code-stash'
+import config from '../../featureFlags.config.json'
 
 export async function getServerSideProps(context: GetServerSidePropsContext) {
-  const baseUrl =
-    process.env.NODE_ENV === 'development'
-      ? 'http://localhost:3000/api'
-      : '/api'
+  const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL
+    ? `${process.env.NEXT_PUBLIC_FRONTEND_URL}/api`
+    : 'http://localhost/api'
 
   const products: Product[] = await fetch(`${baseUrl}/products`).then((res) =>
     res.json()
@@ -18,12 +19,15 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   const taxons = await fetch(`${baseUrl}/taxonomies`).then((res) => res.json())
 
+  const flag =
+    (await codeStash('product-card-frustration', { file: config })) || false
+
   return {
     props: {
       products,
       pages,
       taxons,
-      cardVersion: 'v2',
+      cardVersion: flag ? 'v2' : 'v1',
     },
   }
 }

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

@@ -4,10 +4,9 @@ import { ProductList } from '@components/product'
 import { Layout } from '@components/common'
 
 export const getServerSideProps = async ({ params }) => {
-  const baseUrl =
-    process.env.NODE_ENV === 'development'
-      ? 'http://localhost:3000/api'
-      : '/api'
+  const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL
+    ? `${process.env.NEXT_PUBLIC_FRONTEND_URL}/api`
+    : 'http://localhost/api'
 
   const { taxonomy, slug } = params
 

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

@@ -6,10 +6,9 @@ import { Container } from '@components/ui'
 import Link from 'next/link'
 
 export const getServerSideProps = async ({ params }) => {
-  const baseUrl =
-    process.env.NODE_ENV === 'development'
-      ? 'http://localhost:3000/api'
-      : '/api'
+  const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL
+    ? `${process.env.NEXT_PUBLIC_FRONTEND_URL}/api`
+    : 'http://localhost/api'
 
   const pages: Page[] = await fetch(`${baseUrl}/pages`).then((res) =>
     res.json()