Implementing core of setting user languages and fetching language specific tasks

website/src/components/Header/Header.tsx

@@ -5,6 +5,7 @@ import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { Flags } from "react-feature-flags";
 import { FaUser } from "react-icons/fa";
+import { LanguageSelector } from "src/components/LanguageSelector";
 
 import { UserMenu } from "./UserMenu";
 
@@ -45,6 +46,7 @@ export function Header() {
           <Flags authorizedFlags={["flagTest"]}>
             <Text>FlagTest</Text>
           </Flags>
+          <LanguageSelector />
           <AccountButton />
           <UserMenu />
         </Flex>

website/src/components/LanguageSelector/LanguageSelector.tsx

@@ -0,0 +1,40 @@
+import { Select } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { useCallback, useMemo, useState } from "react";
+import cookie from "react-cookies";
+
+const LanguageSelector = () => {
+  const router = useRouter();
+  const { i18n } = useTranslation();
+
+  const { language: currentLanguage } = i18n;
+  const languageNames = useMemo(() => {
+    return new Intl.DisplayNames([currentLanguage], {
+      type: "language",
+    });
+  }, [currentLanguage]);
+
+  const languageChanged = useCallback(
+    async (option) => {
+      const locale = option.target.value;
+      cookie.save("NEXT_LOCALE", locale, { path: "/" });
+      const path = router.asPath;
+      return router.push(path, path, { locale });
+    },
+    [router]
+  );
+
+  const locales = router.locales;
+  return (
+    <Select onChange={languageChanged} defaultValue={currentLanguage}>
+      {locales.map((locale) => (
+        <option key={locale} value={locale}>
+          {languageNames.of(locale) ?? locale}
+        </option>
+      ))}
+    </Select>
+  );
+};
+
+export { LanguageSelector };

website/src/components/LanguageSelector/index.tsx

@@ -0,0 +1 @@
+export * from "./LanguageSelector";