Ümit Tunç
114 lines
4.3 KiB
TypeScript
114 lines
4.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider, CircularProgress } from '@mui/material';
|
|
import { Storage } from '@mui/icons-material';
|
|
import { useAppStore } from '../store/useAppStore';
|
|
import { SchemaService } from '../services/api';
|
|
|
|
const Sidebar: React.FC = () => {
|
|
const { activeDatabase, setActiveDatabase, setActiveTable, activeTable } = useAppStore();
|
|
const [databases, setDatabases] = useState<string[]>([]);
|
|
const [tables, setTables] = useState<string[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [tablesLoading, setTablesLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchDatabases = async () => {
|
|
try {
|
|
const response = await SchemaService.getDatabases();
|
|
setDatabases(response.data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch databases', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
fetchDatabases();
|
|
}, []);
|
|
|
|
const handleDatabaseClick = async (db: string) => {
|
|
if (activeDatabase === db) {
|
|
setActiveDatabase(null);
|
|
setTables([]);
|
|
return;
|
|
}
|
|
|
|
setActiveDatabase(db);
|
|
setTablesLoading(true);
|
|
try {
|
|
const response = await SchemaService.getTables(db);
|
|
setTables(response.data);
|
|
} catch (error) {
|
|
console.error('Failed to fetch tables', error);
|
|
} finally {
|
|
setTablesLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box sx={{ width: 260, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column', bgcolor: 'background.paper' }}>
|
|
<Box sx={{ p: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<Storage color="primary" />
|
|
<Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.1rem' }}>Explorer</Typography>
|
|
</Box>
|
|
<Divider />
|
|
|
|
<Box sx={{ flexGrow: 1, overflowY: 'auto' }}>
|
|
{loading ? (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}><CircularProgress size={24} /></Box>
|
|
) : (
|
|
<List dense sx={{ p: 0 }}>
|
|
{databases.map((db) => (
|
|
<React.Fragment key={db}>
|
|
<ListItem disablePadding>
|
|
<ListItemButton
|
|
onClick={() => handleDatabaseClick(db)}
|
|
selected={activeDatabase === db}
|
|
sx={{ py: 1 }}
|
|
>
|
|
<ListItemIcon sx={{ minWidth: 36 }}>
|
|
<Storage fontSize="small" color={activeDatabase === db ? 'primary' : 'inherit'} />
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={<Typography variant="body2" sx={{ fontWeight: activeDatabase === db ? 600 : 400 }}>{db}</Typography>}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
|
|
{activeDatabase === db && (
|
|
<List dense sx={{ pl: 4, bgcolor: 'rgba(0,0,0,0.02)' }}>
|
|
{tablesLoading ? (
|
|
<ListItem><CircularProgress size={16} /></ListItem>
|
|
) : tables.length === 0 ? (
|
|
<ListItem><Typography variant="caption" sx={{ color: 'text.secondary', fontStyle: 'italic' }}>No tables found</Typography></ListItem>
|
|
) : tables.map((table) => (
|
|
<ListItem key={table} disablePadding>
|
|
<ListItemButton
|
|
selected={activeTable === table}
|
|
onClick={() => setActiveTable(table)}
|
|
sx={{ py: 0.5 }}
|
|
>
|
|
<ListItemText
|
|
primary={<Typography variant="caption" sx={{ fontWeight: activeTable === table ? 600 : 400 }}>{table}</Typography>}
|
|
/>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
)}
|
|
</React.Fragment>
|
|
))}
|
|
</List>
|
|
)}
|
|
</Box>
|
|
<Divider />
|
|
<Box sx={{ p: 2 }}>
|
|
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
|
Connected to: 127.0.0.1
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|