Reza_ashrafi
/
RnDanovinExpo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added description to product page

Browse Source
master
Reza_ashrafi 3 years ago
parent 81c2c27249
commit ab71241656
9 changed files with 159 additions and 122 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/redux/actions/userProduct.js
  2. 3
      src/redux/reducers/userProduct.js
  3. 6
      src/screens/AR/index.js
  4. 55
      src/screens/Home/components/Blogs.js
  5. 42
      src/screens/Home/components/Videos.js
  6. 13
      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

5
src/redux/actions/userProduct.js
Unescape View File

@ -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) => {

3
src/redux/reducers/userProduct.js
Unescape View File

@ -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":

6
src/screens/AR/index.js
Unescape View File

@ -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);

55
src/screens/Home/components/Blogs.js
Unescape View File

@ -30,21 +30,25 @@ const ios = Platform.OS === "ios";
function Blogs({ blogs, mobile, theme }) {
return (
<View style={[tw("flex")]}>
<View style={tw("w-full px-4")}>
<Header title={"خواندنی‌ها"} route={"Blogs"} />
</View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3")]}
data={blogs.slice(0, 7)}
renderItem={({ item }) => (
<Blog blog={item} mobile={mobile} theme={theme} />
)}
keyExtractor={(item) => item.id}
initialNumToRender={5}
/>
{blogs.length ? (
<>
<View style={tw("w-full px-4")}>
<Header title={"خواندنی‌ها"} route={"Blogs"} />
</View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3")]}
data={blogs.slice(0, 7)}
renderItem={({ item }) => (
<Blog blog={item} mobile={mobile} theme={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,
},

42
src/screens/Home/components/Videos.js
Unescape View File

@ -16,27 +16,29 @@ const ios = Platform.OS === "ios";
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")]}>
<View style={tw("flex px-4")}>
<Header title="دوره‌های ویدئویی شما" route={"VOD"} />
</View>
<View style={[tw("w-full flex rounded-md pt-2 overflow-hidden")]}>
{videos.length ? (
<FlatList
showsHorizontalScrollIndicator={false}
style={[tw("py-3")]}
horizontal={true}
inverted={true}
data={videos.slice(0, 7)}
renderItem={({ item }) => (
<Video
video={item}
grades={grades}
mobile={mobile}
theme={theme}
/>
)}
keyExtractor={(item) => item.id}
/>
<>
<View style={tw("flex px-4")}>
<Header title="دوره‌های ویدئویی شما" route={"VOD"} />
</View>
<FlatList
showsHorizontalScrollIndicator={false}
style={[tw("py-3")]}
horizontal={true}
inverted={true}
data={videos.slice(0, 7)}
renderItem={({ item }) => (
<Video
video={item}
grades={grades}
mobile={mobile}
theme={theme}
/>
)}
keyExtractor={(item) => item.id}
/>
</>
) : null}
</View>
</View>

13
src/screens/Home/index.js
Unescape View File

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

29
src/screens/Product/components/Book.js
Unescape View File

@ -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: []
})
}
/>

46
src/screens/Product/components/Description.js
Unescape View File

@ -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>
);
}

82
src/screens/Product/components/Info.js
Unescape View File

@ -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",
}}

Write Preview
Loading…
Cancel
Save