diff --git a/src/frontend/src/apis/organizations.api.ts b/src/frontend/src/apis/organizations.api.ts index 486b22256a..32b4aefab6 100644 --- a/src/frontend/src/apis/organizations.api.ts +++ b/src/frontend/src/apis/organizations.api.ts @@ -23,3 +23,15 @@ export const setOrganizationDescription = async (description: string) => { description }); }; + +export const getOrganizationLogo = async () => { + return axios.get(apiUrls.organizationsLogoImage(), { + transformResponse: (data) => JSON.parse(data) + }); +}; + +export const setOrganizationLogo = async (file: File) => { + const formData = new FormData(); + formData.append('logo', file); + return axios.post(apiUrls.organizationsSetLogoImage(), formData); +}; diff --git a/src/frontend/src/hooks/organizations.hooks.ts b/src/frontend/src/hooks/organizations.hooks.ts index d182994fa2..9dce4e608c 100644 --- a/src/frontend/src/hooks/organizations.hooks.ts +++ b/src/frontend/src/hooks/organizations.hooks.ts @@ -2,7 +2,14 @@ import { useContext, useState } from 'react'; import { OrganizationContext } from '../app/AppOrganizationContext'; import { useMutation, useQuery, useQueryClient } from 'react-query'; import { Organization, Project } from 'shared'; -import { getFeaturedProjects, getCurrentOrganization, setOrganizationDescription } from '../apis/organizations.api'; +import { + getFeaturedProjects, + getCurrentOrganization, + setOrganizationDescription, + getOrganizationLogo, + setOrganizationLogo +} from '../apis/organizations.api'; +import { downloadGoogleImage } from '../apis/finance.api'; interface OrganizationProvider { organizationId: string; @@ -64,3 +71,20 @@ export const useSetOrganizationDescription = () => { } ); }; + +export const useSetOrganizationLogo = () => { + return useMutation(['reimbursement-requsts', 'edit'], async (file: File) => { + const { data } = await setOrganizationLogo(file); + return data; + }); +}; + +export const useOrganizationLogo = () => { + return useQuery(['organizations', 'logo'], async () => { + const { data: fileId } = await getOrganizationLogo(); + + const imageBlob = await downloadGoogleImage(fileId); + + return URL.createObjectURL(imageBlob); + }); +}; diff --git a/src/frontend/src/utils/urls.ts b/src/frontend/src/utils/urls.ts index 1b00a9e46b..1fba20024c 100644 --- a/src/frontend/src/utils/urls.ts +++ b/src/frontend/src/utils/urls.ts @@ -177,6 +177,8 @@ const organizationsUsefulLinks = () => `${organizations()}/useful-links`; const organizationsSetUsefulLinks = () => `${organizationsUsefulLinks()}/set`; const organizationsSetDescription = () => `${organizations()}/description/set`; const organizationsFeaturedProjects = () => `${organizations()}/featured-projects`; +const organizationsLogoImage = () => `${organizations()}/logo`; +const organizationsSetLogoImage = () => `${organizations()}/logo/update`; /******************* Car Endpoints ********************/ const cars = () => `${API_URL}/cars`; @@ -336,6 +338,8 @@ export const apiUrls = { organizationsSetUsefulLinks, organizationsFeaturedProjects, organizationsSetDescription, + organizationsLogoImage, + organizationsSetLogoImage, cars, carsCreate,