fix(lang): only set locale once at page load and move subsequent updates back into Layout

fixes #1662

src/components/Layout/index.tsx

@@ -3,6 +3,9 @@ import { ArrowLeftIcon, InformationCircleIcon } from '@heroicons/react/solid';
 import { useRouter } from 'next/router';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { AvailableLocale } from '../../context/LanguageContext';
+import useLocale from '../../hooks/useLocale';
+import useSettings from '../../hooks/useSettings';
 import { Permission, useUser } from '../../hooks/useUser';
 import SearchInput from './SearchInput';
 import Sidebar from './Sidebar';
@@ -16,9 +19,21 @@ const messages = defineMessages({
 const Layout: React.FC = ({ children }) => {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
-  const { hasPermission } = useUser();
+  const { user, hasPermission } = useUser();
   const router = useRouter();
   const intl = useIntl();
+  const { currentSettings } = useSettings();
+  const { setLocale } = useLocale();
+
+  useEffect(() => {
+    if (setLocale && user) {
+      setLocale(
+        (user?.settings?.locale
+          ? user.settings.locale
+          : currentSettings.locale) as AvailableLocale
+      );
+    }
+  }, [setLocale, currentSettings.locale, user]);
 
   useEffect(() => {
     const updateScrolled = () => {

src/pages/_app.tsx

@@ -64,7 +64,7 @@ const loadLocaleData = (locale: AvailableLocale): Promise<any> => {
 // with our combined user prop
 // This is specific to _app.tsx. Other pages will not need to do this!
 type NextAppComponentType = typeof App;
-type MessagesType = Record<string, any>;
+type MessagesType = Record<string, string>;
 
 interface ExtendedAppProps extends AppProps {
   user: User;
@@ -90,14 +90,6 @@ const CoreApp: Omit<NextAppComponentType, 'origGetInitialProps'> = ({
   const [loadedMessages, setMessages] = useState<MessagesType>(messages);
   const [currentLocale, setLocale] = useState<AvailableLocale>(locale);
 
-  useEffect(() => {
-    setLocale(
-      (user?.settings?.locale
-        ? user.settings.locale
-        : currentSettings.locale) as AvailableLocale
-    );
-  }, [currentSettings.locale, user?.settings?.locale]);
-
   useEffect(() => {
     loadLocaleData(currentLocale).then(setMessages);
   }, [currentLocale]);