fix(common): persistant session across pages

Author: chanceaclark

context/session.tsx

@@ -1,14 +1,23 @@
-import { createContext, useContext, useState } from 'react';
-import { ContextValues } from '../types';
+import { useRouter } from 'next/router';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { bigCommerceSDK } from '../scripts/bcSdk';
 
-const SessionContext = createContext<Partial<ContextValues>>({});
+const SessionContext = createContext({ context: '' });
 
 const SessionProvider = ({ children }) => {
+    const { query } = useRouter();
     const [context, setContext] = useState('');
-    const value = { context, setContext };
+
+    useEffect(() => {
+        if (query.context) {
+            setContext(query.context.toString());
+            // Keeps app in sync with BC (e.g. heatbeat, user logout, etc)
+            bigCommerceSDK(query.context);
+        }
+    }, [query.context]);
 
     return (
-        <SessionContext.Provider value={value}>
+        <SessionContext.Provider value={{ context }}>
             {children}
         </SessionContext.Provider>
     );

pages/_app.tsx

@@ -1,20 +1,9 @@
 import { Box, GlobalStyles } from '@bigcommerce/big-design';
 import type { AppProps } from 'next/app';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
 import Header from '../components/header';
 import SessionProvider from '../context/session';
-import { bigCommerceSDK } from '../scripts/bcSdk';
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
-    const router = useRouter();
-    const { query: { context } } = router;
-
-    useEffect(() => {
-        // Keeps app in sync with BC (e.g. heatbeat, user logout, etc)
-        if (context) bigCommerceSDK(context);
-    }, [context]);
-
     return (
         <>
             <GlobalStyles />

pages/index.tsx

@@ -1,18 +1,11 @@
 import { Box, Flex, H1, H4, Panel } from '@bigcommerce/big-design';
-import { useEffect } from 'react';
 import styled from 'styled-components';
 import ErrorMessage from '../components/error';
 import Loading from '../components/loading';
-import { useSession } from '../context/session';
 import { useProducts } from '../lib/hooks';
 
-const Index = ({ context }: { context: string }) => {
+const Index = () => {
     const { error, isLoading, summary } = useProducts();
-    const { setContext } = useSession();
-
-    useEffect(() => {
-        if (context) setContext(context);
-    }, [context, setContext]);
 
     if (isLoading) return <Loading />;
     if (error) return <ErrorMessage error={error} />;
@@ -37,10 +30,6 @@ const Index = ({ context }: { context: string }) => {
     );
 };
 
-export const getServerSideProps = async ({ query }) => ({
-    props: { context: query?.context ?? '' }
-});
-
 const StyledBox = styled(Box)`
     min-width: 10rem;
 `;

types/data.ts

@@ -1,8 +1,3 @@
-export interface ContextValues {
-  context: string;
-  setContext: (key: string) => void;
-}
-
 export interface FormData {
     description: string;
     isVisible: boolean;