From c033ff5255d3b7f3dfcffd6fa73c24535396b5e8 Mon Sep 17 00:00:00 2001 From: RohitR311 Date: Wed, 13 Nov 2024 00:06:32 +0530 Subject: [PATCH] chore: google integration auth notif --- .../molecules/IntegrationSettings.tsx | 522 ++++++++++-------- 1 file changed, 303 insertions(+), 219 deletions(-) diff --git a/src/components/molecules/IntegrationSettings.tsx b/src/components/molecules/IntegrationSettings.tsx index 1489994c..005a0e68 100644 --- a/src/components/molecules/IntegrationSettings.tsx +++ b/src/components/molecules/IntegrationSettings.tsx @@ -1,238 +1,322 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect } from "react"; import { GenericModal } from "../atoms/GenericModal"; -import { MenuItem, Typography, CircularProgress, Alert, AlertTitle, Chip } from "@mui/material"; +import { + MenuItem, + Typography, + CircularProgress, + Alert, + AlertTitle, + Chip, +} from "@mui/material"; import Button from "@mui/material/Button"; import TextField from "@mui/material/TextField"; -import axios from 'axios'; -import { useGlobalInfoStore } from '../../context/globalInfo'; -import { getStoredRecording } from '../../api/storage'; -import { apiUrl } from '../../apiConfig.js'; +import axios from "axios"; +import { useGlobalInfoStore } from "../../context/globalInfo"; +import { getStoredRecording } from "../../api/storage"; +import { apiUrl } from "../../apiConfig.js"; +import Cookies from 'js-cookie'; interface IntegrationProps { - isOpen: boolean; - handleStart: (data: IntegrationSettings) => void; - handleClose: () => void; + isOpen: boolean; + handleStart: (data: IntegrationSettings) => void; + handleClose: () => void; } export interface IntegrationSettings { - spreadsheetId: string; - spreadsheetName: string; - data: string; + spreadsheetId: string; + spreadsheetName: string; + data: string; } -export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: IntegrationProps) => { - const [settings, setSettings] = useState({ - spreadsheetId: '', - spreadsheetName: '', - data: '', - }); +export const IntegrationSettingsModal = ({ + isOpen, + handleStart, + handleClose, +}: IntegrationProps) => { + const [settings, setSettings] = useState({ + spreadsheetId: "", + spreadsheetName: "", + data: "", + }); - const [spreadsheets, setSpreadsheets] = useState<{ id: string, name: string }[]>([]); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(null); + const [spreadsheets, setSpreadsheets] = useState< + { id: string; name: string }[] + >([]); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); - const { recordingId, notify } = useGlobalInfoStore(); - const [recording, setRecording] = useState(null); + const { recordingId, notify } = useGlobalInfoStore(); + const [recording, setRecording] = useState(null); - const authenticateWithGoogle = () => { - window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`; - }; + const authenticateWithGoogle = () => { + window.location.href = `${apiUrl}/auth/google?robotId=${recordingId}`; + }; - const handleOAuthCallback = async () => { - try { - const response = await axios.get(`${apiUrl}/auth/google/callback`); - const { google_sheet_email, files } = response.data; - } catch (error) { - setError('Error authenticating with Google'); + const handleOAuthCallback = async () => { + try { + const response = await axios.get(`${apiUrl}/auth/google/callback`); + const { google_sheet_email, files } = response.data; + } catch (error) { + setError("Error authenticating with Google"); + } + }; + + const fetchSpreadsheetFiles = async () => { + try { + const response = await axios.get( + `${apiUrl}/auth/gsheets/files?robotId=${recordingId}`, + { + withCredentials: true, } - }; + ); + setSpreadsheets(response.data); + } catch (error: any) { + console.error( + "Error fetching spreadsheet files:", + error.response?.data?.message || error.message + ); + notify( + "error", + `Error fetching spreadsheet files: ${ + error.response?.data?.message || error.message + }` + ); + } + }; - const fetchSpreadsheetFiles = async () => { - try { - const response = await axios.get(`${apiUrl}/auth/gsheets/files?robotId=${recordingId}`, { - withCredentials: true, - }); - setSpreadsheets(response.data); - } catch (error: any) { - console.error('Error fetching spreadsheet files:', error.response?.data?.message || error.message); - notify('error', `Error fetching spreadsheet files: ${error.response?.data?.message || error.message}`); - } - }; - - const handleSpreadsheetSelect = (e: React.ChangeEvent) => { - const selectedSheet = spreadsheets.find(sheet => sheet.id === e.target.value); - if (selectedSheet) { - setSettings({ ...settings, spreadsheetId: selectedSheet.id, spreadsheetName: selectedSheet.name }); - } - }; - - const updateGoogleSheetId = async () => { - try { - const response = await axios.post( - `${apiUrl}/auth/gsheets/update`, - { spreadsheetId: settings.spreadsheetId, spreadsheetName: settings.spreadsheetName, robotId: recordingId }, - { withCredentials: true } - ); - console.log('Google Sheet ID updated:', response.data); - } catch (error: any) { - console.error('Error updating Google Sheet ID:', error.response?.data?.message || error.message); - } - }; - - const removeIntegration = async () => { - try { - await axios.post( - `${apiUrl}/auth/gsheets/remove`, - { robotId: recordingId }, - { withCredentials: true } - ); - - setRecording(null); - setSpreadsheets([]); - setSettings({ spreadsheetId: '', spreadsheetName: '', data: '' }); - } catch (error: any) { - console.error('Error removing Google Sheets integration:', error.response?.data?.message || error.message); - } - }; - - useEffect(() => { - // Check if we're on the callback URL - const urlParams = new URLSearchParams(window.location.search); - const code = urlParams.get('code'); - if (code) { - handleOAuthCallback(); - } - - const fetchRecordingInfo = async () => { - if (!recordingId) return; - const recording = await getStoredRecording(recordingId); - if (recording) { - setRecording(recording); - } - }; - - fetchRecordingInfo(); - }, [recordingId]); - - return ( - -
- Integrate with Google Sheet - - {recording && recording.google_sheet_id ? ( - <> - - Google Sheet Integrated Successfully. - Every time this robot creates a successful run, its captured data is appended to your {recording.google_sheet_name} Google Sheet. You can check the data updates here. -
- Note: The data extracted before integrating with Google Sheets will not be synced in the Google Sheet. Only the data extracted after the integration will be synced. - - - - ) : ( - <> - {!recording?.google_sheet_email ? ( - <> -

If you enable this option, every time this robot runs a task successfully, its captured data will be appended to your Google Sheet.

- - - ) : ( - <> - {recording.google_sheet_email && ( - - Authenticated as: {recording.google_sheet_email} - - )} - - {loading ? ( - - ) : error ? ( - {error} - ) : spreadsheets.length === 0 ? ( - <> -
- - -
- - ) : ( - <> - - {spreadsheets.map(sheet => ( - - {sheet.name} - - ))} - - - {settings.spreadsheetId && ( - - Selected Sheet: {spreadsheets.find(s => s.id === settings.spreadsheetId)?.name} (ID: {settings.spreadsheetId}) - - )} - - - - )} - - )} - - )} -
- + const handleSpreadsheetSelect = (e: React.ChangeEvent) => { + const selectedSheet = spreadsheets.find( + (sheet) => sheet.id === e.target.value ); + if (selectedSheet) { + setSettings({ + ...settings, + spreadsheetId: selectedSheet.id, + spreadsheetName: selectedSheet.name, + }); + } + }; + + const updateGoogleSheetId = async () => { + try { + const response = await axios.post( + `${apiUrl}/auth/gsheets/update`, + { + spreadsheetId: settings.spreadsheetId, + spreadsheetName: settings.spreadsheetName, + robotId: recordingId, + }, + { withCredentials: true } + ); + console.log("Google Sheet ID updated:", response.data); + } catch (error: any) { + console.error( + "Error updating Google Sheet ID:", + error.response?.data?.message || error.message + ); + } + }; + + const removeIntegration = async () => { + try { + await axios.post( + `${apiUrl}/auth/gsheets/remove`, + { robotId: recordingId }, + { withCredentials: true } + ); + + setRecording(null); + setSpreadsheets([]); + setSettings({ spreadsheetId: "", spreadsheetName: "", data: "" }); + } catch (error: any) { + console.error( + "Error removing Google Sheets integration:", + error.response?.data?.message || error.message + ); + } + }; + + useEffect(() => { + // Check if there is a success message in cookies + const status = Cookies.get("robot_auth_status"); + const message = Cookies.get("robot_auth_message"); + + if (status === "success" && message) { + notify("success", message); + // Clear the cookies after reading + Cookies.remove("robot_auth_status"); + Cookies.remove("robot_auth_message"); + } + + // Check if we're on the callback URL + const urlParams = new URLSearchParams(window.location.search); + const code = urlParams.get("code"); + if (code) { + handleOAuthCallback(); + } + + const fetchRecordingInfo = async () => { + if (!recordingId) return; + const recording = await getStoredRecording(recordingId); + if (recording) { + setRecording(recording); + } + }; + + fetchRecordingInfo(); + }, [recordingId]); + + return ( + +
+ + Integrate with Google Sheet{" "} + + + + {recording && recording.google_sheet_id ? ( + <> + + Google Sheet Integrated Successfully. + Every time this robot creates a successful run, its captured data + is appended to your {recording.google_sheet_name} Google Sheet. + You can check the data updates{" "} + + here + + . +
+ Note: The data extracted before integrating with + Google Sheets will not be synced in the Google Sheet. Only the + data extracted after the integration will be synced. + + + + ) : ( + <> + {!recording?.google_sheet_email ? ( + <> +

+ If you enable this option, every time this robot runs a task + successfully, its captured data will be appended to your + Google Sheet. +

+ + + ) : ( + <> + {recording.google_sheet_email && ( + + Authenticated as: {recording.google_sheet_email} + + )} + + {loading ? ( + + ) : error ? ( + {error} + ) : spreadsheets.length === 0 ? ( + <> +
+ + +
+ + ) : ( + <> + + {spreadsheets.map((sheet) => ( + + {sheet.name} + + ))} + + + {settings.spreadsheetId && ( + + Selected Sheet:{" "} + { + spreadsheets.find( + (s) => s.id === settings.spreadsheetId + )?.name + }{" "} + (ID: {settings.spreadsheetId}) + + )} + + + + )} + + )} + + )} +
+ + ); }; export const modalStyle = { - top: '40%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: '50%', - backgroundColor: 'background.paper', - p: 4, - height: 'fit-content', - display: 'block', - padding: '20px', + top: "40%", + left: "50%", + transform: "translate(-50%, -50%)", + width: "50%", + backgroundColor: "background.paper", + p: 4, + height: "fit-content", + display: "block", + padding: "20px", };