From 83fe6af5c3a2294cae725cdb345219359b0df0e8 Mon Sep 17 00:00:00 2001 From: Rohit Date: Wed, 26 Feb 2025 23:53:51 +0530 Subject: [PATCH] feat: rt rendering --- .../integration/IntegrationSettings.tsx | 234 +++++++++++------- 1 file changed, 138 insertions(+), 96 deletions(-) diff --git a/src/components/integration/IntegrationSettings.tsx b/src/components/integration/IntegrationSettings.tsx index 37e04a66..30e14f98 100644 --- a/src/components/integration/IntegrationSettings.tsx +++ b/src/components/integration/IntegrationSettings.tsx @@ -17,11 +17,13 @@ import { apiUrl } from "../../apiConfig.js"; import Cookies from "js-cookie"; import { useTranslation } from "react-i18next"; +import { useNavigate } from "react-router-dom"; interface IntegrationProps { isOpen: boolean; handleStart: (data: IntegrationSettings) => void; handleClose: () => void; + preSelectedIntegrationType?: "googleSheets" | "airtable" | null; } export interface IntegrationSettings { @@ -33,10 +35,8 @@ export interface IntegrationSettings { airtableTableId?: string, data: string; integrationType: "googleSheets" | "airtable"; - } - const getCookie = (name: string): string | null => { const value = `; ${document.cookie}`; const parts = value.split(`; ${name}=`); @@ -50,11 +50,11 @@ const removeCookie = (name: string): void => { document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`; }; - export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose, + preSelectedIntegrationType = null, }: IntegrationProps) => { const { t } = useTranslation(); const [settings, setSettings] = useState({ @@ -64,10 +64,8 @@ export const IntegrationSettingsModal = ({ airtableBaseName: "", airtableTableName: "", airtableTableId: "", - data: "", - integrationType: "googleSheets", - + integrationType: preSelectedIntegrationType || "googleSheets", }); const [spreadsheets, setSpreadsheets] = useState<{ id: string; name: string }[]>([]); @@ -76,12 +74,19 @@ export const IntegrationSettingsModal = ({ const [loading, setLoading] = useState(false); const [error, setError] = useState(null); - const { recordingId, notify } = useGlobalInfoStore(); + const { + recordingId, + notify, + setRerenderRobots + } = useGlobalInfoStore(); + const [recording, setRecording] = useState(null); + const navigate = useNavigate(); - const [airtableAuthStatus, setAirtableAuthStatus] = useState(null); + const [selectedIntegrationType, setSelectedIntegrationType] = useState< + "googleSheets" | "airtable" | null + >(preSelectedIntegrationType); - // Authenticate with Google Sheets const authenticateWithGoogle = () => { window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`; }; @@ -100,6 +105,7 @@ export const IntegrationSettingsModal = ({ ); setSpreadsheets(response.data); } catch (error: any) { + setLoading(false); console.error("Error fetching spreadsheet files:", error); notify("error", t("integration_settings.google.errors.fetch_error", { message: error.response?.data?.message || error.message, @@ -116,6 +122,7 @@ export const IntegrationSettingsModal = ({ ); setAirtableBases(response.data); } catch (error: any) { + setLoading(false); console.error("Error fetching Airtable bases:", error); notify("error", t("integration_settings.airtable.errors.fetch_error", { message: error.response?.data?.message || error.message, @@ -123,7 +130,6 @@ export const IntegrationSettingsModal = ({ } }; - const fetchAirtableTables = async (baseId: string, recordingId: string) => { try { const response = await axios.get( @@ -133,6 +139,7 @@ export const IntegrationSettingsModal = ({ setAirtableTables(response.data); } catch (error: any) { + setLoading(false); console.error("Error fetching Airtable tables:", error); notify("error", t("integration_settings.airtable.errors.fetch_tables_error", { message: error.response?.data?.message || error.message, @@ -155,17 +162,14 @@ export const IntegrationSettingsModal = ({ // Handle Airtable base selection const handleAirtableBaseSelect = async (e: React.ChangeEvent) => { const selectedBase = airtableBases.find((base) => base.id === e.target.value); - console.log(selectedBase); if (selectedBase) { - // Update local state setSettings((prevSettings) => ({ ...prevSettings, airtableBaseId: selectedBase.id, airtableBaseName: selectedBase.name, })); - // Fetch tables for the selected base if (recordingId) { await fetchAirtableTables(selectedBase.id, recordingId); } else { @@ -175,7 +179,6 @@ export const IntegrationSettingsModal = ({ }; const handleAirtabletableSelect = (e: React.ChangeEvent) => { - console.log( e.target.value); const selectedTable = airtableTables.find((table) => table.id === e.target.value); if (selectedTable) { setSettings((prevSettings) => ({ @@ -186,11 +189,17 @@ export const IntegrationSettingsModal = ({ } }; + const refreshRecordingData = async () => { + if (!recordingId) return null; + const updatedRecording = await getStoredRecording(recordingId); + setRecording(updatedRecording); + setRerenderRobots(true); + return updatedRecording; + }; - - // Update Google Sheets integration const updateGoogleSheetId = async () => { try { + setLoading(true); await axios.post( `${apiUrl}/auth/gsheets/update`, { @@ -200,8 +209,14 @@ export const IntegrationSettingsModal = ({ }, { withCredentials: true } ); + + // Refresh recording data immediately + await refreshRecordingData(); + notify("success", t("integration_settings.google.notifications.sheet_selected")); + setLoading(false); } catch (error: any) { + setLoading(false); console.error("Error updating Google Sheet ID:", error); notify("error", t("integration_settings.google.errors.update_error", { message: error.response?.data?.message || error.message, @@ -212,6 +227,7 @@ export const IntegrationSettingsModal = ({ // Update Airtable integration const updateAirtableBase = async () => { try { + setLoading(true); await axios.post( `${apiUrl}/auth/airtable/update`, { @@ -223,8 +239,14 @@ export const IntegrationSettingsModal = ({ }, { withCredentials: true } ); + + // Refresh recording data immediately + await refreshRecordingData(); + notify("success", t("integration_settings.airtable.notifications.base_selected")); + setLoading(false); } catch (error: any) { + setLoading(false); console.error("Error updating Airtable base:", error); notify("error", t("integration_settings.airtable.errors.update_error", { message: error.response?.data?.message || error.message, @@ -235,15 +257,24 @@ export const IntegrationSettingsModal = ({ // Remove Google Sheets integration const removeGoogleSheetsIntegration = async () => { try { + setLoading(true); await axios.post( `${apiUrl}/auth/gsheets/remove`, { robotId: recordingId }, { withCredentials: true } ); + + // Clear UI state setSpreadsheets([]); setSettings({ ...settings, spreadsheetId: "", spreadsheetName: "" }); + + // Refresh recording data + await refreshRecordingData(); + notify("success", t("integration_settings.google.notifications.integration_removed")); + setLoading(false); } catch (error: any) { + setLoading(false); console.error("Error removing Google Sheets integration:", error); notify("error", t("integration_settings.google.errors.remove_error", { message: error.response?.data?.message || error.message, @@ -251,19 +282,28 @@ export const IntegrationSettingsModal = ({ } }; - // Remove Airtable integration const removeAirtableIntegration = async () => { try { + setLoading(true); await axios.post( `${apiUrl}/auth/airtable/remove`, { robotId: recordingId }, { withCredentials: true } ); + + // Clear UI state setAirtableBases([]); - setSettings({ ...settings, airtableBaseId: "", airtableBaseName: "", airtableTableName:"" }); + setAirtableTables([]); + setSettings({ ...settings, airtableBaseId: "", airtableBaseName: "", airtableTableName:"", airtableTableId: "" }); + + // Refresh recording data + await refreshRecordingData(); + notify("success", t("integration_settings.airtable.notifications.integration_removed")); + setLoading(false); } catch (error: any) { + setLoading(false); console.error("Error removing Airtable integration:", error); notify("error", t("integration_settings.airtable.errors.remove_error", { message: error.response?.data?.message || error.message, @@ -276,48 +316,57 @@ export const IntegrationSettingsModal = ({ try { const response = await axios.get(`${apiUrl}/auth/airtable/callback`); if (response.data.success) { - setAirtableAuthStatus(true); - fetchAirtableBases(); // Fetch bases after successful authentication + await refreshRecordingData(); } } catch (error) { setError(t("integration_settings.airtable.errors.auth_error")); } }; - // Fetch recording info on component mount + // Fetch recording info on component mount and when recordingId changes useEffect(() => { const fetchRecordingInfo = async () => { if (!recordingId) return; + + console.log("Fetching recording info for ID:", recordingId); + setLoading(true); + const recording = await getStoredRecording(recordingId); if (recording) { + console.log("Recording fetched:", recording); setRecording(recording); + + // Update settings based on existing integrations if (recording.google_sheet_id) { - setSettings({ ...settings, integrationType: "googleSheets" }); + setSettings(prev => ({ ...prev, integrationType: "googleSheets" })); } else if (recording.airtable_base_id) { setSettings(prev => ({ ...prev, airtableBaseId: recording.airtable_base_id || "", airtableBaseName: recording.airtable_base_name || "", airtableTableName: recording.airtable_table_name || "", + airtableTableId: recording.airtable_table_id || "", integrationType: recording.airtable_base_id ? "airtable" : "googleSheets" })); } } + + setLoading(false); }; + fetchRecordingInfo(); - }, [recordingId]); + }, [recordingId, preSelectedIntegrationType]); - // Handle Airtable authentication status + // Handle Airtable authentication cookies useEffect(() => { const status = getCookie("airtable_auth_status"); const message = getCookie("airtable_auth_message"); - if (status === "success" && message) { - notify("success", message); + if (status === "success") { + notify("success", message || t("integration_settings.airtable.notifications.auth_success")); removeCookie("airtable_auth_status"); removeCookie("airtable_auth_message"); - setAirtableAuthStatus(true); - fetchAirtableBases(); // Fetch bases after successful authentication + refreshRecordingData(); } const urlParams = new URLSearchParams(window.location.search); @@ -325,64 +374,57 @@ export const IntegrationSettingsModal = ({ if (code) { handleAirtableOAuthCallback(); } - }, [recordingId]); + }, []); - console.log(recording) + // Add this UI at the top of the modal return statement + if (!selectedIntegrationType) { + return ( + +
+ + {t("integration_settings.title_select_integration")} + +
+ {/* Google Sheets Button */} + - - const [selectedIntegrationType, setSelectedIntegrationType] = useState< - "googleSheets" | "airtable" | null ->(null); - -// Add this UI at the top of the modal return statement -if (!selectedIntegrationType) { - return ( - -
- - {t("integration_settings.title_select_integration")} - -
- {/* Google Sheets Button */} - - - {/* Airtable Button */} - + {/* Airtable Button */} + +
-
- - ); -} - + + ); + } - return (
- {t("integration_settings.google.buttons.remove_integration")} + {loading ? : t("integration_settings.google.buttons.remove_integration")} ) : ( @@ -432,8 +475,9 @@ if (!selectedIntegrationType) { variant="contained" color="primary" onClick={authenticateWithGoogle} + disabled={loading} > - {t("integration_settings.google.buttons.authenticate")} + {loading ? : t("integration_settings.google.buttons.authenticate")} ) : ( @@ -452,6 +496,7 @@ if (!selectedIntegrationType) { variant="outlined" color="primary" onClick={fetchSpreadsheetFiles} + disabled={loading} > {t("integration_settings.google.buttons.fetch_sheets")} @@ -475,14 +520,11 @@ if (!selectedIntegrationType) { )} @@ -521,8 +563,9 @@ if (!selectedIntegrationType) { color="error" onClick={removeAirtableIntegration} style={{ marginTop: "15px" }} + disabled={loading} > - {t("integration_settings.airtable.buttons.remove_integration")} + {loading ? : t("integration_settings.airtable.buttons.remove_integration")} ) : ( @@ -534,8 +577,9 @@ if (!selectedIntegrationType) { variant="contained" color="primary" onClick={authenticateWithAirtable} + disabled={loading} > - {t("integration_settings.airtable.buttons.authenticate")} + {loading ? : t("integration_settings.airtable.buttons.authenticate")} ) : ( @@ -552,6 +596,7 @@ if (!selectedIntegrationType) { variant="outlined" color="primary" onClick={fetchAirtableBases} + disabled={loading} > {t("integration_settings.airtable.buttons.fetch_bases")} @@ -590,14 +635,11 @@ if (!selectedIntegrationType) { )}