diff --git a/app/scenes/Document/Shared.tsx b/app/scenes/Document/Shared.tsx index 2908394bf3..13cbab1e2d 100644 --- a/app/scenes/Document/Shared.tsx +++ b/app/scenes/Document/Shared.tsx @@ -17,6 +17,7 @@ import useStores from "~/hooks/useStores"; import { NavigationNode } from "~/types"; import { AuthorizationError, OfflineError } from "~/utils/errors"; import isCloudHosted from "~/utils/isCloudHosted"; +import { changeLanguage, detectLanguage } from "~/utils/language"; import Login from "../Login"; import Document from "./components/Document"; import Loading from "./components/Loading"; @@ -76,14 +77,14 @@ function useDocumentId(documentSlug: string, response?: Response) { } function SharedDocumentScene(props: Props) { - const { ui } = useStores(); + const { ui, auth } = useStores(); const theme = useTheme(); const location = useLocation(); const searchParams = React.useMemo( () => new URLSearchParams(location.search), [location.search] ); - const { t } = useTranslation(); + const { t, i18n } = useTranslation(); const [response, setResponse] = React.useState(); const [error, setError] = React.useState(); const { documents } = useStores(); @@ -91,6 +92,12 @@ function SharedDocumentScene(props: Props) { const documentId = useDocumentId(documentSlug, response); const can = usePolicy(response?.document.id ?? ""); + React.useEffect(() => { + if (!auth.user) { + changeLanguage(detectLanguage(), i18n); + } + }, [auth, i18n]); + // ensure the wider page color always matches the theme React.useEffect(() => { window.document.body.style.background = theme.background;