Implementing I18N

gui/rpk-gui/src/components/header/index.tsx

@@ -18,17 +18,11 @@ import { FirmContext } from "../../contexts/FirmContext";
 import { Logout } from "../auth/Logout";
 import { IUser } from "../../interfaces";
 import MuiLink from "@mui/material/Link";
-import { useTranslation } from "react-i18next";
-import { useTranslation as useTranslationR } from "@refinedev/core";
-import { useSetLocale } from "@refinedev/core";
+import I18nPicker from "./I18nPicker";
 
 export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
   sticky = true,
 }) => {
-  const { i18n } = useTranslation();
-  const { getLocale, changeLocale } = useTranslationR();
-  const currentLocale = getLocale();
-
   const collapsed = false;
   const { mode, setMode } = useContext(ColorModeContext);
   const { currentFirm } = useContext(FirmContext);
@@ -44,16 +38,6 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
     setAnchorEl(null);
   };
 
-  const [anchorIn, setAnchorIn] = React.useState<null | HTMLElement>(null);
-  const openI18nMenu = Boolean(anchorEl);
-  const handleOpenI18nMenu = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorIn(event.currentTarget);
-  }
-  const handleCloseI18nMenu = () => {
-    setAnchorIn(null);
-  };
-
-
   return (
     <AppBar position={sticky ? "sticky" : "relative"}>
       <Toolbar>
@@ -149,43 +133,7 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
             {!user && (
               <Link to="/auth/login"><Button>Login</Button></Link>
             )}
-            <Button
-              id="i18n-button"
-              aria-controls={openI18nMenu ? 'i18n-menu' : undefined}
-              aria-haspopup="true"
-              aria-expanded={openI18nMenu ? 'true' : undefined}
-              onClick={handleOpenI18nMenu}>
-              <Typography
-                sx={{
-                  display: {
-                    xs: "none",
-                    sm: "inline-block",
-                  },
-                }}
-                variant="subtitle2"
-              >
-                {currentLocale}
-              </Typography>&nbsp;
-              <Avatar src={`/images/flags/${currentLocale}.svg`} alt={currentLocale}/>
-            </Button>
-            <Menu
-              id="i18n-menu"
-              open={openI18nMenu}
-              anchorEl={anchorIn}
-              onClose={handleCloseI18nMenu}
-            >
-              {[...(i18n.languages || [])].sort().map((lang: string) => (
-                <MenuItem
-                  key={lang}
-                  onClick={() => changeLocale(lang)}
-                >
-                  <span style={{ marginRight: 8 }}>
-                    <Avatar src={`/images/flags/${lang}.svg`} alt={lang}/>
-                  </span>
-                  {lang === "en" ? "English" : "Français"}
-                </MenuItem>
-              ))}
-            </Menu>
+            <I18nPicker />
           </Stack>
         </Stack>
       </Toolbar>