Merge pull request #65 from twentyhq/anders/t-162-dev-refactor-data-layer-to-a-different

Refactor people query into separate file.

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}>

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',

front/src/services/people/index.ts

@@ -0,0 +1 @@
+export * from './select';

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