reza added some change on alert and product page

master
Reza_ashrafi 3 years ago
parent 00fc4e93ed
commit 26959d9882
  1. 10
      src/components/AlertModal.js
  2. 2
      src/redux/reducers/user.js
  3. 4
      src/redux/reducers/userFactor.js
  4. 5
      src/redux/reducers/userProduct.js
  5. 196
      src/screens/Home/components/Blogs.js
  6. 109
      src/screens/Home/components/Videos.js
  7. 9
      src/screens/Home/index.js
  8. 281
      src/screens/Product/components/Book.js

@ -79,7 +79,9 @@ const AlertModal = props => {
progressColor="red"
showProgress={alert.showProgress}
title={alert.title}
titleStyle={{ fontFamily : 'bold' }}
message={alert.message}
messageStyle={{textAlign : 'right', fontFamily : 'regular'}}
closeOnTouchOutside={alert.closeOnTouchOutside}
closeOnHardwareBackPress={alert.closeOnHardwareBackPress}
showCancelButton={alert.showCancelButton}
@ -91,14 +93,16 @@ const AlertModal = props => {
onConfirmPressed={(onConfirmPressed)}
contentStyle={{
width: ReactNative.Dimensions.get('window').width / 1.5,
}}
cancelButtonStyle={{
fontFamily : 'regular',
}}
confirmButtonStyle={
{
width: ReactNative.Dimensions.get('window').width / 4,
alignItems: 'center',
justifyContent: 'center'
justifyContent: 'center',
fontFamily : 'regular'
}
}
useNativeDriver={true}

@ -62,7 +62,7 @@ const user = (state = initialState, action) => {
case "loading":
return { ...state, loading: true };
case "error":
asyncAwesomeAlert(ظا", data.message, {
asyncAwesomeAlert(طا", data.message, {
showCancelButton: false,
});
return { ...state, loading: false, error: data.message };

@ -1,4 +1,5 @@
import {useNavigation} from '@react-navigation/native';
import {asyncAwesomeAlert} from '../../utils/AsyncWrappers';
const initialState = {
loading: false,
@ -52,6 +53,9 @@ export default function userFactor(state = initialState, action) {
case "userFactor/loading":
return { ...state, loading: true };
case "userFactor/error":
asyncAwesomeAlert("خطا", data.message, {
showCancelButton: false,
});
// toast.error(data.message);
return { ...state, loading: false, error: data.message };
default:

@ -1,3 +1,5 @@
import {asyncAwesomeAlert} from '../../utils/AsyncWrappers';
const initialState = {
loading: false,
error: null,
@ -41,6 +43,9 @@ export default function userFactor(state = initialState, action) {
return { ...state, loading: true };
case "userProduct/error":
// toast.error(data.message);
asyncAwesomeAlert("خطا", data.message, {
showCancelButton: false,
});
return { ...state, loading: false, error: data.message };
default:
return state;

@ -28,129 +28,113 @@ const { width } = Dimensions.get("window");
const ios = Platform.OS === "ios";
function Blogs({ blogs, mobile }) {
return (
<View style={[tw("flex flex-col pr-3 mb-5")]}>
<View style={tw("w-full pl-3")}>
<Header title={"خواندنیها"} route={"Blogs"} />
</View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3 pb-7")]}
data={blogs}
renderItem={({ item }) => <Blog blog={item} mobile={mobile} />}
keyExtractor={(item) => item.id}
/>
</View>
);
}
const Blog = ({ blog, mobile }) => {
const colorScheme = Appearance.getColorScheme();
const Blog = ({ blog }) => {
return (
<Pressable
return (
<Pressable
style={[
tw("rounded-md ml-3 rounded-md relative"),
{ width: mobile ? 250 : width / 2.2 },
]}
// onPress={() => navigation.navigate('Product')}
>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${blog.fileIds}` }}
resizeMode="contain"
style={[
tw("rounded-md"),
{
flex: 1,
height: mobile ? 180 : ((width / 2.2) * 9) / 16,
},
]}
/>
<View
style={[
tw("rounded-md ml-3 rounded-md relative"),
{ width: mobile ? 250 : width / 2.2 },
{ transform: [{ translateY: -40 }], marginHorizontal: 10 },
tw("flex flex-col justify-between bg-white rounded-md p-2"),
{
shadowColor: "#00000055",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
height: 85,
},
]}
// onPress={() => navigation.navigate('Product')}
>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${blog.fileIds}` }}
resizeMode="contain"
<Text
style={[
tw("rounded-md"),
tw("mb-1"),
{
flex: 1,
height: mobile ? 180 : width / 2.2 * 9 / 16,
},
]}
/>
<View
style={[
{ transform: [{ translateY: -40 }], marginHorizontal: 10 },
tw("flex flex-col justify-between bg-white rounded-md p-2"),
{
shadowColor: "#00000055",
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
minHeight: 70,
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
fontSize: mobile ? fontSize.sm : fontSize.lg,
textAlign: ios ? "right" : "auto",
},
]}
>
<Text
style={[
tw("mb-2"),
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
fontSize: mobile ? fontSize.sm : fontSize.lg,
textAlign: ios ? "right" : "auto",
},
]}
>
{blog.title}
</Text>
<View style={[tw("flex flex-row-reverse justify-between")]}>
<View style={tw("flex-row-reverse items-center")}>
{blog.title}
</Text>
<View style={[tw("flex flex-row-reverse justify-between")]}>
<View style={tw("flex-row-reverse items-center")}>
<View style={{ height: 30 }}>
<Image
resizeMode="contain"
source={userImage}
style={[tw("rounded-full ml-1"), { width: 16, height: 16 }]}
style={[tw("rounded-full ml-1"), { width: 20, flex: 1 }]}
/>
<Text
style={[
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
},
]}
>
حامد دژبانی نسب
</Text>
</View>
<View style={tw("flex-row-reverse items-center")}>
<Text
style={[
tw("ml-1"),
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
},
]}
>
۳۰ دقیقه
</Text>
<Svg
xmlns="http://www.w3.org/2000/svg"
width={12.051}
height={12.051}
// {...props}
>
<G
fill="none"
stroke="#818181"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={0.5}
data-name="vuesax/linear/message"
>
<Path d="M4.268 9.54h-.251c-2.013 0-3.013-.502-3.013-3.013v-2.51a2.663 2.663 0 0 1 3.013-3.013h4.017a2.663 2.663 0 0 1 3.013 3.013v2.51A2.663 2.663 0 0 1 8.034 9.54h-.252a.509.509 0 0 0-.4.2l-.753 1a.713.713 0 0 1-1.205 0l-.753-1a.568.568 0 0 0-.403-.2Z" />
<Path
data-name="Vector"
d="M8.032 5.523h0M6.024 5.523h0M4.015 5.523h0"
/>
</G>
</Svg>
</View>
<Text
style={[
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
},
]}
>
حامد دژبانی نسب
</Text>
</View>
<View style={tw("flex-row-reverse items-center")}>
<Text
style={[
tw("ml-1"),
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
},
]}
>
۳۰ دقیقه
</Text>
</View>
</View>
</Pressable>
);
};
return (
<View style={[tw("flex flex-col pr-3 mb-5")]}>
<View style={tw("w-full pl-3")}>
<Header title={"خواندنیها"} route={"Blogs"} />
</View>
<FlatList
showsHorizontalScrollIndicator={false}
horizontal={true}
inverted={true}
style={[tw("flex flex-row mt-3 pb-7")]}
data={blogs}
renderItem={({ item }) => <Blog blog={item} />}
keyExtractor={(item) => item.id}
/>
</View>
</Pressable>
);
}
};
const mapStateToProps = (state) => ({
// features: state.publicApi.home?.features,

@ -22,58 +22,6 @@ import fontSize from "../../../constants/fontSize";
const ios = Platform.OS === "ios";
function Videos({ videos, grades, mobile }) {
const colorScheme = Appearance.getColorScheme();
const Video = ({ video }) => {
const navigation = useNavigation();
return (
<Pressable
style={[
tw(`flex flex-col relative ${mobile ? "ml-3" : "ml-5"}`),
{ width: mobile ? 130 : 200, height: mobile ? 280 : 280 },
]}
onPress={() => navigation.navigate("Video", { id: video.id })}
>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${video.fileIds}` }}
resizeMode="contain"
style={[
{
height: mobile ? 184 : 280,
},
]}
/>
<Text
style={[
tw("mt-2 px-1"),
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "bold",
fontSize: mobile ? fontSize.sm : fontSize.xl,
textAlign: ios ? "right" : "auto",
},
]}
>
{"دوره ویدئویی" + " " + video.name}
</Text>
<Text
style={[
tw("mt-1 pr-1"),
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
textAlign: ios ? "right" : "auto",
},
]}
>
{"پایه" + " " + grades[video.gradeId]}
</Text>
<View style={tw("absolute bottom-0 left-0 w-full")}>
<Progress percent={60} alignItems={"items-end"} />
</View>
</Pressable>
);
};
return (
<View style={[tw("w-full px-2 mb-5")]}>
<View
@ -88,7 +36,9 @@ function Videos({ videos, grades, mobile }) {
horizontal={true}
inverted={true}
data={videos}
renderItem={({ item }) => <Video video={item} />}
renderItem={({ item }) => (
<Video video={item} grades={grades} mobile={mobile} />
)}
keyExtractor={(item) => item.id}
/>
</View>
@ -96,6 +46,59 @@ function Videos({ videos, grades, mobile }) {
);
}
const Video = ({ video, mobile, grades }) => {
const navigation = useNavigation();
const colorScheme = Appearance.getColorScheme();
return (
<Pressable
style={[
tw(`flex flex-col relative ${mobile ? "ml-3" : "ml-5"}`),
{ width: mobile ? 130 : 200, height: mobile ? 280 : 280 },
]}
onPress={() => navigation.navigate("Video", { id: video.id })}
>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${video.fileIds}` }}
resizeMode="contain"
style={[
{
height: mobile ? 184 : 280,
},
]}
/>
<Text
style={[
tw("mt-2 px-1"),
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "bold",
fontSize: mobile ? fontSize.sm : fontSize.xl,
textAlign: ios ? "right" : "auto",
},
]}
>
{"دوره ویدئویی" + " " + video.name}
</Text>
<Text
style={[
tw("mt-1 pr-1"),
{
color: Colors.theme1[colorScheme].gray20,
fontFamily: "regular",
fontSize: mobile ? fontSize.xs : fontSize.base,
textAlign: ios ? "right" : "auto",
},
]}
>
{"پایه" + " " + grades[video.gradeId]}
</Text>
<View style={tw("absolute bottom-0 left-0 w-full")}>
<Progress percent={60} alignItems={"items-end"} />
</View>
</Pressable>
);
};
const mapStateToProps = (state) => ({
grades: state.publicApi.grades,
mobile: state.publicApi.mobile,

@ -57,20 +57,19 @@ const Home = ({
back: false,
}}
/>
<Drawer setBoxPosition={setBoxPosition} position={position} />
<ScrollView
contentContainerStyle={styles.contentContainerStyle}
style={[styles.container]}
>
{!mobile && <View style={tw("mt-5")}></View>}
{userProducts?.length > 0 && <MyBooks books={userProducts} />}
<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} />}
<Scroll books={books} />
<Videos videos={books} />
<Blogs blogs={blogs} />
</ScrollView>
</SafeAreaView>
);

@ -9,6 +9,7 @@ import {
Appearance,
Pressable,
Platform,
ActivityIndicator
} from "react-native";
import { useNavigation } from "@react-navigation/native";
import { product, userProduct } from "../../../redux/actions";
@ -35,7 +36,15 @@ import Colors from "../../../constants/Colors";
const { height, width } = Dimensions.get("window");
const ios = Platform.OS === "ios";
function Book({ book, grades, pushToCart, userId, loading, mobile }) {
function Book({
book,
grades,
pushToCart,
userId,
loading,
mobile,
userProducts,
}) {
const colorScheme = Appearance.getColorScheme();
const navigation = useNavigation();
const [type, setType] = useState(1);
@ -49,6 +58,14 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
}, 500);
}, [type]);
const physicalAvailabileInCart = userProducts?.filter(
(product) => product?.productId === book?.product[1]?.id
)[0];
const digitalAvailabileInCart = userProducts?.filter(
(product) => product?.productId === book?.product[0]?.id
)[0];
return (
<ScrollView style={[tw("flex flex-col flex-1 relative")]}>
{!mobile && <View style={tw("mt-5")}></View>}
@ -69,11 +86,13 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
)}
{imageSlider && <ImageSlider />}
<View style={tw("flex flex-row-reverse")}>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }}
style={[tw("rounded-md"), { height : height / 4, width : height / 4 * 3 / 4}]}
/>
<Image
source={{ uri: `https://dnvn.ir/api/v1/file/${book?.fileIds}` }}
style={[
tw("rounded-md"),
{ height: height / 4, width: ((height / 4) * 3) / 4 },
]}
/>
<View
style={[
@ -190,7 +209,9 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
<View style={tw("flex flex-row-reverse justify-between flex-wrap py-3")}>
<Pressable
style={[
tw("flex flex-row-reverse w-full justify-between px-2 py-3 mb-4"),
tw(
"flex flex-row-reverse w-full justify-between px-2 py-3 mb-4"
),
{
borderWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
@ -215,22 +236,113 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
>
خرید نسخه فیزیکی کتاب
</Text>
<View style={tw("flex flex-row-reverse")}>
<View style={tw("w-px h-full bg-green-500")}></View>
<Text
style={[
tw("py-1 pr-2"),
{
borderLeftWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
fontFamily: "bold",
color: Colors.theme1[colorScheme].green79,
fontSize: fontSize.sm,
},
]}
>
{separate(book?.product[1]?.price) + " " + "تومان"}
</Text>
<View style={tw("flex flex-row-reverse items-center")}>
<View style={tw("w-px h-full bg-green-300")}></View>
<View style={tw("flex")}>
<Text
style={[
tw("py-1 pr-2"),
{
borderLeftWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
fontFamily: "bold",
color: Colors.theme1[colorScheme].green79,
fontSize: fontSize.sm,
},
]}
>
{separate(book?.product[1]?.price) + " " + "تومان"}
</Text>
{physicalAvailabileInCart && (
<View
style={tw(
`flex items-center pl-3 ${
ios ? "flex-row-reverse" : "flex-row-reverse"
}`
)}
>
<Pressable
onPress={() =>
pushToCart({
productId: physicalAvailabileInCart?.productId,
userId: physicalAvailabileInCart.userId,
count: 1,
})
}
style={[
tw(
`rounded-md py-0 flex flex-row justify-center items-center border ${
mobile ? "px-1.5" : "px-3"
}`
),
{
borderColor: Colors.theme1[colorScheme].green79,
},
]}
>
<Text
style={{
fontSize: mobile ? fontSize.tiny : fontSize.xl4,
color: Colors.theme1[colorScheme].green79,
fontFamily: "bold",
}}
>
+
</Text>
</Pressable>
{loading ? (
<ActivityIndicator
style={tw("mx-1.5 my-3")}
size="small"
color={Colors.theme1[colorScheme].greenBA}
/>
) : (
<Text
style={[
tw("mx-1.5"),
{
fontSize: fontSize.xl6,
color: Colors.theme1[colorScheme].green79,
fontFamily: "bold",
},
]}
>
{physicalAvailabileInCart?.count}
</Text>
)}
<Pressable
onPress={() =>
pushToCart({
productId: physicalAvailabileInCart?.productId,
userId: physicalAvailabileInCart?.userId,
count: -1,
})
}
style={[
tw(
`rounded-md flex flex-row justify-center items-center border ${
mobile ? "px-2" : "px-3.5"
}`
),
{
borderColor: Colors.theme1[colorScheme].green79,
},
]}
>
<Text
style={{
fontSize: mobile ? fontSize.tiny : fontSize.xl4,
color: Colors.theme1[colorScheme].green79,
fontFamily: "demi",
}}
>
-
</Text>
</Pressable>
</View>
)}
</View>
</View>
</Pressable>
<Pressable
@ -261,23 +373,111 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
>
خرید نسخه دیجیتال کتاب
</Text>
<View style={tw("flex flex-row-reverse")}>
<View style={tw("w-px h-full bg-green-500")}></View>
<Text
style={[
tw("py-1 pr-2"),
{
borderLeftWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
fontFamily: "bold",
color: Colors.theme1[colorScheme].green79,
fontSize: fontSize.sm,
},
]}
>
{separate(book?.product[0]?.price) + " " + "تومان"}
</Text>
</View>
<View style={tw("flex")}>
<Text
style={[
tw("py-1 pr-2"),
{
borderLeftWidth: 1,
borderColor: Colors.theme1[colorScheme].greenCF,
fontFamily: "bold",
color: Colors.theme1[colorScheme].green79,
fontSize: fontSize.sm,
},
]}
>
{separate(book?.product[0]?.price) + " " + "تومان"}
</Text>
{digitalAvailabileInCart && (
<View
style={tw(
`flex items-center pl-3 ${
ios ? "flex-row-reverse" : "flex-row-reverse"
}`
)}
>
<Pressable
onPress={() =>
pushToCart({
productId: digitalAvailabileInCart?.productId,
userId: digitalAvailabileInCart.userId,
count: 1,
})
}
style={[
tw(
`rounded-md py-0 flex flex-row justify-center items-center border ${
mobile ? "px-1.5" : "px-3"
}`
),
{
borderColor: Colors.theme1[colorScheme].green79,
},
]}
>
<Text
style={{
fontSize: mobile ? fontSize.tiny : fontSize.xl4,
color: Colors.theme1[colorScheme].green79,
fontFamily: "bold",
}}
>
+
</Text>
</Pressable>
{loading ? (
<ActivityIndicator
style={tw("mx-1.5 my-3")}
size="small"
color={Colors.theme1[colorScheme].greenBA}
/>
) : (
<Text
style={[
tw("mx-1.5"),
{
fontSize: fontSize.xl6,
color: Colors.theme1[colorScheme].green79,
fontFamily: "bold",
},
]}
>
{digitalAvailabileInCart?.count}
</Text>
)}
<Pressable
onPress={() =>
pushToCart({
productId: digitalAvailabileInCart?.productId,
userId: digitalAvailabileInCart?.userId,
count: -1,
})
}
style={[
tw(
`rounded-md flex flex-row justify-center items-center border ${
mobile ? "px-2" : "px-3.5"
}`
),
{
borderColor: Colors.theme1[colorScheme].green79,
},
]}
>
<Text
style={{
fontSize: mobile ? fontSize.tiny : fontSize.xl4,
color: Colors.theme1[colorScheme].green79,
fontFamily: "demi",
}}
>
-
</Text>
</Pressable>
</View>
)}
</View>
</Pressable>
<Pressable
style={[
@ -422,6 +622,7 @@ function Book({ book, grades, pushToCart, userId, loading, mobile }) {
}
const mapStateToProps = (state) => ({
userProducts: state.userProduct.list,
userId: state.user.status?.id,
loading: state.userProduct.loading,
mobile: state.publicApi.mobile,

Loading…
Cancel
Save