diff --git a/apps/web/src/app/_components/roles/role-info.tsx b/apps/web/src/app/_components/roles/role-info.tsx index 5acd664e..32ae13cc 100644 --- a/apps/web/src/app/_components/roles/role-info.tsx +++ b/apps/web/src/app/_components/roles/role-info.tsx @@ -38,7 +38,7 @@ export function RoleInfo({ className, roleObj, onBack }: RoleCardProps) { const companyQuery = api.company.getById.useQuery( { id: roleObj.companyId }, - { enabled: !!reviews.data?.[0]?.companyId }, + { enabled: !!roleObj.companyId }, ); // ===== ROLE DATA ===== // diff --git a/packages/ui/src/logo.tsx b/packages/ui/src/logo.tsx index 73e32091..7b6b98fa 100644 --- a/packages/ui/src/logo.tsx +++ b/packages/ui/src/logo.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import Image from "next/image"; import type { CompanyType } from "../../db/src/schema/companies"; @@ -11,13 +11,23 @@ interface ILogoProps { company: Omit & { slug?: string }; } +const MAX_LOGO_RETRIES = 1; + const Logo: React.FC = ({ company, className }) => { const rawWebsite = company.website; const website = rawWebsite && rawWebsite !== "" - ? rawWebsite.replace(/^(https?:\/\/)/, "") + ? rawWebsite.replace(/^(https?:\/\/)/, "").replace(/\s/g, "") : `${company.name.replace(/\s/g, "")}.com`; const [imageError, setImageError] = useState(false); + const [retries, setRetries] = useState(0); + + // so that the logo is re-rendered when the website changes and error state's reset + useEffect(() => { + setImageError(false); + setRetries(0); + }, [website]); + return imageError ? (
= ({ company, className }) => {
) : ( {`Logo setImageError(true)} + onError={() => { + if (retries < MAX_LOGO_RETRIES) { + setRetries((r) => r + 1); + } else { + setImageError(true); + } + }} /> ); };