Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Available rooms #78

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Available rooms #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd3f709
fixed formatting and going to correct room
Mar 8, 2024
2c706e5
last bit of formatting for available rooms
Mar 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/app/challenge/[id]/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
"use client";

import { useRef } from 'react';
import { useRef, useEffect, useState } from 'react';
import Editor from '@monaco-editor/react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
Expand All @@ -10,6 +10,7 @@ export default function Challenge({ params: { id: challengeId }}) {
// const [code, setCode] = useState();
const editorRef = useRef(null);


function handleEditorDidMount(editor) {
editorRef.current = editor;
}
Expand All @@ -31,6 +32,7 @@ export default function Challenge({ params: { id: challengeId }}) {
}

return (

<Box>
<Typography variant="h2" gutterBottom>Coding Challenge</Typography>
<Box sx={{ width: '100%', maxWidth: '80em' }}>
Expand Down
30 changes: 13 additions & 17 deletions src/app/dashboard/AvailableRooms.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@ import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import ButtonGroup from '@mui/material/ButtonGroup';
import { styled } from '@mui/material/styles';
import Typography from '@mui/material/Typography';

import { grey } from '@mui/material/colors';

const RoomNumberItem = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
Expand All @@ -29,15 +28,15 @@ function RoomModal({ room, onJoinRoomClick, onDeleteClick, onClose }) {
<Box
textAlign={'center'}
border='2px solid grey'
borderRadius={4}
borderRadius={2}
p={2}
mb={2}
>
<Typography variant='h6'>{`Room ${room._id}`}</Typography>
<Typography variant='h8' color={grey[900]}>{`Selected Coding Challenge Room`}</Typography>
</Box>
<Box
height={80}
width={200}
width={300}
my={4}
display="flexwrap"
fontSize={10}
Expand All @@ -46,12 +45,14 @@ function RoomModal({ room, onJoinRoomClick, onDeleteClick, onClose }) {
p={2}
sx={{
border: '2px solid grey',
left: '5vw',
position: 'relative',
textAlign: 'center',
backgroundColor: '#f0f0f0',
borderRadius: 2,
color: grey[900],
}}
>
{room.passcode && <p>Passcode: {room.passcode}</p>}
{room._id && <p>Link: localhost:3000/challenge/{room._id}</p>}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please adjust this to reference a generic url - in production, it won't be localhost:3000.

</Box>
<ButtonGroup variant="contained" orientation="vertical" size="large" sx={{ position: "relative", left:"6.5vw" }}>
<Button onClick={() => onJoinRoomClick(room)}>Join Room</Button>
Expand All @@ -65,7 +66,6 @@ function RoomModal({ room, onJoinRoomClick, onDeleteClick, onClose }) {
export default function AvailableRooms() {
const [rooms, setRooms] = useState(null);
const [selectedRoom, setSelectedRoom] = useState(null);
const [passcode, setPasscode] = useState('');
// const [isModalOpen, setIsModalOpen] = useState(false);
const { data: session } = useSession({ required: true });

Expand All @@ -85,7 +85,7 @@ export default function AvailableRooms() {

const handleJoinRoom = (room) => {
if (room) {
window.open(`/challenge/${room.id}`, '_blank');
window.open(`/challenge/${room._id}`, '_blank');
}
};

Expand Down Expand Up @@ -117,10 +117,9 @@ export default function AvailableRooms() {
headers: {
"Content-Type": 'application/json'
},
body: JSON.stringify({ passcode, recruiterId: session.user._id }),
body: JSON.stringify({ recruiterId: session.user._id }),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

passcode is still a required field for this POST route - please retain it

});
const newChallengeId = res.json();
setPasscode('');
await getRooms();
};

Expand All @@ -134,15 +133,12 @@ export default function AvailableRooms() {
top: '50%',
}}
>
<Box borderBottom="2px solid grey" pb={2} mb={2} mt={2}>
<Typography variant="h5" fontWeight='bold'>
<Box border="2px solid grey" p={2} mb={2} mt={2} borderRadius={2}>
<Typography variant="h6" fontWeight='bold' color={grey[900]}>
Coding Challenge Rooms
</Typography>
</Box>
<Box>
<TextField label="passcode" onChange={(e) => {
setPasscode(e.target.value);
}} value={passcode} />
<Button onClick={handleCreateRoom}>Add Room</Button>
</Box>
<div className="room-list">
Expand All @@ -165,4 +161,4 @@ export default function AvailableRooms() {
onClose={handleCloseModal}
/>
);
}
}
67 changes: 33 additions & 34 deletions src/app/dashboard/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,41 +14,40 @@ import Notifications from './Notifications/Notifications';


export default function Dashboard() {
const { data: session } = useSession({
// required session: https://next-auth.js.org/getting-started/client#require-session
required: true
});
const { data: session } = useSession({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did you just adjust the indentation or something?

// required session: https://next-auth.js.org/getting-started/client#require-session
required: true
});

return (
// <Box>
// <Typography>Dashboard</Typography>
// <Box>
// {`Currently logged in as: ${session && session.user.email}`}
// </Box>
// </Box>
<>
<CssBaseline />
<Container maxWidth="100vw" sx={{ display: 'flex' }}>
{/* left-most column component */}
<Box sx={{ width: '25%', position:'relative', bgcolor: 'primary', height: '90vh', border: 'thin grey dotted' }}>
<EditAccount userEmail={session && session.user.email} />
<Box sx={{ position:'relative', bgcolor: 'primary', height: '25vh', border: 'thin grey dotted' }} />
<AvailableRooms sx={{ position:'relative', bgcolor: 'white', height: '45vh', border: 'thin grey dotted' }} />
return (
// <Box>
// <Typography>Dashboard</Typography>
// <Box>
// {`Currently logged in as: ${session && session.user.email}`}
// </Box>
// </Box>
<>
<CssBaseline />
<Container maxWidth="100vw" sx={{ display: 'flex' }}>
{/* left-most column component */}
<Box sx={{ width: '25%', display: 'flex', flexDirection: 'column', position: 'relative', bgcolor: 'white', minHeight: '100vh', border: 'thin grey dotted' }}>
<EditAccount userEmail={session && session.user.email} sx={{ position: 'relative', bgcolor: 'white', height: '45vh', border: 'thin grey dotted' }} />
<AvailableRooms sx={{ flex: 1, position: 'relative', bgcolor: 'white', border: 'thin grey dotted' }} />
</Box>
{/* middle column component */}
<Box sx={{ width: '55%', position: 'relative', bgcolor: 'primary', height: '90vh', border: 'thin grey dotted' }}>
<Box sx={{ position: 'relative', bgcolor: 'primary', height: '45vh', border: 'thin grey dotted' }}>
<Calendar />
</Box>
{/* middle column component */}
<Box sx={{ width: '55%', position:'relative', bgcolor: 'primary', height: '90vh', border: 'thin grey dotted' }}>
<Box sx={{ position:'relative', bgcolor: 'primary', height: '45vh', border: 'thin grey dotted' }}>
<Calendar />
</Box>
<Box sx={{ position:'relative', bgcolor: 'primary', height: '45vh', border: 'thin grey dotted' }}>
<Candidates />
</Box>
</Box>
{/* right-most column component */}
<Box sx={{ width: '25%', position:'relative', bgcolor: 'primary', height: '90vh', border: 'thin grey dotted' }}>
<Notifications />
<Box sx={{ position: 'relative', bgcolor: 'primary', height: '45vh', border: 'thin grey dotted' }}>
<Candidates />
</Box>
</Container>
</>
);
</Box>
{/* right-most column component */}
<Box sx={{ width: '25%', position: 'relative', bgcolor: 'primary', height: '90vh', border: 'thin grey dotted' }}>
<Notifications />
</Box>
</Container>
</>
);
}
Loading