SelectApp has a SingleValue now with icon

Author: jsendo

packages/connect-react/src/components/SelectApp.tsx

@@ -6,7 +6,7 @@ import { useApps } from "../hooks/use-apps";
 import { AppResponse } from "@pipedream/sdk";
 
 type SelectAppProps = {
-  value?: Partial<AppResponse> & { name_slug: string; };
+  value?: Partial<AppResponse> & { name_slug: string; name: string; id: string };
   onChange?: (app?: AppResponse) => void;
 };
 
@@ -25,7 +25,9 @@ export function SelectApp({
   } = useApps({
     q,
   });
-  const { Option } = components;
+  console.log("apps: ", apps);
+  const { Option, SingleValue } = components;
+  const selectedValue = apps?.find((o) => o.name_slug === value?.name_slug) || null;
   return (
     <Select
       instanceId={instanceId}
@@ -52,14 +54,38 @@ export function SelectApp({
             </div>
           </Option>
         ),
+        SingleValue: (singleValueProps) => (
+          <SingleValue {...singleValueProps}>
+            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+              <img
+                src={`https://pipedream.com/s.v0/${singleValueProps.data.id}/logo/48`}
+                style={{ height: 24, width: 24 }}
+                alt={singleValueProps.data.name}
+              />
+              <span style={{ whiteSpace: "nowrap" }}>
+                {singleValueProps.data.name}
+              </span>
+            </div>
+          </SingleValue>
+        ),
         IndicatorSeparator: () => null,
       }}
       options={apps || []}
+      //options={[...(value ? [value] : []), ...apps]}
       getOptionLabel={(o) => o.name || o.name_slug} // TODO fetch initial value app so we show name
       getOptionValue={(o) => o.name_slug}
-      value={value}
-      onChange={(o) => onChange?.((o as AppResponse) || undefined)}
-      onInputChange={(v) => setQ(v)}
+      value={selectedValue}
+//      value={apps?.find((app) => app.name_slug === value?.name_slug) || null}
+      onChange={(o) => {
+        console.log("onChange", o);
+        onChange?.((o as AppResponse) || undefined)
+      }}
+      onInputChange={(v) => {
+        console.log("onInputChange", v);
+        if (v) {
+          setQ(v)
+        }
+      }}
       isLoading={isLoading}
     />
   );

packages/connect-react/src/components/SelectComponent.tsx

@@ -1,14 +1,12 @@
-import { useId } from "react";
+import { useId, useEffect } from "react";
 import Select from "react-select";
 import { useComponents } from "../hooks/use-components";
-import {
-  AppResponse, V1Component,
-} from "@pipedream/sdk";
+import { AppResponse, V1Component } from "@pipedream/sdk";
 
 type SelectComponentProps = {
-  app?: Partial<AppResponse> & { name_slug: string; };
+  app?: Partial<AppResponse> & { name_slug: string };
   componentType?: "action" | "trigger";
-  value?: Partial<V1Component> & { key: string; };
+  value?: Partial<V1Component> & { key: string };
   onChange?: (component?: V1Component) => void;
 };
 
@@ -19,21 +17,18 @@ export function SelectComponent({
   onChange,
 }: SelectComponentProps) {
   const instanceId = useId();
-  const {
-    isLoading,
-    // TODO error
-    components,
-  } = useComponents({
+  const { isLoading, components } = useComponents({
     app: app?.name_slug,
     componentType,
   });
+
   return (
     <Select
       instanceId={instanceId}
       className="react-select-container text-sm"
       classNamePrefix="react-select"
       options={components}
-      getOptionLabel={(o) => o.name || o.key} // TODO fetch default component so we show name (or just prime correctly in demo)
+      getOptionLabel={(o) => o.name || o.key}
       getOptionValue={(o) => o.key}
       value={value}
       onChange={(o) => onChange?.((o as V1Component) || undefined)}
@@ -44,3 +39,4 @@ export function SelectComponent({
     />
   );
 }
+

packages/connect-react/src/hooks/use-apps.tsx

@@ -13,10 +13,13 @@ export const useApps = (input?: GetAppsOpts) => {
       input,
     ],
     queryFn: () => client.apps(input),
+//    keepPreviousData: true,
+//    staleTime: 1000 * 60 * 5, // Cache results for 5 minutes
+//    cacheTime: 1000 * 60 * 10, // Keep cache for 10 minutes
   });
 
   return {
     ...query,
-    apps: query.data?.data,
+    apps: query.data?.data || [],
   };
 };