✨ feat(select): implement select async

dashpresshq · Jul 1, 2024 · fadaaf0 · fadaaf0
1 parent 146d9d9
commit fadaaf0
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 21 deletions.
diff --git a/src/components/app/form/input/search.tsx b/src/components/app/form/input/search.tsx
@@ -7,12 +7,13 @@ import { Input } from "@/components/ui/input";
 interface IProps {
   onChange: (value: string) => void;
   loading?: boolean;
+  initialValue?: string;
 }
 
-export function FormSearch({ onChange, loading }: IProps) {
+export function FormSearch({ onChange, loading, initialValue }: IProps) {
   const { _ } = useLingui();
 
-  const [value, setValue] = useState("");
+  const [value, setValue] = useState(initialValue || "");
 
   return (
     <div className="relative flex w-full">

diff --git a/src/components/app/form/input/select-async.tsx b/src/components/app/form/input/select-async.tsx
@@ -34,27 +34,30 @@ export function AsyncFormSelect(props: IProps) {
 
   const currentLabelFromSelection = useMemo(() => {
     const isValueInFirstDataLoad = fullData.data.find(
-      ({ value }: ISelectData) => value === input.value
+      ({ value }: ISelectData) => String(value) === String(input.value)
     );
 
     if (isValueInFirstDataLoad) {
       return _(isValueInFirstDataLoad.label);
     }
 
     const isValueInSelectionOptions = selectOptions.data.find(
-      ({ value }: ISelectData) => value === input.value
+      ({ value }: ISelectData) => String(value) === String(input.value)
     );
 
     if (isValueInSelectionOptions) {
       return _(isValueInSelectionOptions.label);
     }
 
     return undefined;
-  }, [url, fullData.isLoading]);
+  }, [url, fullData, selectOptions, input.value]);
 
   const referenceLabel = useApi(referenceUrl?.(input.value), {
     defaultData: "",
-    enabled: !!referenceUrl && !!input.value && !currentLabelFromSelection,
+    enabled:
+      !!referenceUrl &&
+      !!input.value &&
+      !(currentLabelFromSelection || fullData.isLoading),
   });
 
   useDebounce(
@@ -69,22 +72,25 @@ export function AsyncFormSelect(props: IProps) {
     return <ErrorAlert message={fullData.error || selectOptions.error} />;
   }
 
+  const isLoading = selectOptions.isLoading || fullData.isLoading;
+
   if (fullData.data.length >= limit) {
     return (
       <FormSelect
         {...props}
         selectData={selectOptions.data}
+        isLoading={isLoading}
         onSearch={{
           isLoading: selectOptions.isLoading,
           onChange: setSearch,
           value: search,
-          valueLabel: referenceLabel.data
-            ? referenceLabel.data
-            : currentLabelFromSelection,
+          valueLabel: currentLabelFromSelection || referenceLabel.data,
         }}
       />
     );
   }
 
-  return <FormSelect {...props} selectData={fullData.data} />;
+  return (
+    <FormSelect {...props} selectData={fullData.data} isLoading={isLoading} />
+  );
 }
diff --git a/src/components/app/form/input/select.tsx b/src/components/app/form/input/select.tsx
@@ -13,6 +13,7 @@ import { IBaseFormSelect } from "@/frontend/design-system/components/Form/Select
 interface IFormSelect extends IBaseFormSelect {
   selectData: ISelectData[];
   onSearch?: ISelectProps["onSearch"];
+  isLoading?: boolean;
 }
 
 export function FormSelect(formInput: IFormSelect) {
@@ -23,7 +24,7 @@ export function FormSelect(formInput: IFormSelect) {
     disabled,
     label: formLabel,
     disabledOptions,
-    placeholder,
+    isLoading,
     onSearch,
   } = formInput;
   const { _ } = useLingui();
@@ -34,11 +35,11 @@ export function FormSelect(formInput: IFormSelect) {
         {...input}
         {...generateFormArias(meta)}
         className={generateClassNames(meta)}
+        isLoading={isLoading}
         options={selectData}
-        placeholder={
-          placeholder ||
-          fakeMessageDescriptor(`--- ${_(msg`Select ${_(formLabel)}`)} ---`)
-        }
+        placeholder={fakeMessageDescriptor(
+          `--- ${_(msg`Select ${_(formLabel)}`)} ---`
+        )}
         disabled={disabled}
         disabledOptions={disabledOptions}
         onSearch={onSearch}

diff --git a/src/components/app/table/filters/Date/index.tsx b/src/components/app/table/filters/Date/index.tsx
@@ -37,7 +37,6 @@ export function FilterTableByDate({
       />
       {new Date(filterValue?.value || "").toString() !== "Invalid Date" ? (
         <>
-          {/* TODO date not changing */}
           <ControlledFormDateInput
             onChange={(value) => {
               setFilter({

diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
@@ -10,29 +10,39 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 
 import { useLingui } from "@lingui/react";
 import { MessageDescriptor } from "@lingui/core";
+import { Loader } from "react-feather";
+import { msg } from "@lingui/macro";
 import { cn } from "@/lib/utils";
 import { ISelectData } from "@/shared/types/options";
 import { FormSearch } from "../app/form/input/search";
+import { EmptyWrapper } from "../app/empty-wrapper";
+import { ListSkeleton } from "../app/skeleton/list";
 
 const SelectRoot = SelectPrimitive.Root;
 
 const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    isLoading?: boolean;
+  }
+>(({ className, children, isLoading, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between font-normal whitespace-nowrap rounded-md border border-border bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-base placeholder:text-muted focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:bg-soft [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between font-normal whitespace-nowrap rounded-md border border-border bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-base data-[placeholder]:text-muted focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:bg-soft [&>span]:line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
+      {isLoading ? (
+        <Loader className="animate-spin h-4 w-4 opacity-50" />
+      ) : (
+        <CaretSortIcon className="h-4 w-4 opacity-50" />
+      )}
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -160,6 +170,7 @@ export interface ISelectProps {
   placeholder: MessageDescriptor;
   disabled?: boolean;
   disabledOptions?: Array<string>;
+  isLoading?: boolean;
   onSearch?: {
     onChange: (value: string) => void;
     value: string;
@@ -172,6 +183,7 @@ export function Select({
   onChange,
   options,
   disabled,
+  isLoading,
   value,
   name,
   placeholder,
@@ -181,7 +193,9 @@ export function Select({
 }: ISelectProps) {
   const { _ } = useLingui();
 
-  const valueLabel = options.find((option) => option.value === value)?.label;
+  const valueLabel = options.find(
+    (option) => String(option.value) === String(value)
+  )?.label;
 
   return (
     <SelectRoot onValueChange={onChange} value={value}>
@@ -190,6 +204,7 @@ export function Select({
         name={name}
         id={name}
         disabled={disabled}
+        isLoading={isLoading}
       >
         <SelectValue placeholder={_(placeholder)}>
           {onSearch?.valueLabel || (valueLabel ? _(valueLabel) : null)}
@@ -199,11 +214,16 @@ export function Select({
         {onSearch && (
           <div className="mb-1">
             <FormSearch
+              initialValue={onSearch.value}
               onChange={onSearch.onChange}
               loading={onSearch.isLoading}
             />
           </div>
         )}
+        {onSearch?.value && options.length === 0 && !onSearch?.isLoading && (
+          <EmptyWrapper text={msg`No Search Results`} />
+        )}
+        {onSearch?.isLoading && <ListSkeleton count={10} />}
         {options.map(({ value: value$1, label }) => (
           <SelectItem
             key={`${value$1}`}