fix(locale): set locale based on user settings upon login (#1584)

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 { AvailableLocales } 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) {
+      setLocale(
+        (user?.settings?.locale
+          ? user.settings.locale
+          : currentSettings.locale) as AvailableLocales
+      );
+    }
+  }, [setLocale, currentSettings.locale, user]);
 
   useEffect(() => {
     const updateScrolled = () => {

src/components/Setup/index.tsx

@@ -2,6 +2,8 @@ import axios from 'axios';
 import { useRouter } from 'next/router';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { mutate } from 'swr';
+import useLocale from '../../hooks/useLocale';
 import AppDataWarning from '../AppDataWarning';
 import Badge from '../Common/Badge';
 import Button from '../Common/Button';
@@ -32,15 +34,19 @@ const Setup: React.FC = () => {
   const [currentStep, setCurrentStep] = useState(1);
   const [plexSettingsComplete, setPlexSettingsComplete] = useState(false);
   const router = useRouter();
+  const { locale } = useLocale();
 
   const finishSetup = async () => {
-    setIsUpdating(false);
+    setIsUpdating(true);
     const response = await axios.post<{ initialized: boolean }>(
       '/api/v1/settings/initialize'
     );
 
     setIsUpdating(false);
     if (response.data.initialized) {
+      await axios.post('/api/v1/settings/main', { locale });
+      mutate('/api/v1/settings/public');
+
       router.push('/');
     }
   };