You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

261 lines
8.2 KiB

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);