Skip to content

Commit 5824c4b

Browse files
KrzysztofSajkoKrzysztofSajko
authored
Merge pull request #54 from Dynatrace/fix/frontend-errors
Fix/frontend errors
2 parents 351dc44 + 7b56aa8 commit 5824c4b

File tree

13 files changed

+85
-69
lines changed

13 files changed

+85
-69
lines changed

‎src/flagd/demo.flagd.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
}
9191
},
9292
"paymentSupportedCardsProblem": {
93-
"defaultVariant": "on",
93+
"defaultVariant": "off",
9494
"description": "Supported credit card types",
9595
"state": "ENABLED",
9696
"variants": {

‎src/frontend/components/Cart/CartDetail.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import { useRouter } from 'next/router';
5-
import { useCallback } from 'react';
5+
import { useCallback, useEffect, useState } from 'react';
66
import CartItems from '../CartItems';
77
import CheckoutForm from '../CheckoutForm';
88
import { IFormData } from '../CheckoutForm/CheckoutForm';
@@ -11,16 +11,19 @@ import { useCart } from '../../providers/Cart.provider';
1111
import { useCurrency } from '../../providers/Currency.provider';
1212
import * as S from '../../styles/Cart.styled';
1313

14-
const { userId } = SessionGateway.getSession();
15-
16-
const CartDetail = () => {
14+
const CartDetail = ({ userId: initId }: { userId: string }) => {
1715
const {
1816
cart: { items },
1917
emptyCart,
2018
placeOrder,
2119
} = useCart();
2220
const { selectedCurrency } = useCurrency();
2321
const { push } = useRouter();
22+
const [userId, setUserId] = useState(initId);
23+
24+
useEffect(() => {
25+
setUserId(SessionGateway.getSession().userId);
26+
}, []);
2427

2528
const onPlaceOrder = useCallback(
2629
async ({
@@ -59,7 +62,7 @@ const CartDetail = () => {
5962
query: { order: JSON.stringify(order) },
6063
});
6164
},
62-
[placeOrder, push, selectedCurrency]
65+
[placeOrder, push, selectedCurrency, userId]
6366
);
6467

6568
return (

‎src/frontend/components/CheckoutItem/CheckoutItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const CheckoutItem = ({
2929
return (
3030
<S.CheckoutItem data-cy={CypressFields.CheckoutItem}>
3131
<S.ItemDetails>
32-
<S.ItemImage src={"/images/products/" + picture} alt={name}/>
32+
<S.ItemImage src={'/images/products/' + picture} alt={name} />
3333
<S.Details>
3434
<S.ItemName>{name}</S.ItemName>
3535
<p>Quantity: {quantity}</p>

‎src/frontend/components/Footer/Footer.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ import PlatformFlag from '../PlatformFlag';
99

1010
const currentYear = new Date().getFullYear();
1111

12-
const { userId } = SessionGateway.getSession();
13-
14-
const Footer = () => {
15-
const [sessionId, setSessionId] = useState('');
12+
const Footer = ({ userId }: { userId: string }) => {
13+
const [sessionId, setSessionId] = useState(userId);
1614

1715
useEffect(() => {
18-
setSessionId(userId);
16+
setSessionId(SessionGateway.getSession().userId);
1917
}, []);
2018

2119
return (
@@ -29,7 +27,6 @@ const Footer = () => {
2927
<p>
3028
@ {currentYear} OpenTelemetry (<a href="https://github.com/open-telemetry/opentelemetry-demo">Source Code</a>)
3129
</p>
32-
<PlatformFlag />
3330
</S.Footer>
3431
);
3532
};

‎src/frontend/components/PlatformFlag/PlatformFlag.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ const { NEXT_PUBLIC_PLATFORM = 'local' } = typeof window !== 'undefined' ? windo
88
const platform = NEXT_PUBLIC_PLATFORM;
99

1010
const PlatformFlag = () => {
11-
return (
12-
<S.Block>{platform}</S.Block>
13-
);
11+
return <S.Block>{platform}</S.Block>;
1412
};
1513

1614
export default PlatformFlag;

‎src/frontend/next.config.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@ const nextConfig = {
5757
NEXT_PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT: PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT,
5858
},
5959
images: {
60-
loader: "custom",
61-
loaderFile: "./utils/imageLoader.js"
62-
}
60+
loader: 'custom',
61+
loaderFile: './utils/imageLoader.js',
62+
},
6363
};
6464

6565
module.exports = nextConfig;

‎src/frontend/pages/_app.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ declare global {
2525
}
2626

2727
if (typeof window !== 'undefined') {
28-
FrontendTracer();
2928
if (window.location) {
3029
const session = SessionGateway.getSession();
3130

@@ -39,7 +38,7 @@ if (typeof window !== 'undefined') {
3938
const useTLS = window.location.protocol === 'https:';
4039
let port = useTLS ? 443 : 80;
4140
if (window.location.port) {
42-
port = parseInt(window.location.port, 10);
41+
port = parseInt(window.location.port, 10);
4342
}
4443

4544
OpenFeature.setProvider(

‎src/frontend/pages/cart/checkout/[orderId]/index.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright The OpenTelemetry Authors
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import { NextPage } from 'next';
4+
import { InferGetServerSidePropsType, NextPage } from 'next';
55
import Head from 'next/head';
66
import Link from 'next/link';
77
import { useRouter } from 'next/router';
@@ -14,8 +14,17 @@ import Recommendations from '../../../../components/Recommendations';
1414
import AdProvider from '../../../../providers/Ad.provider';
1515
import * as S from '../../../../styles/Checkout.styled';
1616
import { IProductCheckout } from '../../../../types/Cart';
17+
import { getCookie } from 'cookies-next';
1718

18-
const Checkout: NextPage = () => {
19+
export async function getServerSideProps() {
20+
const userId = getCookie('USERID') as string;
21+
22+
return {
23+
props: { userId },
24+
};
25+
}
26+
27+
const Checkout: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = ({ userId }) => {
1928
const { query } = useRouter();
2029
const { items = [], shippingAddress } = JSON.parse((query.order || '{}') as string) as IProductCheckout;
2130

@@ -35,11 +44,7 @@ const Checkout: NextPage = () => {
3544

3645
<S.ItemList>
3746
{items.map(checkoutItem => (
38-
<CheckoutItem
39-
key={checkoutItem.item.productId}
40-
checkoutItem={checkoutItem}
41-
address={shippingAddress}
42-
/>
47+
<CheckoutItem key={checkoutItem.item.productId} checkoutItem={checkoutItem} address={shippingAddress} />
4348
))}
4449
</S.ItemList>
4550

@@ -52,7 +57,7 @@ const Checkout: NextPage = () => {
5257
<Recommendations />
5358
</S.Checkout>
5459
<Ad />
55-
<Footer />
60+
<Footer userId={userId} />
5661
</Layout>
5762
</AdProvider>
5863
);

‎src/frontend/pages/cart/index.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright The OpenTelemetry Authors
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import { NextPage } from 'next';
4+
import { InferGetServerSidePropsType, NextPage } from 'next';
55
import Head from 'next/head';
66
import Footer from '../../components/Footer';
77
import Layout from '../../components/Layout';
@@ -11,8 +11,17 @@ import CartDetail from '../../components/Cart/CartDetail';
1111
import EmptyCart from '../../components/Cart/EmptyCart';
1212
import { useCart } from '../../providers/Cart.provider';
1313
import AdProvider from '../../providers/Ad.provider';
14+
import { getCookie } from 'cookies-next';
1415

15-
const Cart: NextPage = () => {
16+
export async function getServerSideProps() {
17+
const userId = getCookie('USERID') as string;
18+
19+
return {
20+
props: { userId },
21+
};
22+
}
23+
24+
const Cart: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = ({ userId }) => {
1625
const {
1726
cart: { items },
1827
} = useCart();
@@ -27,10 +36,10 @@ const Cart: NextPage = () => {
2736
</Head>
2837
<Layout>
2938
<S.Cart>
30-
{(!!items.length && <CartDetail />) || <EmptyCart />}
39+
{(!!items.length && <CartDetail userId={userId} />) || <EmptyCart />}
3140
<Recommendations />
3241
</S.Cart>
33-
<Footer />
42+
<Footer userId={userId} />
3443
</Layout>
3544
</AdProvider>
3645
);

‎src/frontend/pages/index.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Copyright The OpenTelemetry Authors
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import { NextPage } from 'next';
4+
import { InferGetServerSidePropsType, NextPage } from 'next';
55
import Head from 'next/head';
66
import Footer from '../components/Footer';
77
import Layout from '../components/Layout';
@@ -12,8 +12,17 @@ import ApiGateway from '../gateways/Api.gateway';
1212
import Banner from '../components/Banner';
1313
import { CypressFields } from '../utils/enums/CypressFields';
1414
import { useCurrency } from '../providers/Currency.provider';
15+
import { getCookie } from 'cookies-next';
1516

16-
const Home: NextPage = () => {
17+
export async function getServerSideProps() {
18+
const userId = getCookie('USERID') as string;
19+
20+
return {
21+
props: { userId },
22+
};
23+
}
24+
25+
const Home: NextPage<InferGetServerSidePropsType<typeof getServerSideProps>> = ({ userId }) => {
1726
const { selectedCurrency } = useCurrency();
1827
const { data: productList = [] } = useQuery({
1928
queryKey: ['products', selectedCurrency],
@@ -39,7 +48,7 @@ const Home: NextPage = () => {
3948
</S.Content>
4049
</S.Row>
4150
</S.Container>
42-
<Footer />
51+
<Footer userId={userId} />
4352
</S.Home>
4453
</Layout>
4554
);

0 commit comments

Comments
 (0)