From c0658e15916ef62842d68829fac6097e84b89d75 Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Wed, 31 May 2023 11:08:35 +0200
Subject: [PATCH] Update company logo fetch api (#161)

---
 .../components/editable-cell/EditableChip.tsx |  8 +++----
 .../components/people/PeopleCompanyCell.tsx   |  3 ++-
 .../src/pages/companies/companies-columns.tsx |  3 ++-
 front/src/services/__tests__/utils.test.ts    | 21 +++++++++++++++++++
 front/src/services/utils.ts                   |  4 ++++
 5 files changed, 32 insertions(+), 7 deletions(-)
 create mode 100644 front/src/services/__tests__/utils.test.ts

diff --git a/front/src/components/editable-cell/EditableChip.tsx b/front/src/components/editable-cell/EditableChip.tsx
index 81516008c..9addc9419 100644
--- a/front/src/components/editable-cell/EditableChip.tsx
+++ b/front/src/components/editable-cell/EditableChip.tsx
@@ -26,11 +26,9 @@ const StyledInplaceInput = styled.input`
 `;
 
 const StyledInplaceShow = styled.div`
-  width: 100%;
-  border: none;
-  outline: none;
-  padding-left: ${(props) => props.theme.spacing(2)};
-  padding-right: ${(props) => props.theme.spacing(2)};
+  display: flex;
+  padding-left: ${(props) => props.theme.spacing(1)};
+  padding-right: ${(props) => props.theme.spacing(1)};
 
   &::placeholder {
     font-weight: 'bold';
diff --git a/front/src/components/people/PeopleCompanyCell.tsx b/front/src/components/people/PeopleCompanyCell.tsx
index c914443fc..fa82f06d5 100644
--- a/front/src/components/people/PeopleCompanyCell.tsx
+++ b/front/src/components/people/PeopleCompanyCell.tsx
@@ -19,6 +19,7 @@ import { SearchConfigType } from '../../interfaces/search/interface';
 import { useState } from 'react';
 import { PeopleCompanyCreateCell } from './PeopleCompanyCreateCell';
 import { v4 } from 'uuid';
+import { getLogoUrlFromDomainName } from '../../services/utils';
 
 export type OwnProps = {
   people: Person;
@@ -79,7 +80,7 @@ export function PeopleCompanyCell({ people }: OwnProps) {
       chipComponentPropsMapper={(company): CompanyChipPropsType => {
         return {
           name: company.name || '',
-          picture: `https://www.google.com/s2/favicons?domain=${company.domainName}&sz=256`,
+          picture: getLogoUrlFromDomainName(company.domainName),
         };
       }}
       onChange={async (relation) => {
diff --git a/front/src/pages/companies/companies-columns.tsx b/front/src/pages/companies/companies-columns.tsx
index 0a6cb7be9..7ec53b1fd 100644
--- a/front/src/pages/companies/companies-columns.tsx
+++ b/front/src/pages/companies/companies-columns.tsx
@@ -28,6 +28,7 @@ import {
   TbUser,
 } from 'react-icons/tb';
 import { QueryMode } from '../../generated/graphql';
+import { getLogoUrlFromDomainName } from '../../services/utils';
 
 const columnHelper = createColumnHelper<Company>();
 
@@ -61,7 +62,7 @@ export const useCompaniesColumns = () => {
           <EditableChip
             value={props.row.original.name || ''}
             placeholder="Name"
-            picture={`https://www.google.com/s2/favicons?domain=${props.row.original.domainName}&sz=256`}
+            picture={getLogoUrlFromDomainName(props.row.original.domainName)}
             changeHandler={(value: string) => {
               const company = props.row.original;
               company.name = value;
diff --git a/front/src/services/__tests__/utils.test.ts b/front/src/services/__tests__/utils.test.ts
new file mode 100644
index 000000000..80fe3b4ff
--- /dev/null
+++ b/front/src/services/__tests__/utils.test.ts
@@ -0,0 +1,21 @@
+import { getLogoUrlFromDomainName } from '../utils';
+
+describe('getLogoUrlFromDomainName', () => {
+  it(`should generate logo url if undefined `, () => {
+    expect(getLogoUrlFromDomainName(undefined)).toBe(
+      'https://api.faviconkit.com/undefined/144',
+    );
+  });
+
+  it(`should generate logo url if defined `, () => {
+    expect(getLogoUrlFromDomainName('test.com')).toBe(
+      'https://api.faviconkit.com/test.com/144',
+    );
+  });
+
+  it(`should generate logo url if empty `, () => {
+    expect(getLogoUrlFromDomainName('')).toBe(
+      'https://api.faviconkit.com//144',
+    );
+  });
+});
diff --git a/front/src/services/utils.ts b/front/src/services/utils.ts
index 584702526..c0a87f03c 100644
--- a/front/src/services/utils.ts
+++ b/front/src/services/utils.ts
@@ -5,3 +5,7 @@ export const humanReadableDate = (date: Date) => {
     year: 'numeric',
   }).format(date);
 };
+
+export const getLogoUrlFromDomainName = (domainName?: string): string => {
+  return `https://api.faviconkit.com/${domainName}/144`;
+};