wip: gsheet integration ui

src/components/molecules/IntegrationSettings.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { GenericModal } from "../atoms/GenericModal";
-import { MenuItem, TextField, Typography } from "@mui/material";
+import { MenuItem, TextField, Typography, CircularProgress } from "@mui/material";
 import Button from "@mui/material/Button";
+import axios from 'axios';
 import { modalStyle } from "./AddWhereCondModal";
 
 interface IntegrationProps {
@@ -18,18 +19,40 @@ export interface IntegrationSettings {
 }
 
 export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: IntegrationProps) => {
-
     const [settings, setSettings] = useState<IntegrationSettings>({
         credentials: '',
         spreadsheetId: '',
         range: '',
         data: '',
     });
+    const [spreadsheets, setSpreadsheets] = useState<{ id: string, name: string }[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (isOpen) {
+            // Fetch Google Sheets from backend when modal is opened
+            setLoading(true);
+            axios.get('http://localhost:8080/auth/google/callback')
+                .then(response => {
+                    setSpreadsheets(response.data.files);
+                    setLoading(false);
+                })
+                .catch(error => {
+                    setError(`Error fetching spreadsheets: ${error}`);
+                    setLoading(false);
+                });
+        }
+    }, [isOpen]);
 
     const handleChange = (field: keyof IntegrationSettings) => (e: React.ChangeEvent<HTMLInputElement>) => {
         setSettings({ ...settings, [field]: e.target.value });
     };
 
+    const handleSpreadsheetSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setSettings({ ...settings, spreadsheetId: e.target.value });
+    };
+
     return (
         <GenericModal
             isOpen={isOpen}
@@ -55,14 +78,27 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
                     fullWidth
                 />
 
-                <TextField
+                {loading ? (
-                    sx={{ marginBottom: '15px' }}
+                    <CircularProgress sx={{ marginBottom: '15px' }} />
-                    label="Google Spreadsheet ID"
+                ) : error ? (
-                    required
+                    <Typography color="error">{error}</Typography>
-                    value={settings.spreadsheetId}
+                ) : (
-                    onChange={handleChange('spreadsheetId')}
+                    <TextField
-                    fullWidth
+                        sx={{ marginBottom: '15px' }}
-                />
+                        select
+                        label="Select Google Spreadsheet"
+                        required
+                        value={settings.spreadsheetId}
+                        onChange={handleSpreadsheetSelect}
+                        fullWidth
+                    >
+                        {spreadsheets.map(sheet => (
+                            <MenuItem key={sheet.id} value={sheet.id}>
+                                {sheet.name}
+                            </MenuItem>
+                        ))}
+                    </TextField>
+                )}
 
                 <TextField
                     sx={{ marginBottom: '15px' }}
@@ -73,7 +109,13 @@ export const IntegrationSettingsModal = ({ isOpen, handleStart, handleClose }: I
                     fullWidth
                 />
 
-                <Button variant="contained" color="primary" onClick={() => handleStart(settings)} style={{ marginTop: '10px' }}>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={() => handleStart(settings)}
+                    style={{ marginTop: '10px' }}
+                    disabled={loading}
+                >
                     Submit
                 </Button>
             </div>