Enable add person on People Table (#111)

Add possibility to add Person on People table

front/src/pages/companies/__stories__/Companies.stories.tsx

@@ -28,6 +28,20 @@ const mocks = [
       },
     },
   },
+  {
+    request: {
+      query: GET_COMPANIES,
+      variables: {
+        orderBy: [{ created_at: 'desc' }],
+        where: {},
+      },
+    },
+    result: {
+      data: {
+        companies: mockData,
+      },
+    },
+  },
 ];
 
 export const CompaniesDefault = () => (

front/src/pages/people/People.tsx

@@ -1,17 +1,19 @@
 import { FaRegUser, FaList } from 'react-icons/fa';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import Table from '../../components/table/Table';
+import { v4 as uuidv4 } from 'uuid';
 import styled from '@emotion/styled';
 import {
   availableFilters,
-  peopleColumns,
   availableSorts,
+  usePeopleColumns,
 } from './people-table';
-import { mapPerson } from '../../interfaces/person.interface';
-import { useCallback, useState } from 'react';
+import { Person, mapPerson } from '../../interfaces/person.interface';
+import { useCallback, useEffect, useState } from 'react';
 import {
   PeopleSelectedSortType,
   defaultOrderBy,
+  insertPerson,
   usePeopleQuery,
 } from '../../services/people';
 import { useSearch } from '../../services/search/search';
@@ -32,6 +34,7 @@ function People() {
   const [orderBy, setOrderBy] = useState(defaultOrderBy);
   const [where, setWhere] = useState<People_Bool_Exp>({});
   const [filterSearchResults, setSearchInput, setFilterSearch] = useSearch();
+  const [internalData, setInternalData] = useState<Array<Person>>([]);
 
   const updateSorts = useCallback((sorts: Array<PeopleSelectedSortType>) => {
     setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
@@ -44,11 +47,34 @@ function People() {
     [],
   );
 
-  const addEmptyRow = useCallback(() => {
-    console.log('add row');
-  }, []);
+  const { data, loading, refetch } = usePeopleQuery(orderBy, where);
 
-  const { data } = usePeopleQuery(orderBy, where);
+  useEffect(() => {
+    if (!loading) {
+      if (data) {
+        setInternalData(data.people.map(mapPerson));
+      }
+    }
+  }, [loading, setInternalData, data]);
+
+  const addEmptyRow = useCallback(() => {
+    const newCompany: Person = {
+      id: uuidv4(),
+      firstname: '',
+      lastname: '',
+      email: '',
+      phone: '',
+      company: null,
+      pipe: null,
+      creationDate: new Date(),
+      city: '',
+    };
+    insertPerson(newCompany);
+    setInternalData([newCompany, ...internalData]);
+    refetch();
+  }, [internalData, setInternalData, refetch]);
+
+  const peopleColumns = usePeopleColumns();
 
   return (
     <WithTopBarContainer
@@ -59,7 +85,7 @@ function People() {
       <StyledPeopleContainer>
         {
           <Table
-            data={data ? data.people.map(mapPerson) : []}
+            data={internalData}
             columns={peopleColumns}
             viewName="All People"
             viewIcon={<FaList />}

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

@@ -29,6 +29,20 @@ const mocks = [
       },
     },
   },
+  {
+    request: {
+      query: GET_PEOPLE,
+      variables: {
+        orderBy: [{ created_at: 'desc' }],
+        where: {},
+      },
+    },
+    result: {
+      data: {
+        people: mockData,
+      },
+    },
+  },
   {
     request: {
       query: SEARCH_PEOPLE_QUERY, // TODO this should not be called for empty filters

front/src/pages/people/__tests__/People.test.tsx

@@ -83,3 +83,24 @@ it('Checks people email edit is updating data', async () => {
     expect(getByText('john@linkedin.c')).toBeInTheDocument();
   });
 });
+
+it('Checks insert data is appending a new line', async () => {
+  const { getByText, getByTestId, container } = render(<PeopleDefault />);
+
+  await waitFor(() => {
+    expect(getByText('John Doe')).toBeDefined();
+  });
+  const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr');
+
+  expect(tableRows.length).toBe(4);
+
+  act(() => {
+    fireEvent.click(getByTestId('add-button'));
+  });
+
+  await waitFor(() => {
+    const tableRows = container.querySelectorAll<HTMLElement>('table tbody tr');
+
+    expect(tableRows.length).toBe(5);
+  });
+});

front/src/pages/people/people-table.tsx

@@ -38,6 +38,7 @@ import EditableFullName from '../../components/table/editable-cell/EditableFullN
 import EditableDate from '../../components/table/editable-cell/EditableDate';
 import EditableRelation from '../../components/table/editable-cell/EditableRelation';
 import { updatePerson } from '../../services/people';
+import { useMemo } from 'react';
 
 export const availableSorts = [
   {
@@ -242,135 +243,150 @@ export const availableFilters = [
 ] satisfies FilterType<People_Bool_Exp>[];
 
 const columnHelper = createColumnHelper<Person>();
-export const peopleColumns = [
-  columnHelper.accessor('id', {
-    header: () => (
-      <Checkbox id={`person-select-all`} name={`person-select-all`} />
-    ),
-    cell: (props) => (
-      <Checkbox
-        id={`person-selected-${props.row.original.email}`}
-        name={`person-selected-${props.row.original.email}`}
-      />
-    ),
-  }),
-  columnHelper.accessor('firstname', {
-    header: () => <ColumnHead viewName="People" viewIcon={<FaRegUser />} />,
-    cell: (props) => (
-      <EditableFullName
-        firstname={props.row.original.firstname}
-        lastname={props.row.original.lastname}
-        changeHandler={(firstName: string, lastName: string) => {
-          const person = props.row.original;
-          person.firstname = firstName;
-          person.lastname = lastName;
-          updatePerson(person);
-        }}
-      />
-    ),
-  }),
-  columnHelper.accessor('email', {
-    header: () => <ColumnHead viewName="Email" viewIcon={<FaEnvelope />} />,
-    cell: (props) => (
-      <EditableText
-        placeholder="Email"
-        content={props.row.original.email}
-        changeHandler={(value: string) => {
-          const person = props.row.original;
-          person.email = value;
-          updatePerson(person);
-        }}
-      />
-    ),
-  }),
-  columnHelper.accessor('company', {
-    header: () => (
-      <ColumnHead viewName="Company" viewIcon={<FaRegBuilding />} />
-    ),
-    cell: (props) => (
-      <EditableRelation<PartialCompany, CompanyChipPropsType>
-        relation={props.row.original.company}
-        searchPlaceholder="Company"
-        ChipComponent={CompanyChip}
-        chipComponentPropsMapper={(
-          company: PartialCompany,
-        ): CompanyChipPropsType => {
-          return {
-            name: company.name,
-            picture: `https://www.google.com/s2/favicons?domain=${company.domain_name}&sz=256`,
-          };
-        }}
-        changeHandler={(relation: PartialCompany) => {
-          const person = props.row.original;
-          person.company.id = relation.id;
-          updatePerson(person);
-        }}
-        searchFilter={
-          {
-            key: 'company_name',
-            label: 'Company',
-            icon: <FaBuilding />,
-            whereTemplate: () => {
-              return {};
-            },
-            searchQuery: SEARCH_COMPANY_QUERY,
-            searchTemplate: (searchInput: string) => ({
-              name: { _ilike: `%${searchInput}%` },
-            }),
-            searchResultMapper: (company: GraphqlQueryCompany) => ({
-              displayValue: company.name,
-              value: {
-                id: company.id,
+
+export const usePeopleColumns = () => {
+  return useMemo(() => {
+    return [
+      columnHelper.accessor('id', {
+        header: () => (
+          <Checkbox id={`person-select-all`} name={`person-select-all`} />
+        ),
+        cell: (props) => (
+          <Checkbox
+            id={`person-selected-${props.row.original.email}`}
+            name={`person-selected-${props.row.original.email}`}
+          />
+        ),
+      }),
+      columnHelper.accessor('firstname', {
+        header: () => <ColumnHead viewName="People" viewIcon={<FaRegUser />} />,
+        cell: (props) => (
+          <EditableFullName
+            firstname={props.row.original.firstname}
+            lastname={props.row.original.lastname}
+            changeHandler={(firstName: string, lastName: string) => {
+              const person = props.row.original;
+              person.firstname = firstName;
+              person.lastname = lastName;
+              updatePerson(person);
+            }}
+          />
+        ),
+      }),
+      columnHelper.accessor('email', {
+        header: () => <ColumnHead viewName="Email" viewIcon={<FaEnvelope />} />,
+        cell: (props) => (
+          <EditableText
+            placeholder="Email"
+            content={props.row.original.email}
+            changeHandler={(value: string) => {
+              const person = props.row.original;
+              person.email = value;
+              updatePerson(person);
+            }}
+          />
+        ),
+      }),
+      columnHelper.accessor('company', {
+        header: () => (
+          <ColumnHead viewName="Company" viewIcon={<FaRegBuilding />} />
+        ),
+        cell: (props) => (
+          <EditableRelation<PartialCompany, CompanyChipPropsType>
+            relation={props.row.original.company}
+            searchPlaceholder="Company"
+            ChipComponent={CompanyChip}
+            chipComponentPropsMapper={(
+              company: PartialCompany,
+            ): CompanyChipPropsType => {
+              return {
                 name: company.name,
-                domain_name: company.domain_name,
-              },
-            }),
-            operands: [],
-          } satisfies FilterType<People_Bool_Exp>
-        }
-      />
-    ),
-  }),
-  columnHelper.accessor('phone', {
-    header: () => <ColumnHead viewName="Phone" viewIcon={<FaPhone />} />,
-    cell: (props) => (
-      <EditablePhone
-        placeholder="Phone"
-        value={props.row.original.phone}
-        changeHandler={(value: string) => {
-          const person = props.row.original;
-          person.phone = value;
-          updatePerson(person);
-        }}
-      />
-    ),
-  }),
-  columnHelper.accessor('creationDate', {
-    header: () => <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />,
-    cell: (props) => (
-      <EditableDate
-        value={props.row.original.creationDate}
-        changeHandler={(value: Date) => {
-          const person = props.row.original;
-          person.creationDate = value;
-          updatePerson(person);
-        }}
-      />
-    ),
-  }),
-  columnHelper.accessor('city', {
-    header: () => <ColumnHead viewName="City" viewIcon={<FaMapPin />} />,
-    cell: (props) => (
-      <EditableText
-        editModeHorizontalAlign="right"
-        placeholder="City"
-        content={props.row.original.city}
-        changeHandler={(value: string) => {
-          const person = props.row.original;
-          person.city = value;
-          updatePerson(person);
-        }}
-      />
-    ),
-  }),
-];
+                picture: `https://www.google.com/s2/favicons?domain=${company.domain_name}&sz=256`,
+              };
+            }}
+            changeHandler={(relation: PartialCompany) => {
+              const person = props.row.original;
+              if (person.company) {
+                person.company.id = relation.id;
+              } else {
+                person.company = {
+                  id: relation.id,
+                  name: relation.name,
+                  domain_name: relation.domain_name,
+                };
+              }
+              updatePerson(person);
+            }}
+            searchFilter={
+              {
+                key: 'company_name',
+                label: 'Company',
+                icon: <FaBuilding />,
+                whereTemplate: () => {
+                  return {};
+                },
+                searchQuery: SEARCH_COMPANY_QUERY,
+                searchTemplate: (searchInput: string) => ({
+                  name: { _ilike: `%${searchInput}%` },
+                }),
+                searchResultMapper: (company: GraphqlQueryCompany) => ({
+                  displayValue: company.name,
+                  value: {
+                    id: company.id,
+                    name: company.name,
+                    domain_name: company.domain_name,
+                  },
+                }),
+                operands: [],
+              } satisfies FilterType<People_Bool_Exp>
+            }
+          />
+        ),
+      }),
+      columnHelper.accessor('phone', {
+        header: () => <ColumnHead viewName="Phone" viewIcon={<FaPhone />} />,
+        cell: (props) => (
+          <EditablePhone
+            placeholder="Phone"
+            value={props.row.original.phone}
+            changeHandler={(value: string) => {
+              const person = props.row.original;
+              person.phone = value;
+              updatePerson(person);
+            }}
+          />
+        ),
+      }),
+      columnHelper.accessor('creationDate', {
+        header: () => (
+          <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />
+        ),
+        cell: (props) => (
+          <EditableDate
+            value={props.row.original.creationDate}
+            changeHandler={(value: Date) => {
+              const person = props.row.original;
+              person.creationDate = value;
+              updatePerson(person);
+            }}
+          />
+        ),
+      }),
+      columnHelper.accessor('city', {
+        header: () => <ColumnHead viewName="City" viewIcon={<FaMapPin />} />,
+        cell: (props) => (
+          <EditableText
+            editModeHorizontalAlign="right"
+            placeholder="City"
+            content={props.row.original.city}
+            changeHandler={(value: string) => {
+              const person = props.row.original;
+              person.city = value;
+              updatePerson(person);
+            }}
+          />
+        ),
+      }),
+    ];
+  }, []);
+};