From e771e31873de5bd70a06af11a850b4757afba8fb Mon Sep 17 00:00:00 2001
From: Manuel <manuel.ruwe@bluewin.ch>
Date: Sun, 28 Aug 2022 16:28:17 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20language=20switch=20and=20?=
 =?UTF-8?q?add=20search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 next-i18next.config.js                     |  2 ++
 src/components/Settings/LanguageSwitch.tsx | 12 +++++++++++-
 src/languages/language.ts                  |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/next-i18next.config.js b/next-i18next.config.js
index 6ab97a6f6..9c876f550 100644
--- a/next-i18next.config.js
+++ b/next-i18next.config.js
@@ -4,7 +4,9 @@ module.exports = {
   i18n: {
     defaultLocale: 'en',
     locales: ['en', 'de', 'en', 'es', 'fr', 'it', 'ja', 'nl', 'pl', 'ru', 'sl', 'sv', 'zh'],
+    fallbackLng: 'en',
     localeDetection: true,
+    returnEmptyString: false
   },
   reloadOnPrerender: process.env.NODE_ENV === 'development',
 };
diff --git a/src/components/Settings/LanguageSwitch.tsx b/src/components/Settings/LanguageSwitch.tsx
index 01e2ecfec..c9334c0b4 100644
--- a/src/components/Settings/LanguageSwitch.tsx
+++ b/src/components/Settings/LanguageSwitch.tsx
@@ -12,7 +12,7 @@ export default function LanguageSwitch() {
   const { t, i18n } = useTranslation('settings/general/internationalization');
   const { changeLanguage } = i18n;
   const configLocale = getCookie('config-locale');
-  const { locale, locales } = useRouter();
+  const { locale, locales, push } = useRouter();
   const [selectedLanguage, setSelectedLanguage] = useState<string>(
     (configLocale as string) ?? locale ?? 'en'
   );
@@ -37,6 +37,8 @@ export default function LanguageSwitch() {
           sameSite: 'strict',
         });
 
+        push('/', '/', { locale: value });
+
         showNotification({
           title: 'Language changed',
           message: `You changed the language to '${newLanguage.originalName}'`,
@@ -65,6 +67,14 @@ export default function LanguageSwitch() {
         onChange={onChangeSelect}
         value={selectedLanguage}
         defaultValue={locale}
+        searchable
+        filter={(value, item) => {
+          const selectItems = item as unknown as { value: string, language: Language };
+          return (
+            selectItems.language.originalName.trim().includes(value.trim()) ||
+            selectItems.language.translatedName.trim().includes(value.trim())
+          );
+        }}
         styles={{
           icon: {
             width: 42,
diff --git a/src/languages/language.ts b/src/languages/language.ts
index c292ea53b..d2cbc5d59 100644
--- a/src/languages/language.ts
+++ b/src/languages/language.ts
@@ -64,4 +64,4 @@ const languages: Language[] = [
 ];
 
 export const getLanguageByCode = (code: string | null) =>
-  languages.find((language) => language.shortName === code) ?? languages[-1];
+  languages.find((language) => language.shortName === code) ?? languages[languages.length - 1];