102 lines
No EOL
3.1 KiB
TypeScript
102 lines
No EOL
3.1 KiB
TypeScript
import { useState } from 'react';
|
|
// import styles from './HomeStyles/Connections.module.css';
|
|
import sharedStyles from '../../components/PageManager/pages.module.css';
|
|
import { IoIosLink } from 'react-icons/io';
|
|
import {
|
|
ConnectionsTable,
|
|
ConnectionEditModal,
|
|
ConnectionsErrorDisplay,
|
|
useConnectionsLogic,
|
|
Connection
|
|
} from '../../components/Connections';
|
|
import { useLanguage } from '../../contexts/LanguageContext';
|
|
|
|
function Connections() {
|
|
const { t } = useLanguage();
|
|
|
|
// Use the custom hook for all business logic
|
|
const {
|
|
connections,
|
|
isLoading,
|
|
isConnecting,
|
|
isDisconnecting,
|
|
error,
|
|
connectError,
|
|
disconnectError,
|
|
editPopupOpen,
|
|
editingConnection,
|
|
connectionColumns,
|
|
connectionEditFields,
|
|
tableActions,
|
|
handleCreateConnection,
|
|
handleSaveConnection,
|
|
handleCancelEdit,
|
|
handleDelete,
|
|
handleDeleteMultiple
|
|
} = useConnectionsLogic();
|
|
|
|
// Local state for selected connections (if needed)
|
|
const [, setSelectedConnections] = useState<Connection[]>([]);
|
|
|
|
return (
|
|
<div className={sharedStyles.pageContainer}>
|
|
<div className={sharedStyles.pageCard}>
|
|
{/* Page Header */}
|
|
<div className={sharedStyles.pageHeader}>
|
|
<h1 className={sharedStyles.pageTitle}>{t('connections.title')}</h1>
|
|
<div style={{ display: 'flex', gap: '10px' }}>
|
|
<button
|
|
className={sharedStyles.primaryButton}
|
|
onClick={() => handleCreateConnection('google')}
|
|
disabled={isLoading || isConnecting || isDisconnecting}
|
|
>
|
|
<span className={sharedStyles.buttonIcon}><IoIosLink /></span>
|
|
{t('connections.connect_google')}
|
|
</button>
|
|
<button
|
|
className={sharedStyles.primaryButton}
|
|
onClick={() => handleCreateConnection('msft')}
|
|
disabled={isLoading || isConnecting || isDisconnecting}
|
|
>
|
|
<span className={sharedStyles.buttonIcon}><IoIosLink /></span>
|
|
{t('connections.connect_microsoft')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={sharedStyles.horizontalDivider}></div>
|
|
|
|
<div className={sharedStyles.contentArea}>
|
|
{/* Error Display */}
|
|
<ConnectionsErrorDisplay
|
|
error={error}
|
|
connectError={connectError}
|
|
disconnectError={disconnectError}
|
|
/>
|
|
|
|
{/* Connections Table */}
|
|
<ConnectionsTable
|
|
connections={connections}
|
|
columns={connectionColumns}
|
|
actions={tableActions}
|
|
isLoading={isLoading}
|
|
onRowSelect={setSelectedConnections}
|
|
onDelete={handleDelete}
|
|
onDeleteMultiple={handleDeleteMultiple}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Edit Connection Modal */}
|
|
<ConnectionEditModal
|
|
isOpen={editPopupOpen}
|
|
connection={editingConnection}
|
|
fields={connectionEditFields}
|
|
onSave={handleSaveConnection}
|
|
onCancel={handleCancelEdit}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Connections; |