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/companies/table/components/EditableCompanyLinkedinUrlCell.tsx

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

front/src/modules/companies/table/components/companies-mock-data.ts

@@ -9,6 +9,7 @@ type MockedCompany = Pick<
   | 'createdAt'
   | 'address'
   | 'employees'
+  | 'linkedinUrl'
   | '_commentThreadCount'
 > & {
   accountOwner: Pick<
@@ -28,6 +29,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
     domainName: 'airbnb.com',
     name: 'Airbnb',
+    linkedinUrl: 'https://www.linkedin.com/company/airbnb/',
     createdAt: '2023-04-26T10:08:54.724515+00:00',
     address: 'San Francisco, CA',
     employees: 5000,
@@ -47,6 +49,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     id: 'b396e6b9-dc5c-4643-bcff-61b6cf7523ae',
     domainName: 'qonto.com',
     name: 'Qonto',
+    linkedinUrl: 'https://www.linkedin.com/company/qonto/',
     createdAt: '2023-04-26T10:12:42.33625+00:00',
     address: 'Paris, France',
     employees: 800,
@@ -58,6 +61,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
     id: 'a674fa6c-1455-4c57-afaf-dd5dc086361d',
     domainName: 'stripe.com',
     name: 'Stripe',
+    linkedinUrl: 'https://www.linkedin.com/company/stripe/',
     createdAt: '2023-04-26T10:10:32.530184+00:00',
     address: 'San Francisco, CA',
     employees: 8000,
@@ -68,6 +72,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
   {
     id: 'b1cfd51b-a831-455f-ba07-4e30671e1dc3',
     domainName: 'figma.com',
+    linkedinUrl: 'https://www.linkedin.com/company/figma/',
     name: 'Figma',
     createdAt: '2023-03-21T06:30:25.39474+00:00',
     address: 'San Francisco, CA',
@@ -79,6 +84,7 @@ export const mockedCompaniesData: Array<MockedCompany> = [
   {
     id: '5c21e19e-e049-4393-8c09-3e3f8fb09ecb',
     domainName: 'notion.com',
+    linkedinUrl: 'https://www.linkedin.com/company/notion/',
     name: 'Notion',
     createdAt: '2023-04-26T10:13:29.712485+00:00',
     address: 'San Francisco, CA',

front/src/modules/companies/table/components/companyColumns.tsx

@@ -1,5 +1,6 @@
 import { TableColumn } from '@/people/table/components/peopleColumns';
 import {
+  IconBrandLinkedin,
   IconBuildingSkyscraper,
   IconCalendarEvent,
   IconLink,
@@ -13,6 +14,7 @@ import { EditableCompanyAddressCell } from './EditableCompanyAddressCell';
 import { EditableCompanyCreatedAtCell } from './EditableCompanyCreatedAtCell';
 import { EditableCompanyDomainNameCell } from './EditableCompanyDomainNameCell';
 import { EditableCompanyEmployeesCell } from './EditableCompanyEmployeesCell';
+import { EditableCompanyLinkedinUrlCell } from './EditableCompanyLinkedinUrlCell';
 import { EditableCompanyNameCell } from './EditableCompanyNameCell';
 
 export const companyColumns: TableColumn[] = [
@@ -51,6 +53,13 @@ export const companyColumns: TableColumn[] = [
     size: 150,
     cellComponent: <EditableCompanyEmployeesCell />,
   },
+  {
+    id: 'linkedinUrl',
+    title: 'Linkedin',
+    icon: <IconBrandLinkedin size={16} />,
+    size: 170,
+    cellComponent: <EditableCompanyLinkedinUrlCell />,
+  },
   {
     id: 'address',
     title: 'Address',

front/src/modules/companies/table/hooks/useSetCompanyEntityTable.ts

@@ -6,6 +6,7 @@ import { companyCommentCountFamilyState } from '@/companies/states/companyCommen
 import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState';
 import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
 import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
+import { companyLinkedinUrlFamilyState } from '@/companies/states/companyLinkedinUrlFamilyState';
 import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState';
 import { GetCompaniesQuery } from '~/generated/graphql';
 
@@ -30,6 +31,17 @@ export function useSetCompanyEntityTable() {
             set(companyDomainNameFamilyState(company.id), company.domainName);
           }
 
+          const currentLinkedinUrl = snapshot
+            .getLoadable(companyLinkedinUrlFamilyState(company.id))
+            .valueOrThrow();
+
+          if (currentLinkedinUrl !== company.linkedinUrl) {
+            set(
+              companyLinkedinUrlFamilyState(company.id),
+              company.linkedinUrl ?? '',
+            );
+          }
+
           const currentEmployees = snapshot
             .getLoadable(companyEmployeesFamilyState(company.id))
             .valueOrThrow();