vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: rt rendering

Browse Source
This commit is contained in:
Rohit
2025-02-26 23:53:51 +05:30
parent e6d1476383
commit 83fe6af5c3
1 changed files with 138 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

234
src/components/integration/IntegrationSettings.tsx
View File

@@ -17,11 +17,13 @@ import { apiUrl } from "../../apiConfig.js";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
interface IntegrationProps { interface IntegrationProps {
isOpen: boolean; isOpen: boolean;
handleStart: (data: IntegrationSettings) => void; handleStart: (data: IntegrationSettings) => void;
handleClose: () => void; handleClose: () => void;
preSelectedIntegrationType?: "googleSheets" | "airtable" | null;
} }
export interface IntegrationSettings { export interface IntegrationSettings {
@@ -33,10 +35,8 @@ export interface IntegrationSettings {
airtableTableId?: string, airtableTableId?: string,
data: string; data: string;
integrationType: "googleSheets" | "airtable"; integrationType: "googleSheets" | "airtable";
} }
const getCookie = (name: string): string | null => { const getCookie = (name: string): string | null => {
const value = `; ${document.cookie}`; const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`); 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=/`; document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
}; };
export const IntegrationSettingsModal = ({ export const IntegrationSettingsModal = ({
isOpen, isOpen,
handleStart, handleStart,
handleClose, handleClose,
preSelectedIntegrationType = null,
}: IntegrationProps) => { }: IntegrationProps) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [settings, setSettings] = useState<IntegrationSettings>({ const [settings, setSettings] = useState<IntegrationSettings>({
@@ -64,10 +64,8 @@ export const IntegrationSettingsModal = ({
airtableBaseName: "", airtableBaseName: "",
airtableTableName: "", airtableTableName: "",
airtableTableId: "", airtableTableId: "",
data: "", data: "",
integrationType: "googleSheets", integrationType: preSelectedIntegrationType || "googleSheets",
}); });
const [spreadsheets, setSpreadsheets] = useState<{ id: string; name: string }[]>([]); const [spreadsheets, setSpreadsheets] = useState<{ id: string; name: string }[]>([]);
@@ -76,12 +74,19 @@ export const IntegrationSettingsModal = ({
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const { recordingId, notify } = useGlobalInfoStore(); const {
recordingId,
notify,
setRerenderRobots
} = useGlobalInfoStore();
const [recording, setRecording] = useState<any>(null); const [recording, setRecording] = useState<any>(null);
const navigate = useNavigate();
const [airtableAuthStatus, setAirtableAuthStatus] = useState<boolean | null>(null); const [selectedIntegrationType, setSelectedIntegrationType] = useState<
"googleSheets" | "airtable" | null
>(preSelectedIntegrationType);
// Authenticate with Google Sheets
const authenticateWithGoogle = () => { const authenticateWithGoogle = () => {
window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`; window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`;
}; };
@@ -100,6 +105,7 @@ export const IntegrationSettingsModal = ({
); );
setSpreadsheets(response.data); setSpreadsheets(response.data);
} catch (error: any) { } catch (error: any) {
setLoading(false);
console.error("Error fetching spreadsheet files:", error); console.error("Error fetching spreadsheet files:", error);
notify("error", t("integration_settings.google.errors.fetch_error", { notify("error", t("integration_settings.google.errors.fetch_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
@@ -116,6 +122,7 @@ export const IntegrationSettingsModal = ({
); );
setAirtableBases(response.data); setAirtableBases(response.data);
} catch (error: any) { } catch (error: any) {
setLoading(false);
console.error("Error fetching Airtable bases:", error); console.error("Error fetching Airtable bases:", error);
notify("error", t("integration_settings.airtable.errors.fetch_error", { notify("error", t("integration_settings.airtable.errors.fetch_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
@@ -123,7 +130,6 @@ export const IntegrationSettingsModal = ({
} }
}; };
const fetchAirtableTables = async (baseId: string, recordingId: string) => { const fetchAirtableTables = async (baseId: string, recordingId: string) => {
try { try {
const response = await axios.get( const response = await axios.get(
@@ -133,6 +139,7 @@ export const IntegrationSettingsModal = ({
setAirtableTables(response.data); setAirtableTables(response.data);
} }
catch (error: any) { catch (error: any) {
setLoading(false);
console.error("Error fetching Airtable tables:", error); console.error("Error fetching Airtable tables:", error);
notify("error", t("integration_settings.airtable.errors.fetch_tables_error", { notify("error", t("integration_settings.airtable.errors.fetch_tables_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
@@ -155,17 +162,14 @@ export const IntegrationSettingsModal = ({
// Handle Airtable base selection // Handle Airtable base selection
const handleAirtableBaseSelect = async (e: React.ChangeEvent<HTMLInputElement>) => { const handleAirtableBaseSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
const selectedBase = airtableBases.find((base) => base.id === e.target.value); const selectedBase = airtableBases.find((base) => base.id === e.target.value);
console.log(selectedBase);
if (selectedBase) { if (selectedBase) {
// Update local state
setSettings((prevSettings) => ({ setSettings((prevSettings) => ({
...prevSettings, ...prevSettings,
airtableBaseId: selectedBase.id, airtableBaseId: selectedBase.id,
airtableBaseName: selectedBase.name, airtableBaseName: selectedBase.name,
})); }));
// Fetch tables for the selected base
if (recordingId) { if (recordingId) {
await fetchAirtableTables(selectedBase.id, recordingId); await fetchAirtableTables(selectedBase.id, recordingId);
} else { } else {
@@ -175,7 +179,6 @@ export const IntegrationSettingsModal = ({
}; };
const handleAirtabletableSelect = (e: React.ChangeEvent<HTMLInputElement>) => { const handleAirtabletableSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
console.log( e.target.value);
const selectedTable = airtableTables.find((table) => table.id === e.target.value); const selectedTable = airtableTables.find((table) => table.id === e.target.value);
if (selectedTable) { if (selectedTable) {
setSettings((prevSettings) => ({ 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 () => { const updateGoogleSheetId = async () => {
try { try {
setLoading(true);
await axios.post( await axios.post(
`${apiUrl}/auth/gsheets/update`, `${apiUrl}/auth/gsheets/update`,
{ {
@@ -200,8 +209,14 @@ export const IntegrationSettingsModal = ({
}, },
{ withCredentials: true } { withCredentials: true }
); );
// Refresh recording data immediately
await refreshRecordingData();
notify("success", t("integration_settings.google.notifications.sheet_selected")); notify("success", t("integration_settings.google.notifications.sheet_selected"));
setLoading(false);
} catch (error: any) { } catch (error: any) {
setLoading(false);
console.error("Error updating Google Sheet ID:", error); console.error("Error updating Google Sheet ID:", error);
notify("error", t("integration_settings.google.errors.update_error", { notify("error", t("integration_settings.google.errors.update_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
@@ -212,6 +227,7 @@ export const IntegrationSettingsModal = ({
// Update Airtable integration // Update Airtable integration
const updateAirtableBase = async () => { const updateAirtableBase = async () => {
try { try {
setLoading(true);
await axios.post( await axios.post(
`${apiUrl}/auth/airtable/update`, `${apiUrl}/auth/airtable/update`,
{ {
@@ -223,8 +239,14 @@ export const IntegrationSettingsModal = ({
}, },
{ withCredentials: true } { withCredentials: true }
); );
// Refresh recording data immediately
await refreshRecordingData();
notify("success", t("integration_settings.airtable.notifications.base_selected")); notify("success", t("integration_settings.airtable.notifications.base_selected"));
setLoading(false);
} catch (error: any) { } catch (error: any) {
setLoading(false);
console.error("Error updating Airtable base:", error); console.error("Error updating Airtable base:", error);
notify("error", t("integration_settings.airtable.errors.update_error", { notify("error", t("integration_settings.airtable.errors.update_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
@@ -235,15 +257,24 @@ export const IntegrationSettingsModal = ({
// Remove Google Sheets integration // Remove Google Sheets integration
const removeGoogleSheetsIntegration = async () => { const removeGoogleSheetsIntegration = async () => {
try { try {
setLoading(true);
await axios.post( await axios.post(
`${apiUrl}/auth/gsheets/remove`, `${apiUrl}/auth/gsheets/remove`,
{ robotId: recordingId }, { robotId: recordingId },
{ withCredentials: true } { withCredentials: true }
); );
// Clear UI state
setSpreadsheets([]); setSpreadsheets([]);
setSettings({ ...settings, spreadsheetId: "", spreadsheetName: "" }); setSettings({ ...settings, spreadsheetId: "", spreadsheetName: "" });
// Refresh recording data
await refreshRecordingData();
notify("success", t("integration_settings.google.notifications.integration_removed")); notify("success", t("integration_settings.google.notifications.integration_removed"));
setLoading(false);
} catch (error: any) { } catch (error: any) {
setLoading(false);
console.error("Error removing Google Sheets integration:", error); console.error("Error removing Google Sheets integration:", error);
notify("error", t("integration_settings.google.errors.remove_error", { notify("error", t("integration_settings.google.errors.remove_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
@@ -251,19 +282,28 @@ export const IntegrationSettingsModal = ({
} }
}; };
// Remove Airtable integration // Remove Airtable integration
const removeAirtableIntegration = async () => { const removeAirtableIntegration = async () => {
try { try {
setLoading(true);
await axios.post( await axios.post(
`${apiUrl}/auth/airtable/remove`, `${apiUrl}/auth/airtable/remove`,
{ robotId: recordingId }, { robotId: recordingId },
{ withCredentials: true } { withCredentials: true }
); );
// Clear UI state
setAirtableBases([]); 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")); notify("success", t("integration_settings.airtable.notifications.integration_removed"));
setLoading(false);
} catch (error: any) { } catch (error: any) {
setLoading(false);
console.error("Error removing Airtable integration:", error); console.error("Error removing Airtable integration:", error);
notify("error", t("integration_settings.airtable.errors.remove_error", { notify("error", t("integration_settings.airtable.errors.remove_error", {
message: error.response?.data?.message || error.message, message: error.response?.data?.message || error.message,
@@ -276,48 +316,57 @@ export const IntegrationSettingsModal = ({
try { try {
const response = await axios.get(`${apiUrl}/auth/airtable/callback`); const response = await axios.get(`${apiUrl}/auth/airtable/callback`);
if (response.data.success) { if (response.data.success) {
setAirtableAuthStatus(true); await refreshRecordingData();
fetchAirtableBases(); // Fetch bases after successful authentication
} }
} catch (error) { } catch (error) {
setError(t("integration_settings.airtable.errors.auth_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(() => { useEffect(() => {
const fetchRecordingInfo = async () => { const fetchRecordingInfo = async () => {
if (!recordingId) return; if (!recordingId) return;
console.log("Fetching recording info for ID:", recordingId);
setLoading(true);
const recording = await getStoredRecording(recordingId); const recording = await getStoredRecording(recordingId);
if (recording) { if (recording) {
console.log("Recording fetched:", recording);
setRecording(recording); setRecording(recording);
// Update settings based on existing integrations
if (recording.google_sheet_id) { if (recording.google_sheet_id) {
setSettings({ ...settings, integrationType: "googleSheets" }); setSettings(prev => ({ ...prev, integrationType: "googleSheets" }));
} else if (recording.airtable_base_id) { } else if (recording.airtable_base_id) {
setSettings(prev => ({ setSettings(prev => ({
...prev, ...prev,
airtableBaseId: recording.airtable_base_id || "", airtableBaseId: recording.airtable_base_id || "",
airtableBaseName: recording.airtable_base_name || "", airtableBaseName: recording.airtable_base_name || "",
airtableTableName: recording.airtable_table_name || "", airtableTableName: recording.airtable_table_name || "",
airtableTableId: recording.airtable_table_id || "",
integrationType: recording.airtable_base_id ? "airtable" : "googleSheets" integrationType: recording.airtable_base_id ? "airtable" : "googleSheets"
})); }));
} }
} }
setLoading(false);
}; };
fetchRecordingInfo(); fetchRecordingInfo();
}, [recordingId]); }, [recordingId, preSelectedIntegrationType]);
// Handle Airtable authentication status // Handle Airtable authentication cookies
useEffect(() => { useEffect(() => {
const status = getCookie("airtable_auth_status"); const status = getCookie("airtable_auth_status");
const message = getCookie("airtable_auth_message"); const message = getCookie("airtable_auth_message");
if (status === "success" && message) { if (status === "success") {
notify("success", message); notify("success", message || t("integration_settings.airtable.notifications.auth_success"));
removeCookie("airtable_auth_status"); removeCookie("airtable_auth_status");
removeCookie("airtable_auth_message"); removeCookie("airtable_auth_message");
setAirtableAuthStatus(true); refreshRecordingData();
fetchAirtableBases(); // Fetch bases after successful authentication
} }
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
@@ -325,64 +374,57 @@ export const IntegrationSettingsModal = ({
if (code) { if (code) {
handleAirtableOAuthCallback(); handleAirtableOAuthCallback();
} }
}, [recordingId]); }, []);
console.log(recording) // Add this UI at the top of the modal return statement
if (!selectedIntegrationType) {
return (
<GenericModal
isOpen={isOpen}
onClose={handleClose}
modalStyle={modalStyle}
>
<div style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: "20px"
}}>
<Typography variant="h6" sx={{ marginBottom: "20px" }}>
{t("integration_settings.title_select_integration")}
</Typography>
<div style={{ display: "flex", gap: "20px" }}>
{/* Google Sheets Button */}
<Button
variant="contained"
color="primary"
onClick={() => {
setSelectedIntegrationType("googleSheets");
setSettings({ ...settings, integrationType: "googleSheets" });
navigate(`/robots/${recordingId}/integrate/google`);
}}
>
Google Sheets
</Button>
{/* Airtable Button */}
const [selectedIntegrationType, setSelectedIntegrationType] = useState< <Button
"googleSheets" | "airtable" | null variant="contained"
>(null); color="primary"
onClick={() => {
// Add this UI at the top of the modal return statement setSelectedIntegrationType("airtable");
if (!selectedIntegrationType) { setSettings({ ...settings, integrationType: "airtable" });
return ( navigate(`/robots/${recordingId}/integrate/airtable`);
<GenericModal }}
isOpen={isOpen} >
onClose={handleClose} Airtable
modalStyle={modalStyle} </Button>
> </div>
<div style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: "20px"
}}>
<Typography variant="h6" sx={{ marginBottom: "20px" }}>
{t("integration_settings.title_select_integration")}
</Typography>
<div style={{ display: "flex", gap: "20px" }}>
{/* Google Sheets Button */}
<Button
variant="contained"
color="primary"
onClick={() => {
setSelectedIntegrationType("googleSheets");
setSettings({ ...settings, integrationType: "googleSheets" });
}}
>
Google Sheets
</Button>
{/* Airtable Button */}
<Button
variant="contained"
color="primary"
onClick={() => {
setSelectedIntegrationType("airtable");
setSettings({ ...settings, integrationType: "airtable" });
}}
>
Airtable
</Button>
</div> </div>
</div> </GenericModal>
</GenericModal> );
); }
}
return ( return (
<GenericModal isOpen={isOpen} onClose={handleClose} modalStyle={modalStyle}> <GenericModal isOpen={isOpen} onClose={handleClose} modalStyle={modalStyle}>
<div style={{ <div style={{
@@ -419,8 +461,9 @@ if (!selectedIntegrationType) {
color="error" color="error"
onClick={removeGoogleSheetsIntegration} onClick={removeGoogleSheetsIntegration}
style={{ marginTop: "15px" }} style={{ marginTop: "15px" }}
disabled={loading}
> >
{t("integration_settings.google.buttons.remove_integration")} {loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.remove_integration")}
</Button> </Button>
</> </>
) : ( ) : (
@@ -432,8 +475,9 @@ if (!selectedIntegrationType) {
variant="contained" variant="contained"
color="primary" color="primary"
onClick={authenticateWithGoogle} onClick={authenticateWithGoogle}
disabled={loading}
> >
{t("integration_settings.google.buttons.authenticate")} {loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.authenticate")}
</Button> </Button>
</> </>
) : ( ) : (
@@ -452,6 +496,7 @@ if (!selectedIntegrationType) {
variant="outlined" variant="outlined"
color="primary" color="primary"
onClick={fetchSpreadsheetFiles} onClick={fetchSpreadsheetFiles}
disabled={loading}
> >
{t("integration_settings.google.buttons.fetch_sheets")} {t("integration_settings.google.buttons.fetch_sheets")}
</Button> </Button>
@@ -475,14 +520,11 @@ if (!selectedIntegrationType) {
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={() => { onClick={updateGoogleSheetId}
updateGoogleSheetId();
handleStart(settings);
}}
style={{ marginTop: "10px" }} style={{ marginTop: "10px" }}
disabled={!settings.spreadsheetId || loading} disabled={!settings.spreadsheetId || loading}
> >
{t("integration_settings.google.buttons.submit")} {loading ? <CircularProgress size={24} /> : t("integration_settings.google.buttons.submit")}
</Button> </Button>
</> </>
)} )}
@@ -521,8 +563,9 @@ if (!selectedIntegrationType) {
color="error" color="error"
onClick={removeAirtableIntegration} onClick={removeAirtableIntegration}
style={{ marginTop: "15px" }} style={{ marginTop: "15px" }}
disabled={loading}
> >
{t("integration_settings.airtable.buttons.remove_integration")} {loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.remove_integration")}
</Button> </Button>
</> </>
) : ( ) : (
@@ -534,8 +577,9 @@ if (!selectedIntegrationType) {
variant="contained" variant="contained"
color="primary" color="primary"
onClick={authenticateWithAirtable} onClick={authenticateWithAirtable}
disabled={loading}
> >
{t("integration_settings.airtable.buttons.authenticate")} {loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.authenticate")}
</Button> </Button>
</> </>
) : ( ) : (
@@ -552,6 +596,7 @@ if (!selectedIntegrationType) {
variant="outlined" variant="outlined"
color="primary" color="primary"
onClick={fetchAirtableBases} onClick={fetchAirtableBases}
disabled={loading}
> >
{t("integration_settings.airtable.buttons.fetch_bases")} {t("integration_settings.airtable.buttons.fetch_bases")}
</Button> </Button>
@@ -590,14 +635,11 @@ if (!selectedIntegrationType) {
<Button <Button
variant="contained" variant="contained"
color="primary" color="primary"
onClick={() => { onClick={updateAirtableBase}
updateAirtableBase();
handleStart(settings);
}}
style={{ marginTop: "10px" }} style={{ marginTop: "10px" }}
disabled={!settings.airtableBaseId || loading} disabled={!settings.airtableBaseId || loading}
> >
{t("integration_settings.airtable.buttons.submit")} {loading ? <CircularProgress size={24} /> : t("integration_settings.airtable.buttons.submit")}
</Button> </Button>
</> </>
)} )}