reza added resend button

master
Reza_ashrafi 3 years ago
parent 2870905357
commit 12859f5f83
  1. 2
      src/constants/Colors.js
  2. 2
      src/redux/reducers/user.js
  3. 5
      src/screens/Faq/index.js
  4. 18
      src/screens/Home/components/MyBooks.js
  5. 153
      src/screens/Otp/index.js
  6. 20
      src/screens/Profile/components/User.js

@ -84,4 +84,4 @@ const Colors = {
}, },
}; };
export default Colors; export default Colors;

@ -59,7 +59,7 @@ const user = (state = initialState, action) => {
return { ...state, loading: false, error: null, setDone: true }; return { ...state, loading: false, error: null, setDone: true };
case "user/setProfileFields": case "user/setProfileFields":
return { ...state, loading: false, error: null, profileFields: data }; return { ...state, loading: false, error: null, profileFields: data };
case "loading": case "user/loading":
return { ...state, loading: true }; return { ...state, loading: true };
case "error": case "error":
asyncAwesomeAlert("خطا", data.message, { asyncAwesomeAlert("خطا", data.message, {

@ -23,7 +23,7 @@ import Instance from "./components/Instance";
//assets //assets
import bgFaq from "./assets/faq.png"; 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 }) { function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq }) {
useEffect(() => { useEffect(() => {
@ -64,7 +64,8 @@ function Faq({ list, getFaq, searchResult, search, selectFaq, searchFaq }) {
/> />
</View> </View>
<ScrollView <ScrollView
style={[tw("bg-white flex pb-20 px-4 mb-4")]} style={[tw("bg-white flex px-4 mb-4")]}
contentContainerStyle={{paddingBottom: height / 2.4}}
> >
{!search {!search
? list.length > 0 && ? list.length > 0 &&

@ -1,11 +1,4 @@
import { import { View, Text, Image, Pressable, FlatList, Platform } from "react-native";
View,
Text,
Image,
Pressable,
FlatList,
Platform,
} from "react-native";
import { connect } from "react-redux"; import { connect } from "react-redux";
//components //components
@ -19,7 +12,7 @@ import fontSize from "../../../constants/fontSize";
const ios = Platform.OS === "ios"; const ios = Platform.OS === "ios";
function MyBooks({ books, grades, theme }) { function MyBooks({ books, grades, theme }) {
return ( return books.length && (
<View style={[tw("flex w-full mb-5")]}> <View style={[tw("flex w-full mb-5")]}>
<View <View
style={[ style={[
@ -43,13 +36,16 @@ function MyBooks({ books, grades, theme }) {
> >
کتابهای من کتابهای من
</Text> </Text>
<FlatList <FlatList
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
style={[tw("py-3")]} style={[tw("py-3")]}
horizontal={true} horizontal={true}
inverted={true} inverted={true}
data={books} data={books}
renderItem={({ item }) => <Book book={item} grades={grades} theme={theme} />} renderItem={({ item }) => (
<Book book={item} grades={grades} theme={theme} />
)}
keyExtractor={(book) => book?.id} keyExtractor={(book) => book?.id}
/> />
</View> </View>
@ -108,7 +104,7 @@ const Book = ({ book, grades, theme }) => {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
grades: state.publicApi.grades, grades: state.publicApi.grades,
theme: state.publicApi.theme theme: state.publicApi.theme,
}); });
export default connect(mapStateToProps)(MyBooks); export default connect(mapStateToProps)(MyBooks);

@ -11,6 +11,7 @@ import {
import tw from "tailwind-rn"; import tw from "tailwind-rn";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Svg, { Defs, Pattern, Image, Path } from "react-native-svg"; import Svg, { Defs, Pattern, Image, Path } from "react-native-svg";
import { asyncAwesomeAlert } from "../../utils/AsyncWrappers";
import { digitToEn } from "../../utils"; import { digitToEn } from "../../utils";
import onInput from "../../utils/onInput"; import onInput from "../../utils/onInput";
import { user } from "../../redux/actions"; import { user } from "../../redux/actions";
@ -25,14 +26,14 @@ let ref2;
let ref3; let ref3;
let ref4; let ref4;
let timer = 60; let timer = 120;
function Otp(props) { function Otp(props) {
const [firstCode, setFirstCode] = useState(""); const [firstCode, setFirstCode] = useState("");
const [secondCode, setSecondCode] = useState(""); const [secondCode, setSecondCode] = useState("");
const [thirdCode, setThirdCode] = useState(""); const [thirdCode, setThirdCode] = useState("");
const [fourthCode, setFourthCode] = useState(""); const [fourthCode, setFourthCode] = useState("");
const [time, setTime] = useState(60); const [time, setTime] = useState(120);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [timeEnd, setTimeEnd] = useState(false); const [timeEnd, setTimeEnd] = useState(false);
@ -86,47 +87,87 @@ function Otp(props) {
}; };
const submit = async () => { const submit = async () => {
setLoading(true); if (firstCode && secondCode && thirdCode && fourthCode) {
props.sendOtp({ props.sendOtp({
cellphone: props.route.params?.phone, cellphone: props.route.params?.phone,
otp: String(getEnCode()), otp: String(getEnCode()),
applicationToken: "1", applicationToken: "1",
userToken: "1", userToken: "1",
}); });
setLoading(false); } else {
asyncAwesomeAlert("خطا", "کد تاییدیه را کامل وارد کنید.", {
showCancelButton: false,
});
}
}; };
useEffect(() => { useEffect(() => {
ref1.focus(); ref1.focus();
let interval = setInterval(() => { }, []);
if (time > 0) {
setTime(timer - 1); useEffect(() => {
timer -= 1; if (!timeEnd) {
} let interval = setInterval(() => {
}, 1000); if (time > 0) {
let timeout = setTimeout(() => { setTime(timer - 1);
clearInterval(interval); timer -= 1;
setTimeEnd(true); }
}, 60000); }, 1000);
return () => { let timeout = setTimeout(() => {
clearInterval(interval); clearInterval(interval);
clearTimeout(timeout); 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(() => { useEffect(() => {
if (props.isLogin) { if (props.isLogin) {
props.navigation.navigate('Root'); props.navigation.navigate("Root");
} }
}, [props.isLogin]); }, [props.isLogin]);
const goBack = () => { const goBack = () => {
timer = 60; timer = 120;
props.navigation.navigate("Login"); props.navigation.navigate("Login");
}; };
return ( return (
<View style={[tw("px-4 flex-1 justify-center items-center bg-white"), {minHeight: height}]}> <View
style={[
tw("px-4 flex-1 justify-center items-center bg-white"),
{ minHeight: height },
]}
>
<Svg <Svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" xmlnsXlink="http://www.w3.org/1999/xlink"
@ -165,7 +206,8 @@ function Otp(props) {
}, },
]} ]}
> >
یک کد تائیدیه به شماره{" "} {" "}
یک کد تائیدیه به شماره
<Text <Text
style={{ style={{
color: Colors.theme1[props.theme].greenCF, color: Colors.theme1[props.theme].greenCF,
@ -174,7 +216,7 @@ function Otp(props) {
}} }}
> >
{props.route.params?.phone || "09123456789"} {props.route.params?.phone || "09123456789"}
</Text>{" "} </Text>
ارسال شد. آن را در قسمت زیر وارد کنید. ارسال شد. آن را در قسمت زیر وارد کنید.
</Text> </Text>
<View <View
@ -299,26 +341,46 @@ function Otp(props) {
}, },
]} ]}
> >
{"زمان باقی مانده تا ارسال مجدد: " + time} {"زمان باقی مانده تا ارسال مجدد: " + duration(time)}
</Text> </Text>
) : ( ) : (
<TouchableOpacity <View style={tw("flex")}>
style={{ <TouchableOpacity
marginTop: 30,
}}
onPress={() => goBack()}
>
<Text
style={{ style={{
textAlign: "center", marginTop: 30,
fontFamily: "light", }}
fontSize: fontSize.base, onPress={() => submitCellphone()}
color: Colors.theme1[props.theme].greenBA, >
<Text
style={{
textAlign: "center",
fontFamily: "light",
fontSize: fontSize.base,
color: Colors.theme1[props.theme].greenBA,
}}
>
{"ارسال مجدد کد"}
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
marginTop: 10,
}} }}
onPress={() => goBack()}
> >
{"بازگشت به مرحله قبل و اصلاح شماره"} <Text
</Text> style={{
</TouchableOpacity> textAlign: "center",
fontFamily: "light",
fontSize: fontSize.base,
color: Colors.theme1[props.theme].greenBA,
}}
>
{"بازگشت به مرحله قبل و اصلاح شماره"}
</Text>
</TouchableOpacity>
</View>
)} )}
</View> </View>
</View> </View>
@ -328,11 +390,12 @@ function Otp(props) {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
isLogin: state.user.status, isLogin: state.user.status,
mobile: state.publicApi.mobile, mobile: state.publicApi.mobile,
theme: state.publicApi.theme theme: state.publicApi.theme,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
sendOtp: user.otp_login, sendOtp: user.otp_login,
sendCellphone: user.otp,
}; };
export default connect(mapStateToProps, mapDispatchToProps)(Otp); export default connect(mapStateToProps, mapDispatchToProps)(Otp);

@ -1,13 +1,8 @@
import { import { View, Text, Image, Platform, Pressable } from "react-native";
View,
Text,
Image,
Platform,
Pressable,
} from "react-native";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import Svg, { Path } from "react-native-svg"; import Svg, { Path } from "react-native-svg";
import { asyncAwesomeAlert } from "../../../utils/AsyncWrappers";
//style //style
import tw from "tailwind-rn"; import tw from "tailwind-rn";
@ -84,12 +79,17 @@ const User = ({ user, mobile, theme }) => {
</Svg> </Svg>
</Pressable> </Pressable>
{dropdown && ( {dropdown && (
<View <Pressable
style={tw( style={tw(
`flex w-full pr-16 ${ios ? "items-end" : " "} ${ `flex w-full pr-16 ${ios ? "items-end" : " "} ${
mobile ? "mt-0" : "mt-4" mobile ? "mt-0" : "mt-4"
}` }`
)} )}
onPress={() =>
asyncAwesomeAlert("نتیجه", "این قابلیت در حال توسعه است.", {
showCancelButton: false,
})
}
> >
<View <View
style={[ style={[
@ -121,7 +121,7 @@ const User = ({ user, mobile, theme }) => {
+ +
</Text> </Text>
</View> </View>
</View> </Pressable>
)} )}
</View> </View>
); );
@ -130,7 +130,7 @@ const User = ({ user, mobile, theme }) => {
const mapStateToProps = (state) => ({ const mapStateToProps = (state) => ({
user: state.user.status, user: state.user.status,
mobile: state.publicApi.mobile, mobile: state.publicApi.mobile,
theme: state.publicApi.theme theme: state.publicApi.theme,
}); });
export default connect(mapStateToProps)(User); export default connect(mapStateToProps)(User);

Loading…
Cancel
Save