Skip to content

Commit 91b5f82

Browse files
Neo-ZenithNeo-Zenith
committed
2 parents 6feb38f + 4a6946e commit 91b5f82

File tree

10 files changed

+281
-447
lines changed

10 files changed

+281
-447
lines changed

‎client/src/App.jsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
1-
import React from "react";
21
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
32
import LandingPage from "./pages/LandingPage";
43
import QueryPage from "./pages/QueryPage";
54

65
function App() {
7-
return (
8-
<>
9-
<Router>
10-
<Routes>
11-
<Route path="/" element={<LandingPage />} />
12-
<Route path="/query" element={<QueryPage />} />
13-
</Routes>
14-
</Router>
15-
</>
16-
);
6+
return (
7+
<>
8+
<Router>
9+
<Routes>
10+
<Route path="/" element={<LandingPage />} />
11+
<Route path="/query" element={<QueryPage />} />
12+
</Routes>
13+
</Router>
14+
</>
15+
);
1716
}
1817

1918
export default App;

‎client/src/components/CodeEditor/Button.jsx

Lines changed: 18 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,26 @@
1-
// import { Button as BaseButton, buttonClasses } from "@mui/base/Button";
21
import Button from "@mui/material/Button";
3-
import { styled } from "@mui/system";
42
import Stack from "@mui/material/Stack";
3+
import { useState } from "react";
4+
5+
export default function CodeEditorButton({ handleClick }) {
6+
const [loading, setLoading] = useState(false);
57

6-
export default function CodeEditorButton() {
78
return (
89
<Stack justifyContent="space-between" direction="row" marginTop={2}>
9-
<Button>Generate</Button>
10-
<Button>Cancel</Button>
10+
<Button
11+
variant="contained"
12+
color="success"
13+
onClick={() => {
14+
setLoading(true);
15+
handleClick();
16+
}}
17+
>
18+
Generate
19+
</Button>
20+
21+
<Button variant="contained" color="error" disabled={!loading}>
22+
Cancel
23+
</Button>
1124
</Stack>
1225
);
1326
}
14-
15-
const blue = {
16-
200: "#99CCFF",
17-
300: "#66B2FF",
18-
400: "#3399FF",
19-
500: "#007FFF",
20-
600: "#0072E5",
21-
700: "#0066CC",
22-
};
23-
24-
const grey = {
25-
50: "#F3F6F9",
26-
100: "#E5EAF2",
27-
200: "#DAE2ED",
28-
300: "#C7D0DD",
29-
400: "#B0B8C4",
30-
500: "#9DA8B7",
31-
600: "#6B7A90",
32-
700: "#434D5B",
33-
800: "#303740",
34-
900: "#1C2025",
35-
};
36-
37-
// const Button = styled(BaseButton)(
38-
// ({ theme }) => `
39-
// font-family: 'IBM Plex Sans', sans-serif;
40-
// font-weight: 600;
41-
// font-size: 0.875rem;
42-
// line-height: 1.5;
43-
// background-color: ${blue[500]};
44-
// padding: 8px 16px;
45-
// border-radius: 8px;
46-
// color: white;
47-
// transition: all 150ms ease;
48-
// cursor: pointer;
49-
// border: 1px solid ${blue[500]};
50-
// box-shadow: 0 2px 1px ${
51-
// theme.palette.mode === "dark"
52-
// ? "rgba(0, 0, 0, 0.5)"
53-
// : "rgba(45, 45, 60, 0.2)"
54-
// }, inset 0 1.5px 1px ${blue[400]}, inset 0 -2px 1px ${blue[600]};
55-
56-
// &:hover {
57-
// background-color: ${blue[600]};
58-
// }
59-
60-
// &.${buttonClasses.active} {
61-
// background-color: ${blue[700]};
62-
// box-shadow: none;
63-
// transform: scale(0.99);
64-
// }
65-
66-
// &.${buttonClasses.focusVisible} {
67-
// box-shadow: 0 0 0 4px ${
68-
// theme.palette.mode === "dark" ? blue[300] : blue[200]
69-
// };
70-
// outline: none;
71-
// }
72-
73-
// &.${buttonClasses.disabled} {
74-
// background-color: ${theme.palette.mode === "dark" ? grey[700] : grey[200]};
75-
// color: ${theme.palette.mode === "dark" ? grey[200] : grey[700]};
76-
// border: 0;
77-
// cursor: default;
78-
// box-shadow: none;
79-
// transform: scale(1);
80-
// }
81-
// `
82-
// );

‎client/src/components/CodeEditor/CodeEditor.jsx

Lines changed: 97 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,119 @@
11
import { useRef, useState } from "react";
22
import Editor from "@monaco-editor/react";
3-
import CodeEditorDropdown from "./Dropdown";
3+
// import CodeEditorDropdown from "./Dropdown";
44
import CodeEditorButton from "./Button";
55
import MenuDropdown from "../MenuDropdown/MenuDropdown";
66

77
const languageCommentsMap = new Map([
8-
["javascript", "// Paste/Enter your code here"],
9-
["python", "# Paste/Enter your code here"],
10-
["java", "// Paste/Enter your code here"],
11-
["html", "<!-- Paste/Enter your code here -->"],
12-
["css", "/* Paste/Enter your code here */"],
13-
["ruby", "# Paste/Enter your code here"],
14-
// Add more languages as needed
8+
["javascript", "// Paste/Enter your code here"],
9+
["python", "# Paste/Enter your code here"],
10+
["java", "// Paste/Enter your code here"],
11+
["html", "<!-- Paste/Enter your code here -->"],
12+
["css", "/* Paste/Enter your code here */"],
13+
["ruby", "# Paste/Enter your code here"],
14+
// Add more languages as needed
1515
]);
1616

1717
const CodeEditor = ({ defaultCode }) => {
18-
const editorRef = useRef(null);
19-
const [language, setLanguage] = useState("python");
20-
const [code, setCode] = useState(defaultCode);
18+
const editorRef = useRef(null);
19+
const [language, setLanguage] = useState("Python");
20+
const [code, setCode] = useState(defaultCode);
2121

22-
function handleEditorChange(value, event) {
23-
// here is the current value
24-
console.log(value);
25-
console.log(event);
26-
}
22+
function handleEditorDidMount(editor, monaco) {
23+
editorRef.current = editor;
24+
console.log("onMount: the editor instance:", editor);
25+
console.log("onMount: the monaco instance:", monaco);
26+
}
2727

28-
function handleEditorDidMount(editor, monaco) {
29-
editorRef.current = editor;
30-
console.log("onMount: the editor instance:", editor);
31-
console.log("onMount: the monaco instance:", monaco);
32-
}
28+
function handleEditorWillMount(monaco) {
29+
console.log("beforeMount: the monaco instance:", monaco);
30+
}
3331

34-
function handleEditorWillMount(monaco) {
35-
console.log("beforeMount: the monaco instance:", monaco);
36-
}
32+
function handleEditorValidation(markers) {
33+
// model markers
34+
markers.forEach((marker) => console.log("onValidate:", marker.message));
35+
}
3736

38-
function handleEditorValidation(markers) {
39-
// model markers
40-
markers.forEach((marker) => console.log("onValidate:", marker.message));
41-
}
37+
function removeWordFromStart(inputString, targetWord) {
38+
if (inputString.startsWith(targetWord)) {
39+
return inputString.slice(targetWord.length).trim();
40+
}
41+
return inputString;
42+
}
4243

43-
// for submit later
44-
function showValue() {
45-
alert(editorRef.current.getValue());
46-
}
44+
// handle when user clicks on "Generate" button
45+
function handleGenerate() {
46+
let content = removeWordFromStart(code, languageCommentsMap.get(language));
4747

48-
function handleDropdownClick(choice) {
49-
console.log(`Clicked on dropdown:`, choice);
50-
setLanguage(choice);
51-
setCode(languageCommentsMap.get(choice));
52-
}
48+
const url = "http://localhost:5000/openai";
49+
const payload = {
50+
language: language,
51+
content: content,
52+
};
53+
console.log("Payload:", payload);
5354

54-
return (
55-
<>
56-
<CodeEditorDropdown
57-
handleClick={handleDropdownClick}
58-
activeLanguage={language}
59-
/>
55+
fetch(url, {
56+
method: "POST",
57+
headers: {
58+
"Content-Type": "application/json",
59+
},
60+
body: JSON.stringify(payload), // Convert the data to JSON format
61+
})
62+
.then((response) => {
63+
if (!response.ok) {
64+
throw new Error(`HTTP error! Status: ${response.status}`);
65+
}
66+
return response.json(); // Parse the response body as JSON
67+
})
68+
.then((data) => {
69+
console.log("Success:", data);
70+
})
71+
.catch((error) => {
72+
console.error("Error:", error);
73+
});
74+
}
6075

61-
<MenuDropdown
62-
title={"Language"}
63-
replaceTitle={true}
64-
items={[
65-
{ label: "JavaScript", action: () => {} },
66-
{ label: "Python", action: () => {} },
67-
{ label: "CPP", action: () => {} },
68-
]}
69-
/>
76+
function handleDropdownClick(choice) {
77+
console.log(`Clicked on dropdown:`, choice);
78+
setLanguage(choice);
79+
setCode(languageCommentsMap.get(choice));
80+
}
7081

71-
<Editor
72-
height="60vh"
73-
theme="vs-dark"
74-
language={language}
75-
defaultLanguage="python"
76-
defaultValue={defaultCode}
77-
value={code}
78-
onChange={handleEditorChange}
79-
onMount={handleEditorDidMount}
80-
beforeMount={handleEditorWillMount}
81-
onValidate={handleEditorValidation}
82-
/>
82+
return (
83+
<>
84+
<div style={{ marginBottom: "1rem" }}>
85+
<MenuDropdown
86+
title={language}
87+
replaceTitle={true}
88+
items={[
89+
{
90+
label: "JavaScript",
91+
action: () => handleDropdownClick("javascript"),
92+
},
93+
{
94+
label: "Python",
95+
action: () => handleDropdownClick("python"),
96+
},
97+
]}
98+
/>
99+
</div>
83100

84-
<CodeEditorButton />
85-
</>
86-
);
101+
<Editor
102+
height="60vh"
103+
theme="vs-dark"
104+
language={language}
105+
defaultLanguage="python"
106+
defaultValue={defaultCode}
107+
value={code}
108+
onChange={(v, e) => setCode(v)}
109+
onMount={handleEditorDidMount}
110+
beforeMount={handleEditorWillMount}
111+
onValidate={handleEditorValidation}
112+
/>
113+
114+
<CodeEditorButton handleClick={handleGenerate} />
115+
</>
116+
);
87117
};
88118

89119
export default CodeEditor;

0 commit comments

Comments
 (0)