simple-react-app-kit/packages/i18n/src/devtool/app/app.tsx

import * as React from "react"

import type { I18nProjectConfig } from "../../config/lingui-config"
import { I18nProvider } from "../../runtime"
import { requestDevtoolJson } from "../api-client"
import { I18nDevtool } from "../i18n-devtool"

type ProjectState =
  | { status: "loading" }
  | { error: Error; status: "error" }
  | { project: I18nProjectConfig; status: "ready" }

export function DevtoolApp() {
  const [state, setState] = React.useState<ProjectState>({ status: "loading" })

  React.useEffect(() => {
    requestDevtoolJson<I18nProjectConfig>("/__i18n/project").then(
      (project) => setState({ project, status: "ready" }),
      (reason) =>
        setState({
          error:
            reason instanceof Error
              ? reason
              : new Error("Unable to load the i18n project."),
          status: "error",
        })
    )
  }, [])

  if (state.status !== "ready") {
    return (
      <main
        className="devtool-app__state"
        role={state.status === "error" ? "alert" : "status"}
      >
        {state.status === "error"
          ? state.error.message
          : "Loading I18n Devtool…"}
      </main>
    )
  }

  const locale =
    state.project.locales.find(
      (candidateLocale) => candidateLocale !== state.project.sourceLocale
    ) ?? state.project.sourceLocale

  if (!state.project.locales.includes(locale)) {
    return (
      <main className="devtool-app__state">
        Add a target locale with <code>workspace-i18n new &lt;locale&gt;</code>.
      </main>
    )
  }

  return (
    <I18nProvider locale={locale} locales={state.project.locales}>
      <I18nDevtool
        defaultOpen
        mode="standalone"
        sourceLocale={state.project.sourceLocale}
      />
    </I18nProvider>
  )
}