import React, { useEffect } from "react";
import { connect } from "react-redux";
import { blog, publicApi } from "../../redux/actions";
import { Carousel } from "@trendyol-js/react-carousel";
import { useParams } from "react-router-dom";
//components
import Header from "../Blogs/layouts/Header";
import Suggest from "../Blogs/layouts/Suggest";
import New from "../Blogs/layouts/New";
import Avatar from "../../components/Avatar";
import moment from "jalali-moment";
//assets
import arrow from "../../assets/icons/dropdown-blue.svg";
export const Blog = ({
getInfo,
blog,
setHeaderOptions,
headerOptions,
blogs,
}) => {
let { id } = useParams();
useEffect(() => {
setHeaderOptions(headerOptions);
}, []);
useEffect(() => {
getInfo({ id });
}, [id]);
console.log(blog);
return blogs?.length ? (
{window.t("نوشته از:") + " " + blog?.author?.name}
{blog?.author.role}
{window.t("زمان مطالعه:") +
" " +
`${blog?.duration}` +
" " +
window.t("دقیقه")}
{moment(blog?.updatedAt).locale("fa").format("YYYY/MM/DD")}
{blog?.title}
{/* desktop */}
{window.t("نوشته از:") + " " + blog?.author?.name}
{blog?.author.role}
{window.t("زمان مطالعه:") +
" " +
`${blog?.duration}` +
" " +
window.t("دقیقه")}
{moment(blog?.updatedAt).locale("fa").format("YYYY/MM/DD")}
{/* desktop */}
{/* mobile */}
{blogs.map((blog, index) => (
))}
{/* mobile */}
{/* desktop */}
e.stopPropagation()}
/>
}
leftArrow={
e.stopPropagation()}
/>
}
>
{blogs
?.slice(0, 10)
?.filter((blog) => Number(blog?.id) !== Number(id))
.map((blog, index) => (
))}
{/* desktop */}
) : (
);
};
const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile,
blog: state.blog.blog,
blogs: state.blog.list,
activeBlog: state.blog.active,
});
const mapDispatchToProps = {
getInfo: blog.info,
setHeaderOptions: publicApi.setHeaderOptions,
};
export default connect(mapStateToProps, mapDispatchToProps)(Blog);