feat(vue): add httpRequestTimeout prop to reactivebase

Author: mohdashraf010897

packages/vue/package.json

@@ -39,7 +39,7 @@
 		"@appbaseio/vue-emotion": "0.6.0-alpha.6",
 		"@emotion/css": "^11.10.5",
 		"@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": "11.0.0",
 		"hotkeys-js": "^3.8.7",

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

@@ -48,6 +48,7 @@ const ReactiveBase = {
 		mongodb: types.mongodb,
 		endpoint: types.endpointConfig,
 		preferences: VueTypes.object,
+		httpRequestTimeout: types.number,
 	},
 	provide() {
 		let createCacheFn = createCache;
@@ -94,6 +95,9 @@ const ReactiveBase = {
 		mongodb() {
 			this.updateState(this.$props);
 		},
+		httpRequestTimeout() {
+			this.updateState(this.$props);
+		},
 	},
 	computed: {
 		getHeaders() {
@@ -105,10 +109,10 @@ const ReactiveBase = {
 					...(enableTelemetry === false && { 'X-Enable-Telemetry': false }),
 				}),
 				...headers,
-				...(endpoint
-					&& endpoint.headers && {
-					...endpoint.headers,
-				}),
+				...(endpoint &&
+					endpoint.headers && {
+						...endpoint.headers,
+					}),
 			};
 		},
 	},
@@ -118,8 +122,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 : '';
@@ -147,6 +151,7 @@ const ReactiveBase = {
 				analyticsConfig: props.reactivesearchAPIConfig,
 				mongodb: props.mongodb,
 				endpoint: props.endpoint,
+				httpRequestTimeout: props.httpRequestTimeout || 30000,
 			};
 			let queryParams = '';
 
@@ -203,8 +208,8 @@ const ReactiveBase = {
 				// When endpoint prop is used index is not defined, so we use _default
 				index: appbaseRef.app || '_default',
 				globalCustomEvents:
-					this.$props.reactivesearchAPIConfig
-					&& this.$props.reactivesearchAPIConfig.customEvents,
+					this.$props.reactivesearchAPIConfig &&
+					this.$props.reactivesearchAPIConfig.customEvents,
 			};
 
 			try {
@@ -214,13 +219,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');