import React, { Component } from "react"; import { connect } from "react-redux"; import AddCircleOutlineRoundedIcon from "@material-ui/icons/AddCircleOutlineRounded"; import { Link } from "react-router-dom"; import { toast } from "react-toastify"; import Avatar from "@material-ui/core/Avatar"; import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp"; import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown"; import { user } from "~/Redux/actions"; import mobileHome from "~/assets/icons/mobileHome.svg"; import mobileAr from "~/assets/icons/mobileAr.svg"; import qrcode from "~/assets/icons/drawer-qr.png"; import mobileBasket from "~/assets/icons/mobileBasket.svg"; import mobileBlog from "~/assets/icons/mobileBlog.svg"; import mobileMail from "~/assets/icons/mobileMail.svg"; import mobileProfile from "~/assets/icons/mobileProfile.svg"; import mobileDanger from "~/assets/icons/mobileDanger.svg"; import mobileLogout from "~/assets/icons/mobileLogout.svg"; import proxy from "~/Redux/proxy"; import "./NavbarDrawer.scss"; class NavbarDrawer extends Component { state = { dropdown: false, }; render() { const statusx = proxy.status(); this.links = [ { name: window.t("صفحه اصلی"), link: "/", icon: <img src={mobileHome} alt={window.t("صفحه اصلی")} />, toast: "", message: "", }, { name: "ورود یا ثبت نام", link: "/auth", icon: <img src={mobileLogout} alt={window.t("کتابهای من")} />, toast: "", message: "", }, { name: window.t("درباره ما"), link: "/about", icon: <img src={mobileBlog} alt={window.t("کتابهای من")} />, toast: "", message: "", }, { name: window.t("فروشگاه"), link: "/products", icon: <img src={mobileBlog} alt={window.t("کتابهای من")} />, toast: "", message: "", }, { name: window.t("سبد خرید"), link: "/cart", icon: <img src={mobileBlog} alt={window.t("کتابهای من")} />, toast: "", message: "", }, { name: "بلاگ", link: "/blogs", icon: <img src={mobileBlog} alt="بلاگ" />, toast: "", message: "", }, { name: window.t("پشتیبانی"), link: "/support", icon: <img src={mobileDanger} alt={window.t("پشتیبانی")} />, toast: "", message: "", // onClick: this.props.logout, }, ]; this.links2 = [ { name: window.t("صفحه اصلی"), link: "/", icon: <img src={mobileHome} alt={window.t("صفحه اصلی")} />, toast: "", message: "", }, { name: window.t("واقعیت افزوده"), link: "/ar", icon: <img src={mobileAr} alt={window.t("واقعیت افزوده")} />, toast: "", message: "", }, { name: window.t("بارکد خوان"), link: "/qr-scan", icon: <img src={qrcode} alt={window.t("بارکد خوان")} />, toast: "", message: "", }, { name: window.t("کتابهای من"), link: "/mybooks", icon: <img src={mobileBlog} alt={window.t("کتابهای من")} />, toast: "", message: "", }, { name: window.t("سبد خرید"), link: "/cart", icon: <img src={mobileBasket} alt={window.t("فروشگاه")} />, toast: "", message: "", }, { name: "بلاگ", link: "/blogs", icon: <img src={mobileBlog} alt="بلاگ" />, toast: "", message: "", }, { name: window.t("دانوینیها"), link: "/", icon: <img src={mobileProfile} alt={window.t("دانوینیها")} />, toast: window.t("به زودی این بخش فعال می شود"), message: "به زودی", }, { name: window.t("پشتیبانی"), link: "/support", icon: <img src={mobileDanger} alt={window.t("پشتیبانی")} />, toast: "", message: "", // onClick: this.props.logout, }, { name: window.t("ویرایش مشخصات"), link: "/profile", icon: <img src={mobileMail} alt={window.t("ویرایش مشخصات")} />, toast: "", // message: "4 پیام", }, { name: window.t("بروز رسانی"), link: "/", icon: <img src={mobileLogout} alt={window.t("خروج")} />, toast: "", message: "", onClick: () => { window.location.reload(true); }, }, { name: window.t("خروج"), link: "/auth", icon: <img src={mobileLogout} alt={window.t("خروج")} />, toast: "", message: "", onClick: () => { this.props.logout({}); }, }, ]; const { status } = this.props; let score = 2; return ( <div className="navbar-drawer d-flex flex-column"> {statusx ? ( <div className="navbar-drawer__header d-flex align-items-center"> <> <Avatar style={{ width: 60, height: 60 }} alt="Remy Sharp" src={ status.picFileId ? `https://dnvn.ir/api/v1/file/${status.picFileId}` : "" } /> <div className="navbar-drawer__header--right d-fex flex-column"> <h1>{status.firstName + " " + status.lastName}</h1> </div> </> {this.state.dropdown ? ( <div className="navbar-drawer__header--dropdown" onClick={() => this.setState({ dropdown: false })} > {score ? <span>{score} امتیاز</span> : null} <KeyboardArrowUpIcon style={{ color: "grey", fontSize: 30 }} /> </div> ) : ( <div className="navbar-drawer__header--dropdown" onClick={() => this.setState({ dropdown: true })} > {score ? <span>{score} امتیاز</span> : null}{" "} <KeyboardArrowDownIcon style={{ color: "grey", fontSize: 30 }} /> </div> )} </div> ) : null} {this.state.dropdown ? ( <div className="navbar-drawer__dropdown d-flex flex-column"> {/* {this.props.users.map((item, i) => ( <User data={item} key={i} /> ))} */} <Link to={"/newProfile"} // key={this.props.users.length + 1} style={{ color: "#4e4e4e" }} > <div className="navbar-drawer__bottom--link d-flex"> <AddCircleOutlineRoundedIcon style={{ fontSize: 30, color: "#777", margin: "0px 8px" }} /> <div>اضافه کردن کاربر </div> {/* {item.message && <div class="badge">{item.message}</div>} */} </div> </Link> </div> ) : null} <div className="navbar-drawer__bottom mt-3"> {(statusx ? this.links2 : this.links).map((item, key) => ( <Link to={item.link} key={key} onClick={ item.onClick || (() => (item.link === "" ? toast.error(item.toast) : null)) } > <div className="navbar-drawer__bottom--link d-flex"> {item.icon} <div>{item.name}</div> {item.message && <div class="badge">{item.message}</div>} </div> </Link> ))} {/* <div className="navbar-drawer__bottom--version d-flex"> <span>نسخه نرمافزار 3.1</span> </div> */} </div> </div> ); } } export default connect((state) => ({ status: state.user.status }), { logout: user.logout, })(NavbarDrawer);