Sanitize url before fetching favicon and display letter avatar if it can't be retrieved (#1035)

* Sanitize url before fetching favicon and display letter avatar if it can't be retrieved

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Priorotise www for apple.com domain

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Add requested changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Fix the tests

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Change avatar generation strategy

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

front/src/utils/__tests__/utils.test.ts

@@ -1,21 +1,49 @@
-import { getLogoUrlFromDomainName } from '..';
+import { getLogoUrlFromDomainName, sanitizeURL } from '..';
+
+describe('sanitizeURL', () => {
+  test('should sanitize the URL correctly', () => {
+    expect(sanitizeURL('http://example.com/')).toBe('example.com');
+    expect(sanitizeURL('https://www.example.com/')).toBe('example.com');
+    expect(sanitizeURL('www.example.com')).toBe('example.com');
+    expect(sanitizeURL('example.com')).toBe('example.com');
+    expect(sanitizeURL('example.com/')).toBe('example.com');
+  });
+
+  test('should handle undefined input', () => {
+    expect(sanitizeURL(undefined)).toBe('');
+  });
+});
 
 describe('getLogoUrlFromDomainName', () => {
-  it(`should generate logo url if undefined `, () => {
+  test('should return the correct logo URL for a given domain', () => {
+    expect(getLogoUrlFromDomainName('example.com')).toBe(
+      'https://favicon.twenty.com/example.com',
+    );
+
+    expect(getLogoUrlFromDomainName('http://example.com/')).toBe(
+      'https://favicon.twenty.com/example.com',
+    );
+
+    expect(getLogoUrlFromDomainName('https://www.example.com/')).toBe(
+      'https://favicon.twenty.com/example.com',
+    );
+
+    expect(getLogoUrlFromDomainName('www.example.com')).toBe(
+      'https://favicon.twenty.com/example.com',
+    );
+
+    expect(getLogoUrlFromDomainName('example.com/')).toBe(
+      'https://favicon.twenty.com/example.com',
+    );
+
+    expect(getLogoUrlFromDomainName('apple.com')).toBe(
+      'https://favicon.twenty.com/apple.com',
+    );
+  });
+
+  test('should handle undefined input', () => {
     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',
+      'https://favicon.twenty.com/',
     );
   });
 });

front/src/utils/index.ts

@@ -10,6 +10,15 @@ export function formatToHumanReadableDate(date: Date | string) {
   }).format(parsedJSDate);
 }
 
-export const getLogoUrlFromDomainName = (domainName?: string): string => {
-  return `https://api.faviconkit.com/${domainName}/144`;
-};
+export function sanitizeURL(link: string | null | undefined) {
+  return link
+    ? link.replace(/(https?:\/\/)|(www\.)/g, '').replace(/\/$/, '')
+    : '';
+}
+
+export function getLogoUrlFromDomainName(
+  domainName?: string,
+): string | undefined {
+  const sanitizedDomain = sanitizeURL(domainName);
+  return `https://favicon.twenty.com/${sanitizedDomain}`;
+}