reza added resend button

src/constants/Colors.js

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

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, {

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 }) {
         />
       </View>
       <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
           ? list.length > 0 &&

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 && (
     <View style={[tw("flex w-full mb-5")]}>
       <View
         style={[
@@ -43,13 +36,16 @@ function MyBooks({ books, grades, theme }) {
         >
           کتابهای من
         </Text>
+
         <FlatList
           showsHorizontalScrollIndicator={false}
           style={[tw("py-3")]}
           horizontal={true}
           inverted={true}
           data={books}
-          renderItem={({ item }) => <Book book={item} grades={grades} theme={theme} />}
+          renderItem={({ item }) => (
+            <Book book={item} grades={grades} theme={theme} />
+          )}
           keyExtractor={(book) => book?.id}
         />
       </View>
@@ -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);

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 (
-    <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
         xmlns="http://www.w3.org/2000/svg"
         xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -165,7 +206,8 @@ function Otp(props) {
           },
         ]}
       >
-        یک کد تائیدیه به شماره{" "}
+        {" "}
+        یک کد تائیدیه به شماره
         <Text
           style={{
             color: Colors.theme1[props.theme].greenCF,
@@ -174,7 +216,7 @@ function Otp(props) {
           }}
         >
           {props.route.params?.phone || "09123456789"}
-        </Text>{" "}
+        </Text>
         ارسال شد. آن را در قسمت زیر وارد کنید.
       </Text>
       <View
@@ -299,26 +341,46 @@ function Otp(props) {
               },
             ]}
           >
-            {"زمان باقی مانده تا ارسال مجدد: " + time}
+            {"زمان باقی مانده تا ارسال مجدد: " + duration(time)}
           </Text>
         ) : (
-          <TouchableOpacity
-            style={{
-              marginTop: 30,
-            }}
-            onPress={() => goBack()}
-          >
-            <Text
+          <View style={tw("flex")}>
+            <TouchableOpacity
               style={{
-                textAlign: "center",
-                fontFamily: "light",
-                fontSize: fontSize.base,
-                color: Colors.theme1[props.theme].greenBA,
+                marginTop: 30,
+              }}
+              onPress={() => submitCellphone()}
+            >
+              <Text
+                style={{
+                  textAlign: "center",
+                  fontFamily: "light",
+                  fontSize: fontSize.base,
+                  color: Colors.theme1[props.theme].greenBA,
+                }}
+              >
+                {"ارسال مجدد کد"}
+              </Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={{
+                marginTop: 10,
               }}
+              onPress={() => goBack()}
             >
-              {"بازگشت به مرحله قبل و اصلاح شماره"}
-            </Text>
-          </TouchableOpacity>
+              <Text
+                style={{
+                  textAlign: "center",
+                  fontFamily: "light",
+                  fontSize: fontSize.base,
+                  color: Colors.theme1[props.theme].greenBA,
+                }}
+              >
+                {"بازگشت به مرحله قبل و اصلاح شماره"}
+              </Text>
+            </TouchableOpacity>
+          </View>
         )}
       </View>
     </View>
@@ -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);

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 }) => {
         </Svg>
       </Pressable>
       {dropdown && (
-        <View
+        <Pressable
           style={tw(
             `flex  w-full pr-16 ${ios ? "items-end" : " "} ${
               mobile ? "mt-0" : "mt-4"
             }`
           )}
+          onPress={() =>
+            asyncAwesomeAlert("نتیجه", "این قابلیت در حال توسعه است.", {
+              showCancelButton: false,
+            })
+          }
         >
           <View
             style={[
@@ -121,7 +121,7 @@ const User = ({ user, mobile, theme }) => {
               +
             </Text>
           </View>
-        </View>
+        </Pressable>
       )}
     </View>
   );
@@ -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);