chore: backup the changes for future reference

Author: KrzysztofSajko

src/frontend/components/Cart/CartDetail.tsx

@@ -6,24 +6,18 @@ import { useCallback, useEffect, useState } from 'react';
 import CartItems from '../CartItems';
 import CheckoutForm from '../CheckoutForm';
 import { IFormData } from '../CheckoutForm/CheckoutForm';
-import SessionGateway from '../../gateways/Session.gateway';
 import { useCart } from '../../providers/Cart.provider';
 import { useCurrency } from '../../providers/Currency.provider';
 import * as S from '../../styles/Cart.styled';
 
-const CartDetail = ({ userId: initId }: { userId: string }) => {
+const CartDetail = ({ userId }: { userId: string }) => {
   const {
     cart: { items },
     emptyCart,
     placeOrder,
   } = useCart();
   const { selectedCurrency } = useCurrency();
   const { push } = useRouter();
-  const [userId, setUserId] = useState(initId);
-
-  useEffect(() => {
-    setUserId(SessionGateway.getSession().userId);
-  }, []);
 
   const onPlaceOrder = useCallback(
     async ({

src/frontend/components/Footer/Footer.tsx

@@ -1,27 +1,18 @@
 // Copyright The OpenTelemetry Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useEffect, useState } from 'react';
 import * as S from './Footer.styled';
-import SessionGateway from '../../gateways/Session.gateway';
 import { CypressFields } from '../../utils/enums/CypressFields';
-import PlatformFlag from '../PlatformFlag';
 
 const currentYear = new Date().getFullYear();
 
 const Footer = ({ userId }: { userId: string }) => {
-  const [sessionId, setSessionId] = useState(userId);
-
-  useEffect(() => {
-    setSessionId(SessionGateway.getSession().userId);
-  }, []);
-
   return (
     <S.Footer>
       <div>
         <p>This website is hosted for demo purpose only. It is not an actual shop.</p>
         <p>
-          <span data-cy={CypressFields.SessionId}>session-id: {sessionId}</span>
+          <span data-cy={CypressFields.SessionId}>session-id: {userId}</span>
         </p>
       </div>
       <p>

src/frontend/gateways/Session.gateway.ts

@@ -1,33 +1,40 @@
 // Copyright The OpenTelemetry Authors
 // SPDX-License-Identifier: Apache-2.0
 
+import { getCookie, setCookie } from 'cookies-next';
 import { v4 } from 'uuid';
-import { getCookie } from "cookies-next";
 
 interface ISession {
   userId: string;
   currencyCode: string;
 }
 
-const sessionKey = 'session';
-const defaultSession: ISession = {
-  userId: getCookie('USERID') as string || v4(),
-  currencyCode: 'USD',
-};
+const defaultUUID = v4();
+const defaultCurrencyCode = 'USD';
 
-const SessionGateway = () => ({
-  getSession(): ISession {
-    if (typeof window === 'undefined') return defaultSession;
-    const sessionString = localStorage.getItem(sessionKey);
-
-    if (!sessionString) localStorage.setItem(sessionKey, JSON.stringify(defaultSession));
+function getDefaultSession(userId?: string): ISession {
+  return {
+    userId: userId ?? defaultUUID,
+    currencyCode: defaultCurrencyCode,
+  };
+}
 
-    return JSON.parse(sessionString || JSON.stringify(defaultSession)) as ISession;
+const SessionGateway = () => ({
+  getSession(userId?: string): ISession {
+    if (typeof window === 'undefined') {
+      return getDefaultSession(userId);
+    }
+
+    const cookieUserId = getCookie('USERID') as string;
+    const currencyCode = getCookie('currencyCode') as string;
+
+    return {
+      userId: cookieUserId || userId || defaultUUID,
+      currencyCode: currencyCode || defaultCurrencyCode,
+    };
   },
   setSessionValue<K extends keyof ISession>(key: K, value: ISession[K]) {
-    const session = this.getSession();
-
-    localStorage.setItem(sessionKey, JSON.stringify({ ...session, [key]: value }));
+    setCookie(key, value);
   },
 });
 

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

@@ -1,7 +1,7 @@
 // Copyright The OpenTelemetry Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import { InferGetServerSidePropsType, NextPage } from 'next';
+import { GetServerSidePropsContext, InferGetServerSidePropsType, NextPage } from 'next';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -14,11 +14,15 @@ import Recommendations from '../../../../components/Recommendations';
 import AdProvider from '../../../../providers/Ad.provider';
 import * as S from '../../../../styles/Checkout.styled';
 import { IProductCheckout } from '../../../../types/Cart';
-import { getCookie } from 'cookies-next';
-
-export async function getServerSideProps() {
-  const userId = getCookie('USERID') as string;
+import { getCookie, setCookie } from 'cookies-next';
+import { v4 } from 'uuid';
 
+export async function getServerSideProps({ req, res }: GetServerSidePropsContext) {
+  let userId = (await getCookie('USERID', { req, res })) as string;
+  if (userId === undefined || userId === '') {
+    userId = v4();
+    setCookie(userId, 'USERID', { req, res });
+  }
   return {
     props: { userId },
   };

src/frontend/pages/cart/index.tsx

@@ -1,7 +1,7 @@
 // Copyright The OpenTelemetry Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import { InferGetServerSidePropsType, NextPage } from 'next';
+import { GetServerSidePropsContext, InferGetServerSidePropsType, NextPage } from 'next';
 import Head from 'next/head';
 import Footer from '../../components/Footer';
 import Layout from '../../components/Layout';
@@ -11,11 +11,15 @@ import CartDetail from '../../components/Cart/CartDetail';
 import EmptyCart from '../../components/Cart/EmptyCart';
 import { useCart } from '../../providers/Cart.provider';
 import AdProvider from '../../providers/Ad.provider';
-import { getCookie } from 'cookies-next';
-
-export async function getServerSideProps() {
-  const userId = getCookie('USERID') as string;
+import { getCookie, setCookie } from 'cookies-next';
+import { v4 } from 'uuid';
 
+export async function getServerSideProps({ req, res }: GetServerSidePropsContext) {
+  let userId = (await getCookie('USERID', { req, res })) as string;
+  if (userId === undefined || userId === '') {
+    userId = v4();
+    setCookie(userId, 'USERID', { req, res });
+  }
   return {
     props: { userId },
   };

src/frontend/pages/index.tsx

@@ -1,7 +1,7 @@
 // Copyright The OpenTelemetry Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import { InferGetServerSidePropsType, NextPage } from 'next';
+import { GetServerSidePropsContext, InferGetServerSidePropsType, NextPage } from 'next';
 import Head from 'next/head';
 import Footer from '../components/Footer';
 import Layout from '../components/Layout';
@@ -12,11 +12,15 @@ import ApiGateway from '../gateways/Api.gateway';
 import Banner from '../components/Banner';
 import { CypressFields } from '../utils/enums/CypressFields';
 import { useCurrency } from '../providers/Currency.provider';
-import { getCookie } from 'cookies-next';
-
-export async function getServerSideProps() {
-  const userId = getCookie('USERID') as string;
+import { getCookie, setCookie } from 'cookies-next';
+import { v4 } from 'uuid';
 
+export async function getServerSideProps({ req, res }: GetServerSidePropsContext) {
+  let userId = (await getCookie('USERID', { req, res })) as string;
+  if (userId === undefined || userId === '') {
+    userId = v4();
+    setCookie(userId, 'USERID', { req, res });
+  }
   return {
     props: { userId },
   };

src/frontend/pages/product/[productId]/index.tsx

@@ -1,7 +1,7 @@
 // Copyright The OpenTelemetry Authors
 // SPDX-License-Identifier: Apache-2.0
 
-import { InferGetServerSidePropsType, NextPage } from 'next';
+import { GetServerSidePropsContext, InferGetServerSidePropsType, NextPage } from 'next';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -20,11 +20,15 @@ import AdProvider from '../../../providers/Ad.provider';
 import { useCart } from '../../../providers/Cart.provider';
 import * as S from '../../../styles/ProductDetail.styled';
 import { useCurrency } from '../../../providers/Currency.provider';
-import { getCookie } from 'cookies-next';
-
-export async function getServerSideProps() {
-  const userId = getCookie('USERID') as string;
+import { getCookie, setCookie } from 'cookies-next';
+import { v4 } from 'uuid';
 
+export async function getServerSideProps({ req, res }: GetServerSidePropsContext) {
+  let userId = (await getCookie('USERID', { req, res })) as string;
+  if (userId === undefined || userId === '') {
+    userId = v4();
+    setCookie(userId, 'USERID', { req, res });
+  }
   return {
     props: { userId },
   };