import * as styles from './404.module.scss' import { I18nextContext, Link, Trans } from 'gatsby-plugin-react-i18next' import { Seo } from 'components/Seo' import { graphql } from 'gatsby' import { I18nextProvider } from 'react-i18next' import { useContext, useMemo } from 'react' import i18next from 'i18next' import { Locale } from 'typing' import { Layout } from 'layout' import clsx from 'clsx' import { useDispatch, useSelector } from 'react-redux' import { SearchInput } from '../layout/comp/Input' import { setSearchValue } from 'state' export default function NotFoundPage({ data }: { data: AllLocales }) { const { docInfo, searchValue } = useSelector(state => state) as any const dispatch = useDispatch() const handleSetSearchValue = (value: string) => dispatch(setSearchValue(value)) const pathname = typeof window === 'undefined' ? '' : window.location.pathname const context = useContext(I18nextContext) const language = useMemo(() => { const lang = pathname.slice(1)?.split('/')?.pop() || '' switch (lang) { case 'zh': return 'zh' case 'ja': return 'ja' default: break } return 'en' }, [pathname]) const i18n = useMemo(() => { const i18n = i18next.createInstance() const resources = data.locales.edges.reduce((acc, cur) => { acc[cur.node.language] = { [cur.node.ns]: JSON.parse(cur.node.data) } return acc }, {} as Record<string, Record<string, any>>) i18n.init({ resources, lng: language, fallbackLng: 'en', react: { useSuspense: false, }, }) return i18n }, [language, data]) return ( <I18nextProvider i18n={i18n}> <I18nextContext.Provider value={{ ...context, language }}> <Layout> <Seo title="404 Not Found" noindex /> <div className={styles.container}> <div className={clsx('markdown-body', styles.left)}> <h1 className={clsx(styles.title)}> {<Trans i18nKey="doc404.title" />} </h1> <div>{<Trans i18nKey="doc404.youMayWish" />}</div> <ul className={clsx(styles.optionsContainer)}> <li> { <Trans i18nKey="doc404.goToDocHome" components={[<Link to="/" />]} /> } </li> <li>{<Trans i18nKey="doc404.searchDoc" />}</li> </ul> <div className={styles.searchInput}> <SearchInput docInfo={docInfo} searchValue={searchValue} setSearchValue={handleSetSearchValue} /> </div> </div> <div className={clsx(styles.right)}></div> </div> </Layout> </I18nextContext.Provider> </I18nextProvider> ) } interface AllLocales { locales: { edges: { node: { ns: string data: string language: Locale } }[] } } export const query = graphql` query { locales: allLocale { edges { node { ns data language } } } } `