Make it possible to switch IDEs while IDE is open

hcp-uw · Sep 21, 2024 · fc4564f · fc4564f
1 parent 927ed05
commit fc4564f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 28 deletions.
diff --git a/starter-frontend/src/components/ide/CodeEditor.tsx b/starter-frontend/src/components/ide/CodeEditor.tsx
@@ -1,25 +1,29 @@
 import React, { ChangeEvent, useState } from "react";
 import Editor from "@monaco-editor/react";
+import { languageOption } from "./languageOptions";
 
 type CodeEditorProps = {
     onChange: (action: string, data: string
         // : ChangeEvent<HTMLInputElement>
     ) => void, 
-    // To-DO: Change to list of options
-    language: string, 
-    code: string, 
-    // To-do: change to list of options
+
+    code: string,
+
+    setCode: React.Dispatch<React.SetStateAction<string>>;
+
+    language: languageOption,
+
     theme: string
 };
 
-export default function CodeEditor( {onChange, language, code, theme}: CodeEditorProps ) {
-    const [value, setValue] = useState<string>(code || "");
+export default function CodeEditor( {onChange, code, setCode, language, theme}: CodeEditorProps ) {
+    // const [value, setValue] = useState<string>(code || "");
 
     const handleEditorChange = (value: string | undefined) => {
         if (typeof value === "undefined") {
             throw new Error("Editor value is undefined.");
         } else {
-            setValue(value);
+            setCode(value);
             onChange("code", value);   
         }
     }
@@ -29,8 +33,8 @@ export default function CodeEditor( {onChange, language, code, theme}: CodeEdito
             <Editor 
                 height={`100%`}
                 width={`100%`}
-                language={language || "javascript"}
-                value={value}
+                language={language.value || "javascript"}
+                value={code}
                 theme={theme}
                 onChange={handleEditorChange}
             />

diff --git a/starter-frontend/src/components/ide/IDE.tsx b/starter-frontend/src/components/ide/IDE.tsx
@@ -10,27 +10,28 @@ import { Editor as TinyMCEEditor } from "tinymce";
 
 type IDEProps = {
     // Initial code in the IDE
-    initCode: string,
+    code: string,
 
-    initLang: number,
+    setCode: React.Dispatch<React.SetStateAction<string>>;
+
+    language: languageOption,
 
+    setLanguage: React.Dispatch<React.SetStateAction<languageOption>>, 
+
     setIsIDEOpen: React.Dispatch<React.SetStateAction<boolean>>, 
 
     editorRef: React.RefObject<TinyMCEEditor | null>
 }
 
 
-export default function IDE({initCode, initLang, setIsIDEOpen, editorRef}: IDEProps): JSX.Element {
-    const [code, setCode] = useState<string>(initCode);
+export default function IDE({code, setCode, language, setLanguage, setIsIDEOpen, editorRef}: IDEProps): JSX.Element {
     const [customInput, setCustomInput] = useState<string>("");
     const [output, setOutput] = useState<boolean>(true);
     const [outputDetails, setOutputDetails] = useState<any | null>(null);
     const [processing, setProcessing] = useState<boolean | null>(null);
-    const [language, setLanguage] = useState<languageOption>(languageOptions[initLang]);
     const [updated, setUpdated] = useState<boolean>(true);
 
     function onSelectChange(sl: languageOption | null): void {
-        console.log("Selected option ", sl);
         if (sl !== null) {
             setLanguage(sl);
             setUpdated(false);
@@ -157,8 +158,9 @@ export default function IDE({initCode, initLang, setIsIDEOpen, editorRef}: IDEPr
             <LanguagesDropdown onSelectChange={onSelectChange} language={language} />
             <CodeEditor 
                 code={code}
+                setCode={setCode}
                 onChange={onChange}
-                language={language.value}
+                language={language}
                 theme="vs-dark"
             />
 

diff --git a/starter-frontend/src/components/ide/LanguagesDropdown.tsx b/starter-frontend/src/components/ide/LanguagesDropdown.tsx
@@ -48,6 +48,7 @@ export default function LanguagesDropdown( { onSelectChange, language }: Languag
         <Select 
             options={languageOptions}
             defaultValue={language}
+            value={language}
             onChange={(selectedOption) => onSelectChange(selectedOption)}
             className="ide-dropdown"
             styles={customStyles}

diff --git a/starter-frontend/src/pages/editor/editor.tsx b/starter-frontend/src/pages/editor/editor.tsx
@@ -16,6 +16,7 @@ import SavePublicButton from "../../components/editor/SavePublicButton";
 import PublicSaveModal from "../../components/editor/PublicSaveModal";
 import IDE from "../../components/ide/IDE";
 import { Editor as TinyMCEEditor } from 'tinymce';
+import { languageOption, languageOptions } from "../../components/ide/languageOptions";
 
 /** Type for storing details about note documents */
 export type DetailsData = {
@@ -49,20 +50,19 @@ export function Note(): JSX.Element {
 
     // IDE
     // If IDE is open
-    // TO-DO CHANGE false
     const [isIDEOpen, setIsIDEOpen] = useState<boolean>(false);
-    // Initial IDE code
-    const [initIDECode, setInitIDECode] = useState<string>("");
-    // Initial IDE language
-    const [initIDELang, setInitIDELang] = useState<number>(0);
+    // IDE code
+    const [code, setCode] = useState<string>("");
+    // IDE language
+    const [language, setLanguage] = useState<languageOption>(languageOptions[0]);
 
     // ***
     const editorRef = useRef<TinyMCEEditor | null>(null);
 
 
     function openNewIDE(): void {
-        setInitIDECode("");
-        setInitIDELang(0);
+        setCode("");
+        setLanguage(languageOptions[0]);
         setIsIDEOpen(true);
     }
 
@@ -87,16 +87,20 @@ export function Note(): JSX.Element {
                     codeBlock.id = "active";
                     const codeContent = codeBlock.textContent;
                     if (codeContent === null) {
-                        setInitIDECode("");
+                        console.log("code null");
+                        setCode("");
                     } else {
-                        setInitIDECode(codeContent);
+                        setCode(codeContent);
                     }
+                    console.log("setting code");
                     const language = codeBlock.dataset.lang;
                     if (language === null) {
-                        setInitIDELang(0);
+                        console.log("language null");
+                        setLanguage(languageOptions[0]);
                     } else {
-                        setInitIDELang(Number(language));
+                        setLanguage(languageOptions[Number(language)]);
                     }
+                    console.log("setting language");
 
                     setIsIDEOpen(true);   
                 }
@@ -278,7 +282,7 @@ export function Note(): JSX.Element {
                 openNewIDE={openNewIDE}/>
                 {
                 isIDEOpen && 
-                <IDE initCode={initIDECode} initLang={initIDELang} setIsIDEOpen={setIsIDEOpen} editorRef={editorRef}/>}
+                <IDE code={code} setCode={setCode} language={language} setLanguage={setLanguage} setIsIDEOpen={setIsIDEOpen} editorRef={editorRef}/>}
             </div>