Skip to content

Commit f4e02dc

Browse files
jelonmuskjelonmusk
committed
all front end final
1 parent 3d9cb8f commit f4e02dc

File tree

3 files changed

+99
-41
lines changed

3 files changed

+99
-41
lines changed

‎client/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React</title>
7+
<title>SQL Query Generator AI</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎client/src/App.jsx‎

Lines changed: 59 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,68 @@
1-
import styles from './index.module.css'
2-
import sqlLogo from './assets/sql-logo.png'
3-
import { useState } from 'react'
1+
import styles from './index.module.css';
2+
import sqlLogo from './assets/sql-logo.png';
3+
import { useState } from 'react';
44

55
function App() {
6-
//Declares a state variable called queryDescription and a function to update it called setQueryDescription
7-
//useState is a hook that allows you to add state to a functional component
8-
//The initial value of queryDescription is an empty string
9-
//The useState function returns an array with two elements: the current state value and a function to update it
10-
// syntax : const [state, setState] = useState(initialState)
6+
const [queryDescription, setQueryDescription] = useState("");
7+
const [sqlQuery, setSqlQuery] = useState("");
118

12-
const {queryDescription,setQueryDescription} = useState("")
9+
const onSubmit = async (e) => {
10+
e.preventDefault();
11+
console.log('Form submitted:', queryDescription);
1312

14-
const onSubmit = (e) =>{
15-
e.preventDefault() //this prevents the default behavior of the form submission
16-
console.log('Form submitted:', queryDescription )
13+
const cleanSql = sqlQuery.replace(/```sql([\s\S]*?)```/i, (m, p1) => p1.trim()) || sqlQuery;
14+
setSqlQuery(cleanSql);
1715

1816

19-
}
17+
console.log('SQL Query returned from Server:', generatedQuery);
18+
};
19+
20+
const generateQuery = async () => {
21+
const response = await fetch("http://localhost:3005/generate", {
22+
method: "POST",
23+
headers: {
24+
"Content-Type": "application/json",
25+
},
26+
body: JSON.stringify({
27+
queryDescription: queryDescription,
28+
}),
29+
});
30+
31+
const data = await response.json();
32+
return data.response.trim();
33+
};
34+
2035
return (
21-
// below is the main component of the app
22-
// it is the main entry point of the app
23-
//we are importing the main component from the index.module.css file
24-
<main className={styles.main}>
25-
26-
<img src = {sqlLogo} alt=""className = {styles.icon} />
27-
<h3>Generate SQL with AI</h3>
28-
29-
<form onSubmit={onSubmit}>
30-
<input
31-
type="text"
32-
name = "query-description"
33-
placeholder="Describe your query"
34-
//onchange is an event handler that is called when the value of the input changes
35-
//it takes a function as an argument
36-
//the function takes an event object as an argument
37-
//the event object has a target property that is the input element
38-
//the value of the input is set to the queryDescription state variable
39-
//syntax : <input onChange={handleChangeFunction} >
40-
onChange = {(e) => setQueryDescription(e.target.value)}
41-
/>
42-
43-
<input type="submit" value="Generate SQL Query" />
44-
</form>
45-
</main>
46-
)
36+
<main className={styles.main}>
37+
<img src={sqlLogo} alt="SQL Logo" className={styles.icon} />
38+
<h3>Generate SQL with AI</h3>
39+
40+
<form onSubmit={onSubmit}>
41+
<input
42+
type="text"
43+
name="query-description"
44+
placeholder="Describe your query"
45+
onChange={(e) => setQueryDescription(e.target.value)}
46+
/>
47+
<input type="submit" value="Generate SQL Query" />
48+
</form>
49+
50+
{/* this code right below is to display SQL result */}
51+
{sqlQuery && (
52+
<div className={styles.codeContainer}>
53+
<pre className={styles.codeBlock}>{sqlQuery}</pre>
54+
<button
55+
className={styles.copyButton}
56+
onClick={() => navigator.clipboard.writeText(sqlQuery)}
57+
>
58+
Copy
59+
</button>
60+
</div>
61+
62+
63+
)}
64+
</main>
65+
);
4766
}
4867

49-
export default App
68+
export default App;

‎client/src/index.module.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,42 @@
6565
margin-top: 40px;
6666
width: 69ch;
6767
}
68+
69+
.codeContainer {
70+
position: relative;
71+
margin-top: 1rem;
72+
/* no padding-bottom here because button is outside */
73+
max-width: 100%;
74+
}
75+
76+
.codeBlock {
77+
background-color: #ffffff;
78+
color: #000000;
79+
font-family: 'Courier New', Courier, monospace;
80+
padding: 1rem;
81+
border-radius: 8px;
82+
border: 1px solid #a75dda;
83+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
84+
white-space: pre-wrap;
85+
word-break: break-word;
86+
overflow-x: auto;
87+
margin-right: 3.5rem; /* reserve space on right for the button */
88+
}
89+
90+
.copyButton {
91+
background-color: #a75dda;
92+
color: #ffffff;
93+
border: none;
94+
padding: 0.25rem 0.5rem;
95+
cursor: pointer;
96+
font-size: 0.9rem;
97+
border-radius: 4px;
98+
position: absolute;
99+
top: 8px;
100+
right: 8px;
101+
transition: background-color 0.2s ease;
102+
}
103+
104+
.copyButton:hover {
105+
background-color: #8640c3;
106+
}

0 commit comments

Comments
 (0)