upd: login

Deskripsi:
- update axios api check phone number
- modal loading
- fungsi random number 4 digit

No Issues

app/index.tsx

@@ -1,11 +1,18 @@
 import { ButtonForm } from "@/components/buttonForm";
 import { InputForm } from "@/components/inputForm";
+import ModalLoading from "@/components/modalLoading";
 import Styles from "@/constants/Styles";
+import { apiCheckPhoneLogin } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { Redirect, router } from "expo-router";
-import { Image, Text, View } from "react-native";
+import { useState } from "react";
+import { Image, Text, ToastAndroid, View } from "react-native";
+
 
 export default function Index() {
+   const [loadingLogin, setLoadingLogin] = useState(false)
+   const [phone, setPhone] = useState('')
+
    const { token, isLoading } = useAuthSession()
    if (isLoading) {
       return <Text>Loading...</Text>;
@@ -15,22 +22,51 @@ export default function Index() {
       return <Redirect href="/home" />;
    }
 
+   const handleCheckPhone = async () => {
+      try {
+         setLoadingLogin(true)
+         const response = await apiCheckPhoneLogin({ phone: `62${phone}` });
+         if (response.success) {
+            const otp = Math.floor(1000 + Math.random() * 9000);
+            console.log(otp);
+            // return router.push('/verification')
+         }
+         return ToastAndroid.show(response.message, ToastAndroid.SHORT)
+      } catch (error) {
+         console.error('Error fetching data:', error);
+         return ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      } finally {
+         setLoadingLogin(false)
+      }
+   };
+
    return (
-      <View style={Styles.wrapLogin} >
+      <>
-         <View style={{ alignItems: "center", marginVertical: 50 }}>
+         <View style={Styles.wrapLogin} >
-            <Image
+            <View style={{ alignItems: "center", marginVertical: 50 }}>
-               source={require("../assets/images/splash-icon.png")}
+               <Image
-               style={{ width: 130, height: 130 }}
+                  source={require("../assets/images/splash-icon.png")}
+                  style={{ width: 130, height: 130 }}
+               />
+               <Text style={[Styles.textSubtitle]}>PERBEKEL DARMASABA</Text>
+            </View>
+            <InputForm
+               onChange={setPhone}
+               type="numeric"
+               placeholder="XXX-XXX-XXXX"
+               round
+               itemLeft={<Text>+62</Text>}
+               info="Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda." />
+            <ButtonForm
+               text="MASUK"
+               onPress={() => {
+                  handleCheckPhone()
+               }}
             />
-            <Text style={[Styles.textSubtitle]}>PERBEKEL DARMASABA</Text>
          </View>
-         <InputForm
+         {
-            type="numeric"
+            loadingLogin && <ModalLoading isVisible={true} setVisible={setLoadingLogin} />
-            placeholder="XXX-XXX-XXXX"
+         }
-            round
+      </>
-            itemLeft={<Text>+62</Text>}
-            info="Kami akan mengirim kode verifikasi melalui WhatsApp, guna mengonfirmasikan nomor Anda." />
-         <ButtonForm text="MASUK" onPress={() => { router.push("/verification") }} />
-      </View>
    );
 }

app/verification.tsx

@@ -22,7 +22,6 @@ export default function Index() {
       // var C = require("crypto-js");
       // var Decrypted = C.AES.decrypt(encrypted, "your password");
       // var result = Decrypted.toString(C.enc.Utf8);
-      // console.log(encrypted,result);
       signIn(encrypted);
    }
    return (

components/modalLoading.tsx

@@ -0,0 +1,21 @@
+import { ActivityIndicator } from 'react-native';
+import Modal from 'react-native-modal';
+
+type Props = {
+   isVisible: boolean
+   setVisible: (value: boolean) => void
+}
+
+export default function ModalLoading({ isVisible, setVisible }: Props) {
+   return (
+      <Modal
+         animationIn={"slideInUp"}
+         animationOut={"slideOutDown"}
+         isVisible={isVisible}
+         hideModalContentWhileAnimating={true}
+         onBackdropPress={() => { setVisible(false) }}
+      >
+         <ActivityIndicator size="large" />
+      </Modal>
+   )
+}

lib/api.ts

@@ -0,0 +1,35 @@
+import axios from 'axios';
+
+const api = axios.create({
+   baseURL: 'http://10.0.2.2:3000/api',
+});
+
+export const apiCheckPhoneLogin = async (body: { phone: string }) => {
+   const response = await api.post('/auth/login', body)
+   return response.data;
+}
+
+// export const getEntities = async () => {
+//    const response = await axios.get('https://stg-darmasaba.wibudev.com/api/version-app');
+//    return response.data;
+// };
+
+// export const createEntity = async (newEntity: any) => {
+//    const response = await api.post('/entities', newEntity);
+//    return response.data;
+// };
+
+// export const updateEntityById = async (id: any, updatedEntity: any) => {
+//    const response = await api.put(`/entities/${id}`, updatedEntity);
+//    return response.data;
+// };
+
+// export const deleteEntityById = async (id: any) => {
+//    const response = await api.delete(`/entities/${id}`);
+//    return response.data;
+// };
+
+// export const checkAccount = async (newEntity: { phone: string }) => {
+//    const response = await api.post('/auth/login', newEntity);
+//    return response.data;
+// };

package.json

@@ -19,6 +19,7 @@
     "@react-native-async-storage/async-storage": "^2.1.2",
     "@react-navigation/bottom-tabs": "^7.2.0",
     "@react-navigation/native": "^7.0.14",
+    "axios": "^1.8.4",
     "crypto-es": "^2.1.0",
     "crypto-js": "^3.1.9-1",
     "dayjs": "^1.11.13",

providers/AuthProvider.tsx

@@ -43,8 +43,6 @@ export default function AuthProvider  ({children}:{children: ReactNode}): ReactN
     router.replace('/');
   }, []);
 
-  console.log('token', tokenRef.current);
-
   return (
     <AuthContext.Provider
       value={{