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.
 
 
 

89 lines
2.2 KiB

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { publicApi, userFavorite } from "../../redux/actions";
//assets
import bookImage from "./book.svg";
import bookmarkIcon from "./bookmark.svg";
const Favorites = ({
bookmarkList,
isMobile,
headerOptions,
setHeaderOptions,
getList,
}) => {
React.useEffect(() => {
if (isMobile) {
setHeaderOptions(headerOptions);
}
getList();
}, []);
useEffect(() => {
// alert();
window.scrollTo(0, 0);
}, []);
return (
<div className="flex flex-wrap">
{bookmarkList.map((bookmark, index) => (
<Bookmark key={index} bookmark={bookmark} />
))}
</div>
);
};
const Bookmark = ({ bookmark }) => {
return (
<div className="w-full lg:w-1/2 xl:w-1/3 px-4 lg:p-2 mb-4">
<div
className={`flex justify-between px-3.5 py-2 border-2 border-gray-200 border-solid rounded-md relative`}
>
<div className={"flex w-full"}>
<img src={bookmark.image} alt="" className="w-1/5" />
<div className={`flex flex-col mr-2 pt-2`}>
<strong className="text-base text-gray1">{bookmark.name}</strong>
<span className="text-sm mt-2 text-green7B font-bold">
{bookmark.grade}
</span>
</div>
</div>
<img src={bookmarkIcon} alt="" className="w-7 absolute left-2 top-2" />
</div>
</div>
);
};
const mapStateToProps = (state) => ({
loading: state.userFactor.loading,
isMobile: state.publicApi.isMobile,
bookmarkList: state.userFavorite.list,
});
const mapDispatchToProps = {
setHeaderOptions: publicApi.setHeaderOptions,
getList: userFavorite.list,
};
export default connect(mapStateToProps, mapDispatchToProps)(Favorites);
Favorites.defaultProps = {
bookmarkList: [
{
name: "کتاب آموزشی علوم تجربی",
grade: "پایه ششم ابتدایی",
image: bookImage,
},
{
name: "کتاب آموزشی علوم تجربی",
grade: "پایه ششم ابتدایی",
image: bookImage,
},
{
name: "کتاب آموزشی علوم تجربی",
grade: "پایه ششم ابتدایی",
image: bookImage,
},
],
};