add: Connected to server

.gitignore

@@ -57,3 +57,6 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+# Environment Variables
+.env

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+	presets: ["module:metro-react-native-babel-preset"],
+	plugins: [["module:react-native-dotenv"]],
 };

components/ChatHeader/ChatHeader.js

@@ -33,7 +33,7 @@ const ChatHeader = ({ navigation }) => {
 					icon="video-wireless-outline"
 					size={28}
 					color="white"
-					onPress={() => console.log("Pressed")}
+					onPress={() => navigation.navigate("Video Call")}
 					style={styles.actionIcon}
 				/>
 				<IconButton

package.json

@@ -14,9 +14,11 @@
 		"@react-navigation/bottom-tabs": "^5.11.11",
 		"@react-navigation/native": "^5.9.4",
 		"@react-navigation/stack": "^5.14.5",
+		"axios": "^0.21.1",
 		"react": "17.0.1",
 		"react-native": "0.64.2",
 		"react-native-agora": "^3.4.2",
+		"react-native-dotenv": "^3.0.0",
 		"react-native-gesture-handler": "^1.10.3",
 		"react-native-paper": "^4.9.2",
 		"react-native-popup-menu": "^0.15.11",

screens/VideoCall/VideoCall.js

@@ -8,7 +8,9 @@ import RtcEngine, {
 	RtcRemoteView,
 	VideoRenderMode,
 } from "react-native-agora";
-import { FAB } from "react-native-paper";
+import { ActivityIndicator, FAB } from "react-native-paper";
+import { BACKEND_URL } from "@env";
+import axios from "axios";
 
 const VideoCall = ({ navigation }) => {
 	/**
@@ -19,9 +21,7 @@ const VideoCall = ({ navigation }) => {
 		"9d33f38e53854576820ce55fa91c7cf8",
 	);
 	const [channelName, setChannelName] = useState("SkypeClone Sarthak");
-	const [token, setToken] = useState(
-		"006bc353855fafe40108ad901b667e95d12IAB0RPnJILWcFnOPbBs+OUfOecWL4ip0mRSwK4+euhh/7R8E5EsAAAAAEABsKo0tBZroYAEAAQAFmuhg",
-	);
+	const [token, setToken] = useState("");
 	const [joinSucceeded, setJoinSuccess] = useState(false);
 	const [peerIds, setPeerIds] = useState([]);
 	const [engineObj, setEngineObj] = useState();
@@ -31,6 +31,22 @@ const VideoCall = ({ navigation }) => {
 
 	let engine;
 
+	const getToken = async () => {
+		const url = `${BACKEND_URL}/generateToken`;
+		const data = {
+			appId,
+			appCertificate,
+			channelName,
+		};
+
+		try {
+			const res = await axios.post(url, data);
+			return res.data;
+		} catch (error) {
+			console.log(error);
+		}
+	};
+
 	const setup = async () => {
 		// const token = generateToken(appId, appCertificate, channelName);
 		// setToken(token);
@@ -57,16 +73,19 @@ const VideoCall = ({ navigation }) => {
 		});
 
 		engine.addListener("JoinChannelSuccess", (channel, uid, elapsed) => {
+			console.log("Joined");
 			setJoinSuccess(true);
 		});
 
 		engine.addListener("Error", err => console.log(err));
 
-		await engine.joinChannel(token, channelName, null, 0);
+		const { token, uid } = await getToken();
+		console.log(token, uid);
+		await engine.joinChannel(token, channelName, null, uid);
 	};
 
 	const leaveChannel = async () => {
-		await engine.leaveChannel();
+		if (engine) await engine.leaveChannel();
 		console.log("Left");
 	};
 
@@ -92,8 +111,12 @@ const VideoCall = ({ navigation }) => {
 
 	if (!joinSucceeded) {
 		return (
-			<View>
-				<Text>Joining...</Text>
+			<View style={[styles.videoCallContainer, styles.center]}>
+				<ActivityIndicator
+					animating={true}
+					color="#0070db"
+					size="large"
+				/>
 			</View>
 		);
 	}
@@ -144,6 +167,10 @@ const VideoCall = ({ navigation }) => {
 export default VideoCall;
 
 const styles = StyleSheet.create({
+	center: {
+		justifyContent: "center",
+		alignItems: "center",
+	},
 	localView: {
 		flex: 1,
 		// zIndex: 100,

yarn.lock

@@ -1718,6 +1718,13 @@
   "resolved" "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz"
   "version" "2.1.2"
 
+"axios@^0.21.1":
+  "integrity" "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA=="
+  "resolved" "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz"
+  "version" "0.21.1"
+  dependencies:
+    "follow-redirects" "^1.10.0"
+
 "babel-core@^7.0.0-bridge.0":
   "integrity" "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg=="
   "resolved" "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz"
@@ -2554,6 +2561,11 @@
   dependencies:
     "webidl-conversions" "^5.0.0"
 
+"dotenv@^10.0.0":
+  "integrity" "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q=="
+  "resolved" "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz"
+  "version" "10.0.0"
+
 "ee-first@1.1.1":
   "integrity" "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
   "resolved" "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
@@ -3141,6 +3153,11 @@
   "resolved" "https://registry.npmjs.org/flow-parser/-/flow-parser-0.154.0.tgz"
   "version" "0.154.0"
 
+"follow-redirects@^1.10.0":
+  "integrity" "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
+  "resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz"
+  "version" "1.14.1"
+
 "for-in@^1.0.2":
   "integrity" "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
   "resolved" "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"
@@ -5724,6 +5741,13 @@
     "jscodeshift" "^0.11.0"
     "nullthrows" "^1.1.1"
 
+"react-native-dotenv@^3.0.0":
+  "integrity" "sha512-qVw1Vjmg5HMHf8FK+9ta5NdQKcBi1PBnaqumBSYK+8TTbXtxhr8TEod2hLvEVCh4g8V5prjsk4yP4M3cy7Q1Rg=="
+  "resolved" "https://registry.npmjs.org/react-native-dotenv/-/react-native-dotenv-3.0.0.tgz"
+  "version" "3.0.0"
+  dependencies:
+    "dotenv" "^10.0.0"
+
 "react-native-gesture-handler@*", "react-native-gesture-handler@^1.10.3", "react-native-gesture-handler@>= 1.0.0":
   "integrity" "sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw=="
   "resolved" "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz"