Refactor

web/app/layout.tsx

@@ -2,15 +2,15 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 import SessionWrapper from './lib/providers/SessionProvider'
-import { ApolloClientProvider } from './apolloClient'
+import { ApolloClientProvider } from './lib/providers/ApolloClientProvider'
 import clsx from 'clsx'
 import { Authentication } from './lib/ui/Authentication/Authentication'
 
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: 'SST App',
+  description: 'Powered by JetBridge SST Template',
 }
 
 export default function RootLayout({

web/app/apollo.ts → web/app/lib/apollo/client.ts

@@ -1,43 +1,43 @@
 // from https://github.com/awslabs/aws-mobile-appsync-sdk-js#creating-a-client
 
-import { APPSYNC_ENDPOINT, REGION } from '@/config';
-import { ApolloClient, ApolloLink, createHttpLink, InMemoryCache } from '@apollo/client';
-import { SentryLink } from 'apollo-link-sentry';
-import { AUTH_TYPE, createAuthLink } from 'aws-appsync-auth-link';
-import { createSubscriptionHandshakeLink } from 'aws-appsync-subscription-link';
-import { getSession } from 'next-auth/react';
+import { APPSYNC_ENDPOINT, REGION } from '@/config'
+import { ApolloClient, ApolloLink, createHttpLink, InMemoryCache } from '@apollo/client'
+import { SentryLink } from 'apollo-link-sentry'
+import { AUTH_TYPE, createAuthLink } from 'aws-appsync-auth-link'
+import { createSubscriptionHandshakeLink } from 'aws-appsync-subscription-link'
+import { getSession } from 'next-auth/react'
 
 const getCognitoAccessJwt = async () => {
-  const session = await getSession();
+  const session = await getSession()
 
-  const token = session?.accessToken ?? '';
+  const token = session?.accessToken ?? ''
 
-  return session?.accessToken || '';
-};
+  return session?.accessToken || ''
+}
 
 export function getAppSyncConfig() {
-  const region = REGION;
-  const appsyncEndpoint = APPSYNC_ENDPOINT;
+  const region = REGION
+  const appsyncEndpoint = APPSYNC_ENDPOINT
   if (!region || !appsyncEndpoint) {
-    console.debug('NEXT_PUBLIC_REGION and NEXT_PUBLIC_APPSYNC_ENDPOINT are not set; not authenticating with AppSync');
-    return undefined;
+    console.debug('NEXT_PUBLIC_REGION and NEXT_PUBLIC_APPSYNC_ENDPOINT are not set; not authenticating with AppSync')
+    return undefined
   }
 
-  return { region, appsyncEndpoint };
+  return { region, appsyncEndpoint }
 }
 
 export const getApolloClient = () => {
-  const appsyncConfig = getAppSyncConfig();
+  const appsyncConfig = getAppSyncConfig()
 
-  let apolloLink;
+  let apolloLink
   if (appsyncConfig) {
-    const { region, appsyncEndpoint } = appsyncConfig;
+    const { region, appsyncEndpoint } = appsyncConfig
     const auth = {
       region,
       type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
       jwtToken: getCognitoAccessJwt,
-    } as const;
-    const httpLink = createHttpLink({ uri: appsyncEndpoint });
+    } as const
+    const httpLink = createHttpLink({ uri: appsyncEndpoint })
 
     apolloLink = ApolloLink.from([
       new SentryLink({
@@ -52,7 +52,7 @@ export const getApolloClient = () => {
       }),
       createAuthLink({ url: appsyncEndpoint, region, auth: auth }),
       createSubscriptionHandshakeLink({ url: appsyncEndpoint, region, auth }, httpLink),
-    ]);
+    ])
   }
 
   return new ApolloClient({
@@ -63,5 +63,5 @@ export const getApolloClient = () => {
         // fetchPolicy: 'network-only',
       },
     },
-  });
-};
+  })
+}

web/app/lib/providers/ApolloClientProvider.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import React, { ReactNode } from 'react'
+import { ApolloProvider } from '@apollo/client'
+import { getApolloClient } from '@/app/lib/apollo/client'
+
+export function useApolloClient() {
+  return React.useMemo(() => getApolloClient(), [])
+}
+
+export const ApolloClientProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const client = useApolloClient()
+  return <ApolloProvider client={client}>{children}</ApolloProvider>
+}

web/app/lib/ui/Authentication/LoginButton.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { authenticate } from '@/app/serverActions'
 import { useSearchParams } from 'next/navigation'
+import { authenticate } from '@/app/lib/actions/auth'
 
 export const LoginButton = () => {
   const searchParams = useSearchParams()

web/app/lib/ui/Authentication/LogoutButton.tsx

@@ -1,4 +1,4 @@
-import { unauthenticate } from '@/app/serverActions'
+import { unauthenticate } from '@/app/lib/actions/auth'
 
 interface Props {
   userEmail: string