fix(locale): properly restore display language upon page refresh (#1646)

* fix(locale): properly restore display language upon page refresh

* refactor: dedupe logic

server/middleware/auth.ts

@@ -5,36 +5,35 @@ import { getSettings } from '../lib/settings';
 
 export const checkUser: Middleware = async (req, _res, next) => {
   const settings = getSettings();
+  let user: User | undefined;
 
   if (req.header('X-API-Key') === settings.main.apiKey) {
     const userRepository = getRepository(User);
 
     let userId = 1; // Work on original administrator account
 
-    // If a User ID is provided, we will act on that users behalf
+    // If a User ID is provided, we will act on that user's behalf
     if (req.header('X-API-User')) {
       userId = Number(req.header('X-API-User'));
     }
-    const user = await userRepository.findOne({ where: { id: userId } });
 
-    if (user) {
+    user = await userRepository.findOne({ where: { id: userId } });
-      req.user = user;
-    }
   } else if (req.session?.userId) {
     const userRepository = getRepository(User);
 
-    const user = await userRepository.findOne({
+    user = await userRepository.findOne({
       where: { id: req.session.userId },
     });
+  }
 
-    if (user) {
+  if (user) {
-      req.user = user;
+    req.user = user;
-      req.locale = user.settings?.locale
-        ? user.settings?.locale
-        : settings.main.locale;
-    }
   }
 
+  req.locale = user?.settings?.locale
+    ? user.settings.locale
+    : settings.main.locale;
+
   next();
 };
 

src/components/Layout/index.tsx

@@ -3,9 +3,6 @@ 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';
@@ -19,21 +16,9 @@ const messages = defineMessages({
 const Layout: React.FC = ({ children }) => {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
-  const { user, hasPermission } = useUser();
+  const { hasPermission } = useUser();
   const router = useRouter();
   const intl = useIntl();
-  const { currentSettings } = useSettings();
-  const { setLocale } = useLocale();
-
-  useEffect(() => {
-    if (setLocale) {
-      setLocale(
-        (user?.settings?.locale
-          ? user.settings.locale
-          : currentSettings.locale) as AvailableLocale
-      );
-    }
-  }, [setLocale, currentSettings.locale, user]);
 
   useEffect(() => {
     const updateScrolled = () => {

src/pages/_app.tsx

@@ -90,6 +90,14 @@ 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]);