opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-28 17:53:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: clear create connection modal state

Browse Source
This commit is contained in:
steven
2023-03-28 11:49:32 +08:00
parent 7001170a27
commit 55ab8f9506
1 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/CreateConnectionModal.tsx
View File

@ -1,5 +1,5 @@
import { cloneDeep, head } from "lodash-es";
import { useState } from "react";
import { useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { testConnection, useConnectionStore } from "@/store";
import { Connection, Engine } from "@/types";
@ -10,10 +10,7 @@ interface Props {
close: () => void;
}
const CreateConnectionModal = (props: Props) => {
const { show, close } = props;
const connectionStore = useConnectionStore();
const [connection, setConnection] = useState<Connection>({
const defaultConnection: Connection = {
id: "",
title: "",
engineType: Engine.MySQL,
@ -21,10 +18,21 @@ const CreateConnectionModal = (props: Props) => {
port: "",
username: "",
password: "",
});
};
const CreateConnectionModal = (props: Props) => {
const { show, close } = props;
const connectionStore = useConnectionStore();
const [connection, setConnection] = useState<Connection>(defaultConnection);
const [isRequesting, setIsRequesting] = useState(false);
const showDatabaseField = connection.engineType === Engine.PostgreSQL;
useEffect(() => {
if (show) {
setConnection(defaultConnection);
}
}, [show]);
const setPartialConnection = (state: Partial<Connection>) => {
setConnection({
...connection,
@ -83,6 +91,7 @@ const CreateConnectionModal = (props: Props) => {
type="text"
placeholder="Connect host"
className="input input-bordered w-full"
value={connection.host}
onChange={(e) => setPartialConnection({ host: e.target.value })}
/>
</div>
@ -92,6 +101,7 @@ const CreateConnectionModal = (props: Props) => {
type="text"
placeholder="Connect port"
className="input input-bordered w-full"
value={connection.port}
onChange={(e) => setPartialConnection({ port: e.target.value })}
/>
</div>
@ -101,6 +111,7 @@ const CreateConnectionModal = (props: Props) => {
type="text"
placeholder="Connect username"
className="input input-bordered w-full"
value={connection.username}
onChange={(e) => setPartialConnection({ username: e.target.value })}
/>
</div>
@ -110,6 +121,7 @@ const CreateConnectionModal = (props: Props) => {
type="text"
placeholder="Connect password"
className="input input-bordered w-full"
value={connection.password}
onChange={(e) => setPartialConnection({ password: e.target.value })}
/>
</div>
@ -118,8 +130,9 @@ const CreateConnectionModal = (props: Props) => {
<label className="block text-sm font-medium text-gray-700 mb-1">Database Name</label>
<input
type="text"
placeholder="Type here"
placeholder="Connect database"
className="input input-bordered w-full"
value={connection.database}
onChange={(e) => setPartialConnection({ database: e.target.value })}
/>
</div>