From 0d053866bbe63964b7a79677ac0015a9b265e520 Mon Sep 17 00:00:00 2001
From: ponchimeow <trancetoradora@gmail.com>
Date: Mon, 14 Oct 2024 16:01:30 +0800
Subject: [PATCH] fix: no auth locale list

---
 src/components/common/LocaleCollapse.tsx      | 49 +++++++++++++++++++
 src/components/common/MemberProfileButton.tsx | 32 +-----------
 src/containers/common/AuthButton.tsx          |  4 ++
 3 files changed, 54 insertions(+), 31 deletions(-)
 create mode 100644 src/components/common/LocaleCollapse.tsx

diff --git a/src/components/common/LocaleCollapse.tsx b/src/components/common/LocaleCollapse.tsx
new file mode 100644
index 000000000..99a01c054
--- /dev/null
+++ b/src/components/common/LocaleCollapse.tsx
@@ -0,0 +1,49 @@
+import { ChevronDownIcon, ChevronRightIcon } from '@chakra-ui/icons'
+import React, { useContext } from 'react'
+import { Box, useDisclosure, Collapse } from '@chakra-ui/react'
+import { List } from 'antd'
+import styled from 'styled-components'
+import LocaleContext, { SUPPORTED_LOCALES } from '../../contexts/LocaleContext'
+
+const StyledCollapseIconWrapper = styled(Box)`
+  && {
+    margin: auto 0;
+  }
+`
+const BlankIcon = styled.i`
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+`
+
+const LocaleCollapse: React.FC = () => {
+  const { isOpen, onToggle } = useDisclosure()
+  const { currentLocale, setCurrentLocale } = useContext(LocaleContext)
+  return (
+    <>
+      <Box d="flex" justifyContent="space-between" cursor="pointer" onClick={onToggle}>
+        <Box>
+          <List.Item style={{ cursor: 'pointer' }}>
+            <BlankIcon className="mr-2" />
+            {SUPPORTED_LOCALES.find(supportedLocale => supportedLocale.locale === currentLocale)?.label}
+          </List.Item>
+        </Box>
+        <StyledCollapseIconWrapper>
+          {isOpen ? <ChevronDownIcon w="16px" /> : <ChevronRightIcon w="16px" />}
+        </StyledCollapseIconWrapper>
+      </Box>
+      <Collapse in={isOpen} animateOpacity style={{ background: '#f7f8f8', margin: '0 -12px' }}>
+        {SUPPORTED_LOCALES.filter(v => v.locale !== currentLocale).map(v => (
+          <Box ml="3rem" style={{ cursor: 'pointer' }}>
+            <List.Item key={v.locale} onClick={() => setCurrentLocale?.(v.locale)}>
+              <BlankIcon className="mr-2" />
+              {v.label}
+            </List.Item>
+          </Box>
+        ))}
+      </Collapse>
+    </>
+  )
+}
+
+export default LocaleCollapse
diff --git a/src/components/common/MemberProfileButton.tsx b/src/components/common/MemberProfileButton.tsx
index 601429b41..2f4ea88c7 100644
--- a/src/components/common/MemberProfileButton.tsx
+++ b/src/components/common/MemberProfileButton.tsx
@@ -10,7 +10,6 @@ import { useIntl } from 'react-intl'
 import { Link, useHistory } from 'react-router-dom'
 import styled from 'styled-components'
 import { useCustomRenderer } from '../../contexts/CustomRendererContext'
-import LocaleContext, { SUPPORTED_LOCALES } from '../../contexts/LocaleContext'
 import PodcastPlayerContext from '../../contexts/PodcastPlayerContext'
 import { commonMessages } from '../../helpers/translation'
 import { useNav } from '../../hooks/data'
@@ -18,6 +17,7 @@ import { PlusIcon } from '../../images/index'
 import { AuthModalContext } from '../auth/AuthModal'
 import { MemberAdminMenu } from './AdminMenu'
 import GlobalSearchInput from './GlobalSearchInput'
+import LocaleCollapse from './LocaleCollapse'
 import MemberAvatar from './MemberAvatar'
 import Responsive from './Responsive'
 
@@ -160,36 +160,6 @@ const DefaultLogout: React.VFC<{ onClick?: React.MouseEventHandler<HTMLDivElemen
   )
 }
 
-const LocaleCollapse: React.FC = () => {
-  const { isOpen, onToggle } = useDisclosure()
-  const { currentLocale, setCurrentLocale } = useContext(LocaleContext)
-  return (
-    <>
-      <Box d="flex" justifyContent="space-between" cursor="pointer" onClick={onToggle}>
-        <Box>
-          <List.Item style={{ cursor: 'pointer' }}>
-            <BlankIcon className="mr-2" />
-            {SUPPORTED_LOCALES.find(supportedLocale => supportedLocale.locale === currentLocale)?.label}
-          </List.Item>
-        </Box>
-        <StyledCollapseIconWrapper>
-          {isOpen ? <ChevronDownIcon w="16px" /> : <ChevronRightIcon w="16px" />}
-        </StyledCollapseIconWrapper>
-      </Box>
-      <Collapse in={isOpen} animateOpacity style={{ background: '#f7f8f8', margin: '0 -12px' }}>
-        {SUPPORTED_LOCALES.filter(v => v.locale !== currentLocale).map(v => (
-          <Box ml="3rem" style={{ cursor: 'pointer' }}>
-            <List.Item key={v.locale} onClick={() => setCurrentLocale?.(v.locale)}>
-              <BlankIcon className="mr-2" />
-              {v.label}
-            </List.Item>
-          </Box>
-        ))}
-      </Collapse>
-    </>
-  )
-}
-
 const MemberProfileButton: React.VFC<{
   id: string
   name: string
diff --git a/src/containers/common/AuthButton.tsx b/src/containers/common/AuthButton.tsx
index 99130160f..86c20afc6 100644
--- a/src/containers/common/AuthButton.tsx
+++ b/src/containers/common/AuthButton.tsx
@@ -2,13 +2,16 @@ import { Button, Popover } from 'antd'
 import React, { useContext } from 'react'
 import { useIntl } from 'react-intl'
 import { AuthModalContext } from '../../components/auth/AuthModal'
+import LocaleCollapse from '../../components/common/LocaleCollapse'
 import { CustomNavLinks, StyledList, Wrapper } from '../../components/common/MemberProfileButton'
 import Responsive from '../../components/common/Responsive'
 import { useCustomRenderer } from '../../contexts/CustomRendererContext'
 import { commonMessages } from '../../helpers/translation'
 import { useAuthModal } from '../../hooks/auth'
+import { useApp } from 'lodestar-app-element/src/contexts/AppContext'
 
 const AuthButton: React.VFC = () => {
+  const { enabledModules } = useApp()
   const { formatMessage } = useIntl()
   const { renderAuthButton } = useCustomRenderer()
   const { setVisible } = useContext(AuthModalContext)
@@ -35,6 +38,7 @@ const AuthButton: React.VFC = () => {
             <Wrapper>
               <StyledList split={false}>
                 <CustomNavLinks />
+                {enabledModules.locale ? <LocaleCollapse /> : null}
               </StyledList>
             </Wrapper>
           }