From 439fee80e23b159e4464365f9d724d07c37be362 Mon Sep 17 00:00:00 2001 From: Delilah C <23665803+goplayoutside3@users.noreply.github.com> Date: Thu, 25 Jan 2024 09:47:34 -0600 Subject: [PATCH] track auth modal's activeIndex in the UI store (#5871) --- .../AuthenticationInvitation.stories.js | 3 ++ .../AuthenticationInvitationConnector.js | 16 +++++-- .../AuthenticationInvitationConnector.spec.js | 3 ++ .../AuthenticationInvitationContainer.js | 46 +++++++++++-------- .../AuthenticationInvitationContainer.spec.js | 13 +----- .../src/components/PageHeader/PageHeader.js | 21 ++++----- packages/app-project/stores/UI.js | 5 ++ 7 files changed, 60 insertions(+), 47 deletions(-) diff --git a/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitation.stories.js b/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitation.stories.js index f115f29eeb..30b8843ec5 100644 --- a/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitation.stories.js +++ b/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitation.stories.js @@ -19,6 +19,9 @@ const stores = { project: { isComplete: false }, + ui: { + setAuthModalActiveIndex: () => {} + }, user: { isLoggedIn: false, personalization: { diff --git a/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationConnector.js b/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationConnector.js index c2f5c37e1d..1c0e379764 100644 --- a/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationConnector.js +++ b/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationConnector.js @@ -11,23 +11,29 @@ function useStores(mockStore) { const stores = useContext(MobXProviderContext) const store = mockStore || stores.store + const { setAuthModalActiveIndex } = store.ui + const { isLoggedIn } = store.user const { sessionCount } = store.user.personalization const { isComplete } = store.project const afterFive = sessionCount >= 5 const isVisible = !isLoggedIn && !isComplete && afterFive return { - isVisible + isVisible, + setAuthModalActiveIndex } } -function AuthenticationInvitationConnector ({ mockStore }) { - const { isVisible = false } = useStores(mockStore) +function AuthenticationInvitationConnector({ mockStore }) { + const { isVisible = false, setAuthModalActiveIndex } = useStores(mockStore) return ( - + ) } export default observer(AuthenticationInvitationConnector) -export { AuthenticationInvitationConnector } \ No newline at end of file +export { AuthenticationInvitationConnector } diff --git a/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationConnector.spec.js b/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationConnector.spec.js index 10c5cea7c9..da6b20b1b7 100644 --- a/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationConnector.spec.js +++ b/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationConnector.spec.js @@ -11,6 +11,9 @@ describe('Component > AuthenticationInvitationConnector', function () { project: { isComplete: false }, + ui: { + setAuthModalActiveIndex: () => {} + }, user: { isLoggedIn: false, personalization: { diff --git a/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationContainer.js b/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationContainer.js index e36f9fc35f..8855540a0f 100644 --- a/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationContainer.js +++ b/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationContainer.js @@ -1,35 +1,28 @@ import { useState } from 'react' -import styled from 'styled-components' import { useTranslation } from 'next-i18next' +import PlainButton from '@zooniverse/react-components/PlainButton' +import { bool, func } from 'prop-types' -import { Anchor } from 'grommet' -import NavLink from '@shared/components/NavLink' import GenericAnnouncement from '../GenericAnnouncement' -const StyledAnchor = styled(Anchor)` - line-height: 19px; -` +const DEFAULT_HANDLER = () => {} -export default function AuthenticationInvitationContainer({ isVisible }) { +export default function AuthenticationInvitationContainer({ + isVisible = false, + setAuthModalActiveIndex = DEFAULT_HANDLER +}) { const { t } = useTranslation('components') const [dismissed, setDismissed] = useState(false) - const { pathname } = window.location - const signInLink = { - href: `${pathname}?login=true`, - text: t('Announcements.AuthenticationInvitation.signIn') - } - const registerLink = { - href: `${pathname}?register=true`, - text: t('Announcements.AuthenticationInvitation.register') - } - // TODO: maybe show project specific message here. Then fallback on generic. const announcement = t('Announcements.AuthenticationInvitation.announcement') function dismissBanner() { setDismissed(true) } + const signInLabel = t('Announcements.AuthenticationInvitation.signIn') + const registerLabel = t('Announcements.AuthenticationInvitation.register') + if (isVisible && !dismissed) { return ( - - + setAuthModalActiveIndex(0)} + /> + setAuthModalActiveIndex(1)} + /> ) } return null } + +AuthenticationInvitationContainer.propTypes = { + /** Announcement component is visible when not logged in and after 5 classifications */ + isVisible: bool, + /** Handles AuthModal in PageHeader */ + setAuthModalActiveIndex: func +} diff --git a/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationContainer.spec.js b/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationContainer.spec.js index 790870437b..4704eeec22 100644 --- a/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationContainer.spec.js +++ b/packages/app-project/src/components/Announcements/components/AuthenticationInvitation/AuthenticationInvitationContainer.spec.js @@ -1,9 +1,8 @@ import { mount, shallow } from 'enzyme' import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime' -import { CloseButton } from '@zooniverse/react-components' +import { CloseButton, PlainButton } from '@zooniverse/react-components' import AuthenticationInvitationContainer from './AuthenticationInvitationContainer' import GenericAnnouncement from '../GenericAnnouncement' -import NavLink from '@shared/components/NavLink' describe('Component > AuthenticationInvitationContainer', function () { const mockRouter = { @@ -29,16 +28,6 @@ describe('Component > AuthenticationInvitationContainer', function () { expect(componentWrapper).to.have.lengthOf(1) }) - it('should have a link to the login form', function () { - const signInLink = wrapper.find(NavLink).first() - expect(signInLink.props().link.href).to.equal(`${window.location.pathname}?login=true`) - }) - - it('should have a link to the register form', function () { - const registerLink = wrapper.find(NavLink).last() - expect(registerLink.props().link.href).to.equal(`${window.location.pathname}?register=true`) - }) - describe('when not visible', function () { before(function () { wrapper = shallow() diff --git a/packages/app-project/src/components/PageHeader/PageHeader.js b/packages/app-project/src/components/PageHeader/PageHeader.js index a904af91c3..9ae58158f5 100644 --- a/packages/app-project/src/components/PageHeader/PageHeader.js +++ b/packages/app-project/src/components/PageHeader/PageHeader.js @@ -1,20 +1,19 @@ import { AuthModal, ZooHeader } from '@zooniverse/react-components' import auth from 'panoptes-client/lib/auth' import { MobXProviderContext, observer } from 'mobx-react' -import { useContext, useState } from 'react' +import { useContext } from 'react' import { bool } from 'prop-types' import ThemeModeContext from '@shared/contexts/ThemeModeContext.js' function useStore() { const { store } = useContext(MobXProviderContext) - const { user: userStore } = store - return { userStore } + const { user: userStore, ui: uiStore } = store + return { uiStore, userStore } } function PageHeader({ adminMode }) { - const [activeIndex, setActiveIndex] = useState(-1) - - const { userStore } = useStore() + const { uiStore, userStore } = useStore() + const { authModalActiveIndex, setAuthModalActiveIndex } = uiStore const { admin, display_name, login } = userStore const userProp = userStore.isLoggedIn ? { admin, display_name, login } : {} @@ -37,23 +36,23 @@ function PageHeader({ adminMode }) { } function openRegisterModal() { - setActiveIndex(1) + setAuthModalActiveIndex(1) } function openSignInModal() { - setActiveIndex(0) + setAuthModalActiveIndex(0) } function closeAuthModal() { - setActiveIndex(-1) + setAuthModalActiveIndex(-1) } return ( <>