From 252aa6416b4eade6c16c87f29d2c60f3fd78875b Mon Sep 17 00:00:00 2001 From: kartikvirendrar Date: Wed, 27 Dec 2023 09:53:42 +0530 Subject: [PATCH] fixed build fail --- src/app/components/common/Header.jsx | 1134 -------------------------- 1 file changed, 1134 deletions(-) delete mode 100644 src/app/components/common/Header.jsx diff --git a/src/app/components/common/Header.jsx b/src/app/components/common/Header.jsx deleted file mode 100644 index 9ec1297d..00000000 --- a/src/app/components/common/Header.jsx +++ /dev/null @@ -1,1134 +0,0 @@ -import { - AppBar, - Avatar, - Box, - Checkbox, - Divider, - FormControlLabel, - Grid, - Button, - Stack, - IconButton, - Menu, - MenuItem, - Toolbar, - Tooltip, - Typography, - Tabs, - Tab, - Badge, - Popover, - Chip -} from "@mui/material"; -import { useEffect, useState } from "react"; - -import { formatDistanceToNow, format } from 'date-fns'; -import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; -import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled'; -import NotificationsOffIcon from '@mui/icons-material/NotificationsOff'; -import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'; -import { Link, NavLink } from "react-router-dom"; -import CustomButton from "../common/Button"; -import headerStyle from "@/styles/header"; -import NotificationsIcon from '@mui/icons-material/Notifications'; -// import NotificationPatchAPI from "../../../../redux/actions/api/Notification/NotificationPatchApi"; -// import Shoonya_Logo from "../../../../assets/Shoonya_Logo.png"; -import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; -import { useDispatch, useSelector } from "react-redux"; -import APITransport from "../../../../redux/actions/apitransport/apitransport"; -import FetchLoggedInUserDataAPI from "../../../../redux/actions/api/UserManagement/FetchLoggedInUserData"; -import { useLocation, useNavigate } from "react-router-dom"; -import TransliterationAPI from "../../../../redux/actions/api/Transliteration/TransliterationAPI"; -import MobileNavbar from "./MobileNavbar"; -import { useTheme } from "@emotion/react"; -import { useMediaQuery } from "@mui/material"; -import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; -import Logout from "../../../../redux/actions/UserManagement/Logout"; -import Modal from "./Modal"; -import Transliteration from "../../container/Transliteration/Transliteration"; -import CustomizedSnackbars from "../common/Snackbar"; -import userRole from "../../../../utils/UserMappedByRole/Roles"; -import NotificationAPI from "../../../../redux/actions/api/Notification/Notification"; -import UpdateUIPrefsAPI from "../../../../redux/actions/api/UserManagement/UpdateUIPrefs"; - -const Header = () => { - const [anchorElUser, setAnchorElUser] = useState(null); - const [anchorElSettings, setAnchorElSettings] = useState(null); - const [anchorElNotification, setAnchorElNotification] = useState(null); - const [anchorElHelp, setAnchorElHelp] = useState(null); - const [Notification, setnotification] = useState() - const [activeproject, setActiveproject] = useState("activeButtonproject"); - const [activeworkspace, setActiveworkspace] = useState(""); - const [isSpaceClicked, setIsSpaceClicked] = useState(false); - const [popoverAnchorEl, setPopoverAnchorEl] = useState(null); - const [unread, setunread] = useState(null) - const [selectedNotificationId, setSelectedNotificationId] = useState(null); - const [showTransliterationModel, setShowTransliterationModel] = - useState(false); - const [snackbar, setSnackbarInfo] = useState({ - open: false, - message: "", - variant: "success", - }); - //const[checkClUI,setCheckClUI]=useState(null) - const [moreHorizonAnchorEl, setMoreHorizonAnchorEl] = useState(null); - - const handleMoreHorizonClick = (event) => { - setMoreHorizonAnchorEl(event.currentTarget); - }; - - const handleMoreHorizonClose = () => { - setMoreHorizonAnchorEl(null); - }; - - - // const loggedInUserData = useSelector( - // (state) => state?.fetchLoggedInUserData?.data - // ); - const [value, setValue] = useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - - const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down("md")); - - // const dispatch = useDispatch(); - let navigate = useNavigate(); - const location = useLocation(); - const classes = headerStyle(); - - - const getLoggedInUserData = () => { - const loggedInUserObj = new FetchLoggedInUserDataAPI("me"); - dispatch(APITransport(loggedInUserObj)); - }; - - const fetchNotifications = () => { - let apiObj = new NotificationAPI(); - const endpoint = unread == null ? apiObj.apiEndPoint() : `${apiObj.apiEndPoint()}?seen=${unread}`; - - fetch(endpoint, { - method: "get", - body: JSON.stringify(apiObj.getBody()), - headers: apiObj.getHeaders().headers, - }) - .then(async (response) => { - if (response.ok) { - const data = await response?.json(); - setnotification(data); - console.log(Notification?.length, data); - } else { - console.error("Error fetching notifications:", response.status, response.statusText); - setnotification([]); - } - }) - .catch((error) => { - console.error("Error fetching notifications:", error); - setnotification(error); - setSnackbarInfo({ - open: true, - message: error, - variant: "Error", - }); - }); - }; - // const markAsRead = (notificationId) => { - // const task = new NotificationPatchAPI(notificationId); - // dispatch(APITransport(task)); - // fetchNotifications() - // }; - - // const markAllAsRead = () => { - // const notificationIds = Notification.map((notification) => notification.id); - // const tasks = new NotificationPatchAPI(notificationIds); - // dispatch(APITransport(tasks)); - // fetchNotifications() - // }; - - // const handleMarkAllAsReadClick = () => { - // markAllAsRead(); - // handleMoreHorizonClose() - // }; - - // const handleMarkAsRead = () => { - // markAsRead(selectedNotificationId); - // handlePopoverClose(); - // }; - - - useEffect(() => { - fetchNotifications(); - }, [unread]); - - useEffect(() => { - getLoggedInUserData(); - - }, []); - - - /* useEffect(()=>{ - if(loggedInUserData?.prefer_cl_ui !== undefined){ - setCheckClUI(loggedInUserData?.prefer_cl_ui) - } - },[loggedInUserData]) */ - - // const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; - const onLogoutClick = () => { - handleCloseUserMenu(); - dispatch(Logout()); - // ExpireSession(); - localStorage.clear(); - navigate("/"); - }; - - // const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; - const keyPress = (e) => { - if (e.code === "Escape" && showTransliterationModel) { - handleTransliterationModelClose(); - } - }; - useEffect(() => { - window.addEventListener("keydown", keyPress); - return () => { - window.removeEventListener("keydown", keyPress); - }; - }, [keyPress]); - const handleTitleMouseEnter = (event, notificationId) => { - setPopoverAnchorEl(event.currentTarget); - setSelectedNotificationId(notificationId); - }; - - const handleTitleMouseLeave = () => { - setPopoverAnchorEl(null); - setSelectedNotificationId(null); - } - - const handleCloseUserMenu = () => { - setAnchorElUser(null); - }; - const handlePopoverClose = () => { - setPopoverAnchorEl(null); - setSelectedNotificationId(null); - }; - - - - const handleOpenUserMenu = (event) => { - setAnchorElUser(event.currentTarget); - }; - - const handleOpenHelpMenu = (event) => { - setAnchorElHelp(event.currentTarget); - }; - const handleCloseHelpMenu = () => { - setAnchorElHelp(null); - }; - - const handleOpenSettingsMenu = (event) => { - setAnchorElSettings(event.currentTarget); - }; - - const handleCloseSettingsMenu = () => { - setAnchorElSettings(null); - }; - const handleOpenNotification = (event) => { - setAnchorElNotification(event.currentTarget); - }; - - const handleCloseNotification = () => { - setAnchorElNotification(null); - }; - - const handleRTLChange = (event) => { - let style; - if (event.target.checked) { - localStorage.setItem("rtl", true); - style = document.createElement("style"); - style.innerHTML = "input, textarea { direction: RTL; }"; - document.head.appendChild(style); - } else { - localStorage.setItem("rtl", false); - style = document.createElement("style"); - style.innerHTML = "input, textarea { direction: unset; }"; - document.head.appendChild(style); - } - }; - - const handleTranscriptionFlowChange = async (event) => { - const obj = new UpdateUIPrefsAPI(event.target.checked); - // dispatch(APITransport(loggedInUserObj)); - const res = await fetch(obj.apiEndPoint(), { - method: "POST", - body: JSON.stringify(obj.getBody()), - headers: obj.getHeaders().headers, - }); - const resp = await res.json(); - if (res.ok) { - getLoggedInUserData(); - setSnackbarInfo({ - open: true, - message: resp.message, - variant: "success", - }); - } - }; - const handleTabChange = async (index) => { - if (index === 0) { - await setunread(null); - } else if (index === 1) { - await setunread("False"); - } - - - }; - const handleTagsChange = (event) => { - if (event.target.checked) { - localStorage.setItem("enableTags", true); - setSnackbarInfo({ - open: true, - message: "Please type blackslash ( \\ ) to access the tags", - variant: "info", - }); - } else { - localStorage.setItem("enableTags", false); - } - }; - const renderSnackBar = () => { - return ( - - setSnackbarInfo({ open: false, message: "", variant: "" }) - } - anchorOrigin={{ vertical: "bottom", horizontal: "right" }} - variant={snackbar.variant} - message={snackbar.message} - /> - ); - }; - const unseenNotifications = Notification?.filter(notification =>notification?.seen_json && !notification.seen_json[loggedInUserData.id]); - - - const renderTabs = () => { - if ( - userRole.Annotator === loggedInUserData?.role || - userRole.Reviewer === loggedInUserData?.role || - userRole.SuperChecker === loggedInUserData?.role - ) { - return ( - - {/* - - */} - {/* - - */} - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Projects - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Analytics - - - {/* - - */} - - ); - } else if (userRole.WorkspaceManager === loggedInUserData?.role) { - return ( - - {/* - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Organization - - */} - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Workspaces - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Projects - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Datasets - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Analytics - - - - ); - } else if (userRole.OrganizationOwner === loggedInUserData?.role) { - return ( - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Organization - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Projects - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Datasets - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Analytics - - - - ); - } else if (userRole.Admin === loggedInUserData?.role) { - return ( - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Organization - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Projects - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Datasets - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Analytics - - - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Admin - - - - ); - } else { - return null; - } - }; - - const tabs = [ - - - , - - - , - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Projects - - , - - - , - - - isActive ? classes.highlightedMenu : classes.headerMenu - } - activeClassName={classes.highlightedMenu} - > - Analytics - - , - - - , - ]; - - const userSettings = [ - { - name: "My Profile", - onclick: () => { - handleCloseUserMenu(); - navigate(`/profile/${loggedInUserData.id}`); - }, - }, - { - name: "My Progress", - onclick: () => { - handleCloseUserMenu(); - navigate(`/progress/${loggedInUserData.id}`); - }, - }, - { - name: "Change Password", - onclick: () => { - handleCloseUserMenu(); - navigate("/Change-Password"); - }, - }, - { name: "Logout", onclick: () => onLogoutClick() }, - ]; - - const appSettings = [ - { - name: "Transliteration", - onclick: () => { - // navigate("/transliteration"); - handleCloseSettingsMenu(); - setShowTransliterationModel(true); - }, - }, - { - name: "Enable RTL-typing", - control: ( - - ), - }, - /* { - name: "Use Chitralekha Transcription Flow", - control: ( - - ), - }, */ - // { - // name: "Enable Tags Dropdown", - // control: ( - // - // ), - // }, - - // { - // name: "Help", - // onclick: () => {}, - // }, - ]; - const helpMenu = [ - { - name: "Help", - onclick: () => { - const url = "https://github.com/AI4Bharat/Shoonya/wiki/Shoonya-FAQ"; - window.open(url, "_blank"); - }, - }, - - // { - // name: "Feedback", - // onclick: () => {}, - // }, - ]; - - const handleTransliterationModelClose = () => { - setShowTransliterationModel(false); - }; - - return ( - - - {isMobile ? ( - - ) : ( - - - - - logo - - - Shoonya - - - - {/* - {tabs.map((tab) => tab)} - */} - {renderTabs()} - {renderSnackBar()} - - - - - - 0 ? unseenNotifications?.length : null} color="primary"> - - - - - - - - - - - - - - - - - - - - - - - - - - {loggedInUserData && - loggedInUserData.username && - loggedInUserData.username.split("")[0]} - - - {loggedInUserData.username} - - - - - - - {appSettings.map((setting) => ( - - {setting.control ? ( - - ) : ( - - {setting.name} - - )} - - ))} - - - - Signed in as {loggedInUserData.last_name} - - - {userSettings.map((setting) => ( - - - {setting.name} - - - ))} - - - {helpMenu.map((help) => ( - - {help.control ? ( - - ) : ( - - {help.name} - - )} - - ))} - - - - - Notifications - {Notification && Notification?.length > 0 && unseenNotifications && unseenNotifications?.length>0? - - :null} - - - theme.palette.primary.main, - } - }}> - handleTabChange(0)} /> - handleTabChange(1)} /> - - - {Notification && Notification?.length > 0 ? ( - <> - {Notification.map((notification, index) => ( -
-
- -
-
-
- {`ID: ${notification?.title?.split('-')[0]}`} - {`TITLE: ${notification?.notification_type}`} - {`${formatDistanceToNow(new Date(notification?.created_at), { addSuffix: true })}`} -
-
- {notification?.title?.split('-')[1]} - {unseenNotifications?.length>0? handleTitleMouseEnter(event, notification?.id)}> - - :null} -
- {`Sent on: ${format(new Date(notification?.created_at), 'MMM d, yyyy')}`} -
-
- ))} - - ) : ( -
- - - No notifications found - -
- )} - - - - - Mark All as read - - - Mark as Read - - - - - - )} - - handleTransliterationModelClose} - top={50} - left={50} - topTranslate={"40"} - leftTranslate={"-50"} - isTransliteration={true} - // sx={{width: "400px"}} - > - handleTransliterationModelClose} - setIsSpaceClicked={setIsSpaceClicked} - isSpaceClicked={isSpaceClicked} - setShowTransliterationModel={setShowTransliterationModel} - - /> - - - ); -}; - -export default Header;