HOME PAGE

 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" });
  };
  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, isGuest: false },
        });
      } else {
        handleFailure(message);
        console.log(message);
      }
    } catch (e) {
      console.log(e);
      handleFailure("Something went Wrong!");
    }
  };
  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) {
        await addToHistory(code);
        navigate(`/${code}`, { state: { isHost: true, isGuest: false } });
        handleSuccess(message);
      } else {
        handleFailure(message);
      }
    } catch (e) {
      console.log(e);
      handleFailure("Something went Wrong!");
    }
  };
  const addToHistory = async (meetingCode) => {
    try {
      let request = await axios.post("http://localhost:8080/addToActivity", {
        token: localStorage.getItem("token"),
        meeting_code: meetingCode,
      });
      return request;
    } catch (e) {
      console.error(`something went wrong ${e}`);
    }
  };
const handleClick=()=>{
  navigate("/");
}
  return (
    <>
      <div className={styles.homeContainer}>
        <div className={styles.navBar}>
          <div className={styles.navHeader} onClick={handleClick}>
            <img
              src="/Logo.png"
              style={{ height: "3rem", width: "3rem", borderRadius: "10px" }}
            />
            <h2
              style={{
                fontFamily: "Audiowide",
                color: "white",
                fontSize: "2rem",
              }}
            >
              Troop
            </h2>
          </div>
          <div className={styles.buttons}>
            <Button
              onClick={() => {
                navigate("/history");
              }}
            >
              <HistorySharpIcon />
              history
            </Button>
            <Button
              onClick={() => {
                localStorage.removeItem("token");
                navigate("/");
              }}
            >
              logout
            </Button>
          </div>
        </div>
        <div className={styles.joinMeet}>
          {step === "welcome" && (
            <Card className={styles.welcomeCard}>
              <CardContent>
                <h2 style={{fontSize:"2rem"}}>Welcome to your Meeting! 🫶</h2>
                <p style={{fontSize:"1.2rem"}}>Would you like to start a
<b>new meeting</b> or <b>join</b> one?</p>
              </CardContent>
              <CardActions style={{ justifyContent: "center" }}>
                <Button variant="contained" onClick={handleCreateMeeting}>
                  Create
                </Button>
                <Button variant="outlined" onClick={() => setStep("join")}>
                  Join
                </Button>
              </CardActions>
            </Card>
          )}

          {step === "join" && (
            <div className={styles.joinBlock}>
              <Card className={styles.welcomeCard}>
                <CardContent
                  style={{ display: "flex", flexDirection: "column" }}
                >
                  <h2>
                    <b>Note:</b>
                  </h2>
                  <p>
                    Meeting code consists of <b>6 characters</b> (letters and numbers)
                  </p>
                  <p>example: ert43x</p>
                  <TextField
                    required
                    label="Enter Meeting Code"
                    variant="outlined"
                    value={meetingCode}
                    onChange={(e) => setMeetingCode(e.target.value)}
                    error={meetingCode.length > 0 && meetingCode.length !== 6}
                    helperText={
                      meetingCode.length > 0 && meetingCode.length !== 6
                        ? "Meeting code must be exactly 6 characters"
                        : "Meeting code consists of 6 characters "
                    }
                  />
                </CardContent>
                <CardActions style={{ justifyContent: "center" }}>
                  <Button variant="contained" onClick={handleJoinMeeting}>
                    Join Meeting
                  </Button>
                  <Button variant="outlined" onClick={() => setStep("welcome")}>
                    <KeyboardDoubleArrowLeftIcon />
                    Back
                  </Button>
                </CardActions>
              </Card>
            </div>
          )}
        </div>
        <Footer />
      </div>
    </>
  );
}

export default withAuth(HomePage);

HOME.MODULE.CSS

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.navBar {
  display: flex;
  background-color: #242424;
  position: fixed;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  height: 10vh;
  padding: 0 2rem;
  z-index: 100;
}

.navHeader {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.buttons {
  display: flex;
  gap: 2rem;
  width: 20rem;
}
.buttons button {
  color: whitesmoke;
}
button:hover {
  opacity: 0.5;
}
.homeContainer {
  top: 0;
  overflow: visible;
  margin: 0;
  position: absolute;
  box-sizing: border-box;
  padding: 0;
  display: inline;
  background-image: url("/bgPr2.png");
  background-repeat: no-repeat;
  object-fit: cover;
  background-size: cover;
  background-attachment: fixed;
  width: 100vw;
  height: 100vh;
}

.joinMeet {
  height: 90vh;
  margin-top: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcomeCard {
  background: linear-gradient(to right, #ada996, #f2f2f2, #dbdbdb, #eaeaea) !important;
  padding: 2rem;
  max-width: fit-content;
  margin: auto;
  animation: popOut 500ms ease-out 100ms 1 forwards;
}
@keyframes popOut {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.joinBlock {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 40;
  margin: auto;
}
.joinBlock input {
  color: black;
}

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