Fixed story for person show page (#746)

* Fixed story for person show page

* Remove console.logs

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/pages/people/PersonShow.tsx

@@ -1,4 +1,4 @@
-import { useParams } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 
 import { Timeline } from '@/activities/timeline/components/Timeline';
@@ -14,6 +14,8 @@ import { CommentableType } from '~/generated/graphql';
 export function PersonShow() {
   const personId = useParams().personId ?? '';
 
+  const location = useLocation();
+
   const { data } = usePersonQuery(personId);
   const person = data?.findUniquePerson;
 

front/src/pages/people/__stories__/Person.stories.tsx

@@ -1,6 +1,9 @@
+import { Route, Routes } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
+import {} from '@storybook/react';
 
 import { graphqlMocks } from '~/testing/graphqlMocks';
+import { mockedPeopleData } from '~/testing/mock-data/people';
 import { getRenderWrapperForPage } from '~/testing/renderWrappers';
 
 import { PersonShow } from '../PersonShow';
@@ -16,8 +19,10 @@ export type Story = StoryObj<typeof PersonShow>;
 
 export const Default: Story = {
   render: getRenderWrapperForPage(
-    <PersonShow />,
+    <Routes>
-    '/companies/89bb825c-171e-4bcc-9cf7-43448d6fb278',
+      <Route path="/person/:personId" element={<PersonShow />} />
+    </Routes>,
+    `/person/${mockedPeopleData[0].id}`,
   ),
   parameters: {
     msw: graphqlMocks,

front/src/testing/graphqlMocks.ts

@@ -4,7 +4,7 @@ import { graphql } from 'msw';
 import { CREATE_EVENT } from '@/analytics/queries';
 import { GET_CLIENT_CONFIG } from '@/client-config/queries';
 import { GET_COMPANIES } from '@/companies/queries';
-import { GET_PEOPLE, UPDATE_PERSON } from '@/people/queries';
+import { GET_PEOPLE, GET_PERSON, UPDATE_PERSON } from '@/people/queries';
 import { GET_PIPELINE_PROGRESS, GET_PIPELINES } from '@/pipeline/queries';
 import {
   SEARCH_COMPANY_QUERY,
@@ -15,6 +15,7 @@ import { GET_CURRENT_USER } from '@/users/queries';
 import {
   GetCompaniesQuery,
   GetPeopleQuery,
+  GetPersonQuery,
   SearchCompanyQuery,
   SearchPeopleQuery,
   SearchUserQuery,
@@ -25,7 +26,11 @@ import { mockedPeopleData } from './mock-data/people';
 import { mockedPipelineProgressData } from './mock-data/pipeline-progress';
 import { mockedPipelinesData } from './mock-data/pipelines';
 import { mockedUsersData } from './mock-data/users';
-import { filterAndSortData, updateOneFromData } from './mock-data';
+import {
+  fetchOneFromData,
+  filterAndSortData,
+  updateOneFromData,
+} from './mock-data';
 
 export const graphqlMocks = [
   graphql.query(getOperationName(GET_COMPANIES) ?? '', (req, res, ctx) => {
@@ -105,6 +110,17 @@ export const graphqlMocks = [
       }),
     );
   }),
+  graphql.query(getOperationName(GET_PERSON) ?? '', (req, res, ctx) => {
+    console.log({ req });
+    const returnedMockedData = fetchOneFromData<
+      GetPersonQuery['findUniquePerson']
+    >(mockedPeopleData, req.variables.id);
+    return res(
+      ctx.data({
+        findUniquePerson: returnedMockedData,
+      }),
+    );
+  }),
   graphql.query(getOperationName(GET_PEOPLE) ?? '', (req, res, ctx) => {
     const returnedMockedData = filterAndSortData<GetPeopleQuery['people'][0]>(
       mockedPeopleData,

front/src/testing/mock-data/people.ts

@@ -5,6 +5,7 @@ type MockedPerson = Pick<
   | 'id'
   | 'firstName'
   | 'lastName'
+  | 'displayName'
   | 'email'
   | '__typename'
   | 'phone'
@@ -21,6 +22,7 @@ export const mockedPeopleData: Array<MockedPerson> = [
     __typename: 'Person',
     firstName: 'Alexandre',
     lastName: 'Prot',
+    displayName: 'Alexandre Prot',
     email: 'alexandre@qonto.com',
     company: {
       id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
@@ -39,6 +41,7 @@ export const mockedPeopleData: Array<MockedPerson> = [
     __typename: 'Person',
     firstName: 'John',
     lastName: 'Doe',
+    displayName: 'John Doe',
     email: 'john@linkedin.com',
     company: {
       id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6e',
@@ -57,6 +60,7 @@ export const mockedPeopleData: Array<MockedPerson> = [
     __typename: 'Person',
     firstName: 'Jane',
     lastName: 'Doe',
+    displayName: 'Jane Doe',
     email: 'jane@sequoiacap.com',
     company: {
       id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6g',
@@ -75,6 +79,7 @@ export const mockedPeopleData: Array<MockedPerson> = [
     __typename: 'Person',
     firstName: 'Janice',
     lastName: 'Dane',
+    displayName: 'Janice Dane',
     email: 'janice@facebook.com',
     company: {
       id: '7dfbc3f7-6e5e-4128-957e-8d86808cdf6i',