From 47bdabd5aa0644af11abb72393530c32095589bd Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Mon, 24 Apr 2023 11:10:56 +0200
Subject: [PATCH 1/2] Refactor people query into separate file.

---
 front/src/pages/people/People.tsx   | 29 +++-------------------------
 front/src/services/people/index.ts  |  1 +
 front/src/services/people/select.ts | 30 +++++++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 26 deletions(-)
 create mode 100644 front/src/services/people/index.ts
 create mode 100644 front/src/services/people/select.ts

diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index 73b4c99b4..b2bb656ed 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -3,37 +3,16 @@ import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import Table from '../../components/table/Table';
 import styled from '@emotion/styled';
 import { peopleColumns } from './people-table';
-import { gql, useQuery } from '@apollo/client';
-import { GraphqlPerson, mapPerson } from '../../interfaces/person.interface';
+import { mapPerson } from '../../interfaces/person.interface';
 import { useState } from 'react';
 import { SortType } from '../../components/table/table-header/SortAndFilterBar';
+import { OrderBy, usePeopleQuery } from '../../services/people';
 
 const StyledPeopleContainer = styled.div`
   display: flex;
   width: 100%;
 `;
 
-export const GET_PEOPLE = gql`
-  query GetPeople($orderBy: [people_order_by!]) {
-    people(order_by: $orderBy) {
-      id
-      phone
-      email
-      city
-      firstname
-      lastname
-      created_at
-      company {
-        company_name
-        company_domain
-      }
-    }
-  }
-`;
-
-// @TODO get those types from generated-code person-order-by
-type OrderBy = Record<string, 'asc' | 'desc'>;
-
 const defaultOrderBy: OrderBy[] = [
   {
     created_at: 'desc',
@@ -57,9 +36,7 @@ function People() {
     setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
   };
 
-  const { data } = useQuery<{ people: GraphqlPerson[] }>(GET_PEOPLE, {
-    variables: { orderBy: orderBy },
-  });
+  const { data } = usePeopleQuery(orderBy);
 
   return (
     <WithTopBarContainer title="People" icon={faUser}>
diff --git a/front/src/services/people/index.ts b/front/src/services/people/index.ts
new file mode 100644
index 000000000..c7396734d
--- /dev/null
+++ b/front/src/services/people/index.ts
@@ -0,0 +1 @@
+export * from './select';
diff --git a/front/src/services/people/select.ts b/front/src/services/people/select.ts
new file mode 100644
index 000000000..9cc91a5f5
--- /dev/null
+++ b/front/src/services/people/select.ts
@@ -0,0 +1,30 @@
+import { QueryResult, gql, useQuery } from '@apollo/client';
+import { GraphqlPerson } from '../../interfaces/person.interface';
+
+export type OrderBy = Record<string, 'asc' | 'desc'>;
+
+export const GET_PEOPLE = gql`
+  query GetPeople($orderBy: [people_order_by!]) {
+    people(order_by: $orderBy) {
+      id
+      phone
+      email
+      city
+      firstname
+      lastname
+      created_at
+      company {
+        company_name
+        company_domain
+      }
+    }
+  }
+`;
+
+export function usePeopleQuery(
+  orderBy: OrderBy[],
+): QueryResult<{ people: GraphqlPerson[] }> {
+  return useQuery<{ people: GraphqlPerson[] }>(GET_PEOPLE, {
+    variables: { orderBy },
+  });
+}

From efd6138877ca925cbc8c726fe9882f3d8786e8b5 Mon Sep 17 00:00:00 2001
From: Anders Borch <anders@cyborch.com>
Date: Mon, 24 Apr 2023 12:28:22 +0200
Subject: [PATCH 2/2] Use GET_PEOPLE in mock

---
 front/src/pages/people/__stories__/People.stories.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/front/src/pages/people/__stories__/People.stories.tsx b/front/src/pages/people/__stories__/People.stories.tsx
index 6ab7ed883..9f9cf8a35 100644
--- a/front/src/pages/people/__stories__/People.stories.tsx
+++ b/front/src/pages/people/__stories__/People.stories.tsx
@@ -1,9 +1,10 @@
 import { MemoryRouter } from 'react-router-dom';
-import People, { GET_PEOPLE } from '../People';
+import People from '../People';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../layout/styles/themes';
 import { MockedProvider } from '@apollo/client/testing';
 import { defaultData } from '../default-data';
+import { GET_PEOPLE } from '../../../services/people';
 
 const component = {
   title: 'People',