add selecting first tab on setting opening

OpenDonationAssistant · Mar 20, 2024 · 1c6eb93 · 1c6eb93
1 parent e484cc1
commit 1c6eb93
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/src/components/ConfigurationPage/WidgetSettings.ts b/src/components/ConfigurationPage/WidgetSettings.ts
@@ -326,7 +326,7 @@ class PaymentsWidgetSettings extends AbstractWidgetSettings {
 class PaymentAlertsWidgetSettings extends AbstractWidgetSettings {
   public alerts: any[];
   constructor(properties: WidgetProperty[], alerts: any[]) {
-    log.debug({ alerts: alerts}, `creating payment-alerts settings`);
+    log.debug({ alerts: alerts }, `creating payment-alerts settings`);
     super(
       properties,
       [

diff --git a/src/components/ConfigurationPage/settings/BaseSettings.tsx b/src/components/ConfigurationPage/settings/BaseSettings.tsx
@@ -11,7 +11,6 @@ export default function BaseSettings({
   propertyFilter,
 }: {
   id: string;
-  onChange: Function;
   customHandler?: Function;
   propertyFilter?: (prop: WidgetProperty) => boolean;
 }) {

diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
@@ -559,7 +559,7 @@ export default function PaymentAlertSettings({
 
   return (
     <>
-      <BaseSettings id={id} onChange={onChange} />
+      <BaseSettings id={id}/>
       {previews()}
       {selected > -1 && (
         <div className="payment-alert-settings">

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -1,6 +1,7 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { WidgetsContext } from "../ConfigurationPage/WidgetsContext";
 import classes from "./Tabs.module.css";
+import { log } from "../../logging";
 
 export default function Tabs({
   widgetId,
@@ -9,8 +10,22 @@ export default function Tabs({
   widgetId: string;
   onChange: (tab: string) => void;
 }) {
-  const [tab, setTab] = useState<string>("");
   const { config } = useContext(WidgetsContext);
+  const [tab, setTab] = useState<string>("");
+
+  useEffect(() => {
+    const settings = config.get(widgetId);
+    log.debug({settings: settings},"trying to find first tab");
+    if (!settings) {
+      return;
+    }
+    const firstTab = settings.tabDescriptions.keys().next();
+    if (firstTab) {
+      log.debug({ tab: firstTab.value }, "settings first tab");
+      onChange(firstTab.value);
+      setTab(firstTab.value);
+    }
+  },[config]);
 
   const tabs = () => {
     const settings = config.get(widgetId);