Updated text field with popping code editor

frontend/src/components/ShuffleCodeEditor.jsx

@@ -7,10 +7,12 @@ import 'codemirror/keymap/sublime';
 import 'codemirror/theme/gruvbox-dark.css';
 
 const Textfield = (props) => {
-
+	const {fieldCount, setFieldCount} = props
+	// const {editorData} = props
+	const {changeActionParameterCodeMirror} = props 
     const {expansionModalOpen, setExpansionModalOpen} = props
     const {codedata, setcodedata} = props
-	const [localcodedata, setlocalcodedata] = React.useState("print('Hello')");
+	const [localcodedata, setlocalcodedata] = React.useState(codedata === undefined || codedata === null || codedata.length === 0 ? "" : codedata);
     // const {codelang, setcodelang} = props
     const theme = useTheme();
 
@@ -32,30 +34,64 @@ const Textfield = (props) => {
 			<div
 				style={{
 					display: 'flex',
-					justifyContent: 'right',
 				}}
 			>
-				<button
+				<DialogTitle
 					style={{
-						color: "white",
-						background: "#27292d",
-						border: "2px solid white",
-						borderRadius: '50%',
-						fontSize: 15,
-						width: 40,
-						height: 40,
-						cursor: "pointer"
-					}}
-					onClick={() => {
-						setExpansionModalOpen(false)
+						paddingBottom:20,
 					}}
 				>
-					╳
-				</button>
+					<span
+						style={{
+							color: "white"
+						}}
+					>
+						Code Editor
+					</span>
+					<span
+						style={{
+							backgroundColor: "#f85a3e",
+							padding: 6,
+							paddingBottom: 6,
+							marginLeft: 20,
+							marginBottom: 50,
+							borderRadius: 10,
+							color: "white",
+							fontSize: "75%"
+						}}
+					>
+						Python
+					</span>
+				</DialogTitle>
+				<div
+					style={{
+						width: 60,
+						marginLeft: 320,
+						display: 'flex',
+						justifyContent: 'right',
+					}}
+				>
+					<button
+						style={{
+							color: "white",
+							background: "#27292d",
+							border: "2px solid white",
+							borderRadius: '50%',
+							fontSize: 15,
+							width: 40,
+							height: 40,
+							cursor: "pointer"
+						}}
+						onClick={() => {
+							setExpansionModalOpen(false)
+						}}
+					>
+						╳
+					</button>
+				</div>
 			</div>
-			<DialogTitle><span style={{color: "white"}}>Code Editor</span></DialogTitle>
 			<CodeMirror
-				value = {codedata}
+				value = {localcodedata}
 				height="200px"
 				onChange={(value) => {
 					// setcodedata(value.getValue())
@@ -68,21 +104,55 @@ const Textfield = (props) => {
 					// mode: {codelang},
 				}}
 			/>
-			<button
+			<div
 				style={{
-					color: "white",
-					background: "#f85a3e",
-					border: "none",
-					height: 35,
-					cursor: "pointer"
-				}}
-				onClick={() => {
-                    setcodedata(localcodedata)
-					setExpansionModalOpen(false)
+					display: 'flex',
+					// justifyContent: 'left',
 				}}
 			>
-				DONE
-			</button>
+				<div>
+					<button
+						style={{
+							color: "white",
+							background: "#383b49",
+							border: "none",
+							height: 35,
+							width: 290,
+							marginLeft: 5,
+							marginTop: 20,
+							cursor: "pointer"
+						}}
+						onClick={() => {
+							setExpansionModalOpen(false)
+						}}
+					>
+						CANCEL
+					</button>
+				</div>
+				<div>
+					<button
+						style={{
+							color: "white",
+							background: "#f85a3e",
+							border: "none",
+							height: 35,
+							width: 290,
+							marginLeft: 10,
+							marginTop: 20,
+							cursor: "pointer"
+						}}
+						onClick={(event) => {
+							console.log(codedata)
+							console.log(fieldCount)
+							changeActionParameterCodeMirror(event, fieldCount, localcodedata)
+							setExpansionModalOpen(false)
+							setcodedata(localcodedata)
+						}}
+					>
+						DONE
+					</button>
+				</div>
+			</div>
 		</Dialog>)
 }