Skip to content

Commit 842d02d

Browse files
Neo-ZenithNeo-Zenith
committed
2 parents 2ab1385 + 1195828 commit 842d02d

File tree

4 files changed

+339
-211
lines changed

4 files changed

+339
-211
lines changed

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

Lines changed: 117 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -6,135 +6,136 @@ import "./COdeEditor.css";
66
import QueryButtons from "../QueryButtons/QueryButtons";
77

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

1818
export default function CodeEditor({ defaultCode }) {
19-
const editorRef = useRef(null);
20-
const dispatch = useDispatch();
21-
const [language, setLanguage] = useState("Python");
22-
const [code, setCode] = useState(defaultCode);
19+
const editorRef = useRef(null);
20+
const dispatch = useDispatch();
21+
const [language, setLanguage] = useState("Python");
22+
const [code, setCode] = useState(defaultCode);
2323

24-
function handleEditorDidMount(editor, monaco) {
25-
editorRef.current = editor;
26-
console.log("onMount: the editor instance:", editor);
27-
console.log("onMount: the monaco instance:", monaco);
28-
}
24+
function handleEditorDidMount(editor, monaco) {
25+
editorRef.current = editor;
26+
console.log("onMount: the editor instance:", editor);
27+
console.log("onMount: the monaco instance:", monaco);
28+
}
2929

30-
function handleEditorWillMount(monaco) {
31-
console.log("beforeMount: the monaco instance:", monaco);
32-
}
30+
function handleEditorWillMount(monaco) {
31+
console.log("beforeMount: the monaco instance:", monaco);
32+
}
3333

34-
function handleEditorValidation(markers) {
35-
// model markers
36-
markers.forEach((marker) => console.log("onValidate:", marker.message));
37-
}
34+
function handleEditorValidation(markers) {
35+
// model markers
36+
markers.forEach((marker) => console.log("onValidate:", marker.message));
37+
}
3838

39-
function removeWordFromStart(inputString, targetWord) {
40-
if (inputString.startsWith(targetWord)) {
41-
return inputString.slice(targetWord.length).trim();
42-
}
43-
return inputString;
44-
}
39+
function removeWordFromStart(inputString, targetWord) {
40+
if (inputString.startsWith(targetWord)) {
41+
return inputString.slice(targetWord.length).trim();
42+
}
43+
return inputString;
44+
}
4545

46-
function sanitizeInput(inputString) {
47-
const cleanedString = removeWordFromStart(
48-
inputString,
49-
languageCommentsMap.get(language)
50-
);
51-
// Using the replace method with a regular expression to replace all occurrences
52-
const sanitizedString = cleanedString.replace(/'/g, '"');
53-
return sanitizedString;
54-
}
46+
function sanitizeInput(inputString) {
47+
const cleanedString = removeWordFromStart(
48+
inputString,
49+
languageCommentsMap.get(language)
50+
);
51+
// Using the replace method with a regular expression to replace all occurrences
52+
const sanitizedString = cleanedString.replace(/'/g, '"');
53+
return sanitizedString;
54+
}
5555

56-
// handle when user clicks on "Generate" button
57-
function handleGenerate() {
58-
let content = sanitizeInput(code);
56+
// handle when user clicks on "Generate" button
57+
function handleGenerate() {
58+
let content = sanitizeInput(code);
5959

60-
const url = "http://localhost:5000/openai";
61-
const payload = {
62-
language: language,
63-
content: content,
64-
};
65-
console.log("Payload:", payload);
60+
const url = "http://localhost:5000/openai";
61+
const payload = {
62+
language: language,
63+
content: content,
64+
type: "code",
65+
};
66+
console.log("Payload:", payload);
6667

67-
dispatch({ type: "SET_LOADING", payload: true });
68-
fetch(url, {
69-
method: "POST",
70-
headers: {
71-
"Content-Type": "application/json",
72-
},
73-
body: JSON.stringify(payload), // Convert the data to JSON format
74-
})
75-
.then((response) => {
76-
if (!response.ok) {
77-
throw new Error(`HTTP error! Status: ${response.status}`);
78-
}
79-
return response.json(); // Parse the response body as JSON
80-
})
81-
.then((data) => {
82-
console.log("Query success:", data);
83-
dispatch({
84-
type: "DISPLAY_CODE_OUTPUT",
85-
payload: {
86-
code: data.response.code,
87-
language: "c",
88-
},
89-
});
90-
dispatch({ type: "SET_LOADING", payload: false });
91-
})
92-
.catch((error) => {
93-
console.error("Error fetching response:", error);
94-
dispatch({ type: "SET_LOADING", payload: false });
95-
});
96-
}
68+
dispatch({ type: "SET_LOADING", payload: true });
69+
fetch(url, {
70+
method: "POST",
71+
headers: {
72+
"Content-Type": "application/json",
73+
},
74+
body: JSON.stringify(payload), // Convert the data to JSON format
75+
})
76+
.then((response) => {
77+
if (!response.ok) {
78+
throw new Error(`HTTP error! Status: ${response.status}`);
79+
}
80+
return response.json(); // Parse the response body as JSON
81+
})
82+
.then((data) => {
83+
console.log("Query success:", data);
84+
dispatch({
85+
type: "DISPLAY_CODE_OUTPUT",
86+
payload: {
87+
code: data.response.code,
88+
language: "c",
89+
},
90+
});
91+
dispatch({ type: "SET_LOADING", payload: false });
92+
})
93+
.catch((error) => {
94+
console.error("Error fetching response:", error);
95+
dispatch({ type: "SET_LOADING", payload: false });
96+
});
97+
}
9798

98-
function handleDropdownClick(choice) {
99-
console.log(`Clicked on dropdown:`, choice);
100-
setLanguage(choice);
101-
setCode(languageCommentsMap.get(choice));
102-
}
99+
function handleDropdownClick(choice) {
100+
console.log(`Clicked on dropdown:`, choice);
101+
setLanguage(choice);
102+
setCode(languageCommentsMap.get(choice));
103+
}
103104

104-
return (
105-
<>
106-
<div style={{ marginBottom: "1rem" }}>
107-
<MenuDropdown
108-
title={language}
109-
replaceTitle={true}
110-
items={[
111-
{
112-
label: "JavaScript",
113-
action: () => handleDropdownClick("javascript"),
114-
},
115-
{
116-
label: "Python",
117-
action: () => handleDropdownClick("python"),
118-
},
119-
]}
120-
/>
121-
</div>
105+
return (
106+
<>
107+
<div style={{ marginBottom: "1rem" }}>
108+
<MenuDropdown
109+
title={language}
110+
replaceTitle={true}
111+
items={[
112+
{
113+
label: "JavaScript",
114+
action: () => handleDropdownClick("javascript"),
115+
},
116+
{
117+
label: "Python",
118+
action: () => handleDropdownClick("python"),
119+
},
120+
]}
121+
/>
122+
</div>
122123

123-
<Editor
124-
height="65vh"
125-
theme="vs-dark"
126-
className="container"
127-
language={language}
128-
defaultLanguage="python"
129-
defaultValue={defaultCode}
130-
value={code}
131-
onChange={(v, e) => setCode(v)}
132-
onMount={handleEditorDidMount}
133-
beforeMount={handleEditorWillMount}
134-
onValidate={handleEditorValidation}
135-
/>
124+
<Editor
125+
height="65vh"
126+
theme="vs-dark"
127+
className="container"
128+
language={language}
129+
defaultLanguage="python"
130+
defaultValue={defaultCode}
131+
value={code}
132+
onChange={(v, e) => setCode(v)}
133+
onMount={handleEditorDidMount}
134+
beforeMount={handleEditorWillMount}
135+
onValidate={handleEditorValidation}
136+
/>
136137

137-
<QueryButtons handleClick={handleGenerate}></QueryButtons>
138-
</>
139-
);
138+
<QueryButtons handleClick={handleGenerate}></QueryButtons>
139+
</>
140+
);
140141
}

‎client/src/components/PromptInput/PromptInput.jsx

Lines changed: 71 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
11
import { useState } from "react";
22
import { Input } from "@mui/base/Input";
33
import "./PromptInput.css";
4-
import TextField from "@mui/material/TextField";
54
import { Typography } from "@mui/material";
65
import QueryButtons from "../QueryButtons/QueryButtons";
6+
import { useDispatch } from "react-redux";
77

88
export default function PromptInput() {
9-
const [inputValue, setInputValue] = useState("");
10-
const [error, setError] = useState("");
9+
const [inputValue, setInputValue] = useState("");
10+
const [error, setError] = useState("");
11+
const dispatch = useDispatch();
1112

13+
const handleInputChange = (e) => {
14+
setInputValue(e.target.value);
15+
};
1216
const handleInputChange = (e) => {
1317
setInputValue(e.target.value);
1418
};
@@ -22,33 +26,74 @@ export default function PromptInput() {
2226
}
2327

2428
// Perform further validation or submit the form
29+
const url = "http://localhost:5000/openai";
30+
const payload = {
31+
language: "",
32+
content: inputValue.trim(),
33+
type: "exp",
34+
};
35+
console.log("Payload:", payload);
36+
37+
dispatch({ type: "SET_LOADING", payload: true });
38+
fetch(url, {
39+
method: "POST",
40+
headers: {
41+
"Content-Type": "application/json",
42+
},
43+
body: JSON.stringify(payload), // Convert the data to JSON format
44+
})
45+
.then((response) => {
46+
if (!response.ok) {
47+
throw new Error(`HTTP error! Status: ${response.status}`);
48+
}
49+
return response.json(); // Parse the response body as JSON
50+
})
51+
.then((data) => {
52+
console.log("Query success:", data);
53+
dispatch({
54+
type: "DISPLAY_CODE_OUTPUT",
55+
payload: {
56+
code: data.response.code,
57+
language: "c",
58+
},
59+
});
60+
dispatch({ type: "SET_LOADING", payload: false });
61+
})
62+
.catch((error) => {
63+
console.error("Error fetching response:", error);
64+
dispatch({ type: "SET_LOADING", payload: false });
65+
});
2566

2667
// Reset the input value and error state
2768
setInputValue("");
2869
setError("");
2970
};
71+
// Reset the input value and error state
72+
setInputValue("");
73+
setError("");
74+
};
75+
76+
return (
77+
<div
78+
style={{
79+
display: "flex",
80+
flexDirection: "column",
81+
gap: "0.5rem",
82+
width: "100%",
83+
height: "100%",
84+
paddingLeft: "1rem",
85+
justifyContent: "center",
86+
}}
87+
>
88+
<Typography sx={{ fontSize: "3rem", fontWeight: 700 }}>
89+
Text Input
90+
</Typography>
3091

31-
return (
32-
<div
33-
style={{
34-
display: "flex",
35-
flexDirection: "column",
36-
gap: "0.5rem",
37-
width: "100%",
38-
height: "100%",
39-
paddingLeft: "1rem",
40-
justifyContent: "center",
41-
}}
42-
>
43-
<Typography sx={{ fontSize: "3rem", fontWeight: 700 }}>
44-
Text Input
45-
</Typography>
46-
47-
<Input
48-
slotProps={{ input: { className: "prompt-input" } }}
49-
placeholder="Enter your prompt here…"
50-
/>
51-
<QueryButtons />
52-
</div>
53-
);
92+
<Input
93+
slotProps={{ input: { className: "prompt-input" } }}
94+
placeholder="Enter your prompt here…"
95+
/>
96+
<QueryButtons />
97+
</div>
98+
);
5499
}

0 commit comments

Comments
 (0)