From ba1dd07e532e7875d60e4abadda1eebe2097f9d3 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Thu, 22 Jun 2023 14:09:51 -0700 Subject: [PATCH] Fix mock mode transition to regular mode on login (#361) --- front/src/AppWrapper.tsx | 28 +++++++++++++++++++ front/src/apollo.tsx | 25 +++++++++++++++++ front/src/index.tsx | 22 +++------------ front/src/modules/auth/hooks/useMockData.ts | 27 ------------------ .../modules/auth/states/isMockModeState.ts | 6 ++++ front/src/pages/auth/Index.tsx | 8 ++++-- front/src/pages/auth/PasswordLogin.tsx | 27 ++++++++++-------- server/package.json | 2 +- 8 files changed, 85 insertions(+), 60 deletions(-) create mode 100644 front/src/AppWrapper.tsx delete mode 100644 front/src/modules/auth/hooks/useMockData.ts create mode 100644 front/src/modules/auth/states/isMockModeState.ts diff --git a/front/src/AppWrapper.tsx b/front/src/AppWrapper.tsx new file mode 100644 index 000000000..1ae1494f5 --- /dev/null +++ b/front/src/AppWrapper.tsx @@ -0,0 +1,28 @@ +import { StrictMode } from 'react'; +import { BrowserRouter } from 'react-router-dom'; +import { ApolloProvider } from '@apollo/client'; +import { useRecoilState } from 'recoil'; + +import { isMockModeState } from '@/auth/states/isMockModeState'; + +import { AppThemeProvider } from './providers/AppThemeProvider'; +import { AuthProvider } from './providers/AuthProvider'; +import { apiClient, mockClient } from './apollo'; +import { App } from './App'; + +export function AppWrapper() { + const [isMockMode] = useRecoilState(isMockModeState); + return ( + + + + + + + + + + + + ); +} diff --git a/front/src/apollo.tsx b/front/src/apollo.tsx index 9211e685b..4b512af97 100644 --- a/front/src/apollo.tsx +++ b/front/src/apollo.tsx @@ -1,5 +1,6 @@ import { ApolloClient, + ApolloLink, createHttpLink, from, InMemoryCache, @@ -11,6 +12,8 @@ import { RestLink } from 'apollo-link-rest'; import { CommentThreadTarget } from './generated/graphql'; import { getTokensFromRefreshToken } from './modules/auth/services/AuthService'; +import { mockedCompaniesData } from './testing/mock-data/companies'; +import { mockedUsersData } from './testing/mock-data/users'; const apiLink = createHttpLink({ uri: `${process.env.REACT_APP_API_URL}`, @@ -98,3 +101,25 @@ export const authClient = new ApolloClient({ link: authLink, cache: new InMemoryCache(), }); + +const mockLink = new ApolloLink((operation, forward) => { + return forward(operation).map((response) => { + if (operation.operationName === 'GetCompanies') { + return { data: { companies: mockedCompaniesData } }; + } + if (operation.operationName === 'GetCurrentUser') { + return { data: { users: [mockedUsersData[0]] } }; + } + return response; + }); +}); + +export const mockClient = new ApolloClient({ + link: from([mockLink, apiLink]), + cache: new InMemoryCache(), + defaultOptions: { + query: { + fetchPolicy: 'cache-first', + }, + }, +}); diff --git a/front/src/index.tsx b/front/src/index.tsx index 974e72ea9..7f180162f 100644 --- a/front/src/index.tsx +++ b/front/src/index.tsx @@ -1,35 +1,21 @@ -import React, { StrictMode } from 'react'; +import React from 'react'; import ReactDOM from 'react-dom/client'; -import { BrowserRouter } from 'react-router-dom'; -import { ApolloProvider } from '@apollo/client'; import { RecoilRoot } from 'recoil'; import '@emotion/react'; import { ThemeType } from './modules/ui/layout/styles/themes'; -import { AppThemeProvider } from './providers/AppThemeProvider'; -import { AuthProvider } from './providers/AuthProvider'; -import { apiClient } from './apollo'; -import { App } from './App'; +import { AppWrapper } from './AppWrapper'; import './index.css'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement, ); + root.render( - - - - - - - - - - - + , ); diff --git a/front/src/modules/auth/hooks/useMockData.ts b/front/src/modules/auth/hooks/useMockData.ts deleted file mode 100644 index e5fed599d..000000000 --- a/front/src/modules/auth/hooks/useMockData.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { graphql, setupWorker } from 'msw'; - -import { mockedCompaniesData } from '~/testing/mock-data/companies'; -import { mockedUsersData } from '~/testing/mock-data/users'; - -export function useMockData() { - const worker = setupWorker(...graphqlMocks); - worker.start({ quiet: true, onUnhandledRequest: 'bypass' }); -} - -const graphqlMocks = [ - graphql.query('GetCompanies', (req, res, ctx) => { - return res( - ctx.data({ - companies: mockedCompaniesData, - }), - ); - }), - - graphql.query('GetCurrentUser', (req, res, ctx) => { - return res( - ctx.data({ - users: [mockedUsersData[0]], - }), - ); - }), -]; diff --git a/front/src/modules/auth/states/isMockModeState.ts b/front/src/modules/auth/states/isMockModeState.ts new file mode 100644 index 000000000..3d29e5ce3 --- /dev/null +++ b/front/src/modules/auth/states/isMockModeState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const isMockModeState = atom({ + key: 'isMockModeState', + default: false, +}); diff --git a/front/src/pages/auth/Index.tsx b/front/src/pages/auth/Index.tsx index 0766b862f..57659c967 100644 --- a/front/src/pages/auth/Index.tsx +++ b/front/src/pages/auth/Index.tsx @@ -10,9 +10,9 @@ import { HorizontalSeparator } from '@/auth/components/ui/HorizontalSeparator'; import { Logo } from '@/auth/components/ui/Logo'; import { Modal } from '@/auth/components/ui/Modal'; import { Title } from '@/auth/components/ui/Title'; -import { useMockData } from '@/auth/hooks/useMockData'; import { hasAccessToken } from '@/auth/services/AuthService'; import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState'; +import { isMockModeState } from '@/auth/states/isMockModeState'; import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton'; import { SecondaryButton } from '@/ui/components/buttons/SecondaryButton'; import { TextInput } from '@/ui/components/inputs/TextInput'; @@ -28,17 +28,19 @@ const StyledContentContainer = styled.div` export function Index() { const navigate = useNavigate(); const theme = useTheme(); - useMockData(); + const [, setMockMode] = useRecoilState(isMockModeState); const [authFlowUserEmail, setAuthFlowUserEmail] = useRecoilState( authFlowUserEmailState, ); useEffect(() => { + setMockMode(true); + if (hasAccessToken()) { navigate('/'); } - }, [navigate]); + }, [navigate, setMockMode]); const onGoogleLoginClick = useCallback(() => { window.location.href = process.env.REACT_APP_AUTH_URL + '/google' || ''; diff --git a/front/src/pages/auth/PasswordLogin.tsx b/front/src/pages/auth/PasswordLogin.tsx index 92142fee7..b237a30f4 100644 --- a/front/src/pages/auth/PasswordLogin.tsx +++ b/front/src/pages/auth/PasswordLogin.tsx @@ -11,6 +11,7 @@ import { SubTitle } from '@/auth/components/ui/SubTitle'; import { Title } from '@/auth/components/ui/Title'; import { getTokensFromLoginToken } from '@/auth/services/AuthService'; import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState'; +import { isMockModeState } from '@/auth/states/isMockModeState'; import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton'; import { TextInput } from '@/ui/components/inputs/TextInput'; import { Companies } from '~/pages/companies/Companies'; @@ -35,6 +36,7 @@ const StyledErrorContainer = styled.div` export function PasswordLogin() { const navigate = useNavigate(); + const [, setMockMode] = useRecoilState(isMockModeState); const prefillPassword = process.env.NODE_ENV === 'development' ? 'applecar2025' : ''; @@ -60,19 +62,22 @@ export function PasswordLogin() { }, ); - if (response.ok) { - const { loginToken } = await response.json(); - if (!loginToken) { - // TODO Display error message - return; - } - await getTokensFromLoginToken(loginToken.token); - navigate('/'); + if (!response.ok) { + const errorData = await response.json(); + setFormError(errorData.message); return; } - const errorData = await response.json(); - setFormError(errorData.message); - }, [authFlowUserEmail, internalPassword, navigate]); + const { loginToken } = await response.json(); + + if (!loginToken) { + return; + } + + await getTokensFromLoginToken(loginToken.token); + setMockMode(false); + + navigate('/'); + }, [authFlowUserEmail, internalPassword, navigate, setMockMode]); useHotkeys( 'enter', diff --git a/server/package.json b/server/package.json index 233e479e4..eeaa8b3a5 100644 --- a/server/package.json +++ b/server/package.json @@ -24,7 +24,7 @@ "prisma:generate-nest-graphql": "npx prisma generate --generator nestgraphql && eslint \"src/core/@generated/**\" --fix", "prisma:migrate": "npx prisma migrate deploy", "prisma:seed": "npx prisma db seed", - "prisma:reset": "yarn prisma:generate-client && yarn prisma:generate-nest-graphql && npx prisma migrate reset" + "prisma:reset": "npx prisma migrate reset && eslint \"src/core/@generated/**\" --fix" }, "dependencies": { "@apollo/server": "^4.7.3",