***********HOME PAGE *************

 THE HOF FUNCTION CREATED IS USED WITH THIS HOME PAGE. SO, THAT ONLY AUTHORIZED USERS CAN ENTER.

IN THIS, WE WILL DISPLAY A CARD THAT HAS TWO OPTIONS , TO CREATE A MEETING (OR) TO JOIN A MEETING.



AFTER CLICKING ON CREATE, THE USER WILL BE RE-DIRECTED TO VIDEO CONFERENCE PAGE. THE USER WHO CLICKED ON CREATE WILL BE ASSIGNED AS HOST.

 THE HOST WILL BE ABLE TO SEE THE MEETING CODE. THE MEETING CODE IS AUTOMATICALLY GENERATED IN THE BACKEND.

  const [step, setStep] = useState("welcome");

WE USE A STATE VARIABLE, TO DISPLAY THIS CARD. WHEN STEP===WELCOME , THIS CARD IS DISPLAYED.

IF CLICKED ON JOIN THEN THE STEP IS SET TO JOIN => SETSTEP("JOIN")

NOW, ANOTHER CARD IS DISPLAYED THAT ASKS FOR THE MEETING CODE.

HOMEPAGE.JSX

import React, { useEffect, useState } from "react";
import axios from "axios";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import withAuth from "../utils/withAuth";
import styles from "../styles/Home.module.css";
import { useNavigate } from "react-router-dom";
import HistorySharpIcon from "@mui/icons-material/HistorySharp";
import { useSnackbar } from "notistack";
import { Card, CardContent, CardActions } from "@mui/material";
import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
import Footer from "./Footer";
import "../styles/App.css";
function HomePage() {
  const navigate = useNavigate();
  const { enqueueSnackbar } = useSnackbar();
  const [step, setStep] = useState("welcome");
  const [meetingCode, setMeetingCode] = useState("");

  const handleSuccess = (message) => {
    enqueueSnackbar(message, {
      variant: "success",
    });
  };
  const handleFailure = (message) => {
    enqueueSnackbar(message, { variant: "error" });
  };

TO CREATE THE MEETING WE WILL USE TOKEN THAT IS STORED WHEN LOGGING IN OR SIGNING UP. HERE WE SEND THE TOKEN AS A QUERY (QUERY STRING) . TO SEND IT AS  A QUERY , WE NEED TO FOLLOW THE STRUCTURE 

HERE,

const { data } = await axios.post(
        "http://localhost:8080/createMeeting", URL
        {}, BODY
        {
          params: { token: localStorage.getItem("token") }, QUERY
        }
      );

ON THE BACKEND, 

USERCONTROLLER.JS

module.exports.createMeeting = async (req, res) => {
  const { token } = req.query;
  // console.log("Token:" + token);

  if (!token) {
    return res.json({ success: false, message: "invalid Token" });
  }

  try {
    const decoded = jwt.verify(token, process.env.TOKEN_KEY);
    const user = await User.findById(decoded.id);
    console.log(user);
MEETING CODE
    const newMeetingCode = Math.random().toString(36).substring(2, 8);
    let newMeeting = new Meeting({
      user_id: user.username,
      meeting_code: newMeetingCode,
    });
    await newMeeting.save();
    return res.status(201).json({
      success: true,
      message: "Meeting created successfully",
      code: newMeetingCode,
    });
  } catch (e) {
    res.status(404).json({
      message: `Unknown Error Occured while creating a room ${e} `,
      success: false,
    });
  }
};


  const handleCreateMeeting = async () => {
    try {
      const { data } = await axios.post(
        "http://localhost:8080/createMeeting",
        {},
        {
          params: { token: localStorage.getItem("token") },
        }
      );
      const { success, code, message } = data;
      if (success) { USER WHO CREATES THE MEETING IS ASSIGNED AS HOST.
        navigate(`/${code}`, { state: { isHost: true} });
        handleSuccess(message);
      } else {
        handleFailure(message);
      }
    } catch (e) {
      console.log(e);
      handleFailure("Something went Wrong!");
    }
  };





JOIN MEETING

WHEN CLICKED ON JOIN ON THE WELCOME CARD, A NEW CARD IS SHOWN THAT ASKS FOR MEETING CODE.




const handleJoinMeeting = async () => {
    if (!meetingCode || meetingCode.length !== 6) {
      handleFailure("Please enter a valid meeting code.");
      return;
    }
    try {
      const { data } = await axios.post("http://localhost:8080/joinMeeting", {
        meeting_code: meetingCode,
      });
      const { success, message } = data;
      if (success) {
        await addToHistory(meetingCode);
        handleSuccess(message);
        navigate(`/${meetingCode}`, {
          state: { isHost: false },
        });
      } else {
        handleFailure(message);
        console.log(message);
      }
    } catch (e) {
      console.log(e);
      handleFailure("Something went Wrong!");
    }
  };


ON THE BACKEND,

module.exports.joinMeeting = async (req, res) => {
  const { meeting_code } = req.body;

  try {
    const meeting = await Meeting.findOne({
      meeting_code: meeting_code,
    });
    if (!meeting) {
      return res.json({
        success: false,
        message: "Invalid Meeting code!",
      });
    }

    if (meeting.status !== "live") {
      return res.status(404).json({
        success: false,
        message: "Meeting is not live or has ended.",
      });
    }
    return res.status(200).json({
      success: true,
      message: "Meeting joined successfully.",
      meeting,
    });
  } catch (e) {
    res
      .status(404)
      .json({ message: `Unknown Error Occured while joining the room ${e} ` });
  }
};












 

Comments

Post a Comment

Popular posts from this blog

MIDDLEWARE.JS

  const User = require ( "../models/userModel" ); require ( "dotenv" ). config (); const jwt = require ( "jsonwebtoken" ); module . exports . userVerification = async ( req , res ) => {   console . log ( req . cookies );   const token = req . cookies . token ;   if ( ! token ) {     return res . status ( 404 ). json ({ message : "authentication failed!" });   }   jwt . verify ( token , process . env . TOKEN_KEY , async ( err , data ) => {     if ( err ) {       return res . status ( 400 ). json ({ message : "Invalid Token!" });     }     try {       console . log ( data );       const foundUser = await User . findById ( data . id );       if ( foundUser ) {         return res . status ( 200 ). json ({ message : "authentication successful!" });       } else {         r...
Read more

MODELS

 USER MODEL const mongoose = require ( "mongoose" ); const Schema = mongoose . Schema ; const Model = mongoose . model ; const bcrypt = require ( "bcryptjs" ); const userSchema = new Schema ({   name : {     type : String ,     required : true ,   },   username : {     type : String ,     required : true ,     unique : true ,   },   email : {     type : String ,     required : true ,     unique : true ,   },   password : {     type : String ,     required : true ,   }, }); userSchema . pre ( "save" , async function ( next ) {   if ( this . isModified ( "password" )) {     this . password = await bcrypt . hash ( this . password , 10 );   }   next (); }); const User = new Model ( "User" , userSchema ); module . exports = User ; MEETING MODEL const mongoose = require ( "mongoose...
Read more

AUTHENTICATION PAGE

 AUTH.JSX import React , { useState , useEffect } from "react" ; import axios from "axios" ; import Box from "@mui/material/Box" ; import IconButton from "@mui/material/IconButton" ; import Button from "@mui/material/Button" ; import ButtonGroup from "@mui/material/ButtonGroup" ; import InputAdornment from "@mui/material/InputAdornment" ; import TextField from "@mui/material/TextField" ; import Visibility from "@mui/icons-material/Visibility" ; import VisibilityOff from "@mui/icons-material/VisibilityOff" ; import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined" ; import { useSnackbar } from "notistack" ; import Footer from "./Footer" ; import styles from "../styles/Auth.module.css" ; import { useNavigate } from "react-router-dom" ; import { Link } from "react-router-dom" ;...
Read more