Unmount auth modals when not needed

WRadoslaw · Jun 5, 2023 · 0132f40 · 0132f40
1 parent 6a1f41f
commit 0132f40
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/packages/atlas/src/App.tsx b/packages/atlas/src/App.tsx
@@ -1,8 +1,7 @@
 import { AnalyticsManager } from '@/AnalyticsManager'
 import { CommonProviders } from '@/CommonProviders'
 import { WelcomeDialog } from '@/components/WelcomeDialog'
-import { ExternalSignInModal } from '@/components/_auth/ExternalSignInModal'
-import { LogInModal } from '@/components/_auth/LogInModal'
+import { AuthModals } from '@/components/_auth/AuthModals/AuthModals'
 import { JoystreamManager } from '@/providers/joystream/joystream.manager'
 import { JoystreamProvider } from '@/providers/joystream/joystream.provider'
 import { NftActionsProvider } from '@/providers/nftActions/nftActions.provider'
@@ -14,7 +13,6 @@ import { NftSaleBottomDrawer } from '@/views/global/NftSaleBottomDrawer'
 import { NftSettlementBottomDrawer } from '@/views/global/NftSettlementBottomDrawer'
 
 import { MainLayout } from './MainLayout'
-import { SignUpModal } from './components/_auth/SignUpModal'
 
 export const App = () => {
   return (
@@ -27,9 +25,7 @@ export const App = () => {
           <TransactionsManager />
           <JoystreamManager />
           <NotificationsManager />
-          <ExternalSignInModal />
-          <SignUpModal />
-          <LogInModal />
+          <AuthModals />
           <WelcomeDialog />
           <NftSettlementBottomDrawer />
           <NftPurchaseBottomDrawer />

diff --git a/packages/atlas/src/components/_auth/AuthModals/AuthModals.tsx b/packages/atlas/src/components/_auth/AuthModals/AuthModals.tsx
@@ -0,0 +1,18 @@
+import { ExternalSignInModal } from '@/components/_auth/ExternalSignInModal'
+import { LogInModal } from '@/components/_auth/LogInModal'
+import { SignUpModal } from '@/components/_auth/SignUpModal'
+import { useAuthStore } from '@/providers/auth/auth.store'
+
+export const AuthModals = () => {
+  const { authModalOpen } = useAuthStore()
+  switch (authModalOpen) {
+    case 'logIn':
+      return <LogInModal />
+    case 'externalLogIn':
+      return <ExternalSignInModal />
+    case 'signUp':
+      return <SignUpModal />
+    default:
+      return null
+  }
+}
diff --git a/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.tsx b/packages/atlas/src/components/_auth/ExternalSignInModal/ExternalSignInModal.tsx
@@ -33,13 +33,6 @@ export const ExternalSignInModal: FC = () => {
     setHasNavigatedBack(true)
   }, [])
 
-  useEffect(() => {
-    if (!authModalOpen) {
-      setCurrentStep(ModalSteps.Wallet)
-      setAvailableMemberships([])
-    }
-  }, [authModalOpen])
-
   // scroll the dialog content to top whenever the displayed step changes
   useEffect(() => {
     if (!dialogContentRef.current) return