Merge pull request #87 from Vizzuality/develop

Add no results component to search location box
Vizzuality · Nov 27, 2024 · 3777ada · 3777ada
2 parents d230ec2 + 2c67140
commit 3777ada
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 39 deletions.
diff --git a/client/src/components/ui/search-location.tsx b/client/src/components/ui/search-location.tsx
@@ -1,3 +1,4 @@
+import { useTranslations } from "@/i18n";
 import { PropsWithChildren } from "react";
 
 type SearchResultListProps = PropsWithChildren & {
@@ -43,4 +44,19 @@ const SearchResultItem = <T,>({ option, onOptionClick, children }: SearchResultI
   );
 };
 
-export { SearchResultList, SearchResultItem };
+const SearchResultItemNotFound = ({ children }: PropsWithChildren) => {
+  const t = useTranslations();
+  return (
+    <li
+      role="option"
+      aria-selected="false"
+      tabIndex={0}
+      className="flex gap-2 rounded px-2 py-2 text-sm opacity-70"
+    >
+      {children}
+      <span className="line-clamp-2">{t("No results")}</span>
+    </li>
+  );
+};
+
+export { SearchResultList, SearchResultItem, SearchResultItemNotFound };
diff --git a/client/src/containers/map/controls/index.tsx b/client/src/containers/map/controls/index.tsx
@@ -1,13 +1,15 @@
 import MapZoomControl from "@/components/map/controls/zoom";
 import Legends from "../legends";
 import SearchLocation from "../search-location";
+import { useState } from "react";
 
 const MapControlsContainer = () => {
+  const [legendOpen, setLegendOpen] = useState(true);
   return (
     <div className="absolute bottom-6 right-5 space-y-1.5">
-      <SearchLocation />
+      <SearchLocation onOpenChange={(o: boolean) => o && setLegendOpen(false)} />
       <MapZoomControl />
-      <Legends />
+      <Legends open={legendOpen} onOpenChange={setLegendOpen} />
     </div>
   );
 };

diff --git a/client/src/containers/map/legends/index.tsx b/client/src/containers/map/legends/index.tsx
@@ -4,7 +4,6 @@ import { useSyncDatasets } from "@/store/map";
 import { Layers3Icon } from "lucide-react";
 import LegendItem from "./item";
 import { Button } from "@/components/ui/button";
-import { useState } from "react";
 import {
   ScrollArea,
   ScrollAreaCorner,
@@ -13,30 +12,31 @@ import {
   Scrollbar,
 } from "@radix-ui/react-scroll-area";
 
-const Legends = () => {
+type LegendsProps = {
+  open: boolean;
+  onOpenChange: (o: boolean) => void;
+};
+const Legends = ({ open, onOpenChange }: LegendsProps) => {
   const [datasets] = useSyncDatasets();
-  const [open, setOpen] = useState(true);
-
   const legendItems = Array.from(datasets).reverse();
 
   return (
     <div>
       <Popover open={open}>
         <PopoverTrigger asChild>
           <Button
-            onClick={() => setOpen(!open)}
+            onClick={() => onOpenChange(!open)}
             variant="ghost"
             className="transition-color block h-min rounded-full border-2 border-background bg-background px-2 py-2 shadow-black/10 drop-shadow-md duration-300 hover:bg-orange-100 focus-visible:bg-global data-[state=open]:bg-global"
           >
             <Layers3Icon className="h-5 w-5 stroke-foreground stroke-[1.5px]" />
           </Button>
         </PopoverTrigger>
         <PopoverContent
-          align="start"
-          alignOffset={20}
+          align="end"
           sideOffset={20}
           side="left"
-          className="w-[348px] -translate-y-10 rounded-lg bg-background px-0 py-0 shadow-lg drop-shadow-2xl"
+          className="w-[348px] rounded-lg bg-background px-0 py-0 shadow-lg drop-shadow-2xl"
         >
           <ScrollArea type="scroll" className="relative overflow-hidden">
             <ScrollAreaViewport className="max-h-[70vh] w-full">

diff --git a/client/src/containers/map/search-location/index.tsx b/client/src/containers/map/search-location/index.tsx
@@ -2,8 +2,14 @@
 
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover";
-import { SearchResultItem, SearchResultList } from "@/components/ui/search-location";
+import {
+  SearchResultItem,
+  SearchResultItemNotFound,
+  SearchResultList,
+} from "@/components/ui/search-location";
 import { useOpenStreetMapsLocations } from "@/hooks/openstreetmaps";
+import { useTranslations } from "@/i18n";
+import { cn } from "@/lib/utils";
 import { PopoverClose } from "@radix-ui/react-popover";
 import { ChevronRightIcon, MapIcon, MapPinIcon, SearchIcon, XIcon } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
@@ -18,7 +24,12 @@ type LocationOption = {
 
 type StoryOption = Omit<LocationOption, "bbox">;
 
-const SearchLocation = () => {
+type SearchLocationProps = {
+  onOpenChange: (open: boolean) => void;
+};
+const SearchLocation = ({ onOpenChange }: SearchLocationProps) => {
+  const t = useTranslations();
+
   const [open, setOpen] = useState(true);
   const [locationSearch, setLocationSearch] = useState("");
 
@@ -78,9 +89,9 @@ const SearchLocation = () => {
           duration: 1000,
           padding: { top: 50, bottom: 50, left: 350, right: 50 },
         });
-
         setLocationSearch("");
         setOpen(false);
+        onOpenChange(false);
       }
     },
     [map],
@@ -93,6 +104,7 @@ const SearchLocation = () => {
   const handleOpenChange = useCallback((open: boolean) => {
     setLocationSearch("");
     setOpen(open);
+    onOpenChange(open);
   }, []);
 
   return (
@@ -108,11 +120,13 @@ const SearchLocation = () => {
           </Button>
         </PopoverTrigger>
         <PopoverContent
-          align="start"
-          alignOffset={20}
+          align={!debouncedSearch.length ? "center" : "start"}
           sideOffset={20}
           side="left"
-          className="relative z-50 w-[348px] -translate-y-10 overflow-hidden rounded-lg bg-background px-0 py-0 shadow-lg drop-shadow-2xl"
+          className={cn(
+            "relative z-50 w-[348px] overflow-hidden rounded-lg bg-background px-0 py-0 shadow-lg drop-shadow-2xl",
+            !!debouncedSearch.length && "mb-5",
+          )}
         >
           <div>
             <div className="relative flex items-center justify-between p-1">
@@ -121,8 +135,8 @@ const SearchLocation = () => {
                 onChange={handleSearchChange}
                 type="text"
                 value={locationSearch}
-                placeholder="Search"
-                className="placeholder:text-popover-foreground/50 w-full border-2 border-background bg-background p-2 px-9 text-sm leading-none text-foreground placeholder:text-sm placeholder:font-light focus-visible:outline-global"
+                placeholder={t("Search")}
+                className="w-full border-2 border-background bg-background p-2 px-9 text-sm leading-none text-foreground placeholder:text-sm placeholder:font-light placeholder:text-popover-foreground/50 focus-visible:outline-global"
               />
               {locationSearch.length >= 1 && (
                 <Button
@@ -139,31 +153,43 @@ const SearchLocation = () => {
               </PopoverClose>
             </div>
 
-            {!!locationOptions.length && (
-              <SearchResultList title="Locations">
-                {locationOptions.map((option) => (
-                  <SearchResultItem
-                    key={option.value}
-                    option={option}
-                    onOptionClick={handleOptionClick}
-                  >
+            {!!debouncedSearch.length && (
+              <SearchResultList title={t("Locations")}>
+                {!!locationOptions?.length ? (
+                  locationOptions.map((option) => (
+                    <SearchResultItem
+                      key={option.value}
+                      option={option}
+                      onOptionClick={handleOptionClick}
+                    >
+                      <MapPinIcon className="mt-0.5 h-4 w-4 shrink-0" />
+                    </SearchResultItem>
+                  ))
+                ) : (
+                  <SearchResultItemNotFound>
                     <MapPinIcon className="mt-0.5 h-4 w-4 shrink-0" />
-                  </SearchResultItem>
-                ))}
+                  </SearchResultItemNotFound>
+                )}
               </SearchResultList>
             )}
 
-            {!!storiesOptions?.length && (
-              <SearchResultList title="Rangelands stories">
-                {storiesOptions.map((option) => (
-                  <SearchResultItem
-                    key={option.value}
-                    option={option}
-                    onOptionClick={handleStoryOptionClick}
-                  >
+            {!!debouncedSearch?.length && (
+              <SearchResultList title={t("Rangelands stories")}>
+                {storiesOptions?.length ? (
+                  storiesOptions.map((option) => (
+                    <SearchResultItem
+                      key={option.value}
+                      option={option}
+                      onOptionClick={handleStoryOptionClick}
+                    >
+                      <MapIcon className="mt-0.5 h-4 w-4 shrink-0" />
+                    </SearchResultItem>
+                  ))
+                ) : (
+                  <SearchResultItemNotFound>
                     <MapIcon className="mt-0.5 h-4 w-4 shrink-0" />
-                  </SearchResultItem>
-                ))}
+                  </SearchResultItemNotFound>
+                )}
               </SearchResultList>
             )}
           </div>