diff --git a/src/components/CroppedLogo.tsx b/src/components/CroppedLogo.tsx index 958d28f3bf..135778456f 100644 --- a/src/components/CroppedLogo.tsx +++ b/src/components/CroppedLogo.tsx @@ -3,35 +3,41 @@ import * as React from "react"; import robotoff from "../robotoff"; import off from "../off"; -const fetchData = async (insightId: string) => { +const fetchData = async (insightId) => { const response = await robotoff.insightDetail(insightId); - if ( - response?.data?.source_image && - response?.data?.data?.logo_id && - !response?.data?.data?.bounding_box - ) { - const logoData = await robotoff.getLogosImages([ - response?.data?.data?.logo_id, - ]); - const bounding_box = logoData?.data?.logos?.[0]?.bounding_box; + if (!response) { + return null; + } + + let bounding_box = response.data?.bounding_box; + const source_image = response.data?.source_image; + const logo_id = response.data?.data?.logo_id; - return { ...response, bounding_box }; + if (source_image && logo_id && !bounding_box) { + const logoData = await robotoff.getLogosImages([logo_id]); + bounding_box = logoData?.data?.logos?.[0]?.bounding_box; } - return response; + return { source_image, bounding_box }; }; -const getCroppedLogoUrl = (debugResponse) => { - const debugData = debugResponse?.data; - const bounding_box = - debugData?.data?.bounding_box || debugResponse?.bounding_box; +const getCroppedLogoUrl = ( + debugResponse: null | { + source_image?: string; + bounding_box?: number[]; + }, +) => { + if (!debugResponse) { + return null; + } + const { bounding_box, source_image } = debugResponse; - if (!debugData?.source_image || !bounding_box) { + if (!source_image || !bounding_box) { return null; } - const sourceImage = off.getImageUrl(debugData?.source_image); + const sourceImage = off.getImageUrl(source_image); return robotoff.getCroppedImageUrl(sourceImage, bounding_box); }; diff --git a/src/pages/logosValidator/LogoQuestionValidator.jsx b/src/pages/logosValidator/LogoQuestionValidator.jsx index 260f90b060..bb375ee396 100644 --- a/src/pages/logosValidator/LogoQuestionValidator.jsx +++ b/src/pages/logosValidator/LogoQuestionValidator.jsx @@ -37,20 +37,20 @@ import Loader from "../loader"; const fetchData = async (insightId) => { const response = await robotoff.insightDetail(insightId); - if ( - response?.data?.source_image && - response?.data?.data?.logo_id && - !response?.data?.data?.bounding_box - ) { - const logoData = await robotoff.getLogosImages([ - response?.data?.data?.logo_id, - ]); - const bounding_box = logoData?.data?.logos?.[0]?.bounding_box; + if (!response) { + return response; + } - return { ...response, bounding_box }; + let bounding_box = response.data?.bounding_box; + const source_image = response.data?.source_image; + const logo_id = response.data?.data?.logo_id; + + if (source_image && logo_id && !bounding_box) { + const logoData = await robotoff.getLogosImages([logo_id]); + bounding_box = logoData?.data?.logos?.[0]?.bounding_box; } - return response; + return { source_image, bounding_box }; }; const LogoQuesitonCard = (props) => { @@ -68,23 +68,18 @@ const LogoQuesitonCard = (props) => { let isValidQuery = true; const getImageUrl = async () => { - const { data, bounding_box } = await fetchData(question.insight_id); + const { source_image, bounding_box } = await fetchData( + question.insight_id, + ); if (!isValidQuery) { return; } - if (data?.data?.bounding_box && data?.source_image) { - setCroppedImageUrl( - robotoff.getCroppedImageUrl( - off.getImageUrl(data?.source_image), - data.data.bounding_box, - ), - ); - } else if (bounding_box && data?.source_image) { + if (bounding_box && source_image) { setCroppedImageUrl( robotoff.getCroppedImageUrl( - off.getImageUrl(data?.source_image), + off.getImageUrl(source_image), bounding_box, ), ); diff --git a/src/pages/questions/DebugQuestion.tsx b/src/pages/questions/DebugQuestion.tsx index 51477ac7e9..2abae1510a 100644 --- a/src/pages/questions/DebugQuestion.tsx +++ b/src/pages/questions/DebugQuestion.tsx @@ -20,38 +20,49 @@ import TableCell from "@mui/material/TableCell"; const fetchData = async (insightId) => { const response = await robotoff.insightDetail(insightId); - if ( - response?.data?.source_image && - response?.data?.data?.logo_id && - !response?.data?.data?.bounding_box - ) { - const logoData = await robotoff.getLogosImages([ - response?.data?.data?.logo_id, - ]); - const bounding_box = logoData?.data?.logos?.[0]?.bounding_box; - - return { ...response, bounding_box }; + if (!response) { + return null; + } + + let bounding_box = response.data?.bounding_box; + const source_image = response.data?.source_image; + const logo_id = response.data?.data?.logo_id; + + if (source_image && logo_id && !bounding_box) { + const logoData = await robotoff.getLogosImages([logo_id]); + bounding_box = logoData?.data?.logos?.[0]?.bounding_box; } - return response; + return { source_image, bounding_box, data: response.data }; }; -const getCroppedLogoUrl = (debugResponse) => { - const debugData = debugResponse?.data; - const bounding_box = - debugData?.data?.bounding_box || debugResponse?.bounding_box; +const getCroppedLogoUrl = ( + debugResponse: null | { + source_image?: string; + bounding_box?: number[]; + }, +) => { + if (!debugResponse) { + return null; + } + const { bounding_box, source_image } = debugResponse; - if (!debugData?.source_image || !bounding_box) { + if (!source_image || !bounding_box) { return null; } - const sourceImage = off.getImageUrl(debugData?.source_image); + const sourceImage = off.getImageUrl(source_image); return robotoff.getCroppedImageUrl(sourceImage, bounding_box); }; + const DebugQuestion = (props) => { const { insightId } = props; const [isLoading, setIsLoading] = React.useState(true); - const [debugResponse, setDebugResponse] = React.useState({}); + const [debugResponse, setDebugResponse] = React.useState({}); const [openDetails, setOpenDetails] = React.useState({ resume: false, json_details: false,