React 18 and NextJS 14

components/Agenda/Agenda.tsx

@@ -5,7 +5,8 @@ import { SafeLink } from 'components/global/safeLink'
 import { SessionGroup, useSessionGroups } from 'components/utils/useSessionGroups'
 import { StyledCenteredParagraph, StyledSponsorLogo } from 'components/Agenda/Agenda.styled'
 import { SessionDetails } from 'components/Agenda/SessionDetails'
-import { StyledCloseButton, StyledDialogContent, StyledDialogOverlay } from 'components/Agenda/SessionDetails.styled'
+import { StyledCloseButton, StyledDialogContent } from 'components/Agenda/SessionDetails.styled'
+import ReactModal from 'react-modal'
 export type onSelectCallback = (session: Session, sponsor: Sponsor, livestream: string) => void
 
 interface AgendaProps {
@@ -96,7 +97,7 @@ export const Agenda = ({ sessions, ...props }: AgendaProps) => {
     <React.Fragment>
       {props.render(sessions, nextSessionGroup, onSelectHandler)}
 
-      <StyledDialogOverlay isOpen={sessionState.showModal} onDismiss={onDismissHandler}>
+      <ReactModal isOpen={sessionState.showModal} onDismiss={onDismissHandler}>
         <StyledDialogContent>
           <StyledCloseButton type="button" className="close-button" onClick={onDismissHandler} aria-label="Close">
             <span aria-hidden>×</span>
@@ -137,7 +138,7 @@ export const Agenda = ({ sessions, ...props }: AgendaProps) => {
             </Fragment>
           )}
         </StyledDialogContent>
-      </StyledDialogOverlay>
+      </ReactModal>
     </React.Fragment>
   )
 }

components/Agenda/SessionDetails.styled.tsx

@@ -1,10 +1,9 @@
-import { DialogContent, DialogOverlay } from '@reach/dialog'
 import { breakpoint, breakpointMax } from 'components/utils/styles/breakpoints'
 import { calcRem } from 'components/utils/styles/calcRem'
 import styled from '@emotion/styled'
 import { zIndex } from 'components/utils/styles/zindex'
 
-export const StyledDialogOverlay = styled(DialogOverlay)({
+export const StyledDialogOverlay = styled('div')({
   position: 'fixed',
   top: 0,
   right: 0,
@@ -16,7 +15,7 @@ export const StyledDialogOverlay = styled(DialogOverlay)({
 })
 StyledDialogOverlay.displayName = 'StyledDialogOverlay'
 
-export const StyledDialogContent = styled(DialogContent)({
+export const StyledDialogContent = styled('div')({
   position: 'relative',
   width: '90vw',
   padding: calcRem(15),

components/Agenda/SessionDetails.tsx

@@ -29,6 +29,10 @@ export const SessionDetails = ({
   hideLevelAndFormat = false,
   showBio,
 }: SessionDetailsProps) => {
+  if (!session) {
+    return <div>Uh Oh</div>
+  }
+
   return (
     <Fragment>
       <StyledSessionTitle>{session.Title}</StyledSessionTitle>

components/Voting/landing.styled.tsx

@@ -2,7 +2,6 @@ import styled from '@emotion/styled'
 import { Button } from 'components/global/Button/Button'
 import { Text } from 'components/global/text'
 import { calcRem } from 'components/utils/styles/calcRem'
-import { DialogContent } from '@reach/dialog'
 import { breakpointMax } from '../utils/styles/breakpoints'
 
 export const StyledLandingContainer = styled('div')(() => ({
@@ -54,7 +53,7 @@ export const StyledFormRow = styled('div')({
   marginBottom: calcRem(30),
 })
 
-export const StyledDialogContent = styled(DialogContent)({
+export const StyledDialogContent = styled('div')({
   [breakpointMax('sm')]: {
     width: '100%',
   },

components/global/Alert/Alert.styled.tsx

@@ -1,50 +1 @@
-import styled from '@emotion/styled'
-import Alert from '@reach/alert'
-import { calcRem } from 'components/utils/styles/calcRem'
-import { DDDTheme } from 'components/utils/styles/theme'
-
 export type Kind = 'info' | 'success' | 'error' | 'warning'
-
-interface StyledAlertProps {
-  kind: Kind
-}
-
-function stylesFromKind(kind: StyledAlertProps['kind'], theme: DDDTheme) {
-  switch (kind) {
-    case 'error':
-      return {
-        backgroundColor: theme.colors.alerts.error.background,
-        borderColor: theme.colors.alerts.error.border,
-        color: theme.colors.alerts.error.color,
-      }
-    case 'success':
-      return {
-        backgroundColor: theme.colors.alerts.success.background,
-        borderColor: theme.colors.alerts.success.border,
-        color: theme.colors.alerts.success.color,
-      }
-    case 'warning':
-      return {
-        backgroundColor: theme.colors.alerts.warning.background,
-        borderColor: theme.colors.alerts.warning.border,
-        color: theme.colors.alerts.warning.color,
-      }
-    default:
-      return {
-        backgroundColor: theme.colors.alerts.info.background,
-        borderColor: theme.colors.alerts.info.border,
-        color: theme.colors.alerts.info.color,
-      }
-  }
-}
-
-// @ts-ignore
-export const StyledAlert = styled(Alert, {
-  shouldForwardProp: (prop) => prop !== 'kind',
-})<StyledAlertProps>(({ kind, theme }) => ({
-  padding: calcRem(15),
-  margin: calcRem(0, 0, 20),
-  border: '1px solid transparent',
-  borderRadius: calcRem(4),
-  ...stylesFromKind(kind, theme),
-}))

components/global/Alert/Alert.tsx

@@ -1,10 +1,17 @@
 import React, { ReactNode } from 'react'
-import { Kind, StyledAlert } from './Alert.styled'
+import { Kind } from './Alert.styled'
 
 interface AlertProps {
   kind: Kind
   children: ReactNode
   type?: 'assertive' | 'polite'
 }
 
-export const Alert = (props: AlertProps) => <StyledAlert {...props} />
+export const Alert = (props: AlertProps) => {
+  return (
+    <div>
+      Alert HERE
+      {props.children}
+    </div>
+  )
+}

components/global/analytics.ts

@@ -1,13 +1,11 @@
-import * as ReactGA from 'react-ga'
-
 declare global {
   interface Window {
     appInsights: any
   }
 }
 
-export const init = (googleAnalyticsId: string): void => {
-  ReactGA.initialize(googleAnalyticsId)
+export const init = (_googleAnalyticsId: string): void => {
+  //   TODO
 }
 
 export const getSessionId = (): string | null => {
@@ -17,8 +15,7 @@ export const getSessionId = (): string | null => {
 }
 
 export const logPageView = (): void => {
-  ReactGA.set({ page: window.location.pathname })
-  ReactGA.pageview(window.location.pathname)
+  //   TODO
   if (window.appInsights) {
     window.appInsights.trackPageView()
   }
@@ -44,7 +41,7 @@ export const logEvent = (category: string, action: string, data: any, measuremen
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const logException = (description: string, exception: Error, data: any): void => {
   if (description) {
-    ReactGA.exception({ description, exception: exception.toString() })
+    //   TODO
     if (window.appInsights && window.appInsights.trackException) {
       window.appInsights.trackException(exception, 'unhandled', {
         description,

components/venueMap.tsx

@@ -130,7 +130,7 @@ const MapEvents = () => {
 }
 
 const Map = ({ roomLocationData }) => {
-  const [map, setMap] = useState(null)
+  const [map, _setMap] = useState(null)
   const userLocButton = useRef(null)
 
   useEffect(() => {
@@ -167,7 +167,7 @@ const Map = ({ roomLocationData }) => {
       style={{ height: 700, width: '100%' }}
       minZoom={19}
       maxZoom={22}
-      whenCreated={setMap}
+      //TODO: whenReady={setMap}
     >
       <TileLayer
         attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'