feat(vue): add httpRequestTimeout support

Author: mohdashraf010897

packages/vue/package.json

@@ -38,7 +38,7 @@
 		"@appbaseio/reactivecore": "9.14.40",
 		"@appbaseio/vue-emotion": "0.4.4",
 		"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
-		"appbase-js": "^5.2.0",
+		"appbase-js": "^5.3.3",
 		"compute-scroll-into-view": "^1.0.11",
 		"emotion": "9.2.12",
 		"gmap-vue": "^3.5.4",

packages/vue/src/components/ReactiveBase/index.jsx

@@ -54,6 +54,7 @@ const ReactiveBase = {
 		mongodb: types.mongodb,
 		endpoint: types.endpointConfig,
 		preferences: VueTypes.object,
+		httpRequestTimeout: VueTypes.number.def(30),
 	},
 	provide() {
 		return {
@@ -94,23 +95,26 @@ const ReactiveBase = {
 		mongodb() {
 			this.updateState(this.$props);
 		},
+		httpRequestTimeout() {
+			this.updateState(this.$props);
+		},
 	},
 	computed: {
 		getHeaders() {
 			const { enableAppbase, headers, appbaseConfig, mongodb, endpoint } = this.$props;
 			const { enableTelemetry } = appbaseConfig || {};
 			return {
-				...(enableAppbase
-					&& !mongodb && {
-					'X-Search-Client': X_SEARCH_CLIENT,
-					...(enableTelemetry === false && { 'X-Enable-Telemetry': false }),
-				}),
+				...(enableAppbase &&
+					!mongodb && {
+						'X-Search-Client': X_SEARCH_CLIENT,
+						...(enableTelemetry === false && { 'X-Enable-Telemetry': false }),
+					}),
 				...headers,
-				...(enableAppbase
-					&& endpoint
-					&& endpoint.headers && {
-					...endpoint.headers,
-				}),
+				...(enableAppbase &&
+					endpoint &&
+					endpoint.headers && {
+						...endpoint.headers,
+					}),
 			};
 		},
 	},
@@ -120,8 +124,8 @@ const ReactiveBase = {
 			this.key = `${this.state.key}-0`;
 		},
 		setStore(props) {
-			const credentials
-				= props.url && props.url.trim() !== '' && !props.credentials
+			const credentials =
+				props.url && props.url.trim() !== '' && !props.credentials
 					? null
 					: props.credentials;
 			let url = props.url && props.url.trim() !== '' ? props.url : '';
@@ -149,6 +153,7 @@ const ReactiveBase = {
 				analyticsConfig: props.appbaseConfig,
 				mongodb: props.mongodb,
 				endpoint: props.endpoint,
+				httpRequestTimeout: (props.httpRequestTimeout || 0) * 1000 || 30000,
 			};
 			let queryParams = '';
 
@@ -217,13 +222,13 @@ const ReactiveBase = {
 						/\/\/(.*?)\/.*/,
 						'//$1',
 					);
-					const headerCredentials
-						= this.$props.endpoint.headers && this.$props.endpoint.headers.Authorization;
-					analyticsInitConfig.credentials
-						= headerCredentials && headerCredentials.replace('Basic ', '');
+					const headerCredentials =
+						this.$props.endpoint.headers && this.$props.endpoint.headers.Authorization;
+					analyticsInitConfig.credentials =
+						headerCredentials && headerCredentials.replace('Basic ', '');
 					// Decode the credentials
-					analyticsInitConfig.credentials
-						= analyticsInitConfig.credentials && atob(analyticsInitConfig.credentials);
+					analyticsInitConfig.credentials =
+						analyticsInitConfig.credentials && atob(analyticsInitConfig.credentials);
 				}
 			} catch (e) {
 				console.error('Endpoint not set correctly for analytics');