From 12859f5f836e8ec28cfd6f118088ee8fd7643b41 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Wed, 13 Apr 2022 14:37:09 +0430 Subject: [PATCH] reza added resend button --- src/constants/Colors.js | 2 +- src/redux/reducers/user.js | 2 +- src/screens/Faq/index.js | 5 +- src/screens/Home/components/MyBooks.js | 18 ++- src/screens/Otp/index.js | 153 +++++++++++++++++-------- src/screens/Profile/components/User.js | 20 ++-- 6 files changed, 130 insertions(+), 70 deletions(-) diff --git a/src/constants/Colors.js b/src/constants/Colors.js index 5207174..964ab5d 100644 --- a/src/constants/Colors.js +++ b/src/constants/Colors.js @@ -84,4 +84,4 @@ const Colors = { }, }; -export default Colors; +export default Colors; \ No newline at end of file diff --git a/src/redux/reducers/user.js b/src/redux/reducers/user.js index cb426a1..d0f7b1b 100644 --- a/src/redux/reducers/user.js +++ b/src/redux/reducers/user.js @@ -59,7 +59,7 @@ const user = (state = initialState, action) => { return { ...state, loading: false, error: null, setDone: true }; case "user/setProfileFields": return { ...state, loading: false, error: null, profileFields: data }; - case "loading": + case "user/loading": return { ...state, loading: true }; case "error": asyncAwesomeAlert("خطا", data.message, { diff --git a/src/screens/Faq/index.js b/src/screens/Faq/index.js index 4093c69..6e82937 100644 --- a/src/screens/Faq/index.js +++ b/src/screens/Faq/index.js @@ -23,7 +23,7 @@ import Instance from "./components/Instance"; //assets import bgFaq from "./assets/faq.png"; -const width = Dimensions.get("window").width; +const {width, height} = Dimensions.get("window"); function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq }) { useEffect(() => { @@ -64,7 +64,8 @@ function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq }) { /> {!search ? list.length > 0 && diff --git a/src/screens/Home/components/MyBooks.js b/src/screens/Home/components/MyBooks.js index b95efcd..6b5491c 100644 --- a/src/screens/Home/components/MyBooks.js +++ b/src/screens/Home/components/MyBooks.js @@ -1,11 +1,4 @@ -import { - View, - Text, - Image, - Pressable, - FlatList, - Platform, -} from "react-native"; +import { View, Text, Image, Pressable, FlatList, Platform } from "react-native"; import { connect } from "react-redux"; //components @@ -19,7 +12,7 @@ import fontSize from "../../../constants/fontSize"; const ios = Platform.OS === "ios"; function MyBooks({ books, grades, theme }) { - return ( + return books.length && ( کتابهای من + } + renderItem={({ item }) => ( + + )} keyExtractor={(book) => book?.id} /> @@ -108,7 +104,7 @@ const Book = ({ book, grades, theme }) => { const mapStateToProps = (state) => ({ grades: state.publicApi.grades, - theme: state.publicApi.theme + theme: state.publicApi.theme, }); export default connect(mapStateToProps)(MyBooks); diff --git a/src/screens/Otp/index.js b/src/screens/Otp/index.js index fabe197..b1d312d 100644 --- a/src/screens/Otp/index.js +++ b/src/screens/Otp/index.js @@ -11,6 +11,7 @@ import { import tw from "tailwind-rn"; import { connect } from "react-redux"; import Svg, { Defs, Pattern, Image, Path } from "react-native-svg"; +import { asyncAwesomeAlert } from "../../utils/AsyncWrappers"; import { digitToEn } from "../../utils"; import onInput from "../../utils/onInput"; import { user } from "../../redux/actions"; @@ -25,14 +26,14 @@ let ref2; let ref3; let ref4; -let timer = 60; +let timer = 120; function Otp(props) { const [firstCode, setFirstCode] = useState(""); const [secondCode, setSecondCode] = useState(""); const [thirdCode, setThirdCode] = useState(""); const [fourthCode, setFourthCode] = useState(""); - const [time, setTime] = useState(60); + const [time, setTime] = useState(120); const [loading, setLoading] = useState(false); const [timeEnd, setTimeEnd] = useState(false); @@ -86,47 +87,87 @@ function Otp(props) { }; const submit = async () => { - setLoading(true); - props.sendOtp({ - cellphone: props.route.params?.phone, - otp: String(getEnCode()), - applicationToken: "1", - userToken: "1", - }); - setLoading(false); + if (firstCode && secondCode && thirdCode && fourthCode) { + props.sendOtp({ + cellphone: props.route.params?.phone, + otp: String(getEnCode()), + applicationToken: "1", + userToken: "1", + }); + } else { + asyncAwesomeAlert("خطا", "کد تاییدیه را کامل وارد کنید.", { + showCancelButton: false, + }); + } }; useEffect(() => { ref1.focus(); - let interval = setInterval(() => { - if (time > 0) { - setTime(timer - 1); - timer -= 1; - } - }, 1000); - let timeout = setTimeout(() => { - clearInterval(interval); - setTimeEnd(true); - }, 60000); - return () => { - clearInterval(interval); - clearTimeout(timeout); - }; + }, []); + + useEffect(() => { + if (!timeEnd) { + let interval = setInterval(() => { + if (time > 0) { + setTime(timer - 1); + timer -= 1; + } + }, 1000); + let timeout = setTimeout(() => { + clearInterval(interval); + setTimeEnd(true); + }, 10000); + return () => { + clearInterval(interval); + clearTimeout(timeout); + }; + } + }, [timeEnd]); + + const duration = React.useCallback( + (value) => { + const minute = value % 60; + const hour = Math.floor(value / 60); + return ( + (hour > 0 + ? (hour.toString().length === 1 ? "0" + hour.toString() : hour) + "" + : "") + + ":" + + (minute.toString().length === 1 ? "0" + minute.toString() : minute) + ); + }, + [props.route] + ); + + const submitCellphone = React.useCallback(() => { + setTimeEnd(false); + setTime(120); + setFirstCode(""); + setSecondCode(""); + setThirdCode(""); + setFourthCode(""); + props.sendCellphone({ cellphone: props.cellphone }); + timer = 120; }, []); useEffect(() => { if (props.isLogin) { - props.navigation.navigate('Root'); + props.navigation.navigate("Root"); } }, [props.isLogin]); const goBack = () => { - timer = 60; + timer = 120; props.navigation.navigate("Login"); }; return ( - + - یک کد تائیدیه به شماره{" "} + {" "} + یک کد تائیدیه به شماره {props.route.params?.phone || "09123456789"} - {" "} + ارسال شد. آن را در قسمت زیر وارد کنید. - {"زمان باقی مانده تا ارسال مجدد: " + time} + {"زمان باقی مانده تا ارسال مجدد: " + duration(time)} ) : ( - goBack()} - > - + submitCellphone()} + > + + {"ارسال مجدد کد"} + + + + goBack()} > - {"بازگشت به مرحله قبل و اصلاح شماره"} - - + + {"بازگشت به مرحله قبل و اصلاح شماره"} + + + )} @@ -328,11 +390,12 @@ function Otp(props) { const mapStateToProps = (state) => ({ isLogin: state.user.status, mobile: state.publicApi.mobile, - theme: state.publicApi.theme + theme: state.publicApi.theme, }); const mapDispatchToProps = { sendOtp: user.otp_login, + sendCellphone: user.otp, }; export default connect(mapStateToProps, mapDispatchToProps)(Otp); diff --git a/src/screens/Profile/components/User.js b/src/screens/Profile/components/User.js index e177949..413c277 100644 --- a/src/screens/Profile/components/User.js +++ b/src/screens/Profile/components/User.js @@ -1,13 +1,8 @@ -import { - View, - Text, - Image, - Platform, - Pressable, -} from "react-native"; +import { View, Text, Image, Platform, Pressable } from "react-native"; import React from "react"; import { connect } from "react-redux"; import Svg, { Path } from "react-native-svg"; +import { asyncAwesomeAlert } from "../../../utils/AsyncWrappers"; //style import tw from "tailwind-rn"; @@ -84,12 +79,17 @@ const User = ({ user, mobile, theme }) => { {dropdown && ( - + asyncAwesomeAlert("نتیجه", "این قابلیت در حال توسعه است.", { + showCancelButton: false, + }) + } > { + - + )} ); @@ -130,7 +130,7 @@ const User = ({ user, mobile, theme }) => { const mapStateToProps = (state) => ({ user: state.user.status, mobile: state.publicApi.mobile, - theme: state.publicApi.theme + theme: state.publicApi.theme, }); export default connect(mapStateToProps)(User);