Merge branch 'ENV-DEV-CR-CAFRM' into 'ENV-DEPLOYMENT'

Env dev cr cafrm

See merge request !1583

src/container/Menu/Home.js

@@ -27,7 +27,7 @@ import {
   useRouteMatch, useLocation
 } from "react-router-dom";
 import Images from '../../assets/Images';
-import { UseWindowDimensions } from '../../Utils/Index';
+import { UseWindowDimensions } from '../../utils/index';
 import HomeRoutes from '../../router/homeRoutes'
 import Constant from '../../library/Constant';
 import api from '../../api';

src/utils/index.js

+import React, { useState, useEffect } from 'react';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import { makeStyles } from '@material-ui/core/styles';
+import Fade from '@material-ui/core/Fade';
+import Grid from '@material-ui/core/Grid';
+import { Typography, Avatar } from '@material-ui/core';
+import Images from '../assets/Images';
+import { Link, useRouteMatch } from 'react-router-dom';
+import Constant from '../library/Constant';
+
+const useStyles = makeStyles({
+    avatar: {
+        margin: 10,
+    },
+    orangeAvatar: {
+        margin: 10,
+        color: '#fff',
+        backgroundColor: 'black',
+    },
+})
+
+function FadeMenu() {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+
+    const handleClick = event => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleLogout = () => {
+        localStorage.removeItem(Constant.TOKEN)
+        window.location.reload();
+        setAnchorEl(null);
+    }
+
+    const classes = useStyles();
+
+    let { path, url } = useRouteMatch();
+
+    return (
+        <div>
+            <Grid container justify="center" alignItems="center" >
+                <div onClick={handleClick}>
+                    <img src={Images.dropdownWhite} alt="React Logo" style={{ marginLeft: 15 }} />
+                </div>
+            </Grid>
+            <Menu
+                id="fade-menu"
+                anchorEl={anchorEl}
+                keepMounted
+                open={open}
+                onClose={handleClose}
+                TransitionComponent={Fade}
+            >
+                <MenuItem disabled={true} style={{ opacity: 1 }}>
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <Avatar className={classes.orangeAvatar}>T</Avatar>
+                        <div>
+                            <Typography>Tommy</Typography>
+                            <Typography>tom_my@gmail.com</Typography>
+                        </div>
+                    </div>
+                </MenuItem>
+                <MenuItem onClick={handleClose}>
+                    <Link to={'/home/profile'}>
+                        <div style={{ display: 'flex', padding: 10 }}>
+                            <img src={Images.setting} style={{ height: 20, width: 20, marginRight: 20 }} />
+                            <Typography style={{ color: 'black', textDecoration: 'none'}}>Settings</Typography>
+                        </div>
+                    </Link>
+                </MenuItem>
+                <MenuItem onClick={handleLogout}>
+                    <div style={{ display: 'flex', padding: 10 }}>
+                        <img src={Images.logout} style={{ height: 20, width: 20, marginRight: 20 }} />
+                        <Typography>Logout</Typography>
+                    </div>
+                </MenuItem>
+            </Menu>
+        </div>
+    );
+}
+
+const footerStyle = {
+    backgroundColor: "#0d2846",
+    fontSize: "20px",
+    color: "white",
+    // borderTop: "1px solid #E7E7E7",
+    textAlign: "center",
+    padding: "20px",
+    left: 0,
+    bottom: 0,
+    right: 0,
+    height: "80px",
+    width: "100%"
+};
+
+const phantomStyle = {
+    display: "block",
+};
+
+function Footer({ children }) {
+    return (
+        <div>
+            {/* <div style={phantomStyle} /> */}
+            <div style={footerStyle}>{children}</div>
+        </div>
+    );
+}
+
+function getWindowDimensions() {
+    const { innerWidth: width, innerHeight: height } = window;
+    return {
+        width,
+        height
+    };
+}
+
+function UseWindowDimensions() {
+    const [windowDimensions, setWindowDimensions] = useState(
+        getWindowDimensions()
+    );
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowDimensions(getWindowDimensions());
+        }
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+
+    return windowDimensions;
+}
+
+export { FadeMenu, Footer, UseWindowDimensions };