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.
68 lines
1.8 KiB
68 lines
1.8 KiB
import React, { useState, useEffect, useCallback } from "react"; |
|
import { connect } from "react-redux"; |
|
|
|
import Sidebar from "./layouts/Desktop/Sidebar"; |
|
import Main from "./layouts/Desktop/Main"; |
|
import Header from "./layouts/Mobile/Header"; |
|
import MobileMain from "./layouts/Mobile/Main"; |
|
import { book, publicApi } from "../../redux/actions"; |
|
|
|
//assets |
|
|
|
export const Products = ({ |
|
isDark, |
|
isMobile, |
|
books, |
|
grades, |
|
setHeaderOptions, |
|
headerOptions, |
|
desktopContentTransform, |
|
}) => { |
|
useEffect(() => { |
|
setHeaderOptions(headerOptions); |
|
}, []); |
|
|
|
return ( |
|
<> |
|
{/* Portrait */} |
|
<div |
|
className={`w-full flex flex-col bg-transparent relative ${ |
|
desktopContentTransform ? "lg:top-24 z-10" : "" |
|
}`} |
|
> |
|
{isMobile ? ( |
|
<div className="h-screen w-full overflow-hidden"> |
|
<Header /> |
|
<MobileMain books={books} grades={grades} /> |
|
</div> |
|
) : ( |
|
<div |
|
className={`w-full flex gap-10 px-5 overflow-y-hidden mt-3 justify-center lg:pt-24 lg:mt-0`} |
|
> |
|
<div className="w-11/12 flex gap-5 justify-end"> |
|
<Sidebar /> |
|
<Main books={books} grades={grades} /> |
|
</div> |
|
</div> |
|
)} |
|
</div> |
|
</> |
|
); |
|
}; |
|
|
|
const mapStateToProps = (state) => ({ |
|
isDark: state.publicApi.isDark, |
|
isMobile: state.publicApi.isMobile, |
|
books: state.book.list, |
|
grades: state.publicApi.grades, |
|
filterOptions: state.book.filterOptions, |
|
desktopContentTransform: state.publicApi.desktopContentTransform, |
|
}); |
|
|
|
const mapDispatchToProps = { |
|
gradeFilter: book.gradeFilter, |
|
setHeaderOptions: publicApi.setHeaderOptions, |
|
setFilterOptions: book.setFilterOptions, |
|
}; |
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Products);
|
|
|