Skip to content

Commit

Permalink
Merge pull request #267 from Vizzuality/develop
Browse files Browse the repository at this point in the history 
Production deploy
  • Loading branch information
@SARodrigues
SARodrigues authored Jun 19, 2024
2 parents 6089c85 + 432455f commit 484fb8a
Show file tree
Hide file tree
Showing 31 changed files with 382 additions and 208 deletions.
4 changes: 4 additions & 0 deletions frontend/next.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ const nextConfig = {
source: '/progress-tracker',
destination: '/progress-tracker/GLOB',
},
{
source: '/conservation-builder',
destination: '/conservation-builder/GLOB',
},
];
},
};
Expand Down
222 changes: 138 additions & 84 deletions frontend/src/components/header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { useMemo } from 'react';

import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';

import { VariantProps, cva } from 'class-variance-authority';
import { Menu } from 'lucide-react';
Expand All @@ -15,12 +18,27 @@ import {
SheetTrigger,
} from '@/components/ui/sheet';
import { PAGES } from '@/constants/pages';
import {
useSyncMapLayerSettings,
useSyncMapLayers,
useSyncMapSettings,
} from '@/containers/map/content/map/sync-settings';
import { cn } from '@/lib/classnames';
import ArrowRight from '@/styles/icons/arrow-right.svg?sprite';

const NAVIGATION_ITEMS = [
{ name: 'Progress tracker', href: PAGES.progressTracker, colorClassName: 'text-orange' },
{ name: 'Conservation builder', href: PAGES.conservationBuilder, colorClassName: 'text-blue' },
{
name: 'Progress tracker',
href: PAGES.progressTracker,
colorClassName: 'text-orange',
preserveMapParams: true,
},
{
name: 'Conservation builder',
href: PAGES.conservationBuilder,
colorClassName: 'text-blue',
preserveMapParams: true,
},
{ name: 'Knowledge hub', href: PAGES.knowledgeHub, colorClassName: 'text-green' },
{ name: 'About', href: PAGES.about, colorClassName: 'text-violet' },
{ name: 'Contact', href: PAGES.contact, colorClassName: 'text-black' },
Expand Down Expand Up @@ -54,93 +72,129 @@ export type HeaderProps = VariantProps<typeof headerVariants> & {
hideLogo?: boolean;
};

const Header: React.FC<HeaderProps> = ({ theme, hideLogo = false }) => (
<header className={cn('border-b font-mono text-sm', headerVariants({ theme }))}>
<nav
className="mx-auto flex items-center justify-between p-6 py-2.5 md:py-3 lg:px-10"
aria-label="Global"
>
<span className="flex">
{!hideLogo && (
<Link
href="/"
className="-my-1.5 inline-block ring-offset-black transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2"
>
<Image
src="/images/skytruth-30-30-logo.svg"
alt="SkyTruth 30x30"
width={25}
height={25}
/>
</Link>
)}
</span>
const Header: React.FC<HeaderProps> = ({ theme, hideLogo = false }) => {
const [mapSettings] = useSyncMapSettings();
const [mapLayers] = useSyncMapLayers();
const [mapLayerSettings] = useSyncMapLayerSettings();
const {
query: { locationCode = 'GLOB' },
} = useRouter();

const navigationEntries = useMemo(() => {
return NAVIGATION_ITEMS.map(({ name, href, colorClassName, preserveMapParams }) => {
return {
name: name,
href: {
pathname: href,
...(preserveMapParams && {
query: {
location: locationCode,
mapParams: JSON.stringify({
settings: mapSettings,
layers: mapLayers,
layerSettings: mapLayerSettings,
}),
},
}),
},
...(preserveMapParams && {
as: href,
}),
colorClassName: colorClassName,
};
});
}, [mapLayers, locationCode, mapSettings, mapLayerSettings]);

{/* Mobile hamburger menu */}
<div className="flex md:hidden">
<Sheet>
<SheetTrigger className="px-3 py-2 ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">
<span className="sr-only">Open main menu</span>
<Menu className="h-6 w-6" aria-hidden="true" />
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle className="sr-only">Main menu</SheetTitle>
<SheetDescription>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6 font-mono text-sm">
{NAVIGATION_ITEMS.map(({ name, href, colorClassName }) => (
<ActiveLink
key={href}
href={href}
className={cn(
'group -mx-3 block px-3 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
buttonVariants({ theme })
)}
activeClassName="is-active"
>
<Icon
icon={ArrowRight}
return (
<header className={cn('border-b font-mono text-sm', headerVariants({ theme }))}>
<nav
className="mx-auto flex items-center justify-between p-6 py-2.5 md:py-3 lg:px-10"
aria-label="Global"
>
<span className="flex">
{!hideLogo && (
<Link
href="/"
className="-my-1.5 inline-block ring-offset-black transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2"
>
<Image
src="/images/skytruth-30-30-logo.svg"
alt="SkyTruth 30x30"
width={25}
height={25}
/>
</Link>
)}
</span>

{/* Mobile hamburger menu */}
<div className="flex md:hidden">
<Sheet>
<SheetTrigger className="px-3 py-2 ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">
<span className="sr-only">Open main menu</span>
<Menu className="h-6 w-6" aria-hidden="true" />
</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle className="sr-only">Main menu</SheetTitle>
<SheetDescription>
<div className="mt-6 flow-root">
<div className="-my-6 divide-y divide-gray-500/10">
<div className="space-y-2 py-6 font-mono text-sm">
{navigationEntries.map(({ name, href, as, colorClassName }) => (
<ActiveLink
key={name}
href={href}
as={as}
className={cn(
'mr-2.5 hidden w-5 fill-black group-[.is-active]:inline-block',
colorClassName
'group -mx-3 block px-3 py-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
buttonVariants({ theme })
)}
/>
{name}
</ActiveLink>
))}
activeClassName="is-active"
>
<Icon
icon={ArrowRight}
className={cn(
'mr-2.5 hidden w-5 fill-black group-[.is-active]:inline-block',
colorClassName
)}
/>
{name}
</ActiveLink>
))}
</div>
</div>
</div>
</div>
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
</div>
</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>
</div>

<ul className="hidden md:flex md:gap-x-10">
{NAVIGATION_ITEMS.map(({ name, href, colorClassName }) => (
<li key={href}>
<ActiveLink
href={href}
className="group -mx-3 flex px-3 py-2 ring-offset-white transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2"
activeClassName="bg-white text-black hover:bg-white is-active"
>
<Icon
icon={ArrowRight}
className={cn(
'mr-2.5 -mt-1 hidden w-5 fill-black group-[.is-active]:inline-block',
colorClassName
)}
/>
{name}
</ActiveLink>
</li>
))}
</ul>
</nav>
</header>
);
<ul className="hidden md:flex md:gap-x-10">
{navigationEntries.map(({ name, href, as, colorClassName }) => (
<li key={name}>
<ActiveLink
href={href}
as={as}
className="group -mx-3 flex px-3 py-2 ring-offset-white transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2"
activeClassName="bg-white text-black hover:bg-white is-active"
>
<Icon
icon={ArrowRight}
className={cn(
'mr-2.5 -mt-1 hidden w-5 fill-black group-[.is-active]:inline-block',
colorClassName
)}
/>
{name}
</ActiveLink>
</li>
))}
</ul>
</nav>
</header>
);
};

export default Header;
4 changes: 2 additions & 2 deletions frontend/src/constants/pages.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
export const PAGES = {
homepage: '/',
progressTracker: '/progress-tracker',
conservationBuilder: '/conservation-builder',
homepage: '/',
knowledgeHub: '/knowledge-hub',
contact: '/contact',
about: '/about',
};
} as const;
4 changes: 2 additions & 2 deletions frontend/src/containers/map/sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ import LayersIcon from '@/styles/icons/layers.svg?sprite';
import { useSyncMapContentSettings } from '../sync-settings';

import LayersPanel from './layers-panel';
import MainPanel, { SIDEBAR_TYPES } from './main-panel';
import MainPanel, { PANEL_TYPES } from './main-panel/panels';

type MapSidebarProps = {
type: keyof typeof SIDEBAR_TYPES;
type: keyof typeof PANEL_TYPES;
};

const MapSidebar: React.FC<MapSidebarProps> = ({ type }) => {
Expand Down
53 changes: 0 additions & 53 deletions ...end/src/containers/map/sidebar/main-panel/details/location-selector/type-toggle/index.tsx
View file

This file was deleted.

15 changes: 6 additions & 9 deletions ...panel/details/location-selector/index.tsx → ...ar/main-panel/location-selector/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,13 @@ import { useSetAtom } from 'jotai';
import { Button } from '@/components/ui/button';
import Icon from '@/components/ui/icon';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { PAGES } from '@/constants/pages';
import { popupAtom } from '@/containers/map/store';
import { cn } from '@/lib/classnames';
import GlobeIcon from '@/styles/icons/globe.svg';
import MagnifyingGlassIcon from '@/styles/icons/magnifying-glass.svg';
import { useGetLocations } from '@/types/generated/location';
import { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';

import { useMapSearchParams } from '../../../../content/map/sync-settings';

import LocationDropdown from './location-dropdown';
import LocationTypeToggle from './type-toggle';

Expand All @@ -37,18 +34,17 @@ const BUTTON_CLASSES =

type LocationSelectorProps = {
className?: HTMLDivElement['className'];
theme: 'orange' | 'blue';
onChange: (locationCode: string) => void;
};

const LocationSelector: React.FC<LocationSelectorProps> = ({ className }) => {
const LocationSelector: React.FC<LocationSelectorProps> = ({ className, theme, onChange }) => {
const {
push,
query: { locationCode = 'GLOB' },
} = useRouter();

const setPopup = useSetAtom(popupAtom);

const searchParams = useMapSearchParams();

const [locationsFilter, setLocationsFilter] = useState<keyof typeof FILTERS>('all');
const [locationPopoverOpen, setLocationPopoverOpen] = useState(false);

Expand All @@ -73,9 +69,9 @@ const LocationSelector: React.FC<LocationSelectorProps> = ({ className }) => {
async (locationCode: LocationGroupsDataItemAttributes['code']) => {
setLocationPopoverOpen(false);
setPopup({});
push(`${PAGES.progressTracker}/${locationCode.toUpperCase()}?${searchParams.toString()}`);
onChange(locationCode.toUpperCase());
},
[setPopup, push, searchParams]
[setPopup, onChange]
);

const reorderedLocations = useMemo(() => {
Expand Down Expand Up @@ -104,6 +100,7 @@ const LocationSelector: React.FC<LocationSelectorProps> = ({ className }) => {
</PopoverTrigger>
<PopoverContent className="w-96 max-w-screen" align="start">
<LocationTypeToggle
theme={theme}
defaultValue={locationsFilter}
value={locationsFilter}
className="mb-4"
Expand Down
0 ...tion-selector/location-dropdown/index.tsx → ...tion-selector/location-dropdown/index.tsx
View file
File renamed without changes.
Loading

0 comments on commit 484fb8a

Please sign in to comment.