opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-28 02:24:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move connection list into component

Browse Source
This commit is contained in:
steven
2023-04-28 17:20:56 +08:00
parent d8f1e99192
commit 74754e1476
2 changed files with 100 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/ConnectionSidebar.tsx
View File

@ -1,22 +1,17 @@
import { Drawer } from "@mui/material";
import { head } from "lodash-es";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useConnectionStore, useLayoutStore, ResponsiveWidth } from "@/store";
import { Connection } from "@/types";
import Select from "./kit/Select";
import Tooltip from "./kit/Tooltip";
import Icon from "./Icon";
import EngineIcon from "./EngineIcon";
import DarkModeSwitch from "./DarkModeSwitch";
import CreateConnectionModal from "./CreateConnectionModal";
import SettingModal from "./SettingModal";
import ConversationList from "./Sidebar/ConversationList";
import ConnectionList from "./Sidebar/ConnectionList";
interface State {
showCreateConnectionModal: boolean;
showSettingModal: boolean;
showUpdateConversationModal: boolean;
}
const ConnectionSidebar = () => {
@ -24,13 +19,9 @@ const ConnectionSidebar = () => {
const layoutStore = useLayoutStore();
const connectionStore = useConnectionStore();
const [state, setState] = useState<State>({
showCreateConnectionModal: false,
showSettingModal: false,
showUpdateConversationModal: false,
});
const [editConnectionModalContext, setEditConnectionModalContext] = useState<Connection>();
const [isRequestingDatabase, setIsRequestingDatabase] = useState<boolean>(false);
const connectionList = connectionStore.connectionList;
const currentConnectionCtx = connectionStore.currentConnectionCtx;
const databaseList = connectionStore.databaseList.filter((database) => database.connectionId === currentConnectionCtx?.connection.id);
@ -64,14 +55,6 @@ const ConnectionSidebar = () => {
}
}, [currentConnectionCtx?.connection]);
const toggleCreateConnectionModal = (show = true) => {
setState({
...state,
showCreateConnectionModal: show,
});
setEditConnectionModalContext(undefined);
};
const toggleSettingModal = (show = true) => {
setState({
...state,
@ -79,22 +62,6 @@ const ConnectionSidebar = () => {
});
};
const handleConnectionSelect = async (connection: Connection) => {
const databaseList = await connectionStore.getOrFetchDatabaseList(connection);
connectionStore.setCurrentConnectionCtx({
connection,
database: head(databaseList),
});
};
const handleEditConnection = (connection: Connection) => {
setState({
...state,
showCreateConnectionModal: true,
});
setEditConnectionModalContext(connection);
};
const handleDatabaseNameSelect = async (databaseName: string) => {
if (!currentConnectionCtx?.connection) {
return;
@ -120,43 +87,7 @@ const ConnectionSidebar = () => {
<div className="w-80 h-full overflow-y-hidden flex flex-row justify-start items-start">
<div className="w-16 h-full bg-gray-200 dark:bg-zinc-600 pl-2 py-4 pt-6 flex flex-col justify-between items-center">
<div className="w-full flex flex-col justify-start items-start">
<button
className={`w-full h-14 rounded-l-lg p-2 mt-1 group ${
currentConnectionCtx === undefined && "bg-gray-100 dark:bg-zinc-700 shadow"
}`}
onClick={() => connectionStore.setCurrentConnectionCtx(undefined)}
>
<img src="/chat-logo-bot.webp" className="w-7 h-auto mx-auto" alt="" />
</button>
{connectionList.map((connection) => (
<Tooltip key={connection.id} title={connection.title} side="right">
<button
className={`relative w-full h-14 rounded-l-lg p-2 mt-2 group ${
currentConnectionCtx?.connection.id === connection.id && "bg-gray-100 dark:bg-zinc-700 shadow"
}`}
onClick={() => handleConnectionSelect(connection)}
>
<span
className="absolute right-0.5 -mt-1.5 opacity-60 hidden group-hover:block hover:opacity-80"
onClick={(e) => {
e.stopPropagation();
handleEditConnection(connection);
}}
>
<Icon.FiEdit3 className="w-3.5 h-auto dark:text-gray-300" />
</span>
<EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto dark:text-gray-300" />
</button>
</Tooltip>
))}
<Tooltip title={t("connection.new")} side="right">
<button
className="w-10 h-10 mt-4 ml-2 p-2 bg-gray-100 dark:bg-zinc-700 rounded-full text-gray-500 cursor-pointer"
onClick={() => toggleCreateConnectionModal(true)}
>
<Icon.AiOutlinePlus className="w-auto h-full mx-auto" />
</button>
</Tooltip>
<ConnectionList />
</div>
<div className="w-full flex flex-col justify-end items-center">
<DarkModeSwitch />
@ -237,10 +168,6 @@ const ConnectionSidebar = () => {
</div>
</Drawer>
{state.showCreateConnectionModal && (
<CreateConnectionModal connection={editConnectionModalContext} close={() => toggleCreateConnectionModal(false)} />
)}
{state.showSettingModal && <SettingModal close={() => toggleSettingModal(false)} />}
</>
);