fe: fix landscapes search (#123)

Author: atrincas

app/src/app/(frontend)/[locale]/(app)/landscapes/page.tsx

@@ -7,7 +7,8 @@ import { getTranslations } from "next-intl/server";
 
 import { Header } from "@/containers/header";
 import { Landscapes } from "@/containers/landscapes";
-import { LandscapesFilters } from "@/containers/landscapes/filters";
+import LandscapesFilters from "@/containers/landscapes/filters";
+import { LandscapesFilteredList } from "@/containers/landscapes/filters/list";
 import { LandscapesSearch } from "@/containers/landscapes/search";
 
 export async function generateMetadata(): Promise<Metadata> {
@@ -32,12 +33,7 @@ export default async function LandscapesPage() {
 
           <Suspense>
             <LandscapesFilters>
-              <p className="text-background bg-foreground p-6">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit magni porro
-                ipsum accusantium natus sunt blanditiis repudiandae, eum minus reiciendis,
-                architecto ut veritatis eius exercitationem aperiam perspiciatis qui doloribus
-                debitis?
-              </p>
+              <LandscapesFilteredList />
             </LandscapesFilters>
           </Suspense>
         </Command>

app/src/cms/utils/layer-validation.ts

@@ -19,7 +19,7 @@ export const LayerTypeValidation: CollectionBeforeValidateHook<Layer> = (args) =
       ],
     });
   }
-  console.log(data);
+
   if (data && data.type === LAYER_TYPE.CONTEXTUAL && data.indicators?.length) {
     throw new ValidationError({
       collection: "layers",

app/src/containers/landscapes/filters.tsx renamed to app/src/containers/landscapes/filters/index.tsx

@@ -10,7 +10,7 @@ import { landscapesAtom } from "@/app/(frontend)/[locale]/(app)/store";
 
 import { ScrollArea } from "@/components/ui/scroll-area";
 
-export const LandscapesFilters = ({ children }: PropsWithChildren) => {
+const LandscapesFilters = ({ children }: PropsWithChildren) => {
   const { enabled } = useAtomValue(landscapesAtom);
 
   const visible = enabled;
@@ -35,3 +35,5 @@ export const LandscapesFilters = ({ children }: PropsWithChildren) => {
     </section>
   );
 };
+
+export default LandscapesFilters;

app/src/containers/landscapes/filters/item.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import Link from "next/link";
+
+import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
+
+import { CommandItem } from "cmdk";
+
+import { Landscape } from "@/payload-types";
+
+export const LandscapesItem = (props: Landscape) => {
+  return (
+    <CommandItem
+      className="text-background data-[selected=true]:bg-accent data-[selected=true]:text-background cursor-pointer px-3 py-1 text-left transition-colors duration-150 data-[selected=true]:indent-1"
+      asChild
+    >
+      <Link className="block" href={`/landscapes/${props.id}`}>
+        {convertLexicalToPlaintext({ data: props.name })}
+      </Link>
+    </CommandItem>
+  );
+};

app/src/containers/landscapes/filters/list.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useQuery, keepPreviousData } from "@tanstack/react-query";
+import { CommandEmpty, CommandGroup, CommandList } from "cmdk";
+import { useAtomValue } from "jotai";
+import { useLocale } from "next-intl";
+import { useDebounceValue } from "usehooks-ts";
+
+import { landscapesAtom } from "@/app/(frontend)/[locale]/(app)/store";
+
+import { LandscapesItem } from "@/containers/landscapes/filters/item";
+
+import { Loader } from "@/components/ui/loader";
+
+import API from "@/services/api";
+
+export const LandscapesFilteredList = () => {
+  const locale = useLocale();
+  const landscapes = useAtomValue(landscapesAtom);
+
+  const [search] = useDebounceValue(landscapes.search, 100);
+
+  const {
+    data: landscapesData,
+    isFetched,
+    isFetching,
+  } = useQuery({
+    ...API.queryOptions("get", "/api/landscapes", {
+      params: {
+        query: {
+          depth: 1,
+          limit: 0,
+          page: 1,
+          sort: "id",
+          locale,
+          select: {
+            id: true,
+            name: true,
+          },
+          where: {
+            published: {
+              equals: true,
+            },
+            ...(!!search && {
+              "name.root.children.children.text": {
+                like: search,
+              },
+            }),
+          },
+        },
+      },
+    }),
+    placeholderData: keepPreviousData,
+  });
+
+  return (
+    <CommandList className="bg-foreground relative rounded-4xl p-6">
+      <Loader isLoading={isFetching} />
+
+      {!isFetching && isFetched && (
+        <CommandEmpty>
+          <span className="text-muted-foreground">No locations found</span>
+        </CommandEmpty>
+      )}
+
+      {!!landscapesData?.docs.length && (
+        <CommandGroup className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-bold [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:uppercase">
+          <div className="py-2">
+            {landscapesData?.docs.map((location) => (
+              <LandscapesItem key={location.id} {...location} />
+            ))}
+          </div>
+        </CommandGroup>
+      )}
+    </CommandList>
+  );
+};