reza added description to product page

src/redux/actions/userProduct.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) => {

src/redux/reducers/userProduct.js

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

src/screens/AR/index.js

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

src/screens/Home/components/Blogs.js

@@ -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")}>
+      {blogs.length ? (
-        <Header title={"خواندنی‌ها"} route={"Blogs"} />
+        <>
-      </View>
+          <View style={tw("w-full px-4")}>
-      <FlatList
+            <Header title={"خواندنی‌ها"} route={"Blogs"} />
-        showsHorizontalScrollIndicator={false}
+          </View>
-        horizontal={true}
+          <FlatList
-        inverted={true}
+            showsHorizontalScrollIndicator={false}
-        style={[tw("flex flex-row mt-3")]}
+            horizontal={true}
-        data={blogs.slice(0, 7)}
+            inverted={true}
-        renderItem={({ item }) => (
+            style={[tw("flex flex-row mt-3")]}
-          <Blog blog={item} mobile={mobile} theme={theme} />
+            data={blogs.slice(0, 7)}
-        )}
+            renderItem={({ item }) => (
-        keyExtractor={(item) => item.id}
+              <Blog blog={item} mobile={mobile} theme={theme} />
-        initialNumToRender={5}
+            )}
-      />
+            keyExtractor={(item) => item.id}
+            initialNumToRender={5}
+          />
+        </>
+      ) : null}
     </View>
   );
 }
@@ -53,10 +57,7 @@ const Blog = ({ blog, mobile, theme }) => {
   const navigation = useNavigation();
   return (
     <Pressable
-      style={[
+      style={[tw("mr-4 relative"), { width: mobile ? 250 : width / 2.2 }]}
-        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,
                 },

src/screens/Home/components/Videos.js

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

src/screens/Home/index.js

@@ -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")}>
+        {books.length ? (
-          <Header title={"فروشگاه"} route={"Products"} />
+          <View style={tw("px-4 w-full")}>
-        </View>
+            <Header title={"فروشگاه"} route={"Products"} />
+          </View>
+        ) : null}
+
         <Scroll books={books} />
         <Videos videos={books} />
         <Blogs blogs={blogs} />

src/screens/Product/components/Book.js

@@ -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 ? (
+      {console.log(book?.text)}
-        <Description description={book?.description} />
+      {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: []
           })
         }
       />

src/screens/Product/components/Description.js

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

src/screens/Product/components/Info.js

@@ -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
+        <ProductSpecifications list={data} mobile={mobile} theme={theme} />
-          list={specificationsList}
+      ),
-          mobile={mobile}
+      productDescription: (
-          theme={theme}
+        <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",
             }}