import { useEffect } from 'react'
import Head from 'next/head'
import { LOGGIN_ROUTES } from '@app/configs'
import {
WASMContextProvider,
WebsiteProviderWrapper,
} from '@app/components/providers'
import { RestWebsiteProviderWrapper } from '@app/components/providers/rest/rest-website'
import type { InnerApp } from '@app/types/page'
import { buildScopeQuery } from '@app/utils/build-scope'
import { strings } from '@app/content/strings/a11y'
import { initPWAWorker } from '@app/data/models/app'
import {
BLOG_WEBFLOW_URL,
companyName,
DOMAIN_NAME,
twitterSite,
} from '@app/configs/app-config'
import { useStaticRendering as enableMobxStaticRendering } from 'mobx-react-lite'
import { SkipContent, SnackBar } from './general'
import { InteractiveProvider } from './providers/interactive'
import { AuthProvider } from './providers/auth'
import { ThemeProvider } from 'next-themes'
if (typeof window === 'undefined') {
enableMobxStaticRendering(true)
}
const authRoutes = LOGGIN_ROUTES.map((route) => route.replace('/', ''))
// load the application with providers depending on component
export const LayoutWrapper = ({ Component, pageProps }: InnerApp) => {
useEffect(() => {
initPWAWorker()
}, [])
const { name } = Component?.meta || strings?.meta
const { wasm, gql, rest } = Component
// name is based off function name and not file name
const nameLowerCased = (name && String(name).toLowerCase()) || ''
const initialWebsiteQuery =
authRoutes.includes(nameLowerCased) ||
authRoutes.includes(nameLowerCased.replace(/ /g, '-'))
// TODO: USE META TO DETERMINE PROVIDER PULLING
const { initialQuery, scopedQuery } = buildScopeQuery(
nameLowerCased,
initialWebsiteQuery
)
return (
)
}
export default function Layout({ Component, pageProps }: InnerApp) {
const { description, title, name } = Component?.meta || strings?.meta
const metaTitle = title || `${strings.appName}: Web Accessibility Service`
const pathName = String(name).toLowerCase()
const domainName = pathName === 'blog' ? BLOG_WEBFLOW_URL : DOMAIN_NAME
const gimage =
pathName === '/' || pathName === 'index'
? `${DOMAIN_NAME}/img/dashboard-example.png`
: `${DOMAIN_NAME}/api/og?title=${metaTitle}`
return (
<>
{metaTitle}
{description ? (
) : null}
{description ? (
) : null}
{metaTitle ? (
) : null}
{description ? (
) : null}
{process.env.NEXT_PUBLIC_DISABLE_SEO === '1' ? (
) : null}
{pathName === 'blog' || pathName === 'dashboard' ? null : (
)}
)
}