reza added description to product page

master
Reza_ashrafi 3 years ago
parent 81c2c27249
commit ab71241656
  1. 5
      src/redux/actions/userProduct.js
  2. 3
      src/redux/reducers/userProduct.js
  3. 6
      src/screens/AR/index.js
  4. 25
      src/screens/Home/components/Blogs.js
  5. 4
      src/screens/Home/components/Videos.js
  6. 5
      src/screens/Home/index.js
  7. 29
      src/screens/Product/components/Book.js
  8. 46
      src/screens/Product/components/Description.js
  9. 82
      src/screens/Product/components/Info.js

@ -1,5 +1,10 @@
import proxy from "../proxy";
const userProduct = {
arList:
(data = {}) =>
async (dispatch) => {
await proxy.get("userProduct/arList", data, { dispatch });
},
list:
(data = {}) =>
async (dispatch) => {

@ -9,10 +9,13 @@ const initialState = {
sum: null,
checkEmpty: false,
hasPhysical: false,
arList : [],
};
export default function userFactor(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "userProduct/arList":
return { ...state, loading: false, arList: data, error: null };
case "userProduct/myList":
return { ...state, loading: false, myList: data, error: null };
case "userProduct/list":

@ -9,7 +9,7 @@ import {
View,
} from "react-native";
import { connect } from "react-redux";
import { publicApi } from "../../redux/actions";
import { userProduct } from "../../redux/actions";
//components
import Navbar from "../../components/Navbar";
@ -99,13 +99,13 @@ function AR({ getArList, arList, mobile, theme }) {
}
const mapStateToProps = (state) => ({
arList: state.publicApi.arList,
arList: state.userProduct.arList,
mobile: state.publicApi.mobile,
theme: state.publicApi.theme
});
const mapDispatchToProps = {
getArList: publicApi.getArList,
getArList: userProduct.arList,
};
export default connect(mapStateToProps, mapDispatchToProps)(AR);

@ -30,6 +30,8 @@ const ios = Platform.OS === "ios";
function Blogs({ blogs, mobile, theme }) {
return (
<View style={[tw("flex")]}>
{blogs.length ? (
<>
<View style={tw("w-full px-4")}>
<Header title={"خواندنیها"} route={"Blogs"} />
</View>
@ -45,6 +47,8 @@ function Blogs({ blogs, mobile, theme }) {
keyExtractor={(item) => item.id}
initialNumToRender={5}
/>
</>
) : null}
</View>
);
}
@ -53,10 +57,7 @@ const Blog = ({ blog, mobile, theme }) => {
const navigation = useNavigation();
return (
<Pressable
style={[
tw("mr-4 relative"),
{ width: mobile ? 250 : width / 2.2 },
]}
style={[tw("mr-4 relative"), { width: mobile ? 250 : width / 2.2 }]}
onPress={() => navigation.push("Blog", { id: blog?.id })}
>
<Image
@ -80,7 +81,8 @@ const Blog = ({ blog, mobile, theme }) => {
shadowRadius: 2,
elevation: 5,
height: 85,
backgroundColor : theme === 'light' ? Colors.theme1.white : Colors.theme1.green79
backgroundColor:
theme === "light" ? Colors.theme1.white : Colors.theme1.green79,
},
]}
>
@ -88,7 +90,8 @@ const Blog = ({ blog, mobile, theme }) => {
style={[
tw("mb-1"),
{
color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.white,
fontFamily: "regular",
fontSize: mobile ? fontSize.sm : fontSize.lg,
textAlign: ios ? "right" : "auto",
@ -109,7 +112,10 @@ const Blog = ({ blog, mobile, theme }) => {
<Text
style={[
{
color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.white,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
},
@ -123,7 +129,10 @@ const Blog = ({ blog, mobile, theme }) => {
style={[
tw("ml-1"),
{
color: theme === 'light' ? Colors.theme1.gray20 : Colors.theme1.white,
color:
theme === "light"
? Colors.theme1.gray20
: Colors.theme1.white,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
},

@ -17,10 +17,11 @@ function Videos({ videos, grades, mobile, theme }) {
return (
<View style={[tw("w-full mb-0")]}>
<View style={[tw("w-full flex rounded-md pt-2 overflow-hidden")]}>
{videos.length ? (
<>
<View style={tw("flex px-4")}>
<Header title="دورههای ویدئویی شما" route={"VOD"} />
</View>
{videos.length ? (
<FlatList
showsHorizontalScrollIndicator={false}
style={[tw("py-3")]}
@ -37,6 +38,7 @@ function Videos({ videos, grades, mobile, theme }) {
)}
keyExtractor={(item) => item.id}
/>
</>
) : null}
</View>
</View>

@ -10,7 +10,7 @@ import {
Platform,
StatusBar,
LayoutAnimation,
Dimensions
Dimensions,
} from "react-native";
//components
@ -75,9 +75,12 @@ const Home = ({
>
{!mobile ? <View style={tw("mt-5")}></View> : null}
<MyBooks books={userProducts} />
{books.length ? (
<View style={tw("px-4 w-full")}>
<Header title={"فروشگاه"} route={"Products"} />
</View>
) : null}
<Scroll books={books} />
<Videos videos={books} />
<Blogs blogs={blogs} />

@ -13,14 +13,11 @@ import { useNavigation } from "@react-navigation/native";
import { product, userProduct } from "../../../redux/actions";
import { asyncAwesomeAlert } from "../../../utils/AsyncWrappers";
import { connect } from "react-redux";
import { Entypo } from "@expo/vector-icons";
import separate from "../../../utils/separate";
//components
import Description from "./Description";
import LinkBox from "./LinkBox";
import Comments from "./Comments";
import Blur from "../../../components/Blur";
import ImageSlider from "../../../components/ImageSlider";
import Rates from "./Rates";
@ -171,14 +168,7 @@ function Book({
{"پایه" + " " + (grades[book?.gradeId] || " ")}
</Text>
</View>
<Text
style={[
tw("text-right w-full"),
{ color: "#323232", fontSize: fontSize.sm, fontFamily: "light" },
]}
>
{book?.text || " "}
</Text>
</View>
</View>
<View
@ -573,8 +563,18 @@ function Book({
</Text>
</TouchableHighlight>
</View>
{book?.product[type]?.description ? (
<Description description={book?.description} />
{console.log(book?.text)}
{book?.text ? (
<LinkBox
title="توضیحات"
key={"4"}
onPress={() =>
navigation.push("Info", {
type: { name: "توضیحات", value: "productDescription" },
data : book?.text
})
}
/>
) : null}
<LinkBox
title="مشخصات محصول"
@ -582,6 +582,7 @@ function Book({
onPress={() =>
navigation.push("Info", {
type: { name: "مشخصات محصول", value: "productSpecifications" },
data: [],
})
}
/>
@ -591,6 +592,7 @@ function Book({
onPress={() =>
navigation.push("Info", {
type: { name: "نقد و بررسی", value: "productReview" },
data: [],
})
}
/>
@ -600,6 +602,7 @@ function Book({
onPress={() =>
navigation.push("Info", {
type: { name: "پرسش و پاسخ", value: "productQuestion" },
data: []
})
}
/>

@ -1,46 +0,0 @@
import React from "react";
import { View, Text, Dimensions } from "react-native";
import tw from "tailwind-rn";
import fontSize from "../../../constants/fontSize";
import { Entypo } from "@expo/vector-icons";
const width = Dimensions.get("window").width;
const height = Dimensions.get("window").height;
export default function Description({ description }) {
return (
<View
style={[
tw("w-full flex pt-6 mt-2 mb-3"),
{ borderTopWidth: 1, borderColor: "#86A0B944" },
]}
>
<View
style={tw("flex flex-row-reverse justify-between items-center mb-2")}
>
<Text
style={[
{ fontSize: fontSize.sm, color: "#275077", fontFamily: "regular" },
tw(""),
]}
>
توضیحات
</Text>
<Entypo name="chevron-small-left" size={20} color="#196EC0" />
</View>
<Text
style={[
tw("w-full text-right mt-2"),
{
fontSize: fontSize.sm,
color: "#323232bb",
lineHeight: 20,
fontFamily: "light",
},
]}
>
{description}
</Text>
</View>
);
}

@ -11,6 +11,7 @@ import {
} from "react-native";
import { connect } from "react-redux";
import React from "react";
import HTMLView from "react-native-htmlview";
//components
import Navbar from "../../../components/Navbar";
@ -22,7 +23,7 @@ import Colors from "../../../constants/Colors";
//variables
const ios = Platform.OS === "ios";
const { width } = Dimensions.get("window");
const { width, height } = Dimensions.get("window");
const Info = ({
route,
@ -59,21 +60,20 @@ const Info = ({
mobile,
theme,
}) => {
const { type } = route.params;
const { type, data } = route.params;
const components = React.useMemo(() => {
return {
productQuestion: (
<ProductQuestion list={questionList} mobile={mobile} theme={theme} />
<ProductQuestion list={data} mobile={mobile} theme={theme} />
),
productReview: (
<ProductReviews list={reviewList} mobile={mobile} theme={theme} />
<ProductReviews list={data} mobile={mobile} theme={theme} />
),
productSpecifications: (
<ProductSpecifications
list={specificationsList}
mobile={mobile}
theme={theme}
/>
<ProductSpecifications list={data} mobile={mobile} theme={theme} />
),
productDescription: (
<ProductDescription mobile={mobile} theme={theme} text={data} />
),
};
}, [type]);
@ -81,7 +81,7 @@ const Info = ({
const styles = React.useMemo(() => {
return StyleSheet.create({
contentContainerStyle: {
paddingBottom: 100,
paddingBottom: height / 4,
},
container: {
flexDirection: "column",
@ -119,6 +119,61 @@ const Info = ({
);
};
const ProductDescription = ({ text, mobile, theme }) => {
const renderNode = React.useCallback(
(node, index, siblings, parent, defaultRenderer) => {
if (node.name == "img") {
const a = node.attribs;
return (
<Image
style={{ width: 300, height: 300 }}
source={{ uri: node.attribs.src }}
/>
);
}
},
[text]
);
return (
<View style={{ flex: 1, paddingTop : 40 }}>
<HTMLView
value={text}
renderNode={renderNode}
stylesheet={{
p: {
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
textAlign: "right",
fontFamily: "light",
lineHeight: 27,
marginVertical: -35,
padding: 0,
},
strong: {
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
textAlign: "right",
fontFamily: "light",
lineHeight: 27,
},
ul: {
textAlign: "right",
marginVertical: -35,
},
li: {
color:
theme === "light" ? Colors.theme1.gray20 : Colors.theme1.grayF9,
textAlign: "right",
fontFamily: "light",
lineHeight: 27,
marginVertical: -30,
},
}}
/>
</View>
);
};
const ProductQuestion = ({ list, mobile, theme }) => {
return (
<View style={{ flex: 1 }}>
@ -178,7 +233,10 @@ const ProductReviews = ({ list, mobile, theme }) => {
style={[
{
fontSize: mobile ? fontSize.tiny : fontSize.lg,
color: theme === 'light' ? Colors.theme1.green79 : Colors.theme1.white,
color:
theme === "light"
? Colors.theme1.green79
: Colors.theme1.white,
fontFamily: "bold",
},
]}
@ -190,7 +248,7 @@ const ProductReviews = ({ list, mobile, theme }) => {
style={{
fontSize: mobile ? fontSize.tiny : fontSize.base,
fontFamily: "light",
color: theme === 'light' ? "#275077" : Colors.theme1.white,
color: theme === "light" ? "#275077" : Colors.theme1.white,
lineHeight: 25,
textAlign: ios ? "right" : "auto",
}}

Loading…
Cancel
Save