From 3ac56c1ea78e33bb041eee4e1ab61cc87cf9af91 Mon Sep 17 00:00:00 2001
From: Skorpios <cosmicray23@hotmail.com>
Date: Sat, 8 Mar 2025 13:01:28 -0800
Subject: [PATCH] Made a separate tab component.

---
 .../NotificationIntegrationModal.jsx          | 68 ++-----------
 .../TabComponent.jsx                          | 97 +++++++++++++++++++
 2 files changed, 106 insertions(+), 59 deletions(-)
 create mode 100644 src/Components/NotificationIntegrationModal/TabComponent.jsx

diff --git a/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx b/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
index a2c00c882..d8955f18e 100644
--- a/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
+++ b/src/Components/NotificationIntegrationModal/NotificationIntegrationModal.jsx
@@ -10,9 +10,8 @@ import {
   Tab
 } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import TextInput from "../Inputs/TextInput";
-import Checkbox from "../Inputs/Checkbox";
 import TabPanel from "./TabPanel";
+import TabComponent from "./TabComponent";
 
 // Configuration for notification tabs
 const NOTIFICATION_TYPES = [
@@ -205,7 +204,7 @@ const NotificationIntegrationModal = ({
               onChange={handleChangeTab}
               aria-label="Notification tabs"
             >
-              {notificationTypes.map((type, index) => (
+              {notificationTypes.map((type) => (
                 <Tab key={type.id} label={type.label} orientation="vertical" />
               ))}
             </Tabs>
@@ -215,62 +214,13 @@ const NotificationIntegrationModal = ({
           <Box sx={{ flex: 1, pl: theme.spacing(7.5) }}>
             {notificationTypes.map((type, index) => (
               <TabPanel key={type.id} value={tabValue} index={index}>
-                <Typography variant="subtitle1" component="h4" sx={{ 
-                  fontWeight: 'bold',
-                  color: theme.palette.primary.contrastTextSecondary
-                }}>{type.label}</Typography>
-                <Typography sx={{ 
-                  mt: theme.spacing(0.5), 
-                  mb: theme.spacing(1.5),
-                  color: theme.palette.primary.contrastTextTertiary 
-                }}>
-                  {type.description}
-                </Typography>
-                
-                <Box sx={{ pl: theme.spacing(1.5) }}> 
-                  <Checkbox
-                    id={`enable-${type.id}`}
-                    label={`Enable ${type.label} notifications`}
-                    isChecked={integrations[type.id]}
-                    onChange={(e) => handleIntegrationChange(type.id, e.target.checked)}
-                  />
-                </Box>
-                
-                {type.fields.map(field => {
-                  const fieldKey = `${type.id}${field.id.charAt(0).toUpperCase() + field.id.slice(1)}`;
-                  
-                  return (
-                    <Box key={field.id} sx={{ mt: theme.spacing(1) }}>
-                      <Typography sx={{ 
-                        mb: theme.spacing(2), 
-                        fontWeight: 'bold',
-                        color: theme.palette.primary.contrastTextSecondary
-                      }}>{field.label}</Typography>
-                      <TextInput
-                        id={`${type.id}-${field.id}`}
-                        type={field.type}
-                        placeholder={field.placeholder}
-                        value={integrations[fieldKey]}
-                        onChange={(e) => handleInputChange(fieldKey, e.target.value)}
-                        disabled={!integrations[type.id]}
-                      />
-                    </Box>
-                  );
-                })}
-                
-                <Box sx={{ mt: theme.spacing(1) }}>
-                  <Button 
-                    variant="text" 
-                    color="info"
-                    onClick={() => handleTestNotification(type.id)}
-                    disabled={!integrations[type.id] || !type.fields.every(field => {
-                      const fieldKey = `${type.id}${field.id.charAt(0).toUpperCase() + field.id.slice(1)}`;
-                      return integrations[fieldKey];
-                    })}
-                  >
-                    Test notification
-                  </Button>
-                </Box>
+                <TabComponent
+                  type={type}
+                  integrations={integrations}
+                  handleIntegrationChange={handleIntegrationChange}
+                  handleInputChange={handleInputChange}
+                  handleTestNotification={handleTestNotification}
+                />
               </TabPanel>
             ))}
           </Box>
diff --git a/src/Components/NotificationIntegrationModal/TabComponent.jsx b/src/Components/NotificationIntegrationModal/TabComponent.jsx
new file mode 100644
index 000000000..f9cf6ab53
--- /dev/null
+++ b/src/Components/NotificationIntegrationModal/TabComponent.jsx
@@ -0,0 +1,97 @@
+import React from "react";
+import { 
+  Typography, 
+  Box,
+  Button
+} from "@mui/material";
+import { useTheme } from "@emotion/react";
+import TextInput from "../../../src/Components/Inputs/TextInput";
+import Checkbox from "../../../src/Components/Inputs/Checkbox";
+const TabComponent = ({ 
+  type, 
+  integrations, 
+  handleIntegrationChange, 
+  handleInputChange, 
+  handleTestNotification 
+}) => {
+  const theme = useTheme();
+  
+  // Helper to get the field state key (e.g., slackWebhook, telegramToken)
+  const getFieldKey = (typeId, fieldId) => {
+    return `${typeId}${fieldId.charAt(0).toUpperCase() + fieldId.slice(1)}`;
+  };
+  
+  // Check if all fields have values to enable test button
+  const areAllFieldsFilled = () => {
+    return type.fields.every(field => {
+      const fieldKey = getFieldKey(type.id, field.id);
+      return integrations[fieldKey];
+    });
+  };
+  
+  return (
+    <>
+      <Typography variant="subtitle1" component="h4" sx={{ 
+        fontWeight: 'bold',
+        color: theme.palette.primary.contrastTextSecondary
+      }}>
+        {type.label}
+      </Typography>
+      
+      <Typography sx={{ 
+        mt: theme.spacing(0.5), 
+        mb: theme.spacing(1.5),
+        color: theme.palette.primary.contrastTextTertiary 
+      }}>
+        {type.description}
+      </Typography>
+      
+      <Box sx={{ pl: theme.spacing(1.5) }}> 
+        <Checkbox
+          id={`enable-${type.id}`}
+          label={`Enable ${type.label} notifications`}
+          isChecked={integrations[type.id]}
+          onChange={(e) => handleIntegrationChange(type.id, e.target.checked)}
+        />
+      </Box>
+      
+      {type.fields.map(field => {
+        const fieldKey = getFieldKey(type.id, field.id);
+        
+        return (
+          <Box key={field.id} sx={{ mt: theme.spacing(1) }}>
+            <Typography sx={{ 
+              mb: theme.spacing(2), 
+              fontWeight: 'bold',
+              color: theme.palette.primary.contrastTextSecondary
+            }}>
+              {field.label}
+            </Typography>
+            
+            <TextInput
+              id={`${type.id}-${field.id}`}
+              type={field.type}
+              placeholder={field.placeholder}
+              value={integrations[fieldKey]}
+              onChange={(e) => handleInputChange(fieldKey, e.target.value)}
+              disabled={!integrations[type.id]}
+            />
+          </Box>
+        );
+      })}
+      
+      <Box sx={{ mt: theme.spacing(1) }}>
+        <Button 
+          variant="text" 
+          color="info"
+          onClick={() => handleTestNotification(type.id)}
+          disabled={!integrations[type.id] || !areAllFieldsFilled()}
+        >
+          Test notification
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+export default TabComponent;
\ No newline at end of file