Merge pull request #1182 from Vizzuality/fix/lang-sel

Fix/lang sel

package.json

@@ -92,7 +92,7 @@
   "devDependencies": {
     "@playwright/test": "^1.41.0",
     "@transifex/native": "6.0.2",
-    "@transifex/react": "6.0.2",
+    "@transifex/react": "^7.1.3",
     "@types/geojson": "7946.0.10",
     "@types/mapbox-gl": "2.7.11",
     "@types/node": "20.12.7",

src/components/contextual/card.tsx

@@ -18,20 +18,14 @@ import Info from 'components/widget-controls/info';
 import { WIDGET_CARD_WRAPPER_STYLE } from 'styles/widgets';
 import type { ContextualBasemapsId, MosaicId, WidgetSlugType } from 'types/widget';
 
-import analyticThumb from 'images/thumbs/analytic.png';
-import darkThumb from 'images/thumbs/[email protected]';
-import lightThumb from 'images/thumbs/[email protected]';
-import satelliteThumb from 'images/thumbs/[email protected]';
-import visualThumb from 'images/thumbs/visual.png';
-
 import CHECK_SVG from 'svgs/ui/check.svg?sprite';
 
 const THUMBS = {
-  light: lightThumb as StaticImageData,
-  dark: darkThumb as StaticImageData,
-  satellite: satelliteThumb as StaticImageData,
-  planet_medres_analytic_monthly: analyticThumb as StaticImageData,
-  planet_medres_visual_monthly: visualThumb as StaticImageData,
+  light: 'images/thumbs/analytic.png',
+  dark: 'images/thumbs/[email protected]',
+  satellite: 'images/thumbs/[email protected]',
+  planet_medres_analytic_monthly: 'images/thumbs/[email protected]',
+  planet_medres_visual_monthly: 'images/thumbs/visual.png',
   mangrove_tidal_flats: '/images/thumbs/contextual/tidal_flats.png',
   mangrove_allen_coral_reef: '/images/thumbs/contextual/allen_coral_reef.png',
   mangrove_global_tidal_wetland_change: '/images/thumbs/contextual/global_tidal_wetland_change.png',

src/components/ui/collapsible/index.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

src/containers/map/layer-manager/index.tsx

@@ -10,12 +10,9 @@ import { interactiveLayerIdsAtom } from 'store/map';
 import { useRecoilState } from 'recoil';
 
 import { LAYERS, BASEMAPS } from 'containers/datasets';
-import { LocationTypes } from 'containers/datasets/locations/types';
 import { NATIONAL_DASHBOARD_LOCATIONS } from 'containers/layers/constants';
-import { widgets } from 'containers/widgets/constants';
 
 import type { LayerProps } from 'types/layers';
-import type { WidgetTypes } from 'types/widget';
 import type { ContextualBasemapsId, WidgetSlugType } from 'types/widget';
 
 const CountryBoundariesLayer = LAYERS['country-boundaries'];

src/containers/navigation/index.tsx

@@ -17,9 +17,9 @@ const AppTools = () => (
         <News />
       </div>
 
-      {/* <div className="flex items-center justify-center">
+      <div className="flex items-center justify-center">
         <LanguageSelector />
-      </div> */}
+      </div>
 
       <div className="flex h-full items-center justify-center">
         <Helper

src/containers/navigation/language-selector/index.tsx

@@ -19,12 +19,12 @@ interface Transifex {
     detectLanguage: () => string;
     getAllLanguages: () => { code: string; name: string }[];
     translateTo: (string) => string;
+    init: () => void;
   };
 }
 
 const LanguageSelector = () => {
   const t = typeof window !== 'undefined' && (window.Transifex as Transifex);
-
   const handleChange = useCallback((e: MouseEvent<HTMLButtonElement>) => {
     const Transifex = window.Transifex as Transifex;
     Transifex?.live.translateTo(e.currentTarget.value);
@@ -35,15 +35,18 @@ const LanguageSelector = () => {
   const [currentLanguage, setCurrentLanguage] = useState('');
 
   useEffect(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== 'undefined' && window.Transifex) {
       const t = window.Transifex as Transifex;
-      const locale = t?.live.detectLanguage();
-      const languages = t?.live.getAllLanguages();
-      const defaultLanguage = languages?.find((lang) => lang.code === locale)?.name;
-      setCurrentLanguage(defaultLanguage);
-      setLanguages(languages);
+      if (t?.live) {
+        t.live?.init();
+        const locale = t?.live.detectLanguage();
+        const languages = t.live.getAllLanguages();
+        const defaultLanguage = languages?.find((lang) => lang.code === locale)?.name;
+        setCurrentLanguage(defaultLanguage);
+        setLanguages(languages);
+      }
     }
-  }, [t, languages]);
+  }, [t]);
 
   return (
     <Helper

src/containers/navigation/map-settings/index.tsx

@@ -19,7 +19,7 @@ const MapSettings = () => {
   const saveLocationTool = useSetRecoilState(locationToolAtom);
 
   const resetDrawingToolState = useResetRecoilState(drawingToolAtom);
-  const handleMapSettingsView = useCallback(async () => {
+  const handleMapSettingsView = useCallback(() => {
     setMapViewState(true);
     resetDrawingToolState();
     saveLocationTool(null);

src/containers/navigation/menu/about/index.tsx

@@ -1,9 +1,4 @@
-import Image, { StaticImageData } from 'next/image';
-
-import CONVENED_PNG from 'images/partners/convened.png';
-import DONORS_PNG from 'images/partners/donors.png';
-import SUPPORTED_PNG from 'images/partners/supported.png';
-import VIZZUALITY_PNG from 'images/vizzuality.png';
+import Image from 'next/image';
 
 const About = () => {
   return (
@@ -67,26 +62,32 @@ const About = () => {
           <div>
             <p>Convened by</p>
             <Image
-              src={CONVENED_PNG as StaticImageData}
+              src="/images/partners/convened.png"
               alt="Convened by Aberystwyth University, soloEO, TNC, Wetlands International"
               className="-ml-3"
+              width={500}
+              height={300}
             />
           </div>
           <div>
             <p>Supported by</p>
             <Image
-              src={SUPPORTED_PNG as StaticImageData}
+              src="/images/partners/supported.png"
               alt="Supported by University of Cambridge, JAXA, NASA, IUCN, Griffith University, Conservation International, WWF, Scripps Institution of Oceanography"
               className="-ml-2"
+              width={500}
+              height={300}
             />
           </div>
 
           <div>
             <p>Donors</p>
             <Image
-              src={DONORS_PNG as StaticImageData}
+              src="/images/partners/donors.png"
               alt="DOB Ecology, Oak Foundation, Dutch Postcode Lottery, COmON Foundation"
               className="-ml-6 -mt-1"
+              width={500}
+              height={300}
             />
           </div>
 
@@ -99,8 +100,8 @@ const About = () => {
               className="m-10"
             >
               <Image
-                src={VIZZUALITY_PNG as StaticImageData}
-                alt="vizzuality"
+                src="/images/vizzuality.png"
+                alt="Vizzuality"
                 width={300}
                 height={300}
                 className="ml-2 -mt-1 w-40"

src/containers/navigation/menu/index.tsx

@@ -1,29 +1,41 @@
 import { useState } from 'react';
 
-import Image, { StaticImageData } from 'next/image';
+import Link from 'next/link';
 
 import cn from 'lib/classnames';
 
 import { AnimatePresence, motion } from 'framer-motion';
+import { HiChevronDown } from 'react-icons/hi2';
 
 import Helper from 'containers/guide/helper';
 import About from 'containers/navigation/menu/about';
+import PartnersLinks from 'containers/navigation/menu/partners';
 import BlogContent from 'containers/news/content';
 
-import { Media } from 'components/media-query';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from 'components/ui/collapsible';
 import { Dialog, DialogContent, DialogClose, DialogTrigger } from 'components/ui/dialog';
 import Icon from 'components/ui/icon';
 
-import GMA_PNG from 'images/gma.png';
-
-import ABERYSTWYTH_SVG from 'svgs/partners/aberystwyth.svg?sprite';
-import NATURE_CONSERVANCY_SVG from 'svgs/partners/nature.svg?sprite';
-import SOLO_SVG from 'svgs/partners/solo.svg?sprite';
-import WETLANDS_SVG from 'svgs/partners/wetlands.svg?sprite';
 import MENU_SVG from 'svgs/tools-bar/menu.svg?sprite';
 
+const RESOURCES_LINKS = [
+  {
+    label: 'MRTT',
+    href: 'https://www.mangrovealliance.org/news/new-the-mangrove-restoration-tracker-tool/',
+  },
+  { label: 'Training on conservation', href: 'https://www.mangrovealliance.org/' },
+  { label: 'Restoration best practices', href: 'https://www.mangrovealliance.org/' },
+  { label: 'State of the Worlds', href: 'https://www.mangrovealliance.org/' },
+  {
+    label: 'GMW Leaflet',
+    href: 'https://www.mangrovealliance.org/wp-content/uploads/2024/05/GMW_Leaflet_2024-update.pdf',
+  },
+  { label: 'Policy document', href: 'https://www.mangrovealliance.org/' },
+];
+
 const Menu = () => {
   const [section, setSection] = useState('main');
+  const [isOpen, setIsOpen] = useState(false);
 
   return (
     <Dialog>
@@ -57,42 +69,41 @@ const Menu = () => {
         })}
       >
         {section === 'main' && (
-          <div className="flex w-full flex-col py-10 font-sans text-black/85">
-            <h2 className="pb-8 text-2xl font-light leading-4 md:pt-0 md:text-3xl">
-              Global Mangrove Watch
-            </h2>
-            <div className="flex flex-col items-start space-y-4 pb-10 text-2lg font-light">
-              <button onClick={() => section && setSection('about')}>About this tool</button>
-            </div>
-            <div className="space-y-4 pb-6">
-              <p className="text-xs font-bold uppercase">Powered by</p>
-              <a
-                href="https://www.mangrovealliance.org/"
-                className="pb-3 text-left text-2lg font-light leading-3"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
+          <div className="space-y-10 py-10">
+            <div className="flex w-full flex-col space-y-4 font-sans text-black/85">
+              <h2 className="pb-8 text-2xl font-light leading-4 md:pt-0 md:text-3xl">
+                Global Mangrove Watch
+              </h2>
+              <div className="text-2lg font-light">
+                <button onClick={() => section && setSection('about')}>About this tool</button>
+              </div>
+              <Link href="https://www.mangrovealliance.org/" className="text-2lg font-light">
                 Global Mangrove Alliance
-              </a>
+              </Link>
+              <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+                <CollapsibleTrigger>
+                  <div className="flex items-center space-x-4 text-2lg font-light">
+                    <span>Resources</span>
+                    <HiChevronDown className="h-4 w-4" />
+                    <span className="sr-only">Toggle</span>
+                  </div>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="flex flex-col space-y-2 border-l border-l-grey-400/20 px-6">
+                  {RESOURCES_LINKS.map(({ label, href }) => (
+                    <a
+                      key={label}
+                      href={href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-2lg font-light"
+                    >
+                      {label}
+                    </a>
+                  ))}
+                </CollapsibleContent>
+              </Collapsible>
             </div>
-
-            <div className="grid grid-cols-2 items-center gap-y-6 pb-6">
-              <Icon icon={ABERYSTWYTH_SVG} className="w-22 md:w-28" description="ABERYSTWYTH" />
-              <Icon icon={SOLO_SVG} className="w-22 md:w-28" description="SOLO" />
-              <Icon icon={WETLANDS_SVG} className="w-22 md:w-28" description="Wetlands" />
-              <Icon
-                icon={NATURE_CONSERVANCY_SVG}
-                className="w-22 md:w-28"
-                description="NATURE_CONSERVANCY"
-              />
-            </div>
-
-            <Media lessThan="md">
-              <Image alt="GMA" src={GMA_PNG as StaticImageData} width={100} height={50} />
-            </Media>
-            <Media greaterThanOrEqual="md">
-              <Image alt="GMA" src={GMA_PNG as StaticImageData} width={133} height={58} />
-            </Media>
+            <PartnersLinks />
           </div>
         )}
         <AnimatePresence>

src/containers/navigation/menu/partners/index.tsx

@@ -0,0 +1,57 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { Media } from 'components/media-query';
+import Icon from 'components/ui/icon';
+
+import ABERYSTWYTH_SVG from 'svgs/partners/aberystwyth.svg?sprite';
+import NATURE_CONSERVANCY_SVG from 'svgs/partners/nature.svg?sprite';
+import SOLO_SVG from 'svgs/partners/solo.svg?sprite';
+import WETLANDS_SVG from 'svgs/partners/wetlands.svg?sprite';
+
+const PartnersLinks = () => {
+  return (
+    <div className="flex w-full space-x-12">
+      <div className="space-y-4 pb-6">
+        <p className="text-xs font-bold uppercase">Powered by</p>
+        <Link
+          href="https://www.mangrovealliance.org/"
+          className="pb-3 text-left text-2lg font-light leading-3"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Media lessThan="md">
+            <Image alt="GMA" src="/images/menu/gma.webp" width={88} height={50} />
+          </Media>
+          <Media greaterThanOrEqual="md">
+            <Image alt="GMA" src="/images/menu/gma.webp" width={133} height={58} />
+          </Media>
+        </Link>
+      </div>
+
+      <div className="space-y-4 pb-6">
+        <p className="text-xs font-bold uppercase">Partners</p>
+        <div className="flex w-full flex-wrap items-center gap-6">
+          <Link href="https://www.aber.ac.uk/en/">
+            <Icon icon={ABERYSTWYTH_SVG} className="h-full w-32" description="ABERYSTWYTH" />
+          </Link>
+          <Link href="https://soloeo.com/">
+            <Icon icon={SOLO_SVG} className="h-full w-32" description="SOLO" />
+          </Link>
+          <Link href="https://www.wetlands.org/">
+            <Icon icon={WETLANDS_SVG} className="h-full w-32" description="Wetlands" />
+          </Link>
+          <Link href="https://www.nature.org/">
+            <Icon
+              icon={NATURE_CONSERVANCY_SVG}
+              className="h-full w-32"
+              description="NATURE_CONSERVANCY"
+            />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PartnersLinks;

src/containers/navigation/mobile/index.tsx

@@ -11,7 +11,7 @@ const NavigationMobile = () => {
         <Locations />
         <News />
         <ConfigureWidgets />
-        {/* <LanguageSelector /> */}
+        <LanguageSelector />
         <MapToggle />
       </div>
     </div>

src/containers/navigation/mobile/language-selector/index.tsx

@@ -15,6 +15,7 @@ interface Transifex {
     detectLanguage: () => string;
     getAllLanguages: () => { code: string; name: string }[];
     translateTo: (string) => string;
+    init: () => void;
   };
 }
 
@@ -33,11 +34,14 @@ const LanguageSelector = () => {
   useEffect(() => {
     if (typeof window !== 'undefined') {
       const t = window.Transifex as Transifex;
-      const locale = t?.live.detectLanguage();
-      const languages = t?.live.getAllLanguages();
-      const defaultLanguage = languages?.find((lang) => lang.code === locale)?.name;
-      setCurrentLanguage(defaultLanguage);
-      setLanguages(languages);
+      if (t?.live) {
+        t.live?.init();
+        const locale = t?.live.detectLanguage();
+        const languages = t.live.getAllLanguages();
+        const defaultLanguage = languages?.find((lang) => lang.code === locale)?.name;
+        setCurrentLanguage(defaultLanguage);
+        setLanguages(languages);
+      }
     }
   }, [t, languages]);