diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 36412182..03e55f4e 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { styled } from '@mui/material/styles'; import { NavLink, Link, useHistory, useLocation } from 'react-router-dom'; import { @@ -170,11 +170,10 @@ const HeaderNoCtx: React.FC = (props) => { logout, apiGet } = useAuthContext(); + const [drawerOpen, setDrawerOpen] = useState(false); const [isMobile, setIsMobile] = useState(false); - const [organizations, setOrganizations] = useState< - (Organization | OrganizationTag)[] - >([]); + const [organizations, setOrganizations] = useState([]); const [tags, setTags] = useState([]); let drawerItems: NavItemType[] = []; @@ -199,12 +198,12 @@ const HeaderNoCtx: React.FC = (props) => { const fetchOrganizations = useCallback(async () => { try { const rows = await apiGet('/v2/organizations/'); - let tags: (OrganizationTag | Organization)[] = []; + let tags: OrganizationTag[] = []; if (userLevel === GLOBAL_ADMIN) { tags = await apiGet('/organizations/tags'); await setTags(tags as OrganizationTag[]); } - await setOrganizations(tags.concat(rows)); + await setOrganizations(rows); } catch (e) { console.log(e); } @@ -309,6 +308,18 @@ const HeaderNoCtx: React.FC = (props) => { drawerItems = [...navItems, ...userMenu.nested]; } + const organizationDropdownOptions: Array<{ name: string }> = useMemo(() => { + if (userLevel === GLOBAL_ADMIN) { + return [{ name: 'All Organizations' }].concat(organizations); + } + if (userLevel === REGIONAL_ADMIN) { + return organizations.filter((item) => { + return item.regionId === user?.regionId; + }); + } + return []; + }, [user, organizations, userLevel]); + return ( @@ -344,9 +355,11 @@ const HeaderNoCtx: React.FC = (props) => { isOptionEqualToValue={(option, value) => option?.name === value?.name } - options={[{ name: 'All Organizations' }].concat( - organizations - )} + options={ + userLevel === GLOBAL_ADMIN + ? [...tags, ...organizationDropdownOptions] + : organizationDropdownOptions + } autoComplete={false} className={classes.selectOrg} classes={{ @@ -394,7 +407,6 @@ const HeaderNoCtx: React.FC = (props) => { } else { setShowMaps(false); } - // Check if we're on an organization page and, if so, update it to the new organization if (orgPageMatch !== null) { if (!tags.find((e) => e.id === value.id)) {