Add linkedinUrl and job titles to table views (#809)

* Add linedinUrl and job titles to table views

* Keep address in the end

* Add mock data

front/src/modules/people/hooks/useSetPeopleEntityTable.ts

@@ -6,6 +6,8 @@ import { peopleCityFamilyState } from '../states/peopleCityFamilyState';
 import { peopleCompanyFamilyState } from '../states/peopleCompanyFamilyState';
 import { peopleCreatedAtFamilyState } from '../states/peopleCreatedAtFamilyState';
 import { peopleEmailFamilyState } from '../states/peopleEmailFamilyState';
+import { peopleJobTitleFamilyState } from '../states/peopleJobTitleFamilyState';
+import { peopleLinkedinUrlFamilyState } from '../states/peopleLinkedinUrlFamilyState';
 import { peopleNameCellFamilyState } from '../states/peopleNamesFamilyState';
 import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState';
 
@@ -56,6 +58,25 @@ export function useSetPeopleEntityTable() {
             set(peopleCreatedAtFamilyState(person.id), person.createdAt);
           }
 
+          const currentJobTitle = snapshot
+            .getLoadable(peopleJobTitleFamilyState(person.id))
+            .valueOrThrow();
+
+          if (currentJobTitle !== person.jobTitle) {
+            set(peopleJobTitleFamilyState(person.id), person.jobTitle ?? null);
+          }
+
+          const currentLinkedinUrl = snapshot
+            .getLoadable(peopleLinkedinUrlFamilyState(person.id))
+            .valueOrThrow();
+
+          if (currentLinkedinUrl !== person.linkedinUrl) {
+            set(
+              peopleLinkedinUrlFamilyState(person.id),
+              person.linkedinUrl ?? null,
+            );
+          }
+
           const currentNameCell = snapshot
             .getLoadable(peopleNameCellFamilyState(person.id))
             .valueOrThrow();

front/src/modules/people/queries/select.ts

@@ -28,6 +28,8 @@ export const GET_PEOPLE = gql`
       firstName
       lastName
       displayName
+      jobTitle
+      linkedinUrl
       createdAt
       _commentThreadCount
       company {

front/src/modules/people/queries/show.ts

@@ -12,6 +12,8 @@ export const GET_PERSON = gql`
       email
       createdAt
       city
+      jobTitle
+      linkedinUrl
       phone
       _commentThreadCount
       company {

front/src/modules/people/queries/update.ts

@@ -14,6 +14,8 @@ export const UPDATE_ONE_PERSON = gql`
         id
       }
       email
+      jobTitle
+      linkedinUrl
       firstName
       lastName
       displayName
@@ -36,6 +38,8 @@ export const INSERT_ONE_PERSON = gql`
       email
       firstName
       lastName
+      jobTitle
+      linkedinUrl
       displayName
       phone
       createdAt

front/src/modules/people/states/peopleJobTitleFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const peopleJobTitleFamilyState = atomFamily<string | null, string>({
+  key: 'peopleJobTitleFamilyState',
+  default: null,
+});

front/src/modules/people/states/peopleLinkedinUrlFamilyState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const peopleLinkedinUrlFamilyState = atomFamily<string | null, string>({
+  key: 'peopleLinkedinUrlFamilyState',
+  default: null,
+});

front/src/modules/people/table/components/EditablePeopleJobTitleCell.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { peopleJobTitleFamilyState } from '@/people/states/peopleJobTitleFamilyState';
+import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateOnePersonMutation } from '~/generated/graphql';
+
+export function EditablePeopleJobTitleCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updatePerson] = useUpdateOnePersonMutation();
+
+  const jobTitle = useRecoilValue(
+    peopleJobTitleFamilyState(currentRowEntityId ?? ''),
+  );
+
+  const [internalValue, setInternalValue] = useState(jobTitle ?? '');
+
+  useEffect(() => {
+    setInternalValue(jobTitle ?? '');
+  }, [jobTitle]);
+
+  return (
+    <EditableCellText
+      value={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updatePerson({
+          variables: {
+            where: {
+              id: currentRowEntityId,
+            },
+            data: {
+              jobTitle: internalValue,
+            },
+          },
+        })
+      }
+      onCancel={() => setInternalValue(jobTitle ?? '')}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeopleLinkedinUrlCell.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { peopleLinkedinUrlFamilyState } from '@/people/states/peopleLinkedinUrlFamilyState';
+import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
+import { useUpdateOnePersonMutation } from '~/generated/graphql';
+
+import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL';
+
+export function EditablePeopleLinkedinUrlCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updatePerson] = useUpdateOnePersonMutation();
+
+  const linkedinUrl = useRecoilValue(
+    peopleLinkedinUrlFamilyState(currentRowEntityId ?? ''),
+  );
+
+  const [internalValue, setInternalValue] = useState(linkedinUrl ?? '');
+
+  useEffect(() => {
+    setInternalValue(linkedinUrl ?? '');
+  }, [linkedinUrl]);
+
+  return (
+    <EditableCellURL
+      url={internalValue}
+      onChange={setInternalValue}
+      onSubmit={() =>
+        updatePerson({
+          variables: {
+            where: {
+              id: currentRowEntityId,
+            },
+            data: {
+              linkedinUrl: internalValue,
+            },
+          },
+        })
+      }
+      onCancel={() => setInternalValue(linkedinUrl ?? '')}
+    />
+  );
+}

front/src/modules/people/table/components/peopleColumns.tsx

@@ -1,4 +1,6 @@
 import {
+  IconBrandLinkedin,
+  IconBriefcase,
   IconBuildingSkyscraper,
   IconCalendarEvent,
   IconMail,
@@ -12,6 +14,8 @@ import { EditablePeopleCompanyCell } from './EditablePeopleCompanyCell';
 import { EditablePeopleCreatedAtCell } from './EditablePeopleCreatedAtCell';
 import { EditablePeopleEmailCell } from './EditablePeopleEmailCell';
 import { EditablePeopleFullNameCell } from './EditablePeopleFullNameCell';
+import { EditablePeopleJobTitleCell } from './EditablePeopleJobTitleCell';
+import { EditablePeopleLinkedinUrlCell } from './EditablePeopleLinkedinUrlCell';
 import { EditablePeoplePhoneCell } from './EditablePeoplePhoneCell';
 
 export type TableColumn = {
@@ -65,4 +69,18 @@ export const peopleColumns: TableColumn[] = [
     size: 150,
     cellComponent: <EditablePeopleCityCell />,
   },
+  {
+    id: 'jobTitle',
+    title: 'Job title',
+    icon: <IconBriefcase size={16} />,
+    size: 150,
+    cellComponent: <EditablePeopleJobTitleCell />,
+  },
+  {
+    id: 'linkedinUrl',
+    title: 'Linkedin',
+    icon: <IconBrandLinkedin size={16} />,
+    size: 150,
+    cellComponent: <EditablePeopleLinkedinUrlCell />,
+  },
 ];