update search command

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/route.tsx

@@ -11,11 +11,13 @@ import {
   XIcon,
   ChevronsUpDownIcon,
   CheckIcon,
-  BookIcon
+  BookIcon,
+  ArrowDownAZIcon,
+  ArrowDownZAIcon
 } from 'lucide-react'
 import { Link, useParams, useFetcher } from 'react-router'
 import { Controller, useFieldArray, useForm } from 'react-hook-form'
-import { Fragment, use, useEffect, useMemo, useState } from 'react'
+import { Fragment, use, useEffect, useMemo, useRef, useState } from 'react'
 import { format } from 'date-fns'
 import { ptBR } from 'react-day-picker/locale'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -348,7 +350,9 @@ function FacetedFilter({
 }: FacetedFilterProps) {
   const [search, setSearch] = useState<string>('')
   const [open, { set }] = useToggle()
+  const [sort, { toggle }] = useToggle('a-z', 'z-a')
   const { hits } = use(options)
+  const listRef = useRef<HTMLDivElement | null>(null)
   const fuse = useMemo(() => {
     return new Fuse(hits, {
       keys: ['name'],
@@ -358,12 +362,13 @@ function FacetedFilter({
   }, [hits])
 
   const filtered = useMemo(() => {
-    if (!search) {
-      return hits
-    }
+    const results = !search ? hits : fuse.search(search).map(({ item }) => item)
 
-    return fuse.search(search).map(({ item }) => item)
-  }, [search, fuse, hits])
+    return results.sort((a, b) => {
+      const comparison = a.name.localeCompare(b.name)
+      return sort === 'a-z' ? comparison : -comparison
+    })
+  }, [search, fuse, hits, sort])
 
   return (
     <Popover open={open} onOpenChange={set}>
@@ -386,12 +391,27 @@ function FacetedFilter({
 
       <PopoverContent className="lg:w-84 p-0" align="start">
         <Command shouldFilter={false}>
-          <CommandInput
-            placeholder="Curso"
-            autoComplete="off"
-            onValueChange={setSearch}
-          />
-          <CommandList>
+          <div className="flex">
+            <div className="flex-1">
+              <CommandInput
+                placeholder="Curso"
+                autoComplete="off"
+                onValueChange={setSearch}
+              />
+            </div>
+            <div className="border-b flex items-center justify-end">
+              <Button
+                variant="link"
+                size="icon-sm"
+                className="cursor-pointer text-muted-foreground"
+                onClick={toggle}
+              >
+                {sort == 'a-z' ? <ArrowDownAZIcon /> : <ArrowDownZAIcon />}
+              </Button>
+            </div>
+          </div>
+          {/* Force rerender to reset the scroll position  */}
+          <CommandList key={sort}>
             <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
             <CommandGroup>
               {filtered
@@ -439,7 +459,7 @@ function FacetedFilter({
 
 interface ScheduledForInputProps {
   value?: Date
-  onChange?: (value: any) => void
+  onChange?: (value: Date | undefined) => void
 }
 
 function ScheduledForInput({ value, onChange }: ScheduledForInputProps) {
@@ -459,15 +479,17 @@ function ScheduledForInput({ value, onChange }: ScheduledForInputProps) {
             placeholder="Imediatamente"
             value={displayValue}
           />
+
           <InputGroupAddon>
             <CalendarIcon />
           </InputGroupAddon>
+
           {selected && (
             <InputGroupAddon align="inline-end" className="mr-0">
               <Button
                 variant="link"
                 size="icon-sm"
-                className="cursor-pointer text-black dark:text-white"
+                className="cursor-pointer text-muted-foreground"
                 onClick={(e) => {
                   e.preventDefault()
                   setDate(undefined)
@@ -481,11 +503,12 @@ function ScheduledForInput({ value, onChange }: ScheduledForInputProps) {
           )}
         </InputGroup>
       </PopoverTrigger>
+
       <PopoverContent className="w-full p-0" align="start">
         <Calendar
           mode="single"
           selected={selected}
-          onSelect={(date: Date) => {
+          onSelect={(date: Date | undefined) => {
             setDate(date)
             onChange?.(date)
             set(false)