HISTORY PAGE

 HISTORYPAGE.JSX

import React, { useEffect, useState } from "react";
import axios from "axios";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import HomeRoundedIcon from "@mui/icons-material/HomeRounded";
import { IconButton } from "@mui/material";
import Typography from "@mui/material/Typography";
import { useNavigate } from "react-router-dom";
import { useSnackbar } from "notistack";
import styles from "../styles/History.module.css";
import Button from "@mui/material/Button";
import Footer from "./Footer";
export default function HistoryPage() {
  const [meetings, setMeetings] = useState([]);
  const { enqueueSnackbar } = useSnackbar();

  const navigate = useNavigate();
  const getHistory = async () => {
    try {
      let request = await axios.get("http://localhost:8080/getActivity", {
        params: {
          token: localStorage.getItem("token"),
        },
      });
      return request.data;
    } catch (e) {
      console.error(`something went wrong ${e}`);
    }
  };

  let formatDate = (dateString) => {
    const date = new Date(dateString);
    const day = date.getDate().toString().padStart(2, "0");
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const year = date.getFullYear();
    return `${day}/${month}/${year}`;
  };
  useEffect(() => {
    const data = async () => {
      try {
        const history = await getHistory();
        console.log(history);
        setMeetings(history);
      } catch (e) {
        enqueueSnackbar(e, { variant: "error" });
      }
    };
    data();
  }, []);
  return (
    <>
      <div className={styles.historyContainer}>
        <div className={styles.navBar}>
          <div className={styles.navHeader}>
            <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}>
            <IconButton
              onClick={() => {
                navigate("/home");
              }}
            >
              <HomeRoundedIcon />
            </IconButton>
            <Button
              onClick={() => {
                localStorage.removeItem("token");
                navigate("/");
              }}
            >
              logout
            </Button>
          </div>
        </div>{" "}
        <>
          {meetings.length !== 0 ? (
            <>
              {meetings.map((e, i) => {
                return (
                  <Card
                    key={i}
                    sx={{
                      width: "70vw",
                      background: "linear-gradient(to right, #525252, #3d72b4)",
                      fontWeight: 900,
                      margin: "1rem",
                      "&:hover": {
                        boxShadow: "2px 2px 10px white",
                        cursor: "pointer",
                      },
                    }}
                  >
                    <CardContent>
                      <Typography
                        gutterBottom
                        sx={{ color: "black", fontWeight: 600 }}
                      >
                        <b>Meeting Code: </b>
                        {e.meeting_code}
                      </Typography>
                      <Typography variant="h5" component="div"></Typography>
                      <Typography sx={{ color: "black", mb: 1.5 }}>
                        <b>Date:</b> {formatDate(e.date)}
                      </Typography>
                    </CardContent>
                  </Card>
                );
              })}
            </>
          ) : (
            <> <h2 style={{color:"whitesmoke"}}>No Meetings attended </h2></>
          )}
        </>
      </div><Footer/>
    </>
   
  );
}

HISTORY.MODULE.CSS

body {
  height: 100vh;
  width: 100vw;
}
.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;
  top: 0;
}

.navHeader {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  width: 25vw;
}
.buttons {
  display: flex;
  gap: 2rem;
  width: 20rem;
  justify-content: space-evenly;
}
.buttons button {
  color: whitesmoke;
}
button:hover {
  opacity: 0.5;
}
.historyContainer {
  margin-top: 10vh;
  height: 90vh;
  width: 100vw;
  background: linear-gradient(to right, #000000, #434343);
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

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