-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #41 from CS3219-AY2425S1/collabServiceUIandFunction
Collaboration Service Frontend + Basic Implementation
- Loading branch information
Showing
11 changed files
with
1,002 additions
and
129 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,10 @@ | ||
| import { StrictMode } from 'react' | ||
| import { createRoot } from 'react-dom/client' | ||
| import App from './App.tsx' | ||
| import './styles/index.css' | ||
| import './styles/App.css'; | ||
|
|
||
| createRoot(document.getElementById('root')!).render( | ||
| <StrictMode> | ||
| <App /> | ||
| </StrictMode>, | ||
| ) | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
81 changes: 81 additions & 0 deletions
81
peerprep/frontend/src/views/CollabServiceViews/CollabServiceIntegratedView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React, { useState, useEffect, useRef } from 'react'; | ||
| import { UnControlled as CodeMirror } from 'react-codemirror2'; | ||
| import { useParams, useNavigate } from 'react-router-dom'; | ||
| import 'codemirror/lib/codemirror.css'; | ||
| import 'codemirror/theme/material.css'; | ||
| import 'codemirror/mode/javascript/javascript'; | ||
|
|
||
| import * as Y from 'yjs'; | ||
| import { WebsocketProvider } from 'y-websocket'; | ||
|
|
||
| // @ts-check | ||
| import { CodemirrorBinding } from 'y-codemirror'; | ||
|
|
||
| const CollaborationServiceIntegratedView: React.FC = () => { | ||
| const { topic, difficulty, questionId, sessionId } = useParams<{ topic: string; difficulty: string; questionId: string; sessionId: string; }>(); | ||
| const [code, setCode] = useState('// Start coding here...\n'); | ||
| const editorRef = useRef<any>(null); | ||
| const navigate = useNavigate(); | ||
|
|
||
| useEffect(() => { | ||
| console.log(`Session ID: ${sessionId}, Topic: ${topic}, Difficulty: ${difficulty}`); | ||
| console.log(`Question: ${questionId}`); | ||
| }, [sessionId, topic, difficulty, questionId]); | ||
|
|
||
| useEffect(() => { | ||
| document.body.style.overflow = 'hidden'; | ||
| return () => { | ||
| document.body.style.overflow = 'auto'; | ||
| }; | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| const ydoc = new Y.Doc(); | ||
| const provider = new WebsocketProvider('ws://localhost:1234/' + sessionId, 'collaborative-doc', ydoc); | ||
| const yText = ydoc.getText('codemirror'); | ||
|
|
||
| if (editorRef.current) { | ||
| const binding = new CodemirrorBinding(yText, editorRef.current.editor, provider.awareness); | ||
| return () => { | ||
| binding.destroy(); | ||
| provider.destroy(); | ||
| ydoc.destroy(); | ||
| }; | ||
| } | ||
| }, []); | ||
|
|
||
| const handleBeforeCodeChange = (editor: any, data: any, value: string) => { | ||
| //setCode(value); | ||
| }; | ||
|
|
||
| const handleLeaveSession = () => { | ||
| navigate('/matching'); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className="editor-container-parent"> | ||
| <div className="editor-header"> | ||
| <h2>Collaboration Session</h2> | ||
| <p>Topic: {topic} | Difficulty: {difficulty} | Session: {sessionId}</p> | ||
| <p>Question: {questionId}</p> | ||
| <button onClick={handleLeaveSession} className="leave-btn">Leave Session</button> | ||
| </div> | ||
|
|
||
| <div className="editor-container"> | ||
| <CodeMirror | ||
| ref={editorRef} | ||
| value={code} | ||
| options={{ | ||
| mode: 'javascript', | ||
| lineNumbers: true, | ||
| tabSize: 2, | ||
| indentWithTabs: true | ||
| }} | ||
| onBeforeChange={handleBeforeCodeChange} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default CollaborationServiceIntegratedView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.