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
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, |
|
}, |
|
], |
|
};
|
|
|