Merge pull request #2230 from appbaseio/http-request-timeout

feat(web-vue): add request timeout prop

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: VueTypes.number.def(30),
 	},
 	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 || 0) * 1000 || 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');

packages/web/package.json

@@ -42,7 +42,7 @@
 		"@appbaseio/rheostat": "^1.0.0-alpha.15",
 		"@emotion/core": "^10.0.28",
 		"@emotion/styled": "^10.0.27",
-		"appbase-js": "^5.2.0",
+		"appbase-js": "^5.3.3",
 		"cross-env": "^5.2.0",
 		"dayjs": "^1.11.7",
 		"downshift": "^1.31.2",

packages/web/src/components/basic/ReactiveBase.js

@@ -53,7 +53,7 @@ class ReactiveBase extends Component {
 			],
 			() => {
 				this.setStore(this.props);
-				this.setState(state => ({
+				this.setState((state) => ({
 					key: `${state.key}-0`,
 				}));
 			},
@@ -78,28 +78,26 @@ class ReactiveBase extends Component {
 	}
 
 	get headers() {
-		const {
-			headers, reactivesearchAPIConfig, mongodb, endpoint,
-		} = this.props;
+		const { headers, reactivesearchAPIConfig, mongodb, endpoint } = this.props;
 		const { enableTelemetry } = reactivesearchAPIConfig || {};
 		return {
 			...(!mongodb && {
 				'X-Search-Client': X_SEARCH_CLIENT,
 				...(enableTelemetry === false && { 'X-Enable-Telemetry': false }),
 			}),
 			...headers,
-			...(endpoint
-				&& endpoint.headers && {
-				...endpoint.headers,
-			}),
+			...(endpoint &&
+				endpoint.headers && {
+					...endpoint.headers,
+				}),
 		};
 	}
 
 	setStore = (props) => {
 		this.type = props.type ? props.type : '*';
 
-		const credentials
-			= props.url && props.url.trim() !== '' && !props.credentials ? null : props.credentials;
+		const credentials =
+			props.url && props.url.trim() !== '' && !props.credentials ? null : props.credentials;
 
 		let url = props.url && props.url.trim() !== '' ? props.url : '';
 		if (props.endpoint instanceof Object) {
@@ -125,6 +123,7 @@ class ReactiveBase extends Component {
 			transformResponse: props.transformResponse,
 			mongodb: props.mongodb,
 			...(props.endpoint instanceof Object && { endpoint: props.endpoint }),
+			httpRequestTimeout: props.httpRequestTimeout * 1000,
 		};
 
 		let queryParams = '';
@@ -184,13 +183,13 @@ class ReactiveBase extends Component {
 			if (this.props.endpoint && this.props.endpoint.url) {
 				// Remove parts between '//' and first '/' in the url
 				analyticsInitConfig.url = this.props.endpoint.url.replace(/\/\/(.*?)\/.*/, '//$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');
@@ -223,9 +222,9 @@ class ReactiveBase extends Component {
 
 		// server side rendered app to collect context
 		if (
-			typeof window === 'undefined'
-			&& props.contextCollector
-			&& !this.calledContextCollector
+			typeof window === 'undefined' &&
+			props.contextCollector &&
+			!this.calledContextCollector
 		) {
 			this.calledContextCollector = true;
 			const res = props.contextCollector({
@@ -271,6 +270,7 @@ ReactiveBase.defaultProps = {
 	graphQLUrl: '',
 	as: 'div',
 	endpoint: null,
+	httpRequestTimeout: 30,
 };
 
 ReactiveBase.propTypes = {
@@ -301,6 +301,7 @@ ReactiveBase.propTypes = {
 	preferences: types.preferences,
 	endpoint: types.endpoint,
 	contextCollector: types.func,
+	httpRequestTimeout: types.number,
 };
 
 export default ReactiveBase;