Update server side CB example

jpmorganchase · May 8, 2024 · d8b379b · d8b379b
1 parent 2cd9de7
commit d8b379b
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 22 deletions.
diff --git a/site/docs/components/combo-box/examples.mdx b/site/docs/components/combo-box/examples.mdx
@@ -155,7 +155,7 @@ Due to its flexible API, you can customize the filtering logic `ComboBox` uses t
 
 ## Server side data
 
-You can use `ComboBox` to display data from a server. In this example, the data is fetched and filtered on the server side.
+You can use `ComboBox` to display data from a server. In this example, a list of states is fetched from a JSON file and filtered on the client side.
 
 Note that the data fetching in this example has been made intentionally slow to highlight the loading states.
 

diff --git a/site/src/examples/combo-box/ServerSideData.tsx b/site/src/examples/combo-box/ServerSideData.tsx
@@ -1,5 +1,12 @@
 import { ChangeEvent, ReactElement, SyntheticEvent, useState } from "react";
-import { ComboBox, Option, Spinner } from "@salt-ds/core";
+import {
+  ComboBox,
+  FormField,
+  FormFieldLabel,
+  FormFieldHelperText,
+  Option,
+  Spinner,
+} from "@salt-ds/core";
 import useSWR from "swr";
 import styles from "./index.module.css";
 
@@ -17,7 +24,7 @@ const fetcher = async (url: string, filter: string) => {
 export const ServerSideData = (): ReactElement => {
   const [value, setValue] = useState("");
   const { data, isLoading } = useSWR<string[]>(
-    `/example-data/states.json?s=${value}`,
+    value.length > 2 ? `/example-data/states.json?s=${value}` : null,
     (url: string) => fetcher(url, value),
     {
       fallbackData: [],
@@ -42,25 +49,42 @@ export const ServerSideData = (): ReactElement => {
     }
   };
 
+  const hasResults = Array.isArray(data) && data.length > 0;
+
   return (
-    <ComboBox
-      onChange={handleChange}
-      onSelectionChange={handleSelectionChange}
-      value={value}
-      style={{ width: "266px" }}
-      endAdornment={loading && <Spinner size="small" />}
-    >
-      {!loading ? (
-        data?.map((color) => <Option value={color} key={color} />)
-      ) : (
-        <div
-          className={styles.statusOption}
-          role="option"
-          aria-selected="false"
-        >
-          Loading...
-        </div>
-      )}
-    </ComboBox>
+    <FormField style={{ width: "266px" }}>
+      <FormFieldLabel>State</FormFieldLabel>
+      <ComboBox
+        onChange={handleChange}
+        onSelectionChange={handleSelectionChange}
+        value={value}
+        endAdornment={loading && <Spinner size="small" />}
+      >
+        {!loading && hasResults
+          ? data?.map((state) => <Option value={state} key={state} />)
+          : null}
+        {!loading && !hasResults ? (
+          <div
+            className={styles.statusOption}
+            role="option"
+            aria-selected="false"
+          >
+            No results found
+          </div>
+        ) : null}
+        {loading ? (
+          <div
+            className={styles.statusOption}
+            role="option"
+            aria-selected="false"
+          >
+            Loading...
+          </div>
+        ) : null}
+      </ComboBox>
+      <FormFieldHelperText>
+        Please enter more than 2 characters to search.
+      </FormFieldHelperText>
+    </FormField>
   );
 };