Skip to content

Commit 27b8e84

Browse files
arosenkranzarosenkranz
authored
Merge pull request #78 from DataDog/TRAIN-1977-dashworkshop-fixes
updates and fixes for workshops
2 parents b212e31 + b00e7d5 commit 27b8e84

File tree

13 files changed

+77
-95
lines changed

13 files changed

+77
-95
lines changed

‎.env.template‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ ATTACK_GOBUSTER_INTERVAL=0
1515
ATTACK_HYDRA_INTERVAL=0
1616

1717
# NEXT_PUBLIC_* are exposed to the web browser and the server #
18+
# FOR INSTRUQT: replace all localhost with the instruqt urls
1819
NEXT_PUBLIC_SPREE_API_HOST=http://web:4000
1920
NEXT_PUBLIC_SPREE_CLIENT_HOST=http://localhost:4000
2021
NEXT_PUBLIC_SPREE_IMAGE_HOST=http://localhost:4000
2122
NEXT_PUBLIC_SPREE_ALLOWED_IMAGE_DOMAIN=localhost
23+
NEXT_PUBLIC_FRONTEND_URL=http://frontend:3000
2224
# for local development (on localhost)
2325
NEXT_PUBLIC_ADS_PORT=3030
2426
NEXT_PUBLIC_DISCOUNTS_PORT=2814

‎docker-compose.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ services:
2525
frontend:
2626
build:
2727
context: ./services/frontend
28-
command: npm run dev
28+
command: wait-for-it web:4000 -- npm run dev
2929
depends_on:
3030
- worker
3131
- dd-agent

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,16 @@ const CheckoutSidebarView: FC = () => {
103103
const res = await fetch(
104104
`${discountPath}/discount-code?discount_code=${discountCode}`
105105
)
106+
107+
if (!res.ok) {
108+
const error = await res.json()
109+
throw error
110+
}
111+
106112
const discount = await res.json()
107113

108114
if (discount?.error) {
109-
throw 'No discount found!'
115+
throw discount.error
110116
}
111117

112118
console.log('discount accepted', discount)
@@ -115,7 +121,9 @@ const CheckoutSidebarView: FC = () => {
115121

116122
setDiscountInput('')
117123
} catch (err) {
118-
console.error(err)
124+
datadogRum.addError(err, {
125+
discount_code: discountInput,
126+
})
119127
}
120128
}
121129

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

Lines changed: 27 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -13,60 +13,46 @@ function Ad() {
1313
const adsPath =
1414
`${process.env.NEXT_PUBLIC_ADS_URL_FULL}` ||
1515
`${process.env.NEXT_PUBLIC_ADS_ROUTE}:${process.env.NEXT_PUBLIC_ADS_PORT}`
16-
const [codeFlag, setCodeFlag] = useState<boolean>(false)
1716

1817
const getRandomArbitrary = useCallback((min: number, max: number) => {
1918
return Math.floor(Math.random() * (max - min) + min)
2019
}, [])
2120

22-
const fetchAd = useCallback(
23-
(flag: boolean) => {
24-
const headers = {
25-
'X-Throw-Error': `${flag}`,
26-
'X-Error-Rate': process.env.NEXT_PUBLIC_ADS_ERROR_RATE || '0.25',
27-
}
28-
fetch(`${adsPath}/ads`, { headers })
29-
.then((res) => {
30-
if (!res.ok) {
31-
throw new Error('Error fetching ad')
32-
}
33-
return res
34-
})
35-
.then((res) => res.json())
36-
.then((data) => {
37-
const index = getRandomArbitrary(0, data.length)
38-
setData(data[index])
39-
})
40-
.catch((e) => console.error(e.message))
41-
.finally(() => {
42-
setLoading(false)
43-
})
44-
},
45-
[adsPath, getRandomArbitrary, setData, setLoading]
46-
)
47-
48-
useEffect(() => {
21+
const fetchAd = useCallback(async () => {
4922
setLoading(true)
50-
// check for config file, then grab feature flags
51-
if (config) {
52-
codeStash('error-tracking', { file: config })
53-
.then((r: boolean) => {
54-
setCodeFlag(r)
55-
})
56-
.catch((e: Error) => console.log(e))
23+
const flag = (await codeStash('error-tracking', { file: config })) || false
24+
25+
const headers = {
26+
'X-Throw-Error': `${flag}`,
27+
'X-Error-Rate': process.env.NEXT_PUBLIC_ADS_ERROR_RATE || '0.25',
5728
}
5829

59-
// Fetch ad with error
60-
codeFlag && fetchAd(true)
30+
try {
31+
const res = await fetch(`${adsPath}/ads`, { headers })
32+
if (!res.ok) {
33+
throw new Error('Error fetching ad')
34+
}
35+
const data = await res.json()
36+
console.log(data)
37+
const index = getRandomArbitrary(0, data.length)
38+
setData(data[index])
39+
setLoading(false)
40+
} catch (e) {
41+
console.error(e)
42+
setLoading(false)
43+
}
44+
}, [adsPath, getRandomArbitrary, setData, setLoading])
6145

62-
// Fetch normal ad
63-
!codeFlag && fetchAd(false)
64-
}, [codeFlag, fetchAd])
46+
useEffect(() => {
47+
if (!data) fetchAd()
48+
}, [data, fetchAd])
6549

6650
if (isLoading)
6751
return <div className="flex flex-row justify-center h-10">AD HERE</div>
6852
if (!data)
69-
return <div className="flex flex-row justify-center h-10">AD HERE</div>
53+
return (
54+
<div className="flex flex-row justify-center h-10">AD DIDN'T LOAD</div>
55+
)
7056

7157
return (
7258
<div className="flex flex-row justify-center py-4">

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,13 @@ function Discount() {
4242
<span>GET FREE SHIPPING WITH DISCOUNT CODE</span>
4343
) : !data ? (
4444
<span>
45-
GET FREE SHIPPING WITH DISCOUNT CODE <strong>STOREDOG</strong>
45+
GET FREE SHIPPING WITH DISCOUNT CODE{' '}
46+
<strong id="discount-code">STOREDOG</strong>
4647
</span>
4748
) : (
4849
<span>
49-
GET FREE SHIPPING WITH DISCOUNT CODE &nbsp; <strong>{data}</strong>
50+
GET FREE SHIPPING WITH DISCOUNT CODE &nbsp;{' '}
51+
<strong id="discount-code">{data}</strong>
5052
</span>
5153
)}
5254
</div>

‎services/frontend/featureFlags.config.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,10 @@
1818
"id": "4",
1919
"name": "api-errors",
2020
"active": false
21+
},
22+
{
23+
"id": "5",
24+
"name": "product-card-frustration",
25+
"active": false
2126
}
2227
]

‎services/frontend/pages/404.tsx‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,6 @@
11
import { Layout } from '@components/common'
22
import { Text } from '@components/ui'
33

4-
import { Page } from '@customTypes/page'
5-
6-
export async function getStaticProps() {
7-
// get pages for the footer
8-
const baseUrl =
9-
process.env.NODE_ENV === 'development'
10-
? 'http://localhost:3000/api'
11-
: '/api'
12-
13-
const pages: Page[] = await fetch(`${baseUrl}/pages`).then((res) =>
14-
res.json()
15-
)
16-
17-
return {
18-
props: {
19-
pages,
20-
},
21-
}
22-
}
23-
244
export default function NotFound() {
255
return (
266
<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‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@ import { Page } from '@customTypes/page'
77
export async function getServerSideProps({
88
params,
99
}: GetServerSidePropsContext<{ pages: string }>) {
10-
const baseUrl =
11-
process.env.NODE_ENV === 'development'
12-
? 'http://localhost:3000/api'
13-
: '/api'
10+
const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL
11+
? `${process.env.NEXT_PUBLIC_FRONTEND_URL}/api`
12+
: 'http://localhost/api'
1413
const slug = params?.pages as string
1514

1615
const pageRes = await fetch(`${baseUrl}/pages/${slug}`)

‎services/frontend/pages/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@ import { Layout } from '@components/common'
33
import Ad from '@components/common/Ad'
44
import { ProductCard } from '@components/product'
55
import { Grid, Marquee, Hero } from '@components/ui'
6-
import { getTaxons } from '@lib/api/taxons'
76
import { Product } from '@customTypes/product'
87
import { Page } from '@customTypes/page'
98

109
export async function getServerSideProps() {
11-
const baseUrl =
12-
process.env.NODE_ENV === 'development'
13-
? 'http://localhost:3000/api'
14-
: '/api'
10+
const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL
11+
? `${process.env.NEXT_PUBLIC_FRONTEND_URL}/api`
12+
: 'http://localhost/api'
1513

1614
const products: Product[] = await fetch(`${baseUrl}/products`).then((res) =>
1715
res.json()
1816
)
1917

20-
// reverse the order of the products
21-
products.reverse()
18+
// if products exists and is an array, reverse it
19+
if (products && Array.isArray(products)) {
20+
products.reverse()
21+
}
2222

2323
const pages: Page[] = await fetch(`${baseUrl}/pages`).then((res) =>
2424
res.json()

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import { useRouter } from 'next/router'
66
import { useEffect, useState, useCallback } from 'react'
77
import { Layout } from '@components/common'
88
import { ProductView } from '@components/product'
9-
import { getProducts, getProduct } from '@lib/api/products'
109
import { getPages } from '@lib/api/pages'
1110
import { Product } from '@customTypes/product'
1211

@@ -20,10 +19,9 @@ export async function getServerSideProps({
2019
req,
2120
params,
2221
}: GetServerSidePropsContext<{ slug: string }>) {
23-
const baseUrl =
24-
process.env.NODE_ENV === 'development'
25-
? 'http://localhost:3000/api'
26-
: '/api'
22+
const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL
23+
? `${process.env.NEXT_PUBLIC_FRONTEND_URL}/api`
24+
: 'http://localhost/api'
2725

2826
const product: Product = await fetch(
2927
`${baseUrl}/products/${params?.slug}?include=default_variant,variants,option_types,product_properties,taxons,images,primary_variant`

0 commit comments

Comments
 (0)