Skip to content

Commit eee29d0

Browse files
vivek9patelvivek9patel
committed
adds preview screen
1 parent 1cb2461 commit eee29d0

File tree

4 files changed

+82
-24
lines changed

4 files changed

+82
-24
lines changed

‎src/App.js‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { useState } from 'react';
1+
import { useState, useEffect } from 'react';
22
import IDE from "./components/IDE";
33
import { Login, Logout } from "./components/auth/Auth0";
44
import { useAuth0 } from '@auth0/auth0-react'
55
import { Icon } from '@iconify/react';
66
import axios from 'axios';
7+
import { v4 as uuidV4 } from 'uuid';
78
import runIcon from './images/icons/run.svg';
89
import whiteboard24Regular from '@iconify/icons-fluent/whiteboard-24-regular';
10+
import Preview from './components/Preview';
911

1012
function App() {
1113
const [textEditor, setTextEditor] = useState('input');
@@ -16,9 +18,24 @@ function App() {
1618
const [input, setInput] = useState('');
1719
const [python, setpython] = useState('');
1820
const [modal, setModal] = useState(false);
21+
const [docId, setDocId] = useState(null);
22+
const [isDocId, setIsDocId] = useState(false);
1923
const { isAuthenticated, user } = useAuth0();
2024

2125

26+
useEffect(() => {
27+
if (window.location.pathname === "/") {
28+
const uid = uuidV4();
29+
setDocId(uid)
30+
setIsDocId(false);
31+
}
32+
else {
33+
setDocId(window.location.pathname.split('/')[1])
34+
setIsDocId(true);
35+
}
36+
}, []);
37+
38+
2239
let statusLoop = null;
2340

2441
const runCode = () => {
@@ -118,11 +135,16 @@ function App() {
118135
}
119136

120137
return (
121-
<div className="flex">
122-
<div className="h-screen flex flex-grow flex-col">
123-
<Header userInfo={user} runCode={runCode} isAuthenticated={isAuthenticated} toggleModal={toggleModal} />
124-
<IDE modal={modal} toggleModal={toggleModal} setModal={setModal} python={python} setpython={setpython} input={input} setInput={setInput} selected={selected} setSelected={setSelected} output={output} setOutput={setOutput} textEditor={textEditor} setTextEditor={setTextEditor} processing={processing} setProcessing={setProcessing} percentageStage={percentageStage} setPercentageStage={setPercentageStage} />
125-
</div>
138+
<div className="h-screen flex flex-grow flex-col">
139+
{
140+
isDocId ?
141+
<>
142+
<Header userInfo={user} runCode={runCode} isAuthenticated={isAuthenticated} toggleModal={toggleModal} />
143+
<IDE docId={docId} modal={modal} toggleModal={toggleModal} setModal={setModal} python={python} setpython={setpython} input={input} setInput={setInput} selected={selected} setSelected={setSelected} output={output} setOutput={setOutput} textEditor={textEditor} setTextEditor={setTextEditor} processing={processing} setProcessing={setProcessing} percentageStage={percentageStage} setPercentageStage={setPercentageStage} />
144+
</>
145+
:
146+
<Preview docId={docId} />
147+
}
126148
</div>
127149
);
128150
}

‎src/components/IDE.js‎

Lines changed: 10 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,9 @@ import { Icon } from '@iconify/react';
1818
import eraser24Filled from '@iconify/icons-fluent/eraser-24-filled';
1919
import penFill from '@iconify/icons-bi/pen-fill';
2020
import 'react-circular-progressbar/dist/styles.css';
21-
import { v4 as uuidV4 } from 'uuid';
2221

2322

24-
export default function IDE({ modal, toggleModal, python, setpython, input, setInput, selected, setSelected, output, textEditor, setTextEditor, processing, percentageStage }) {
25-
const [DocId, setDocId] = useState(null);
23+
export default function IDE({ docId, modal, toggleModal, python, setpython, input, setInput, selected, setSelected, output, textEditor, setTextEditor, processing, percentageStage }) {
2624
const [socket, setSocket] = useState(null);
2725
const [cpp, setcpp] = useState('');
2826
const [java, setjava] = useState('');
@@ -42,14 +40,6 @@ export default function IDE({ modal, toggleModal, python, setpython, input, setI
4240

4341

4442
useEffect(() => {
45-
if (window.location.pathname === "/") {
46-
const uid = uuidV4()
47-
setDocId(uid)
48-
window.location.href = "/" + uid
49-
}
50-
else {
51-
setDocId(window.location.pathname.split('/')[1])
52-
}
5343
var TempSocket = io(process.env.REACT_APP_BACKEND_ENDPOINT_URL);
5444
setSocket(TempSocket);
5545
const peer = new Peer(undefined, {
@@ -67,14 +57,14 @@ export default function IDE({ modal, toggleModal, python, setpython, input, setI
6757

6858
useEffect(() => {
6959
if (socket == null) return;
70-
socket.emit('get-document', DocId);
60+
socket.emit('get-document', docId);
7161
socket.once('load-document', (data) => {
7262
setcpp(data.cpp);
7363
setjava(data.java);
7464
setpython(data.python);
7565
});
7666
// eslint-disable-next-line
77-
}, [socket, DocId]);
67+
}, [socket, docId]);
7868

7969

8070
useEffect(() => {
@@ -177,10 +167,10 @@ export default function IDE({ modal, toggleModal, python, setpython, input, setI
177167
setUserId(id);
178168
myVideoCont.id = id;
179169
myVideoCont.dataset.name = userName;
180-
socket.emit('join-room', DocId, id);
170+
socket.emit('join-room', docId, id);
181171
});
182172
// eslint-disable-next-line
183-
}, [socket, DocId, peer]);
173+
}, [socket, docId, peer]);
184174

185175
const addVideo = useCallback(() => {
186176
if (socket == null) return;
@@ -243,10 +233,10 @@ export default function IDE({ modal, toggleModal, python, setpython, input, setI
243233
myVideoCont.id = id;
244234
myVideoCont.dataset.name = userName;
245235

246-
socket.emit('join-room', DocId, id);
236+
socket.emit('join-room', docId, id);
247237
});
248238
// eslint-disable-next-line
249-
}, [socket, DocId, peer]);
239+
}, [socket, docId, peer]);
250240

251241

252242

@@ -624,7 +614,9 @@ function RightVideoPanel({ muteCam, muteMic }) {
624614
<img src={videoIcon} onClick={muteCam} alt="video icon" />
625615
</button>
626616
<button className="bg-orange-standard border border-r rounded-full h-8 w-8 p-1.5">
627-
<img src={phoneIcon} onClick={muteMic} alt="phone icon" />
617+
<img src={phoneIcon} onClick={() => {
618+
window.location.href = "/"
619+
}} alt="phone icon" />
628620
</button>
629621
</div>
630622
</div>

‎src/components/Preview.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react'
2+
3+
export default function Preview({ docId }) {
4+
5+
const joinRoomViaRoomId = () => {
6+
const roomId = document.getElementById("roomIdInput");
7+
const roomIdValue = roomId.value;
8+
9+
if (roomIdValue.includes("http") || roomIdValue.includes("https")) {
10+
const url = new URL(roomIdValue);
11+
const path = url.pathname;
12+
window.location.href = `${path}`;
13+
}
14+
else {
15+
window.location.href = `/${roomIdValue}`;
16+
}
17+
}
18+
19+
return (
20+
<div className="bg-orange-standard select-none flex items-center justify-center h-full w-full">
21+
<div className="mb-20 flex flex-col items-center">
22+
<div className="flex w-full text-white text-7xl font-bold codeFont justify-center">
23+
<span>&#60;CodeConnect &#47;&#62;</span>
24+
</div>
25+
<div className="flex flex-col mt-20 justify-center text-white">
26+
<button onClick={() => {
27+
window.location.href = `/${docId}`
28+
}} className=" hover:shadow-md duration-150 px-4 py-2 rounded-lg shadow text-blue-500 bg-white border border-blue-600 font-semibold">Create Room</button>
29+
{/* <button className=" hover:shadow-md duration-300 px-4 mx-2 py-2 rounded-lg shadow bg-blue-600 font-medium">Sign Up</button> */}
30+
<div className="mt-10 flex">
31+
<input id="roomIdInput" placeholder="Enter Room ID" type="text" className=" duration-300 rounded w-80 border-white focus:shadow-lg shadow-md text-black outline-none focus:outline-none px-4 py-3 codeFont" />
32+
<button onClick={joinRoomViaRoomId} className="hover:shadow-lg duration-300 hover:bg-blue-700 px-4 ml-2 py-2 rounded-lg shadow bg-blue-600 font-medium">Join Room</button>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
)
38+
}

‎src/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&display=swap');
2+
13
@tailwind base;
24
@tailwind components;
35
@tailwind utilities;
@@ -6,6 +8,10 @@ body,html{
68
overflow: hidden;
79
}
810

11+
.codeFont{
12+
font-family: 'Source Code Pro', monospace;
13+
}
14+
915
.playground {
1016
height: 100%;
1117
background-color: #1e1e25;

0 commit comments

Comments
 (0)