From 6e353f590c8005445de3ed26114c9b9fa29c37c9 Mon Sep 17 00:00:00 2001
From: Sammy Teillet <sammy.teillet@gmail.com>
Date: Mon, 24 Apr 2023 14:56:20 +0200
Subject: [PATCH] feature: add email in sorts fields

---
 .../table/table-header/TableHeader.tsx        |  2 +-
 front/src/pages/people/People.tsx             | 31 +++++++++++++------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/front/src/components/table/table-header/TableHeader.tsx b/front/src/components/table/table-header/TableHeader.tsx
index 6df436aea..8c3077df0 100644
--- a/front/src/components/table/table-header/TableHeader.tsx
+++ b/front/src/components/table/table-header/TableHeader.tsx
@@ -59,7 +59,7 @@ function TableHeader({
           label: 'Created at',
           order: 'asc',
           id: sortId,
-        } as SortType,
+        } satisfies SortType,
       ];
       setSorts(newSorts);
       onSortsUpdate && onSortsUpdate(newSorts);
diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx
index b31ba1736..e5d136a85 100644
--- a/front/src/pages/people/People.tsx
+++ b/front/src/pages/people/People.tsx
@@ -1,4 +1,9 @@
-import { faUser, faList, faCalendar } from '@fortawesome/pro-regular-svg-icons';
+import {
+  faUser,
+  faList,
+  faCalendar,
+  faEnvelope,
+} from '@fortawesome/pro-regular-svg-icons';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import Table from '../../components/table/Table';
 import styled from '@emotion/styled';
@@ -27,6 +32,21 @@ const reduceSortsToOrderBy = (sorts: Array<SortType>): OrderBy[] => {
   return [mappedSorts];
 };
 
+const sortsAvailable: Array<SortType<keyof GraphqlPerson>> = [
+  {
+    id: 'created_at',
+    label: 'Created at',
+    order: 'asc',
+    icon: faCalendar,
+  },
+  {
+    id: 'email',
+    label: 'Email',
+    order: 'asc',
+    icon: faEnvelope,
+  },
+];
+
 function People() {
   const [, setSorts] = useState([] as Array<SortType>);
   const [orderBy, setOrderBy] = useState(defaultOrderBy);
@@ -38,15 +58,6 @@ function People() {
 
   const { data } = usePeopleQuery(orderBy);
 
-  const sortsAvailable: Array<SortType<keyof GraphqlPerson>> = [
-    {
-      id: 'created_at',
-      label: 'Created at',
-      order: 'asc',
-      icon: faCalendar,
-    },
-  ];
-
   return (
     <WithTopBarContainer title="People" icon={faUser}>
       <StyledPeopleContainer>