Skip to content

Commit

Permalink
Merge pull request #85 from CS3219-AY2425S1/ben/n4-attempt
Browse files Browse the repository at this point in the history 
Attempt at N4 to add JavaScript into Code Editor
  • Loading branch information
@bensohh
bensohh authored Nov 13, 2024
2 parents 91be737 + c8f437c commit bd95eb0
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 68 deletions.
6 changes: 3 additions & 3 deletions apps/frontend/pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions apps/frontend/src/app/collaboration/[id]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,6 +396,7 @@ export default function CollaborationPage(props: CollaborationProps) {
localStorage.removeItem("collabId");
localStorage.removeItem("questionDocRefId");
localStorage.removeItem("matchedTopics");
localStorage.removeItem("editor-language"); // Remove editor language type when session closed
};

return (
Expand Down
119 changes: 62 additions & 57 deletions apps/frontend/src/components/CollaborativeEditor/CollaborativeEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@ interface Awareness {
submitting: boolean;
id: number;
};
editorState: {
language: string;
id: number;
};
}

export const usercolors = [
Expand All @@ -101,8 +105,10 @@ const CollaborativeEditor = forwardRef(
) => {
const editorRef = useRef(null);
// const providerRef = useRef<WebrtcProvider | null>(null);
const [selectedLanguage, setSelectedLanguage] = useState("Python");
const [selectedLanguage, setSelectedLanguage] = useState("python");
const [mounted, setMounted] = useState(false);
let sessionEndNotified = false;
let sessionEndTimeout: any;

const languageConf = new Compartment();

Expand All @@ -113,57 +119,25 @@ const CollaborativeEditor = forwardRef(
});

// Referenced: https://codemirror.net/examples/config/#dynamic-configuration
// const autoLanguage = EditorState.transactionExtender.of((tr) => {
// if (!tr.docChanged) return null;

// const snippet = tr.newDoc.sliceString(0, 100);

// // Handle code change
// props.onCodeChange(tr.newDoc.toString());

// // Test for various language
// const docIsPython = /^\s*(def|class)\s/.test(snippet);
// const docIsJava = /^\s*(class|public\s+static\s+void\s+main)\s/.test(
// snippet
// ); // Java has some problems
// const docIsCpp = /^\s*(#include|namespace|int\s+main)\s/.test(snippet); // Yet to test c++
// const docIsGo = /^(package|import|func|type|var|const)\s/.test(snippet);

// let newLanguage;
// let languageType;
// let languageLabel;

// if (docIsPython) {
// newLanguage = python();
// languageLabel = "Python";
// languageType = pythonLanguage;
// } else if (docIsJava) {
// newLanguage = java();
// languageLabel = "Java";
// languageType = javaLanguage;
// } else if (docIsGo) {
// newLanguage = go();
// languageLabel = "Go";
// languageType = goLanguage;
// } else if (docIsCpp) {
// newLanguage = cpp();
// languageLabel = "C++";
// languageType = cppLanguage;
// } else {
// newLanguage = javascript(); // Default to JavaScript
// languageLabel = "JavaScript";
// languageType = javascriptLanguage;
// }

// const stateLanguage = tr.startState.facet(language);
// if (languageType == stateLanguage) return null;

// setSelectedLanguage(languageLabel);

// return {
// effects: languageConf.reconfigure(newLanguage),
// };
// });
const autoLanguage = EditorState.transactionExtender.of((tr) => {
if (!tr.docChanged) return null;
const editorLanguage = localStorage.getItem("editor-language") ?? "";
let stateIsJs = tr.startState.facet(language) == javascriptLanguage;
let stateIsPython = tr.startState.facet(language) == pythonLanguage;
if (
(stateIsJs && editorLanguage.toLowerCase() === "javascript") ||
(stateIsPython && editorLanguage.toLowerCase() === "python")
)
return null;

return {
effects: languageConf.reconfigure(
editorLanguage.toLowerCase() === "javascript"
? javascript()
: python()
),
};
});

const [messageApi, contextHolder] = message.useMessage();

Expand Down Expand Up @@ -199,6 +173,7 @@ const CollaborativeEditor = forwardRef(
let latestSubmissionId: number = new Date(0).getTime();
let latestExecutingId: number = new Date(0).getTime();
let latestSubmittingId: number = new Date(0).getTime();
let latestLanguageChangeId: number = new Date(0).getTime();

useImperativeHandle(ref, () => ({
endSession: () => {
Expand All @@ -219,7 +194,20 @@ const CollaborativeEditor = forwardRef(
},
}));

let sessionEndTimeout: any;
useEffect(() => {
localStorage.setItem("editor-language", selectedLanguage);

if (props.providerRef.current && mounted) {
latestLanguageChangeId = Date.now();
props.providerRef.current.awareness.setLocalStateField("editorState", {
language: selectedLanguage,
id: latestLanguageChangeId,
});
success(`Changed Code Editor's language to ${selectedLanguage}`);
} else {
setMounted(true);
}
}, [selectedLanguage]);

useEffect(() => {
if (process.env.NEXT_PUBLIC_SIGNALLING_SERVICE_URL === undefined) {
Expand Down Expand Up @@ -309,6 +297,21 @@ const CollaborativeEditor = forwardRef(
.getStates()
.get(clientID) as Awareness;

// New section to check for changes in language
if (
state &&
state.editorState &&
state.editorState.id !== latestLanguageChangeId
) {
latestSubmissionId = state.editorState.id;
setSelectedLanguage(state.editorState.language);
// if (props.user === state.user.name) {
// console.log("ownself update ownself");
// } else {
// console.log("others update ownself");
// }
}

if (
state &&
state.submissionResultsState &&
Expand Down Expand Up @@ -383,7 +386,7 @@ const CollaborativeEditor = forwardRef(
basicSetup,
languageConf.of(python()),
// languageConf.of(javascript()),
// autoLanguage,
autoLanguage,
yCollab(ytext, provider.awareness, { undoManager }),
keymap.of([indentWithTab]),
codeChangeListener,
Expand All @@ -410,10 +413,12 @@ const CollaborativeEditor = forwardRef(
<div className="code-language">Select Language:</div>
<Select
className="language-select"
defaultValue={selectedLanguage}
// defaultValue={localStorage.getItem("editor-language")}
value={selectedLanguage}
options={ProgrammingLanguageOptions}
onSelect={(val) => setSelectedLanguage(val)}
disabled
onSelect={(val) => {
setSelectedLanguage(val);
}}
/>
</div>
<div
Expand Down
1 change: 1 addition & 0 deletions apps/frontend/src/components/Header/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ const Header = (props: HeaderProps): JSX.Element => {
onClick: () => {
// Clear away the previously stored jwt token in localstorage
deleteToken();
localStorage.clear();
// Redirect user to login page
push("/login");
},
Expand Down
16 changes: 8 additions & 8 deletions apps/frontend/src/utils/SelectOptions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,14 +133,14 @@ export const ProgrammingLanguageOptions = [
value: "python",
label: "Python",
},
{
value: "java",
label: "Java",
},
{
value: "c++",
label: "C++",
},
// {
// value: "java",
// label: "Java",
// },
// {
// value: "c++",
// label: "C++",
// },
{
value: "javascript",
label: "JavaScript",
Expand Down

0 comments on commit bd95eb0

Please sign in to comment.