Skip to content

Commit d2addc2

Browse files
VineethKumarMVineethKumarM
committed
peer implementation successful
1 parent 380b8fb commit d2addc2

File tree

4 files changed

+368
-51
lines changed

4 files changed

+368
-51
lines changed

‎code2face/src/App.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import './App.css';
2-
import React,{useCallback,useContext, useState, useEffect, createContext, useReducer} from 'react';
2+
import React,{createContext, useReducer} from 'react';
33
import {Route , BrowserRouter as Router,Routes} from 'react-router-dom'
44
import { initialState, reducer } from './reducers/userReducer';
55
import 'react-bootstrap'
@@ -8,11 +8,9 @@ import MyNavbar from './components/navbar';
88
import Register from './components/Register';
99
import Login from './components/Login';
1010
import Home from './pages/home';
11-
import CallPage from './pages/callPage';
1211
import NotFound from './pages/NotFound';
1312
// import Testing from './pages/testing';
1413
import { Toaster } from 'react-hot-toast';
15-
import Chat from './components/chat';
1614
import Slides from './pages/slides';
1715
import AddSlides from './pages/addSlides';
1816
import PeerCall from './pages/peerCall';

‎code2face/src/components/pchat.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import React, {useEffect, useState} from 'react'
2+
import { Form, Button } from 'react-bootstrap'
3+
import toast from 'react-hot-toast'
4+
5+
import "../styles/chat.css"
6+
import ACTIONS from '../Actions'
7+
8+
const Chat = ({sendHandler, roomId, username}) => {
9+
10+
const [msg, setmsg] = useState('')
11+
12+
// useEffect(() => {
13+
// socketRef.current?.on(ACTIONS.RECV_MSG, ({sender,text}) => {
14+
// addRecvMsg(text,sender)
15+
// })
16+
// },[socketRef.current])
17+
18+
19+
const handleChange = (e) => {
20+
setmsg(e.target.value)
21+
}
22+
23+
const handleSend = (e) => {
24+
e.preventDefault();
25+
if(msg.length==0) return;
26+
sendHandler(2,{username, msg})
27+
// for(let {conn, name} of conns) {
28+
// conn.send({sig:2, data:{username, msg}})
29+
// }
30+
addSendMsg(msg)
31+
setmsg('')
32+
}
33+
34+
35+
// const addRecvMsg = (text,name='Unknown') => {
36+
// const element =
37+
// ` <div class='receive'>
38+
// <div class='msg'>
39+
// <span class='senderName' >${name}</span>
40+
// ${text}
41+
// </div>
42+
// </div>`;
43+
// const rdiv = document.createElement('div')
44+
// rdiv.innerHTML=element
45+
// rdiv.setAttribute('class', 'msg-container')
46+
// const par = document.getElementById('msg-div')
47+
// par?.appendChild(rdiv)
48+
// par.scrollTop = par.scrollHeight
49+
// }
50+
51+
const addSendMsg = (text) => {
52+
const element =
53+
` <div class='send'>
54+
<div class='msg'>
55+
${text}
56+
</div>
57+
</div>`;
58+
const rdiv = document.createElement('div')
59+
rdiv.innerHTML=element
60+
rdiv.setAttribute('class', 'msg-container')
61+
62+
const par = document.getElementById('msg-div')
63+
par?.appendChild(rdiv)
64+
par.scrollTop = par.scrollHeight
65+
}
66+
67+
68+
return (
69+
<div className='chatCont mt5'>
70+
<div className='chatBox'>
71+
<div className='scroller' id='msg-div'>
72+
</div>
73+
<div className='minp'>
74+
<Form onSubmit={handleSend}>
75+
76+
77+
<Form.Control
78+
type="text"
79+
placeholder="Enter message"
80+
name="msg"
81+
onChange={handleChange}
82+
value={msg}
83+
className='finp inlin'
84+
/>
85+
{/* <Button className='inlin' onClick={handleSend}> Send</Button> */}
86+
</Form>
87+
</div>
88+
</div>
89+
</div>
90+
)
91+
}
92+
93+
export default Chat

‎code2face/src/components/peditor.js

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import React, {useEffect, useState, useRef, useMemo} from 'react'
2+
import { useLocation } from 'react-router-dom';
3+
// codemirror components
4+
import { useCodeMirror } from '@uiw/react-codemirror';
5+
6+
// import languages
7+
import { javascript } from '@codemirror/lang-javascript';
8+
import { cpp } from '@codemirror/lang-cpp';
9+
import { python } from '@codemirror/lang-python';
10+
import { java } from '@codemirror/lang-java';
11+
12+
// import themes
13+
import { githubDark } from '@uiw/codemirror-theme-github';
14+
import { xcodeDark, xcodeLight } from '@uiw/codemirror-theme-xcode';
15+
import { eclipse } from '@uiw/codemirror-theme-eclipse';
16+
import { abcdef } from '@uiw/codemirror-theme-abcdef';
17+
import { solarizedDark } from '@uiw/codemirror-theme-solarized';
18+
import ACTIONS from '../Actions';
19+
import copy from 'copy-to-clipboard';
20+
import toast from 'react-hot-toast';
21+
import "../styles/editor.css"
22+
import { Button } from 'react-bootstrap';
23+
24+
25+
// const extensions = [javascript()]
26+
27+
28+
const Editor = ({ sendHandler, roomId, onCodeChange, code, lang }) => {
29+
const history = useLocation()
30+
const location = useLocation()
31+
const uname = location?.state?.username
32+
const [theme, setTheme] = useState(githubDark);
33+
// const [code, setcode] = useState(code);
34+
const [selectValue, setSelectValue] = useState('javascript')
35+
const [extensions, setExtensions] = useState([javascript()])
36+
const [placeholder, setPlaceholder] = useState('Please enter the code.');
37+
const thememap = new Map()
38+
const langnMap = new Map()
39+
40+
const editorRef = useRef(null)
41+
const {setContainer} = useCodeMirror({
42+
container: editorRef.current,
43+
extensions,
44+
value: code,
45+
theme,
46+
editable: true,
47+
height: `70vh`,
48+
width:`45vw`,
49+
basicSetup:{
50+
foldGutter: false,
51+
dropCursor: false,
52+
indentOnInput: false,
53+
},
54+
options:{
55+
autoComplete:true,
56+
},
57+
placeholder : placeholder,
58+
style : {
59+
position: `relative`,
60+
zIndex: `999`,
61+
borderRadius: `10px`,
62+
},
63+
onChange: (value) => {
64+
onCodeChange(value)
65+
// console.log(conns);
66+
sendHandler(3,{value})
67+
// for(let {conn, name} of conns) {
68+
// conn.send({sig:3, data:{value}})
69+
// }
70+
}
71+
72+
})
73+
74+
75+
const themeInit = () => {
76+
thememap.set("githubDark",githubDark)
77+
thememap.set("xcodeDark",xcodeDark)
78+
thememap.set("eclipse",eclipse)
79+
thememap.set("xcodeLight",xcodeLight)
80+
thememap.set("abcdef",abcdef)
81+
thememap.set("solarizedDark",solarizedDark)
82+
}
83+
84+
const langInit = () => {
85+
langnMap.set('java', java)
86+
langnMap.set('cpp', cpp)
87+
langnMap.set("javascript", javascript)
88+
langnMap.set('python', python)
89+
}
90+
91+
92+
const handleThemeChange = (event) => {
93+
setTheme(thememap.get(event.target.value));
94+
};
95+
96+
const handleLanguageChange = (event) => {
97+
setExtensions([langnMap.get(event.target.value)()]);
98+
99+
sendHandler(4,{newLang : event.target.value})
100+
setSelectValue(event.target.value)
101+
};
102+
103+
themeInit()
104+
langInit()
105+
106+
useEffect(() => {
107+
if(!editorRef.current) {
108+
alert('error loading editor')
109+
history('/')
110+
}
111+
if(editorRef.current) {
112+
setContainer(editorRef.current)
113+
}
114+
115+
},[editorRef.current])
116+
117+
useEffect(() => {
118+
if(lang!=selectValue && lang) {
119+
setSelectValue(lang)
120+
setExtensions([langnMap.get(lang)()]);
121+
}
122+
},[lang])
123+
124+
const copyCode = (e) => {
125+
e.preventDefault();
126+
if (copy(roomId))
127+
toast.success('Session ID copied')
128+
else toast.error('Cannot copy to clipboard')
129+
}
130+
131+
return (
132+
<div className='editorcomponent'>
133+
<span>Theme:</span>
134+
<select onChange={handleThemeChange} >
135+
<option default value={"githubDark"}>githubDark</option>
136+
<option value={"eclipse"}>eclipse</option>
137+
<option value={"xcodeLight"}>xcodeLight</option>
138+
<option value={"xcodeDark"}>xcodeDark</option>
139+
<option value={"solarizedDark"}>solarizedDark</option>
140+
<option value={"abcdef"}>abcdef</option>
141+
</select>
142+
<span>Language:</span>
143+
<select onChange={handleLanguageChange} value={selectValue}>
144+
<option default value={"javascript"}>javascript</option>
145+
<option value={"java"}>java</option>
146+
<option value={"cpp"}>cpp</option>
147+
<option value={"python"}>python</option>
148+
</select>
149+
<div ref={editorRef} className='ide' ></div>
150+
<div className='d-flex'>
151+
{/* <Button className='mt-3 mx-4 btn-secondary' onClick={updateCode} >Update Code</Button> */}
152+
<Button className='mt-3 btn-info' onClick={copyCode} >Copy Session Id</Button>
153+
</div>
154+
</div>
155+
);
156+
}
157+
158+
export default Editor

0 commit comments

Comments
 (0)