Merge branch 'develop' into feature/get-user-api-integration

README.md

@@ -28,7 +28,7 @@ This Project serves the RealdevSquad cross-platform-app. This project is built i
 - Goals site Tab
 - Goals site feature will have the TODO app where you can assign the task to the member of the RDS.
 
-Feel free to download our RDS app by clicking on ➡️ [RDS App](https://drive.google.com/file/d/1xWEl6qXmDFY7MhogKbW-UKNrMZVhELLo/view?usp=sharing)
+Feel free to download our RDS app by clicking on ➡️ [RDS App](https://drive.google.com/file/d/1Y7IVr7HvYU_IYekh0Glt7aYrFiS7z19X/view?usp=sharing)
 
 Note : Please delete the previous RDS app build if you have.
 
@@ -89,4 +89,4 @@ Git commands to commit your code:
 
 - `yarn react-native start` - to start Metro, the JavaScript bundler that ships with React Native.
 - Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
-- `yarn react-native run-android` - To start the emulator.
+- `yarn react-native run-android` - To start the emulator.

android/app/build.gradle

@@ -1,4 +1,6 @@
 apply plugin: "com.android.application"
+apply plugin: "kotlin-android"
+apply plugin: "kotlin-android-extensions"
 
 import com.android.build.OutputFile
 

android/build.gradle

@@ -3,17 +3,19 @@
 buildscript {
     ext {
         buildToolsVersion = "30.0.2"
-        minSdkVersion = 21
+        minSdkVersion = 23
         compileSdkVersion = 31
         targetSdkVersion = 31
         ndkVersion = "21.4.7075529"
+        kotlin_version = '1.7.20'
     }
     repositories {
         google()
         mavenCentral()
     }
     dependencies {
         classpath("com.android.tools.build:gradle:4.2.2")
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files
     }

babel.config.js

@@ -6,6 +6,7 @@ module.exports = {
       'react-native-reanimated/plugin',
       {
         relativeSourceLocation: true,
+        globals: ['__scanQRCodes'],
       },
     ],
   ],

package.json

@@ -10,7 +10,8 @@
     "lint": "eslint . --fix --ext .js,.jsx,.ts,.tsx",
     "format-check": "prettier --check ./src",
     "format-fix": "prettier --write ./src",
-    "precommit-check": "yarn run format-fix && yarn run lint && yarn run test"
+    "precommit-check": "yarn run format-fix && yarn run lint && yarn run test",
+    "build": "npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res; cd android ; ./gradlew assembleDebug"
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.15.16",
@@ -25,6 +26,8 @@
     "react": "17.0.2",
     "react-native": "0.67.0",
     "react-native-app-auth": "^6.4.2",
+    "react-native-asset": "^2.1.1",
+    "react-native-camera-kit": "^13.0.0",
     "react-native-date-picker": "^4.2.13",
     "react-native-datepicker": "^1.7.2",
     "react-native-device-info": "^10.8.0",

react-native.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  assets: ['./assets'],
+};

src/components/Modal/CustomModal.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Alert, Modal, StyleSheet, Text, Pressable, View } from 'react-native';
+const message = 'Press Done button once you verify yourself from My-site';
+
+const CustomModal = ({ modalVisible, setModalVisible, qrCodeLogin }) => {
+  console.log('mess', message);
+  return (
+    <Modal
+      animationType="slide"
+      transparent={true}
+      visible={modalVisible}
+      onRequestClose={() => {
+        Alert.alert('Modal has been closed.');
+        setModalVisible(!modalVisible);
+      }}
+    >
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.modalText}>{message}</Text>
+          <Pressable
+            style={[styles.button, styles.buttonClose]}
+            onPress={qrCodeLogin}
+          >
+            <Text style={styles.textStyle}>Done</Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#fff',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  button: {
+    borderRadius: 20,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonOpen: {}, // backgroundColor: '#F194FF',
+
+  buttonClose: {
+    backgroundColor: '#2196F3',
+  },
+  textStyle: {
+    color: 'white',
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+    color: 'black',
+  },
+});
+
+export default CustomModal;

src/screens/AuthScreen/AuthScreen.tsx

@@ -1,10 +1,17 @@
-import React, { useContext, useState } from 'react';
-import { Text, View, TouchableOpacity, Image, ScrollView } from 'react-native';
+import React, { useContext, useEffect, useState } from 'react';
 import DeviceInfo from 'react-native-device-info';
+import {
+  Text,
+  View,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  StyleSheet,
+  Alert,
+} from 'react-native';
 import Strings from '../../i18n/en';
 import { AuthViewStyle } from './styles';
 import { AuthScreenButton } from './Button';
-import { OtpModal } from './OtpModal';
 import { Toast } from 'react-native-toast-message/lib/src/Toast';
 import { AuthContext } from '../../context/AuthContext';
 import { getUserData } from './Util';
@@ -15,26 +22,32 @@ import Images from '../../constants/images/Image';
 import WebView from 'react-native-webview';
 import { urls } from '../../constants/appConstant/url';
 import AuthApis from '../../constants/apiConstant/AuthApi';
+import { CameraScreen } from 'react-native-camera-kit';
+import CustomModal from '../../components/Modal/CustomModal';
 
 const AuthScreen = () => {
   // TODO: will revamp github signIn feature
   const { setLoggedInUserData } = useContext(AuthContext);
   const [githubView, setGithubView] = useState<boolean>(false);
-  const [otpCode, setOtpCode] = useState<string>('');
-  const [otpModalVisible, setOtpModalVisible] = useState<boolean>(false);
-  const [addressbarURL, setAdressbarURL] = useState<String>('');
   const [loading, setLoading] = useState(false);
-  const [key, setKey] = useState(1);
+  const [cameraActive, setCameraActive] = useState(false);
+  const [scannedUserId, setScannedUserID] = useState('');
+  const [modalVisible, setModalVisible] = useState(false);
 
-  const closeModal = () => {
-    setOtpModalVisible(false);
-    setOtpCode('');
+  const activateCamera = async () => {
+    try {
+      // await Camera.requestCameraPermission(); // Request camera permission
+      setCameraActive(true); // Set cameraActive state to true
+    } catch (error) {
+      console.error('Error requesting camera permission:', error);
+    }
+  };
+
+  const handleQRCodeScanned = ({ nativeEvent }: any) => {
+    setScannedUserID(nativeEvent.codeStringValue);
   };
 
-  const openModal = () => setOtpModalVisible(true);
-  const setCode = (code: string) => setOtpCode(code);
   //TODO: add to constants
-  const maxLength = 4;
   const handleSignIn = () => {
     // NOTE: toast until sign in with Github is implemented
     Toast.show({
@@ -48,7 +61,6 @@ const AuthScreen = () => {
   const updateUserData = async (url: string) => {
     try {
       const res = await getUserData(url);
-      console.log('respponse', url, res);
       await storeData('userData', JSON.stringify(res));
       setLoggedInUserData({
         id: res?.id,
@@ -61,11 +73,48 @@ const AuthScreen = () => {
     }
   };
 
+  const qrCodeLogin = async () => {
+    const deviceId = await DeviceInfo.getUniqueId();
+
+    const url = `${AuthApis.QR_AUTH_API}?device_id=${deviceId}`;
+    try {
+      const userInfo = await fetch(url);
+      const userInfoJson = await userInfo.json();
+      if (userInfoJson.data.token) {
+        const userDetailsInfo = await fetch(
+          `https://api.realdevsquad.com/users/userId/${scannedUserId}`,
+        );
+        const userDetailsInfoJson = await userDetailsInfo.json();
+        await storeData('userData', JSON.stringify(userDetailsInfoJson.user));
+        const { picture, id, username, status } = userDetailsInfoJson.user;
+        setLoggedInUserData({
+          id: id,
+          name: username,
+          profileUrl: picture?.url,
+          status: status,
+        });
+      } else {
+        Toast.show({
+          type: 'error',
+          text1: 'Please authorize from my-site by giving confirmations',
+          position: 'bottom',
+          bottomOffset: 80,
+        });
+      }
+    } catch (err) {
+      Toast.show({
+        type: 'error',
+        text1: 'Something went wrong, please try again later',
+        position: 'bottom',
+        bottomOffset: 80,
+      });
+    }
+  };
+
   const getAuthStatus = async () => {
-    setLoading(true);
     const deviceInfo = await DeviceInfo.getDeviceName();
     const deviceId = await DeviceInfo.getUniqueId();
-
+    setLoading(true);
     try {
       const data = await fetch(AuthApis.QR_AUTH_API, {
         method: 'POST',
@@ -74,37 +123,50 @@ const AuthScreen = () => {
         },
         body: JSON.stringify({
           device_info: deviceInfo,
-          user_id: 'BE9a4sGXFLDwxZU3DSiq', //TODO: replace with scanner results
+          user_id: scannedUserId,
           device_id: deviceId,
         }),
       });
 
       if (data.ok) {
-        console.log('patch call successfull');
+        const dataJson = await data.json();
+        Alert.alert('Please Confirm', dataJson.message, [
+          {
+            text: 'Cancel',
+            onPress: () => setCameraActive(false),
+          },
+          {
+            text: 'OK',
+            onPress: () => {
+              setCameraActive(false);
+              setModalVisible(true);
+            },
+          }, // ok -> Modal (press done button once you verify yourself from mysite) -> Done > loader? -> get call implementation =?> userdata => autorize -> if fail ? toast msgs  ? homscreen
+        ]);
       } else {
+        await data.json();
         Toast.show({
           type: 'error',
-          text1: 'Somethin went wrong, please try again',
+          text1: 'Something went wrong, please try again',
           position: 'bottom',
           bottomOffset: 80,
         });
       }
     } catch (err) {
-      console.error(err);
       Toast.show({
         type: 'error',
-        text1: 'Somethin went wrong, please try again later',
+        text1: 'Something went wrong, please try again later',
         position: 'bottom',
         bottomOffset: 80,
       });
     }
     setLoading(false);
   };
 
-  // TODO: trigger on qr code scan
-  React.useEffect(() => {
+  useEffect(() => {
     getAuthStatus();
-  }, []);
+    /* eslint-disable */
+  }, [scannedUserId]);
 
   if (githubView) {
     return (
@@ -191,17 +253,28 @@ const AuthScreen = () => {
             </View>
           </TouchableOpacity>
         </View>
-        <AuthScreenButton text={Strings.SIGN_IN_WITH_WEB} onPress={openModal} />
+        <AuthScreenButton
+          text={Strings.SIGN_IN_WITH_WEB}
+          onPress={activateCamera}
+        />
       </View>
-      {otpModalVisible && (
-        <OtpModal
-          title={Strings.ENTER_4_DIGIT_OTP}
-          testId="otpModal"
-          visible={otpModalVisible}
-          code={otpCode}
-          maxLength={maxLength}
-          setCode={setCode}
-          closeModal={closeModal}
+
+      {cameraActive && (
+        <CameraScreen
+          style={StyleSheet.absoluteFill}
+          showFrame
+          scanBarcode={true}
+          onReadCode={handleQRCodeScanned}
+          frameColor={'white'}
+          laserColor={'white'}
+        />
+      )}
+
+      {modalVisible && (
+        <CustomModal
+          modalVisible={modalVisible}
+          setModalVisible={setModalVisible}
+          qrCodeLogin={qrCodeLogin}
         />
       )}
     </ScrollView>