fix(company): fix logo link for companies

Author: SimonGodefroid

src/components/companies/company-badge.tsx

@@ -9,9 +9,11 @@ export default function CompanyBadge({ company }: { company: Company }) {
       }}
       avatarProps={{
         radius: 'lg',
-        src: `${company?.logo}`,
+        src: company.domain
+          ? `https://img.logo.dev/${company.domain}?token=${process.env.NEXT_PUBLIC_LOGO_DEV_TOKEN}`
+          : (company.logo ?? ''),
         size: 'md',
-        className:'shrink-0'
+        className: 'shrink-0',
       }}
       description={company.domain}
       name={company.name}

src/components/companies/create-company-form.tsx

@@ -1,8 +1,11 @@
 'use client';
 
 import { Key, useEffect, useState } from 'react';
+
 import { useRouter } from 'next/navigation';
+
 import { createCompany } from '@/actions';
+import { getCompanyLogo } from '@/helpers/companies';
 import {
   Autocomplete,
   AutocompleteItem,
@@ -17,7 +20,12 @@ import { toast } from 'react-toastify';
 
 const renderOption = (company: any) => (
   <div className="flex gap-2 items-center">
-    <Avatar alt={company?.name} src={company?.logo} size="sm" isBordered />
+    <Avatar
+      alt={company?.name}
+      src={getCompanyLogo(company)}
+      size="sm"
+      isBordered
+    />
     <div className="flex flex-col">
       <span>{company?.name}</span>
       <span className="text-tiny text-default-400">{company?.domain}</span>

src/components/reports/reports-table.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { getCompanyLogo } from '@/helpers/companies';
 import { pascalToSentenceCase } from '@/helpers/strings/pascalToSentenceCase';
 import { ReportWithTags, UserWithCompanies } from '@/types';
 import {
@@ -140,7 +141,7 @@ export default function ReportsTable({
               }}
               avatarProps={{
                 radius: 'lg',
-                src: `${report?.company?.logo}` || '',
+                src: getCompanyLogo(report?.company!) || '',
                 size: 'md',
                 className: 'shrink-0',
               }}

src/components/sites/site-badge.tsx

@@ -1,3 +1,4 @@
+import { getCompanyLogo } from '@/helpers/companies';
 import { Avatar } from '@nextui-org/react';
 import { Company } from '@prisma/client';
 
@@ -7,7 +8,7 @@ export default function SiteBadge({ company }: { company: Company }) {
       {/* <div className="flex gap-2 items-center flex-wrap justify-center"> */}
       <Avatar
         alt={company?.name}
-        src={`${company?.logo}`}
+        src={getCompanyLogo(company)}
         className="shrink-0"
         isBordered
         radius="sm"

src/components/sites/sites-list.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from 'next/navigation';
 
+import { getCompanyLogo } from '@/helpers/companies';
 import { CompanyWithReports } from '@/types';
 import {
   Avatar,
@@ -28,13 +29,13 @@ export default function SitesList({
   companies: CompanyWithReports[];
 }) {
   const router = useRouter();
-  return (companies || []).map((c) => {
-    const link = getHost(c.domain ?? undefined);
+  return (companies || []).map((company) => {
+    const link = getHost(company.domain ?? undefined);
 
     return (
       <Card
         className="w-4/5 sm:w-2/3 md:w-1/2 lg:w-10/12"
-        key={c.id}
+        key={company.id}
         isPressable
         onPress={() => {
           router.push(`/sites/${link}`);
@@ -43,27 +44,29 @@ export default function SitesList({
         <CardHeader className="flex justify-between items-center bg-blue-400">
           <div className="flex gap-3 items-center">
             <Avatar
-              alt={c.name + ' logo'}
+              alt={company.name + ' logo'}
               radius="sm"
-              src={`${c.logo}`}
-              name={c.name}
+              src={getCompanyLogo(company)}
+              name={company.name}
             />
             <div className="flex flex-col">
-              <p className="text-md">{c.name}</p>
-              <p className="text-small text-foreground">{c.domain}</p>
+              <p className="text-md">{company.name}</p>
+              <p className="text-small text-foreground">{company.domain}</p>
             </div>
           </div>
-          <p className="text-md">{c.reports.length} reports</p>
+          <p className="text-md">{company.reports.length} reports</p>
         </CardHeader>
         <CardBody>
           <p>
             Categories:{' '}
-            {c.reports.map((r) => r.tags.map((tag) => tag.name).join(', '))}
+            {company.reports.map((r) =>
+              r.tags.map((tag) => tag.name).join(', '),
+            )}
           </p>
         </CardBody>
         <CardFooter className="flex justify-end">
-          <Link showAnchorIcon href={`${c.domain}`}>
-            {c.domain}
+          <Link showAnchorIcon href={`${company.domain}`}>
+            {company.domain}
           </Link>
         </CardFooter>
       </Card>

src/helpers/companies/getCompanyLogo.ts

@@ -0,0 +1,7 @@
+import { Company } from "@prisma/client";
+export const getCompanyLogo = (company: Company) => {
+  if (company.logo) return company.logo;
+  if (company.domain)
+    return `https://img.logo.dev/${company.domain}?token=${process.env.NEXT_PUBLIC_LOGO_DEV_TOKEN}`;
+  return `https://placehold.co/200x200?text=${company.name}`;
+};

src/helpers/companies/index.ts

@@ -0,0 +1 @@
+export * from './getCompanyLogo';