Update company logo fetch api (#161)

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';

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) => {

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;

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',
+    );
+  });
+});

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`;
+};