alexhancock/remove-settings-v1 (#2744)

Co-authored-by: Zane Staggs <zane@squareup.com>
2025-06-02 14:04:57 -04:00
parent abee0000c2
commit a89fa18502
139 changed files with 324 additions and 4300 deletions
@@ -0,0 +1,113 @@
+import React, { memo, useMemo, useCallback } from 'react';
+import { ProviderCard } from './subcomponents/ProviderCard';
+import { ProviderModalProvider, useProviderModal } from './modal/ProviderModalProvider';
+import ProviderConfigurationModal from './modal/ProviderConfiguationModal';
+import { ProviderDetails } from '../../../api';
+
+const GridLayout = memo(function GridLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-[repeat(auto-fill,_minmax(140px,_1fr))] gap-3 [&_*]:z-20">
+      {children}
+    </div>
+  );
+});
+
+// Memoize the ProviderCards component
+const ProviderCards = memo(function ProviderCards({
+  providers,
+  isOnboarding,
+  refreshProviders,
+  onProviderLaunch,
+}: {
+  providers: ProviderDetails[];
+  isOnboarding: boolean;
+  refreshProviders?: () => void;
+  onProviderLaunch: (provider: ProviderDetails) => void;
+}) {
+  const { openModal } = useProviderModal();
+
+  // Memoize these functions so they don't get recreated on every render
+  const configureProviderViaModal = useCallback(
+    (provider: ProviderDetails) => {
+      openModal(provider, {
+        onSubmit: () => {
+          // Only refresh if the function is provided
+          if (refreshProviders) {
+            refreshProviders();
+          }
+        },
+        formProps: {},
+      });
+    },
+    [openModal, refreshProviders]
+  );
+
+  const deleteProviderConfigViaModal = useCallback(
+    (provider: ProviderDetails) => {
+      openModal(provider, {
+        onDelete: () => {
+          // Only refresh if the function is provided
+          if (refreshProviders) {
+            refreshProviders();
+          }
+        },
+        formProps: {},
+      });
+    },
+    [openModal, refreshProviders]
+  );
+
+  // We don't need an intermediate function here
+  // Just pass the onProviderLaunch directly
+
+  // Use useMemo to memoize the cards array
+  const providerCards = useMemo(() => {
+    return providers.map((provider) => (
+      <ProviderCard
+        key={provider.name}
+        provider={provider}
+        onConfigure={() => configureProviderViaModal(provider)}
+        onDelete={() => deleteProviderConfigViaModal(provider)}
+        onLaunch={() => onProviderLaunch(provider)}
+        isOnboarding={isOnboarding}
+      />
+    ));
+  }, [
+    providers,
+    isOnboarding,
+    configureProviderViaModal,
+    deleteProviderConfigViaModal,
+    onProviderLaunch,
+  ]);
+
+  return <>{providerCards}</>;
+});
+
+export default memo(function ProviderGrid({
+  providers,
+  isOnboarding,
+  refreshProviders,
+  onProviderLaunch,
+}: {
+  providers: ProviderDetails[];
+  isOnboarding: boolean;
+  refreshProviders?: () => void;
+  onProviderLaunch?: (provider: ProviderDetails) => void;
+}) {
+  // Memoize the modal provider and its children to avoid recreating on every render
+  const modalProviderContent = useMemo(
+    () => (
+      <ProviderModalProvider>
+        <ProviderCards
+          providers={providers}
+          isOnboarding={isOnboarding}
+          refreshProviders={refreshProviders}
+          onProviderLaunch={onProviderLaunch || (() => {})}
+        />
+        <ProviderConfigurationModal />
+      </ProviderModalProvider>
+    ),
+    [providers, isOnboarding, refreshProviders, onProviderLaunch]
+  );
+  return <GridLayout>{modalProviderContent}</GridLayout>;
+});