diff --git a/pages/setup/Finish.graphql b/pages/accountLists/[accountListId]/setup/Finish.graphql similarity index 100% rename from pages/setup/Finish.graphql rename to pages/accountLists/[accountListId]/setup/Finish.graphql diff --git a/pages/accountLists/[accountListId]/setup/finish.page.test.tsx b/pages/accountLists/[accountListId]/setup/finish.page.test.tsx new file mode 100644 index 000000000..4fd33a291 --- /dev/null +++ b/pages/accountLists/[accountListId]/setup/finish.page.test.tsx @@ -0,0 +1,66 @@ +import { render, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import TestRouter from '__tests__/util/TestRouter'; +import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; +import AccountPage from './finish.page'; + +jest.mock('src/lib/apollo/ssrClient'); + +const accountListId = 'account-list-1'; + +const push = jest.fn(); +const router = { + query: { accountListId }, + isReady: true, + push, +}; + +const mutationSpy = jest.fn(); + +const TestComponent: React.FC = () => ( + + + + + +); + +describe('Finish account page', () => { + it('immediately sets setup position to finish', async () => { + render(); + + await waitFor(() => + expect(mutationSpy).toHaveGraphqlOperation('UpdateSetupPosition', { + setupPosition: 'finish', + }), + ); + }); + + it('yes button redirects to tools', async () => { + const { getByRole } = render(); + + userEvent.click(getByRole('button', { name: /Yes/ })); + + await waitFor(() => + expect(mutationSpy).toHaveGraphqlOperation('UpdateSetupPosition', { + setupPosition: '', + }), + ); + expect(push).toHaveBeenCalledWith( + `/accountLists/${accountListId}/tools?setup=1`, + ); + }); + + it('no button redirects to the dashboard', async () => { + const { getByRole } = render(); + + userEvent.click(getByRole('button', { name: /Nope/ })); + + await waitFor(() => + expect(mutationSpy).toHaveGraphqlOperation('UpdateSetupPosition', { + setupPosition: '', + }), + ); + expect(push).toHaveBeenCalledWith(`/accountLists/${accountListId}`); + }); +}); diff --git a/pages/setup/finish.page.tsx b/pages/accountLists/[accountListId]/setup/finish.page.tsx similarity index 67% rename from pages/setup/finish.page.tsx rename to pages/accountLists/[accountListId]/setup/finish.page.tsx index 71db69504..df620e842 100644 --- a/pages/setup/finish.page.tsx +++ b/pages/accountLists/[accountListId]/setup/finish.page.tsx @@ -3,26 +3,19 @@ import { useRouter } from 'next/router'; import React, { useEffect } from 'react'; import { Button } from '@mui/material'; import { Trans, useTranslation } from 'react-i18next'; -import { makeGetServerSideProps } from 'pages/api/utils/pagePropsHelpers'; +import { loadSession } from 'pages/api/utils/pagePropsHelpers'; import { SetupPage } from 'src/components/Setup/SetupPage'; import { LargeButton } from 'src/components/Setup/styledComponents'; +import { useAccountListId } from 'src/hooks/useAccountListId'; import useGetAppSettings from 'src/hooks/useGetAppSettings'; -import makeSsrClient from 'src/lib/apollo/ssrClient'; -import { - DefaultAccountListDocument, - DefaultAccountListQuery, - useUpdateSetupPositionMutation, -} from './Finish.generated'; - -interface PageProps { - defaultAccountListId: string; -} +import { useUpdateSetupPositionMutation } from './Finish.generated'; // This is the last page of the tour, and it lets users choose to go to the // tools page. It is always shown. -const FinishPage: React.FC = ({ defaultAccountListId }) => { +const FinishPage: React.FC = () => { const { t } = useTranslation(); const { appName } = useGetAppSettings(); + const accountListId = useAccountListId(); const { push } = useRouter(); const [updateSetupPosition] = useUpdateSetupPositionMutation(); @@ -39,12 +32,12 @@ const FinishPage: React.FC = ({ defaultAccountListId }) => { const handleNext = async () => { await setSetupPosition(''); - push(`/accountLists/${defaultAccountListId}/tools?setup=1`); + push(`/accountLists/${accountListId}/tools?setup=1`); }; const handleFinish = async () => { await setSetupPosition(''); - push(`/accountLists/${defaultAccountListId}`); + push(`/accountLists/${accountListId}`); }; return ( @@ -86,27 +79,6 @@ You can import from software like TntConnect, Google Contacts or a Spreadsheet.` ); }; -export const getServerSideProps = makeGetServerSideProps( - async (session) => { - const ssrClient = makeSsrClient(session.user.apiToken); - const { data } = await ssrClient.query({ - query: DefaultAccountListDocument, - }); - if (!data.user.defaultAccountList) { - return { - redirect: { - destination: '/setup/account', - permanent: false, - }, - }; - } - - return { - props: { - defaultAccountListId: data.user.defaultAccountList, - }, - }; - }, -); +export const getServerSideProps = loadSession; export default FinishPage; diff --git a/pages/setup/finish.page.test.tsx b/pages/setup/finish.page.test.tsx deleted file mode 100644 index 43dd45777..000000000 --- a/pages/setup/finish.page.test.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { GetServerSidePropsContext } from 'next'; -import { ApolloClient, NormalizedCacheObject } from '@apollo/client'; -import { render, waitFor } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; -import TestRouter from '__tests__/util/TestRouter'; -import { GqlMockedProvider } from '__tests__/util/graphqlMocking'; -import makeSsrClient from 'src/lib/apollo/ssrClient'; -import AccountPage, { getServerSideProps } from './finish.page'; - -jest.mock('src/lib/apollo/ssrClient'); - -const push = jest.fn(); -const router = { - push, -}; - -const context = {} as unknown as GetServerSidePropsContext; - -const mutationSpy = jest.fn(); - -const TestComponent: React.FC = () => ( - - - - - -); - -describe('Finish account page', () => { - it('immediately sets setup position to finish', async () => { - render(); - - await waitFor(() => - expect(mutationSpy).toHaveGraphqlOperation('UpdateSetupPosition', { - setupPosition: 'finish', - }), - ); - }); - - it('yes button redirects to tools', async () => { - const { getByRole } = render(); - - userEvent.click(getByRole('button', { name: /Yes/ })); - - await waitFor(() => - expect(mutationSpy).toHaveGraphqlOperation('UpdateSetupPosition', { - setupPosition: '', - }), - ); - expect(push).toHaveBeenCalledWith( - '/accountLists/account-list-1/tools?setup=1', - ); - }); - - it('no button redirects to the dashboard', async () => { - const { getByRole } = render(); - - userEvent.click(getByRole('button', { name: /Nope/ })); - - await waitFor(() => - expect(mutationSpy).toHaveGraphqlOperation('UpdateSetupPosition', { - setupPosition: '', - }), - ); - expect(push).toHaveBeenCalledWith('/accountLists/account-list-1'); - }); -}); - -describe('getServerSideProps', () => { - const query = jest.fn(); - const mutate = jest.fn(); - - beforeEach(() => { - (makeSsrClient as jest.MockedFn).mockReturnValue({ - query, - mutate, - } as unknown as ApolloClient); - }); - - it('redirects to the default account page if no default account is set', async () => { - query.mockResolvedValue({ - data: { - user: { - id: 'user-1', - defaultAccountList: null, - }, - }, - }); - - await expect(getServerSideProps(context)).resolves.toEqual({ - redirect: { - destination: '/setup/account', - permanent: false, - }, - }); - }); - - it('retrieves the default account list id', async () => { - query.mockResolvedValue({ - data: { - user: { - id: 'user-1', - defaultAccountList: 'account-list-1', - }, - }, - }); - - await expect(getServerSideProps(context)).resolves.toMatchObject({ - props: { - defaultAccountListId: 'account-list-1', - }, - }); - }); -});