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.
 
 
 
 
 

118 lines
2.9 KiB

import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { blog, book, userProduct } from "../../redux/actions";
import {
View,
StyleSheet,
Dimensions,
ScrollView,
SafeAreaView,
Platform,
StatusBar,
LayoutAnimation,
} from "react-native";
//components
import Navbar from "../../components/Navbar";
import Scroll from "./components/Scroll";
import MyBooks from "./components/MyBooks";
import Videos from "./components/Videos";
import Blogs from "./components/Blogs";
import Drawer from "../../components/Drawer";
import Header from "./components/Header";
//style
import tw from "tailwind-rn";
// Within your render function
const Home = ({
blogs,
getBlogs,
books,
getBooks,
userProducts,
getUserProducts,
mobile,
}) => {
const [position, setPosition] = useState("100%");
useEffect(() => {
getBlogs();
getBooks({ vod: true });
getUserProducts();
}, []);
const setBoxPosition = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
setPosition(position === "100%" ? "0%" : "100%");
};
return (
<SafeAreaView
style={{
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
position: "relative",
flex : 1,
}}
>
<Navbar
setBoxPosition={setBoxPosition}
headerOptions={{
logo: true,
menu: false,
hamburgerMenu: true,
title: "",
bookmark: false,
qr: true,
back: false,
}}
/>
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[styles.container]}
>
{!mobile && <View style={tw("mt-5")}></View>}
{userProduct?.length > 0 && <MyBooks books={userProducts} />}
<View style={tw("px-4 w-full")}>
<Header title={"فروشگاه"} route={"Products"} />
</View>
{books?.length > 0 && <Scroll books={books} />}
{books?.length > 0 && <Videos videos={books} />}
{blogs?.length > 0 && <Blogs blogs={blogs} />}
</ScrollView>
</SafeAreaView>
);
};
// Later on in your styles..
const styles = StyleSheet.create({
contentContainerStyle: {
paddingBottom: 40,
// flex : 1,
// alignItems: "",
},
container: {
backgroundColor: "white",
flexDirection: "column",
paddingVertical: 0,
paddingHorizontal: 0,
},
});
const mapStateToProps = (state) => ({
blogs: state.blog.list,
books: state.book.list,
userProducts: state.userProduct.list,
mobile: state.publicApi.isMobile,
});
const mapDispatchToProps = {
getBlogs: blog.list,
getBooks: book.list,
getUserProducts: userProduct.list,
// getVideos: product.listVOD
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);