From ec267738df2d0e9d2a6c01e32bd44ab73afbe5af Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Thu, 24 Oct 2024 21:11:16 +0530
Subject: [PATCH 1/3] refactor: Adjust footer positioning for better alignment
---
src/components/Footer.js | 10 +-
src/components/css/EditorComponent.css | 7 +-
src/pages/EditorComponent.js | 235 +++++++++++++------------
3 files changed, 138 insertions(+), 114 deletions(-)
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 433b2d1..3e2e73e 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -19,27 +19,27 @@ function App() {
<div style={containerStyle}>
<a href="https://github.com/DhanushNehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
<IconButton text="DhanushNehru">
- <FaGithub size={30} style={iconStyle} />
+ <FaGithub size={15} style={iconStyle} />
</IconButton>
</a>
<a href="https://www.linkedin.com/in/dhanushnehru/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
<IconButton text="dhanushnehru" color="#316FF6">
- <FaLinkedin size={30} style={iconStyle} />
+ <FaLinkedin size={15} style={iconStyle} />
</IconButton>
</a>
<a href="https://www.instagram.com/dhanush_nehru/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
<IconButton text="dhanush_nehru" color="#d62976">
- <GrInstagram size={30} style={iconStyle} />
+ <GrInstagram size={15} style={iconStyle} />
</IconButton>
</a>
<a href="https://x.com/Dhanush_Nehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
<IconButton text="Dhanush_Nehru" color="black">
- <FaXTwitter size={30} style={iconStyle} />
+ <FaXTwitter size={15} style={iconStyle} />
</IconButton>
</a>
<a href="https://www.youtube.com/@dhanushnehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
<IconButton text="@dhanushnehru" color="#FF0000">
- <IoLogoYoutube size={30} style={iconStyle} />
+ <IoLogoYoutube size={15} style={iconStyle} />
</IconButton>
</a>
</div>
diff --git a/src/components/css/EditorComponent.css b/src/components/css/EditorComponent.css
index e79853e..db30d59 100644
--- a/src/components/css/EditorComponent.css
+++ b/src/components/css/EditorComponent.css
@@ -42,7 +42,7 @@
width: 100%;
height: 50vh;
}
- .flex-container {
+ .flex-container {
flex-direction: row;
justify-content: space-between;
gap: 0.6em;
@@ -111,3 +111,8 @@
color: #fff;
}
}
+
+.footer {
+ margin-bottom: 12px;
+ margin-top: -8px;
+}
diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js
index 16dd743..06ff4ad 100644
--- a/src/pages/EditorComponent.js
+++ b/src/pages/EditorComponent.js
@@ -47,7 +47,7 @@ const StyledLayout = styled("div")(({ theme }) => ({
const OutputLayout = styled("div")(({ theme }) => ({
backgroundColor: theme.palette.background.paper,
height: "50vh",
- margin: "2rem 0",
+ margin: "1rem 0",
border: `2px solid ${theme.palette.divider}`,
borderRadius: "1rem",
"@media (min-width: 1024px)": {
@@ -142,20 +142,23 @@ function EditorComponent() {
setLoading(true);
try {
const encodedCode = btoa(codeToSubmit);
- const response = await fetch(`${judge0SubmitUrl}?base64_encoded=true&wait=false&fields=*`, {
- method: "POST",
- headers: {
- "Content-Type": "application/json",
- "X-RapidAPI-Key": rapidApiKey,
- "X-RapidAPI-Host": rapidApiHost,
- },
- body: JSON.stringify({
- source_code: encodedCode,
- language_id: languageDetails.ID,
- stdin: "",
- expected_output: "",
- }),
- });
+ const response = await fetch(
+ `${judge0SubmitUrl}?base64_encoded=true&wait=false&fields=*`,
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ "X-RapidAPI-Key": rapidApiKey,
+ "X-RapidAPI-Host": rapidApiHost,
+ },
+ body: JSON.stringify({
+ source_code: encodedCode,
+ language_id: languageDetails.ID,
+ stdin: "",
+ expected_output: "",
+ }),
+ }
+ );
if (!response.ok) {
enqueueSnackbar(
@@ -169,13 +172,16 @@ function EditorComponent() {
const submissionId = data["token"];
setTimeout(() => {
- fetch(`${judge0SubmitUrl}/${submissionId}?base64_encoded=true&fields=*`, {
- method: "GET",
- headers: {
- "X-RapidAPI-Key": rapidApiKey,
- "X-RapidAPI-Host": rapidApiHost,
- },
- })
+ fetch(
+ `${judge0SubmitUrl}/${submissionId}?base64_encoded=true&fields=*`,
+ {
+ method: "GET",
+ headers: {
+ "X-RapidAPI-Key": rapidApiKey,
+ "X-RapidAPI-Host": rapidApiHost,
+ },
+ }
+ )
.then((response) => response.json())
.then((data) => {
if (!data.stdout) {
@@ -199,15 +205,18 @@ function EditorComponent() {
}
}, [enqueueSnackbar, languageDetails]);
- const handleEditorDidMount = useCallback((editor, monaco) => {
- console.log("Editor mounted"); // Debug log
- editorRef.current = editor;
- monacoRef.current = monaco;
- editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
- console.log("Ctrl+Enter pressed in editor");
- submitCode();
- });
- }, [submitCode]);
+ const handleEditorDidMount = useCallback(
+ (editor, monaco) => {
+ console.log("Editor mounted"); // Debug log
+ editorRef.current = editor;
+ monacoRef.current = monaco;
+ editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+ console.log("Ctrl+Enter pressed in editor");
+ submitCode();
+ });
+ },
+ [submitCode]
+ );
useEffect(() => {
const handleKeyDown = (event) => {
@@ -259,7 +268,10 @@ function EditorComponent() {
language={languageDetails.DEFAULT_LANGUAGE}
options={{ minimap: { enabled: false } }}
/>
- <div className="sidebar" style={{ display: "flex", flexDirection: "column" }}>
+ <div
+ className="sidebar"
+ style={{ display: "flex", flexDirection: "column" }}
+ >
{getLanguageLogoById(languageDetails.ID)}
<div style={{ fontWeight: "bold" }}>
{languageDetails.LANGUAGE_NAME}
@@ -306,10 +318,7 @@ function EditorComponent() {
</StyledLayout>
<OutputLayout>
{Array.isArray(output) &&
- output.map((result, i) => (
- <div key={i}>{result}</div>
- ))}
- <Footer />
+ output.map((result, i) => <div key={i}>{result}</div>)}
</OutputLayout>
</>
);
@@ -326,85 +335,95 @@ function EditorComponent() {
>
<h2>Please sign in to use the Code Editor</h2>
<GoogleSignIn />
- <br/>
- <GithubSignIn/>
+ <br />
+ <GithubSignIn />
</div>
);
return (
- <div className="editor-container">
- <Box
- sx={[
- (theme) => ({
- height: "auto",
- margin: "0.5rem",
- paddingLeft: "0.5rem",
- paddingRight: "0.5rem",
- border: `2px solid ${theme.palette.divider}`,
- borderRadius: "1rem",
- }),
- ]}
- >
- <div style={styles.flex}>
- <div style={{ display: "flex", alignItems: "center" }}>
- <img
- src="./images/custom-code-editor-rounded.svg"
- alt="Custom Code Editor icon"
- width={32}
- style={{ marginLeft: "0.5rem" }}
- />
- <span
- style={{
- backgroundClip: "text",
- background: "linear-gradient(#2837BA 0%, #2F1888 100%)",
- WebkitBackgroundClip: "text",
- color: "transparent",
- marginLeft: "0.5rem",
- fontWeight: "bold",
- fontSize: "1.5em",
- }}
- >
- Custom Code Editor
- </span>
- </div>
- <div className="flex-container">
- <div className="flex items-center space-x-2">
- {currentUser ? (
- <>
- <WelcomeText>Welcome, {currentUser.displayName}</WelcomeText>
- <Avatar
- src={currentUser.photoURL}
- alt={currentUser.displayName}
- sx={{
- width: 32,
- height: 32,
- marginLeft: "0.5rem",
- marginRight: "0.5rem",
- }}
- />
- <div className="signout-container">
- <button onClick={handleSignOut} className="signout-button">
- <span>Logout</span>
- </button>
- </div>
- </>
- ) : (
- <>
- <GoogleSignIn />
- <GithubSignIn/>
- </>
- )}
+ <>
+ <div className="editor-container">
+ <Box
+ sx={[
+ (theme) => ({
+ height: "auto",
+ margin: "0.5rem",
+ paddingLeft: "0.5rem",
+ paddingRight: "0.5rem",
+ border: `2px solid ${theme.palette.divider}`,
+ borderRadius: "1rem",
+ }),
+ ]}
+ >
+ <div style={styles.flex}>
+ <div style={{ display: "flex", alignItems: "center" }}>
+ <img
+ src="./images/custom-code-editor-rounded.svg"
+ alt="Custom Code Editor icon"
+ width={32}
+ style={{ marginLeft: "0.5rem" }}
+ />
+ <span
+ style={{
+ backgroundClip: "text",
+ background: "linear-gradient(#2837BA 0%, #2F1888 100%)",
+ WebkitBackgroundClip: "text",
+ color: "transparent",
+ marginLeft: "0.5rem",
+ fontWeight: "bold",
+ fontSize: "1.5em",
+ }}
+ >
+ Custom Code Editor
+ </span>
+ </div>
+ <div className="flex-container">
+ <div className="flex items-center space-x-2">
+ {currentUser ? (
+ <>
+ <WelcomeText>
+ Welcome, {currentUser.displayName}
+ </WelcomeText>
+ <Avatar
+ src={currentUser.photoURL}
+ alt={currentUser.displayName}
+ sx={{
+ width: 32,
+ height: 32,
+ marginLeft: "0.5rem",
+ marginRight: "0.5rem",
+ }}
+ />
+ <div className="signout-container">
+ <button
+ onClick={handleSignOut}
+ className="signout-button"
+ >
+ <span>Logout</span>
+ </button>
+ </div>
+ </>
+ ) : (
+ <>
+ <GoogleSignIn />
+ <GithubSignIn />
+ </>
+ )}
+ </div>
+ <ToggleTheme />
+ <Stars />
</div>
- <ToggleTheme />
- <Stars />
</div>
+ </Box>
+ {currentUser
+ ? renderAuthenticatedContent()
+ : renderUnauthenticatedContent()}
+ <div className="footer">
+ <Footer />
</div>
- </Box>
- {currentUser
- ? renderAuthenticatedContent()
- : renderUnauthenticatedContent()}
- </div>
+ </div>
+ </>
);
}
-export default EditorComponent;
\ No newline at end of file
+export default EditorComponent;
From 27ac590d77e4ed82bf2b7dfddf2449fa2d8f19e4 Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Thu, 24 Oct 2024 21:14:44 +0530
Subject: [PATCH 2/3] removed the fragment
---
src/pages/EditorComponent.js | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js
index 06ff4ad..d26d5aa 100644
--- a/src/pages/EditorComponent.js
+++ b/src/pages/EditorComponent.js
@@ -341,7 +341,6 @@ function EditorComponent() {
);
return (
- <>
<div className="editor-container">
<Box
sx={[
@@ -422,7 +421,6 @@ function EditorComponent() {
<Footer />
</div>
</div>
- </>
);
}
From 4371e010def2a2b26f351f2d655172270c305494 Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Thu, 24 Oct 2024 21:18:33 +0530
Subject: [PATCH 3/3] lint fix
---
src/pages/EditorComponent.js | 148 +++++++++++++++++------------------
1 file changed, 74 insertions(+), 74 deletions(-)
diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js
index d26d5aa..028dea7 100644
--- a/src/pages/EditorComponent.js
+++ b/src/pages/EditorComponent.js
@@ -341,86 +341,86 @@ function EditorComponent() {
);
return (
- <div className="editor-container">
- <Box
- sx={[
- (theme) => ({
- height: "auto",
- margin: "0.5rem",
- paddingLeft: "0.5rem",
- paddingRight: "0.5rem",
- border: `2px solid ${theme.palette.divider}`,
- borderRadius: "1rem",
- }),
- ]}
- >
- <div style={styles.flex}>
- <div style={{ display: "flex", alignItems: "center" }}>
- <img
- src="./images/custom-code-editor-rounded.svg"
- alt="Custom Code Editor icon"
- width={32}
- style={{ marginLeft: "0.5rem" }}
- />
- <span
- style={{
- backgroundClip: "text",
- background: "linear-gradient(#2837BA 0%, #2F1888 100%)",
- WebkitBackgroundClip: "text",
- color: "transparent",
- marginLeft: "0.5rem",
- fontWeight: "bold",
- fontSize: "1.5em",
- }}
- >
+ <div className="editor-container">
+ <Box
+ sx={[
+ (theme) => ({
+ height: "auto",
+ margin: "0.5rem",
+ paddingLeft: "0.5rem",
+ paddingRight: "0.5rem",
+ border: `2px solid ${theme.palette.divider}`,
+ borderRadius: "1rem",
+ }),
+ ]}
+ >
+ <div style={styles.flex}>
+ <div style={{ display: "flex", alignItems: "center" }}>
+ <img
+ src="./images/custom-code-editor-rounded.svg"
+ alt="Custom Code Editor icon"
+ width={32}
+ style={{ marginLeft: "0.5rem" }}
+ />
+ <span
+ style={{
+ backgroundClip: "text",
+ background: "linear-gradient(#2837BA 0%, #2F1888 100%)",
+ WebkitBackgroundClip: "text",
+ color: "transparent",
+ marginLeft: "0.5rem",
+ fontWeight: "bold",
+ fontSize: "1.5em",
+ }}
+ >
Custom Code Editor
- </span>
- </div>
- <div className="flex-container">
- <div className="flex items-center space-x-2">
- {currentUser ? (
- <>
- <WelcomeText>
+ </span>
+ </div>
+ <div className="flex-container">
+ <div className="flex items-center space-x-2">
+ {currentUser ? (
+ <>
+ <WelcomeText>
Welcome, {currentUser.displayName}
- </WelcomeText>
- <Avatar
- src={currentUser.photoURL}
- alt={currentUser.displayName}
- sx={{
- width: 32,
- height: 32,
- marginLeft: "0.5rem",
- marginRight: "0.5rem",
- }}
- />
- <div className="signout-container">
- <button
- onClick={handleSignOut}
- className="signout-button"
- >
- <span>Logout</span>
- </button>
- </div>
- </>
- ) : (
- <>
- <GoogleSignIn />
- <GithubSignIn />
- </>
- )}
- </div>
- <ToggleTheme />
- <Stars />
+ </WelcomeText>
+ <Avatar
+ src={currentUser.photoURL}
+ alt={currentUser.displayName}
+ sx={{
+ width: 32,
+ height: 32,
+ marginLeft: "0.5rem",
+ marginRight: "0.5rem",
+ }}
+ />
+ <div className="signout-container">
+ <button
+ onClick={handleSignOut}
+ className="signout-button"
+ >
+ <span>Logout</span>
+ </button>
+ </div>
+ </>
+ ) : (
+ <>
+ <GoogleSignIn />
+ <GithubSignIn />
+ </>
+ )}
</div>
+ <ToggleTheme />
+ <Stars />
</div>
- </Box>
- {currentUser
- ? renderAuthenticatedContent()
- : renderUnauthenticatedContent()}
- <div className="footer">
- <Footer />
</div>
+ </Box>
+ {currentUser
+ ? renderAuthenticatedContent()
+ : renderUnauthenticatedContent()}
+ <div className="footer">
+ <Footer />
</div>
+ </div>
);
}