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',
- },
- });
- });
-});