#3060-default logo showing

src/frontend/src/hooks/organizations.hooks.ts

@@ -11,6 +11,7 @@ import {
   setOrganizationFeaturedProjects
 } from '../apis/organizations.api';
 import { downloadGoogleImage } from '../apis/finance.api';
+import { getDefaultImageData } from '../utils/image.utils';
 
 interface OrganizationProvider {
   organizationId: string;
@@ -98,11 +99,13 @@ export const useSetOrganizationLogo = () => {
 };
 
 export const useOrganizationLogo = () => {
-  return useQuery<{ url: string; blob: Blob }, Error>(['organizations', 'logo'], async () => {
-    const { data: fileId } = await getOrganizationLogo();
-
-    const imageBlob = await downloadGoogleImage(fileId);
-
-    return { url: URL.createObjectURL(imageBlob), blob: imageBlob };
+  return useQuery<Blob, Error>(['organizations', 'logo'], async () => {
+    try {
+      const { data: fileId } = await getOrganizationLogo();
+      return await downloadGoogleImage(fileId);
+    } catch {
+      // return default logo if fileId was not found
+      return getDefaultImageData();
+    }
   });
 };

src/frontend/src/pages/AdminToolsPage/EditGuestView/EditLogo.tsx

@@ -60,12 +60,12 @@ const EditLogo = () => {
         <EditLogoForm
           onSubmit={onSubmit}
           onHide={handleClose}
-          orgLogo={new File([imageData.blob], imageData.blob.name, { type: imageData.blob.type })}
+          orgLogo={new File([imageData], imageData.name, { type: imageData.type })}
         />
       ) : (
         <>
           <Box sx={{ display: 'flex', flexDirection: 'column', height: 350, width: 300 }}>
-            <LogoDisplay imageUrl={imageData.url} />
+            <LogoDisplay imageUrl={URL.createObjectURL(imageData)} />
             <Box
               sx={{
                 display: 'flex',

src/frontend/src/pages/HomePage/components/LogoDisplay.tsx

@@ -2,10 +2,10 @@ import { Box, useTheme, Card } from '@mui/material';
 import React from 'react';
 
 interface LogoDisplayProps {
-  imageUrl?: string;
+  imageUrl: string;
 }
 
-const LogoDisplay: React.FC<LogoDisplayProps> = ({ imageUrl = './default-logo.png' }) => {
+const LogoDisplay: React.FC<LogoDisplayProps> = ({ imageUrl }) => {
   const theme = useTheme();
   return (
     <Card

src/frontend/src/utils/image.utils.ts

@@ -0,0 +1,8 @@
+import axios from 'axios';
+
+export const getDefaultImageData = async () => {
+  const { data } = await axios.get('/default-logo.png', {
+    responseType: 'blob'
+  });
+  return data;
+};