Implemented Dashboard

nacheco · Aug 13, 2022 · ce62029 · ce62029
1 parent 7c1ddea
commit ce62029
Show file tree

Hide file tree

Showing 11 changed files with 243 additions and 151 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.js b/src/App.js
@@ -1,21 +1,19 @@
 import Navbar from "./components/Landing-Page/Navbar";
 import Main from "./components/Landing-Page/Main";
 import Footer from "./components/Landing-Page/Footer";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Dashboard from "./components/Dashboard/Dashboard";
+import Dashboard from "./components/Dashboard/Dashboard.jsx";
+import { Routes, Route } from "react-router-dom";
 
 function App() {
   return (
-    <div>
+    <>
       <Navbar />
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<Main />} />
-          <Route path="/dashboard" element={<Dashboard />} />
-        </Routes>
-      </BrowserRouter>
+      <Routes>
+        <Route path="/*" element={<Main />} />
+        <Route path="Dashboard" element={<Dashboard />} />
+      </Routes>
       <Footer />
-    </div>
+    </>
   );
 }
 

diff --git a/src/Context.js → src/SocketContext.js b/src/Context.js → src/SocketContext.js
@@ -15,17 +15,20 @@ const ContextProvider = ({ children }) => {
   const [call, setCall] = useState({});
   const [me, setMe] = useState("");
 
-  const myVideo = useRef();
-  const userVideo = useRef();
-  const connectionRef = useRef();
+  const myVideo = useRef(null);
+  const userVideo = useRef(null);
+  const connectionRef = useRef(null);
 
   useEffect(() => {
     navigator.mediaDevices
       .getUserMedia({ video: true, audio: true })
       .then((currentStream) => {
         setStream(currentStream);
-
-        myVideo.current.srcObject = currentStream;
+        try {
+          myVideo.current.srcObject = currentStream;
+        } catch (e) {
+          console.log(e);
+        }
       });
 
     socket.on("me", (id) => setMe(id));

diff --git a/src/components/Dashboard/Call.jsx b/src/components/Dashboard/Call.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { ContextProvider } from "../../SocketContext";
+import Dashboard from "./Dashboard";
+const Call = () => {
+  return (
+    <ContextProvider>
+      <Dashboard />
+    </ContextProvider>
+  );
+};
+
+export default Call;
diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx
@@ -1,46 +1,40 @@
-import React from 'react';
-import { Typography, AppBar } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-
-import VideoPlayer from './VideoPlayer';
-import Sidebar from './Sidebar';
-import Notifications from './Notification';
+import React from "react";
+import { Typography, AppBar } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
 
+import VideoPlayer from "./VideoPlayer";
+import Sidebar from "./Sidebar";
+import Notifications from "./Notification";
 
 const useStyles = makeStyles((theme) => ({
   appBar: {
     borderRadius: 15,
-    margin: '30px 100px',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '600px',
-    border: '2px solid black',
-
-    [theme.breakpoints.down('xs')]: {
-      width: '90%',
+    margin: "30px 100px",
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    width: "600px",
+    border: "2px solid black",
+
+    [theme.breakpoints.down("xs")]: {
+      width: "90%",
     },
   },
   image: {
-    marginLeft: '15px',
+    marginLeft: "15px",
   },
   wrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    width: '100%',
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    width: "100%",
   },
 }));
 
 const Dashboard = () => {
-  const classes = useStyles();
-
   return (
-    <div className={classes.wrapper}>
-      <AppBar className={classes.appBar} position="static" color="inherit">
-        <Typography variant="h2" align="center">Video Chat</Typography>
-      </AppBar>
+    <div className="flex flex-col items-center w-full h-[60vh] my-12">
       <VideoPlayer />
       <Sidebar>
         <Notifications />
@@ -49,5 +43,4 @@ const Dashboard = () => {
   );
 };
 
-
 export default Dashboard;
diff --git a/src/components/Dashboard/Notification.jsx b/src/components/Dashboard/Notification.jsx
@@ -1,15 +1,15 @@
-import React, { useContext } from 'react';
-import { Button } from '@material-ui/core';
+import React, { useContext } from "react";
+import { Button } from "@material-ui/core";
 
-import { SocketContext } from '../../Context';
+import { SocketContext } from "../../SocketContext";
 
 const Notifications = () => {
   const { answerCall, call, callAccepted } = useContext(SocketContext);
 
   return (
     <>
       {call.isReceivingCall && !callAccepted && (
-        <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+        <div style={{ display: "flex", justifyContent: "space-around" }}>
           <h1>{call.name} is calling:</h1>
           <Button variant="contained" color="primary" onClick={answerCall}>
             Answer
@@ -20,4 +20,4 @@ const Notifications = () => {
   );
 };
 
-export default Notifications;
+export default Notifications;
diff --git a/src/components/Dashboard/Sidebar.jsx b/src/components/Dashboard/Sidebar.jsx
@@ -1,28 +1,35 @@
-import React, { useState, useContext } from 'react';
-import { Button, TextField, Grid, Typography, Container, Paper } from '@material-ui/core';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { Assignment, Phone, PhoneDisabled } from '@material-ui/icons';
-import { makeStyles } from '@material-ui/core/styles';
+import React, { useState, useContext } from "react";
+import {
+  Button,
+  TextField,
+  Grid,
+  Typography,
+  Container,
+  Paper,
+} from "@material-ui/core";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { Assignment, Phone, PhoneDisabled } from "@material-ui/icons";
+import { makeStyles } from "@material-ui/core/styles";
 
-import { SocketContext } from '../../Context';
+import { SocketContext } from "../../SocketContext";
 
 const useStyles = makeStyles((theme) => ({
   root: {
-    display: 'flex',
-    flexDirection: 'column',
+    display: "flex",
+    flexDirection: "column",
   },
   gridContainer: {
-    width: '100%',
-    [theme.breakpoints.down('xs')]: {
-      flexDirection: 'column',
+    width: "100%",
+    [theme.breakpoints.down("xs")]: {
+      flexDirection: "column",
     },
   },
   container: {
-    width: '600px',
-    margin: '35px 0',
+    width: "600px",
+    margin: "35px 0",
     padding: 0,
-    [theme.breakpoints.down('xs')]: {
-      width: '80%',
+    [theme.breakpoints.down("xs")]: {
+      width: "80%",
     },
   },
   margin: {
@@ -32,14 +39,15 @@ const useStyles = makeStyles((theme) => ({
     padding: 20,
   },
   paper: {
-    padding: '10px 20px',
-    border: '2px solid black',
+    padding: "10px 20px",
+    border: "2px solid black",
   },
 }));
 
 const Sidebar = ({ children }) => {
-  const { me, callAccepted, name, setName, callEnded, leaveCall, callUser } = useContext(SocketContext);
-  const [idToCall, setIdToCall] = useState('');
+  const { me, callAccepted, name, setName, callEnded, leaveCall, callUser } =
+    useContext(SocketContext);
+  const [idToCall, setIdToCall] = useState("");
   const classes = useStyles();
 
   return (
@@ -48,23 +56,56 @@ const Sidebar = ({ children }) => {
         <form className={classes.root} noValidate autoComplete="off">
           <Grid container className={classes.gridContainer}>
             <Grid item xs={12} md={6} className={classes.padding}>
-              <Typography gutterBottom variant="h6">Account Info</Typography>
-              <TextField label="Name" value={name} onChange={(e) => setName(e.target.value)} fullWidth />
+              <Typography gutterBottom variant="h6">
+                Account Info
+              </Typography>
+              <TextField
+                label="Name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                fullWidth
+              />
               <CopyToClipboard text={me} className={classes.margin}>
-                <Button variant="contained" color="primary" fullWidth startIcon={<Assignment fontSize="large" />}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  fullWidth
+                  startIcon={<Assignment fontSize="large" />}
+                >
                   Copy Your ID
                 </Button>
               </CopyToClipboard>
             </Grid>
             <Grid item xs={12} md={6} className={classes.padding}>
-              <Typography gutterBottom variant="h6">Make a call</Typography>
-              <TextField label="ID to call" value={idToCall} onChange={(e) => setIdToCall(e.target.value)} fullWidth />
+              <Typography gutterBottom variant="h6">
+                Make a call
+              </Typography>
+              <TextField
+                label="ID to call"
+                value={idToCall}
+                onChange={(e) => setIdToCall(e.target.value)}
+                fullWidth
+              />
               {callAccepted && !callEnded ? (
-                <Button variant="contained" color="secondary" startIcon={<PhoneDisabled fontSize="large" />} fullWidth onClick={leaveCall} className={classes.margin}>
+                <Button
+                  variant="contained"
+                  color="secondary"
+                  startIcon={<PhoneDisabled fontSize="large" />}
+                  fullWidth
+                  onClick={leaveCall}
+                  className={classes.margin}
+                >
                   Hang Up
                 </Button>
               ) : (
-                <Button variant="contained" color="primary" startIcon={<Phone fontSize="large" />} fullWidth onClick={() => callUser(idToCall)} className={classes.margin}>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  startIcon={<Phone fontSize="large" />}
+                  fullWidth
+                  onClick={() => callUser(idToCall)}
+                  className={classes.margin}
+                >
                   Call
                 </Button>
               )}
@@ -77,4 +118,4 @@ const Sidebar = ({ children }) => {
   );
 };
 
-export default Sidebar;
+export default Sidebar;
diff --git a/src/components/Dashboard/VideoCall.jsx b/src/components/Dashboard/VideoCall.jsx