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.
 
 
 

313 lines
11 KiB

import React, { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import './Header.scss';
import searchIcon from "../../assets/img/Group 1148.svg";
import moment from "jalali-moment";
import { useState } from 'react';
import avatar1 from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg";
import logoIcon from '../../assets/img/logo.png';
import MobileSideMenu from './MobileSideMenu';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import arrowIcon from './MobileSideMenu/arrow-down.svg'
import exitIcon from '../../assets/img/group-9.svg'
import backIcon from './arrow-left-1.svg';
import profileIcon from './MobileSideMenu/profile-active.svg'
import { user } from '../../redux/actions';
import { grades } from '../../redux/reducers/public';
const Header = ({
isMobile, cart,
logOut,
setUserStatus,
user
}) => {
let today = moment().locale("fa").format("YYYY/M/D");
let weekday = new Date().getDay();
let weekdayList = ["یکشنبه", "دوشنبه", "سهشنبه", "چهارشنبه", 'پنجشنبه', 'جمعه', "شنبه"];
const [menuPopup, setMenuPopup] = useState(false);
const [subMenu, setSubMenu] = useState(false);
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
setUserStatus()
}, [])
let UserData =JSON.parse(localStorage.getItem("userData"));
return (
<>
<div
className={`header w-full h-[6.5%] bg-white fixed top-0 left-0 flex items-center ${
!isMobile ? "shadow-md z-10" : "z-40"
}`}
>
{subMenu && (
<div
className={`w-1/6 p-4 flex flex-col text-right bg-white shadow-xl absolute top-[108.5%] rounded-lg left-5 transition duration-700 ease-in-out ${
subMenu && "subMenu"
}`}
>
<div className="flex items-center rtl text-right w-full py-2">
<img
src={
UserData.picFileId
? `https://new.andishmand.ir/api/v1/file/${UserData.picFileId}`
: profileIcon
}
/>
{UserData?.displayName || "نامشخص"} ({" "}
{UserData?.job || "دانش آموز"} )
</div>
{/* <Link
to="/adminpanel"
onClick={() => setSubMenu(false)}
className="w-full text-right border-b border-gray-200 py-2"
>
ورود به پنل ادمین
</Link> */}
{/* <Link to='/adminpanel/add-exam' onClick={() => setSubMenu(false)} className='w-full text-right border-b border-gray-200 py-2'>
ورود به صفحه افزودن آزمون
</Link> */}
<Link
to="/register"
onClick={() => setSubMenu(false)}
className="w-full text-right border-b border-gray-200 py-2"
>
ویرایش حساب کاربری
</Link>
</div>
)}
{isMobile ? (
<div className="flex w-full items-center justify-between rtl px-4">
<div onClick={() => setMenuPopup(!menuPopup)}>
<svg
width="35"
height="35"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3 5H21"
stroke="#df1452"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M3 10H21"
stroke="#df1452"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M3 15H21"
stroke="#df1452"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M3 20H21"
stroke="#df1452"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
</div>
<Link to="/myServices">
{" "}
<img src={logoIcon} className="h-10" />{" "}
</Link>
{location.pathname.includes("messages") ? (
<div
onClick={() => navigate(-1)}
className="w-8 h-8 bg-red-100 rounded-md flex items-center justify-center"
>
<img src={backIcon} className="h-4/5" />
</div>
) : (
<Link to="/shoppingCart">
<div className="flex flex-col">
<div className="absolute left-8 top-3 bg-red52 w-4 h-4 rounded-full text-xs flex items-center justify-center text-white">
{cart?.length}
</div>
<svg
width="35"
height="35"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001"
stroke="#df1452"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.99999 22H15C19.02 22 19.74 20.39 19.95 18.43L20.7 12.43C20.97 9.99 20.27 8 16 8H7.99999C3.72999 8 3.02999 9.99 3.29999 12.43L4.04999 18.43C4.25999 20.39 4.97999 22 8.99999 22Z"
stroke="#df1452"
strokeWidth="1.5"
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.4955 12H15.5045"
stroke="#df1452"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.49451 12H8.50349"
stroke="#df1452"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</Link>
)}
</div>
) : (
<>
{location.pathname.includes("adminpanel") ? (
<div></div>
) : (
<>
<div className="header-profile h-full flex items-center">
<img
src={arrowIcon}
className={`cursor-pointer ml-4 w-6 ${
subMenu && "transform rotate-180 duration-900 transition"
}`}
onClick={() => setSubMenu(!subMenu)}
/>
<div className="header-profile-img-container w-10 h-10 bg-white ml-2 rounded-full overflow-hidden">
<img
src={
UserData.picFileId
? `https://new.andishmand.ir/api/v1/file/${UserData.picFileId}`
: profileIcon
}
alt="avatar1"
className="w-full"
/>
</div>
<div className="header-profile-text-container w-fit text-right ml-4">
<div className="header-profile-text-container-name text-sm">
{user.displayName
? user.displayName
: user?.firstName + " " + user?.lastName}
</div>
<div className="header-profile-text-container-role text-xs">
{grades[user.gradeIds]}
</div>
</div>
</div>
<div className="header-line w-px h-[90%] bg-color1 ml-6"></div>
<div className="header-date-and-time text-right ml-6">
<Clock />
<div className="header-date-and-date text-sm">
<span className="header-date-and-date-text1 text-color3 ml-2">
{weekdayList[weekday]}
</span>
<span
className="header-date-and-date-text2 text-color2 ml-2"
style={{ fontFamily: "IRANSansXFaNum-Regular" }}
>
{today}
</span>
<span className="header-date-and-date-text3 text-color4 text-xs">
{/* روز ملی صنعت نفت */}
</span>
</div>
</div>
<div className="header-line w-px h-[90%] bg-color1 ml-6"></div>
</>
)}
</>
)}
{/* <div className="header-search w-[51.5%] h-full ml-6 flex items-center">
<img src={searchIcon} alt="searchIcon" className="header-search-icon" />
<input
type="search"
name="header-search-input"
id="header-search-input"
className="header-search-input h-2/3 w-[94%] ml-2 text-lg"
/>
</div> */}
</div>
{isMobile && menuPopup && (
<>
<div className="h-screen top-0 w-full z-30 backdrop-blur bg-black bg-opacity-20 fixed"></div>
<div className="w-full flex">
<MobileSideMenu
profilePic={avatar1}
users={[
{
name: user?.displayName,
title: grades[user.gradeIds],
},
{
name: "کوروش زراندوز",
title: "پادشاه کوروش توپیا",
},
]}
close={() => setMenuPopup(false)}
/>
<button
className="flex items-center justify-center fixed z-40 top-10 left-3 text-xl font-bold text-red52 w-12 h-12 rounded-xl "
onClick={() => setMenuPopup(false)}
>
<img src={exitIcon} className="w-full" />
</button>
</div>
</>
)}
</>
);
}
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
cart: state.userProduct.list,
user: state.user.status,
});
const mapDispatchToProps = {
setUserStatus: user.setUserStatus
};
export default connect(mapStateToProps, mapDispatchToProps)(Header);
const Clock = () => {
let today = new Date();
let h = today.getHours();
let m = today.getMinutes();
let s = today.getSeconds();
// const [h,setH]=useState(today.getHours());
// const [m, setM] = useState(today.getMinutes());
// const [s, setS] = useState(today.getSeconds());
const [counter, setCounter] = useState(0);
setTimeout(() => {
setCounter(counter + 1);
}, 1000);
return (
<div
className="header-date-and-time-time text-color2 text-sm"
style={{ fontFamily: "IRANSansXFaNum-Regular" }}
>
<span className="header-date-and-time-number text-color3 ml-2">ساعت</span>
{h < 10 ? "0" + h : h}:{m < 10 ? "0" + m : m}:{s < 10 ? "0" + s : s}
</div>
);
}