#3060-removed default image

src/backend/src/services/organizations.services.ts

@@ -220,7 +220,7 @@ export default class OrganizationsService {
    * @param organizationId the id of the organization
    * @returns the id of the image
    */
-  static async getLogoImage(organizationId: string): Promise<string> {
+  static async getLogoImage(organizationId: string): Promise<string | null> {
     const organization = await prisma.organization.findUnique({
       where: { organizationId }
     });
@@ -229,10 +229,6 @@ export default class OrganizationsService {
       throw new NotFoundException('Organization', organizationId);
     }
 
-    if (!organization.logoImageId) {
-      throw new HttpException(404, `Organization ${organizationId} does not have a logo image`);
-    }
-
     return organization.logoImageId;
   }
 

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

@@ -11,7 +11,6 @@ import {
   setOrganizationFeaturedProjects
 } from '../apis/organizations.api';
 import { downloadGoogleImage } from '../apis/finance.api';
-import { getDefaultImageData } from '../utils/image.utils';
 
 interface OrganizationProvider {
   organizationId: string;
@@ -99,13 +98,11 @@ export const useSetOrganizationLogo = () => {
 };
 
 export const useOrganizationLogo = () => {
-  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 await getDefaultImageData();
+  return useQuery<Blob | undefined, Error>(['organizations', 'logo'], async () => {
+    const { data: fileId } = await getOrganizationLogo();
+    if (!fileId) {
+      return;
     }
+    return await downloadGoogleImage(fileId);
   });
 };

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

@@ -15,7 +15,7 @@ const EditLogo = () => {
   const [isEditMode, setIsEditMode] = useState(false);
   const theme = useTheme();
 
-  if (isLoading || !mutateAsync || organizationIsLoading || !organization || !imageData || imageDataIsLoading)
+  if (isLoading || !mutateAsync || organizationIsLoading || !organization || imageDataIsLoading)
     return <LoadingIndicator />;
 
   const handleClose = () => {
@@ -60,12 +60,12 @@ const EditLogo = () => {
         <EditLogoForm
           onSubmit={onSubmit}
           onHide={handleClose}
-          orgLogo={new File([imageData], imageData.name, { type: imageData.type })}
+          orgLogo={imageData ? new File([imageData], imageData.name, { type: imageData.type }) : undefined}
         />
       ) : (
         <>
           <Box sx={{ display: 'flex', flexDirection: 'column', height: 350, width: 300 }}>
-            <LogoDisplay imageUrl={URL.createObjectURL(imageData)} />
+            <LogoDisplay imageUrl={imageData ? URL.createObjectURL(imageData) : undefined} />
             <Box
               sx={{
                 display: 'flex',

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

@@ -7,13 +7,13 @@ import NERSuccessButton from '../../../components/NERSuccessButton';
 import ImageIcon from '@mui/icons-material/Image';
 
 export interface EditLogoInput {
-  logoImage: File;
+  logoImage?: File;
 }
 
 interface EditLogoFormProps {
   onSubmit: (logoImage: EditLogoInput) => Promise<void>;
   onHide: () => void;
-  orgLogo: File;
+  orgLogo?: File;
 }
 
 const EditLogoForm: React.FC<EditLogoFormProps> = ({ onSubmit, orgLogo, onHide }) => {
@@ -24,7 +24,9 @@ const EditLogoForm: React.FC<EditLogoFormProps> = ({ onSubmit, orgLogo, onHide }
   });
 
   const onSubmitWrapper = async (data: EditLogoInput) => {
-    await onSubmit(data);
+    if (!!data.logoImage) {
+      await onSubmit(data);
+    }
     reset();
   };
 
@@ -85,7 +87,7 @@ const EditLogoForm: React.FC<EditLogoFormProps> = ({ onSubmit, orgLogo, onHide }
                     hidden
                   />
                 </Button>
-                {value.name !== 'undefined' && (
+                {value && value.name !== 'undefined' && (
                   <Stack direction={'row'} spacing={1} mt={2}>
                     <ImageIcon />
                     <Typography>{value.name}</Typography>

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

@@ -2,7 +2,7 @@ import { Box, useTheme, Card } from '@mui/material';
 import React from 'react';
 
 interface LogoDisplayProps {
-  imageUrl: string;
+  imageUrl?: string;
 }
 
 const LogoDisplay: React.FC<LogoDisplayProps> = ({ imageUrl }) => {
@@ -17,15 +17,15 @@ const LogoDisplay: React.FC<LogoDisplayProps> = ({ imageUrl }) => {
         borderRadius: 2
       }}
     >
-      <Box
+      {imageUrl && <Box
         component="img"
         src={imageUrl}
         sx={{
           height: '100%',
           width: '100%',
           borderRadius: 2
         }}
-      />
+      />}
     </Card>
   );
 };