Merge pull request #56 from SkrowRepap/dev/anunciado

Integrated SessionRoom and Rating Module

frontend/src/App.js

@@ -10,13 +10,10 @@ import Login from "./pages/LoginPage/Login";
 import Register from "./pages/Registration/Register";
 import Dashboard from "./pages/Dashboard/Dashboard";
 import AddSession from "./pages/AddSession/AddSession";
-import Session from "./pages/JoinSession/Session";
 import SessionRoom from "./pages/Session/SessionRoom";
 import JoinSession from "./pages/JoinSession/JoinSession";
 import Profile from "./pages/Profile/Profile";
-import RatingSession from "./pages/Rating/RatingSession";
 import AverageSession from "./pages/Rating/AverageSession";
-import RatingDetails from "./pages/Rating/RatingDetails";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import "./style/flexboxgrid.min.css";
@@ -44,8 +41,6 @@ function App() {
               <Route path="dashboard" element={<Dashboard />} />
               <Route path="add_session" element={<AddSession />} />
               <Route path="session/:id" element={<SessionRoom />} />
-              <Route path="search_session" element={<Session />} />
-              <Route path="rating_session" element={<RatingSession />} />
               <Route path="average_session" element={<AverageSession />} />
               <Route path="joinsession/:id" element={<JoinSession />} />
               <Route path="profile" element={<Profile />} />

frontend/src/components/Modals/ConfirmEndRoom.jsx

@@ -0,0 +1,70 @@
+import React, { useContext } from 'react'
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Divider from '@mui/joy/Divider';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import Typography from '@mui/joy/Typography';
+import { useHMSActions } from '@100mslive/react-sdk';
+import SessionContext from '../../context/SessionContext';
+
+function ConfirmEndRoom({ endRoom, setEndRoom }) {
+    const hmsActions = useHMSActions();
+    const { dispatch } = useContext(SessionContext)
+
+    const handleEndRoom = async () => {
+        try {
+            const lock = false; // set to true to disallow rejoins
+            const reason = 'Host ended the session';
+            await hmsActions.endRoom(lock, reason);
+            dispatch({ type: "LEAVE" })
+        } catch (error) {
+            // Permission denied or not connected to room
+            console.error(error);
+        }
+    }
+    return (
+        <React.Fragment>
+            <Modal
+                aria-labelledby="alert-dialog-modal-title"
+                aria-describedby="alert-dialog-modal-description"
+                open={endRoom}
+                onClose={() => setEndRoom(false)}
+                sx={{ padding: '2px 20px 2px 10px' }}
+            >
+                <ModalDialog variant="outlined" role="alertdialog" sx={{ backgroundColor: '#09090d', color: '#d8d8df' }}>
+                    <Typography
+                        id="alert-dialog-modal-title"
+                        component="h2"
+                        level="inherit"
+                        fontSize="1.25em"
+                        mb="0.25em"
+                    >
+                        That's a wrap!
+                    </Typography>
+                    <Divider sx={{ my: 2 }} />
+                    <Typography
+                        id="alert-dialog-modal-description"
+                        mb={3}
+                        fontWeight='light'
+                        sx={{ color: '#d8d8df', fontWeight: 'light', lineHeight: '2' }}
+                    >
+                        Done with your pitch presentation? Let's end the session.
+                        {<br />}
+                        Note: Participants can't join if you end the session.
+                    </Typography>
+                    <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+                        <Button variant="plain" color="neutral" onClick={() => setEndRoom(false)}>
+                            Cancel
+                        </Button>
+                        <Button variant="solid" color="danger" onClick={handleEndRoom} sx={{ backgroundColor: '#a10e25', "&:hover": { backgroundColor: "#a10e25" } }}>
+                            End Session
+                        </Button>
+                    </Box>
+                </ModalDialog>
+            </Modal>
+        </React.Fragment>
+    );
+}
+
+export default ConfirmEndRoom

frontend/src/components/Modals/ConfirmRatingSubmit.jsx

@@ -0,0 +1,64 @@
+import React, { useContext } from 'react'
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Divider from '@mui/joy/Divider';
+import Modal from '@mui/joy/Modal';
+import ModalDialog from '@mui/joy/ModalDialog';
+import Typography from '@mui/joy/Typography';
+import SessionContext from '../../context/SessionContext';
+
+function ConfirmRatingSubmit({ roomEnded, setRoomEnded, setRatingsModalState }) {
+    const { dispatch } = useContext(SessionContext)
+
+    const handleSubmit = async () => {
+        dispatch({ type: "LEAVE" })
+    }
+
+    const handleReviewRating = () => {
+        setRoomEnded(false)
+        setRatingsModalState(true)
+    }
+    return (
+        <React.Fragment>
+            <Modal
+                aria-labelledby="alert-dialog-modal-title"
+                aria-describedby="alert-dialog-modal-description"
+                open={roomEnded}
+                sx={{ padding: '2px 20px 2px 10px' }}
+            >
+                <ModalDialog variant="outlined" role="alertdialog" sx={{ backgroundColor: '#09090d', color: '#d8d8df' }}>
+                    <Typography
+                        id="alert-dialog-modal-title"
+                        component="h2"
+                        level="inherit"
+                        fontSize="1.25em"
+                        mb="0.25em"
+                    >
+                        Host just ended the session!
+                    </Typography>
+                    <Divider sx={{ my: 2 }} />
+                    <Typography
+                        id="alert-dialog-modal-description"
+                        mb={3}
+                        fontWeight='light'
+                        sx={{ color: '#d8d8df', fontWeight: 'light', lineHeight: '2' }}
+                    >
+                        How was our presentation? Your review is very important to us!
+                        {<br />}
+                        Note: You can still change your submitted review.
+                    </Typography>
+                    <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+                        <Button variant="plain" color="neutral" onClick={handleReviewRating}>
+                            Review Rating
+                        </Button>
+                        <Button variant="solid" color="danger" onClick={handleSubmit} sx={{ backgroundColor: '#a10e25', "&:hover": { backgroundColor: "#a10e25" } }}>
+                            Submit and Leave Session
+                        </Button>
+                    </Box>
+                </ModalDialog>
+            </Modal>
+        </React.Fragment>
+    );
+}
+
+export default ConfirmRatingSubmit

frontend/src/components/SessionDetails/SessionDetails.jsx

@@ -27,8 +27,6 @@ function SessionDetails({ detailsModalState, setDetailsModalState }) {
     const { session } = useContext(SessionContext)
     const [link, setLink] = useState('')
 
-    console.log(session);
-
     useEffect(() => {
         if (detailsModalState) {
             setLink(`http://localhost:3000/#/session/${session.session[0].searchID}`)

frontend/src/components/SessionRoom/Chats.jsx

@@ -1,11 +1,31 @@
-import React from 'react'
+import React, { useContext, useState } from 'react'
+import SessionContext from '../../context/SessionContext';
+import ConfirmEndRoom from '../Modals/ConfirmEndRoom';
 import Input from './Input'
 
 import Messages from './Messages'
 
 function Chats() {
+    // Ari dri ang context pher
+    const { session } = useContext(SessionContext)
+    const [endRoom, setEndRoom] = useState(false)
+
+    const handleEndRoom = async () => {
+        setEndRoom(true)
+    };
     return (
         <div className='sessionChats-container'>
+
+            {session.role === 'creator' ? (
+                <>
+                    <ConfirmEndRoom endRoom={endRoom} setEndRoom={setEndRoom} />
+                    <div className="sessionNav-endSession">
+                        <button onClick={handleEndRoom}>End Session</button>
+                    </div>
+                </>
+            )
+                : (null)
+            }
             <div className="sessionChats-controls">
                 <button className='active'>Chats</button>
                 <button>Participants</button>
@@ -23,4 +43,4 @@ function Chats() {
     )
 }
 
-export default Chats
+export default Chats

frontend/src/components/SessionRoom/Stream.jsx

@@ -1,18 +1,15 @@
 import React, { } from 'react'
 import Chats from './Chats'
-import SessionNav from './SessionNav'
 import Video from './Video'
 
 
 function Stream({ role, peers }) {
 
     return (
         <div className='sessionStream-container'>
-            <SessionNav role={role} />
             <div className='sessionStream-content'>
                 <Video peers={peers} />
                 <Chats />
-
             </div>
         </div>
 

frontend/src/components/SessionRoom/Video.jsx

@@ -1,20 +1,26 @@
 import React, { useContext, useState } from 'react'
-import { selectIsSomeoneScreenSharing, useHMSActions, useHMSStore, useVideo } from "@100mslive/react-sdk";
+import { HMSNotificationTypes, selectIsSomeoneScreenSharing, useHMSActions, useHMSNotifications, useHMSStore, useVideo } from "@100mslive/react-sdk";
 import { useEffect } from 'react';
 import SessionContext from '../../context/SessionContext';
 import ReactLoading from 'react-loading';
-import Tabs, { tabsClasses } from '@mui/joy/Tabs';
+import Tabs from '@mui/joy/Tabs';
 import TabList from '@mui/joy/TabList';
 import Tab from '@mui/joy/Tab';
 import Box from '@mui/joy/Box';
 import SessionDetails from '../SessionDetails/SessionDetails';
+import RatingSession from '../../pages/Rating/RatingSession';
+import RatingDetails from '../../pages/Rating/RatingDetails';
+import ConfirmRatingSubmit from '../Modals/ConfirmRatingSubmit';
 
 function Video() {
     const screenShareOn = useHMSStore(selectIsSomeoneScreenSharing)
     const hmsActions = useHMSActions()
+    const roomEndedNotif = useHMSNotifications(HMSNotificationTypes.ROOM_ENDED)
     const { session } = useContext(SessionContext)
     const [index, setIndex] = useState(0);
     const [detailsModalState, setDetailsModalState] = useState(false)
+    const [ratingsModalState, setRatingsModalState] = useState(false)
+    const [roomEnded, setRoomEnded] = useState(false)
     const { videoRef } = useVideo(
         {
             trackId: screenShareOn ? session.peer.auxiliaryTracks[0] : session.peer.videoTrack
@@ -37,21 +43,53 @@ function Video() {
     useEffect(() => {
         if (index === 1) {
             setDetailsModalState(true)
-
+        }
+        if (index === 2) {
+            setRatingsModalState(true)
         }
     }, [index])
 
     useEffect(() => {
         if (detailsModalState === false && index === 1) {
             setIndex(0)
+        }
+        if (ratingsModalState === false && index === 2) {
+            setIndex(0)
+        }
+    }, [detailsModalState, ratingsModalState])
 
+    useEffect(() => {
+        if (session.role === 'participant' && roomEndedNotif) {
+            setRoomEnded(true)
         }
-    }, [detailsModalState])
+    }, [roomEndedNotif])
 
 
     return (
         <div className='sessionVideo-container'>
+
             <SessionDetails setDetailsModalState={setDetailsModalState} detailsModalState={detailsModalState} />
+            {session.role === 'creator' ? <RatingDetails setRatingsModalState={setRatingsModalState} ratingsModalState={ratingsModalState} />
+                : <RatingSession setRatingsModalState={setRatingsModalState} ratingsModalState={ratingsModalState} roomEnded={roomEnded} setRoomEnded={setRoomEnded} roomEndedNotif={roomEndedNotif} />
+            }
+            {session.role === 'participant' ? <ConfirmRatingSubmit roomEnded={roomEnded} setRoomEnded={setRoomEnded} setRatingsModalState={setRatingsModalState} /> : null}
+
+            <div className='sessionNav-container'>
+                <div className="sessionNav-controls">
+                    <div className="pitch-title">
+                        <h2>{session.session[0].sessionName}</h2>
+                    </div>
+                    {session.role === 'creator' ? (
+                        <div className="sessionNav-buttons">
+                            <button className='askPro-button'>Ask a Pro</button>
+                            <button className='uploadFiles-button'>Upload Files</button>
+                            <button className='openRating-button'>Open Rating</button>
+                        </div>
+                    ) : (null)
+                    }
+                </div>
+            </div>
+
             <Box sx={{ display: 'flex', gap: 2, flexDirection: 'column', borderRadius: '10px', alignSelf: 'start', marginLeft: '50px', height: '50px', justifyContent: 'center', alignItems: 'center' }}>
                 <Tabs
                     aria-label="Outlined tabs"
@@ -79,7 +117,7 @@ function Video() {
                             variant={index === 2 ? 'outlined' : 'plain'}
                             color={index === 2 ? 'warning' : 'neutral'}
                         >
-                            Rate
+                            {session.role === 'creator' ? 'Rate Details' : 'Rate'}
                         </Tab>
                     </TabList>
                 </Tabs>

frontend/src/components/datatable/Datatable.jsx

@@ -112,21 +112,22 @@ const Datatable = () => {
         const dataUser = await responseUser.data.filter(user => parseInt(user.id) === parseInt(filteredSession[0].creator))
 
         dispatch({
-          type: "UPDATE_SESSION",
+          type: "UPDATE_ROLE",
           payload: {
-            session: filteredSession,
-            hostName: dataUser[0].first_name.charAt(0).toUpperCase() + dataUser[0].first_name.slice(1)
+            role: role
           }
         })
 
         dispatch({
-          type: "UPDATE_ROLE",
+          type: "UPDATE_SESSION",
           payload: {
-            role: role
+            session: filteredSession,
+            hostName: dataUser[0].first_name.charAt(0).toUpperCase() + dataUser[0].first_name.slice(1),
+            isConnected: true
           }
         })
 
-        navigate(`/session/${filteredSession[0].sessionID}`)
+        navigate(`/session/${filteredSession[0].searchID}`)
 
 
       }