openreplay/frontend/app/components/Dashboard/Widgets/common/widgetHOC.js

import React from 'react';
import { connect } from 'react-redux';
import cn from 'classnames';
import { CloseButton } from 'UI';
import { fetchWidget } from 'Duck/dashboard';
// import { updateAppearance } from 'Duck/user';
import { WIDGET_MAP } from 'Types/dashboard';
import Title from './Title';
import stl from './widgetHOC.module.css';

export default (
	widgetKey,
	panelProps = {},
	wrapped = true,
	allowedFilters = [],
) => BaseComponent => 
	@connect((state, props) => {
		const compare = props && props.compare;
		const key = compare ? '_' + widgetKey : widgetKey;

		return {
			loading: state.getIn([ 'dashboard', 'fetchWidget', key, 'loading' ]),
			data: state.getIn([ 'dashboard', key ]),
			comparing: state.getIn([ 'dashboard', 'comparing' ]),
			filtersSize: state.getIn([ 'dashboard', 'filters' ]).size,
			filters: state.getIn([ 'dashboard', compare ? 'filtersCompare' : 'filters' ]),
			period: state.getIn([ 'dashboard', compare ? 'periodCompare' : 'period' ]), //TODO: filters
			platform: state.getIn([ 'dashboard', 'platform' ]),
			// appearance: state.getIn([ 'user', 'account', 'appearance' ]),

			dataCompare: state.getIn([ 'dashboard', '_' + widgetKey ]), // only for overview
			loadingCompare: state.getIn([ 'dashboard', 'fetchWidget', '_' + widgetKey, 'loading' ]),
			filtersCompare: state.getIn([ 'dashboard', 'filtersCompare' ]),
			periodCompare: state.getIn([ 'dashboard', 'periodCompare' ]), //TODO: filters
		}
	}, { 
		fetchWidget,
		// updateAppearance,	
	})
	class WidgetWrapper extends React.PureComponent {
		constructor(props) {
			super(props);
			const params = panelProps.customParams ? panelProps.customParams(this.props.period.rangeName) : {};			
			if(props.testId) {
				params.testId = parseInt(props.testId);
			}
			params.compare = this.props.compare;
			const filters = allowedFilters.length > 0 ? props.filters.filter(f => allowedFilters.includes(f.key)) : props.filters;
			props.fetchWidget(widgetKey, props.period, props.platform, params, filters);
		}

		componentDidUpdate(prevProps) {
			if (prevProps.period !== this.props.period || 
					prevProps.platform !== this.props.platform || 
					prevProps.filters.size !== this.props.filters.size) {
				const params = panelProps.customParams ? panelProps.customParams(this.props.period.rangeName) : {};
				if(this.props.testId) {
					params.testId = parseInt(this.props.testId);
				}
				params.compare = this.props.compare;
				const filters = allowedFilters.length > 0 ? this.props.filters.filter(f => allowedFilters.includes(f.key)) : this.props.filters;
				this.props.fetchWidget(widgetKey, this.props.period, this.props.platform, params, filters);
			}

			// handling overview widgets
			if ((!prevProps.comparing || prevProps.periodCompare !== this.props.periodCompare || prevProps.filtersCompare.size !== this.props.filtersCompare.size) && 
				this.props.comparing && this.props.isOverview
			) {
				const params = panelProps.customParams ? panelProps.customParams(this.props.period.rangeName) : {};
				params.compare = true;
				const filtersCompare = allowedFilters.length > 0 ? this.props.filtersCompare.filter(f => allowedFilters.includes(f.key)) : this.props.filtersCompare;
				this.props.fetchWidget(widgetKey, this.props.periodCompare, this.props.platform, params, filtersCompare);
			}
		}

		handleRemove = () => {
			// const { appearance } = this.props;
			// this.props.updateAppearance(appearance.setIn([ 'dashboard', widgetKey ], false));
		}

		render() {
			const { comparing, compare } = this.props;

			return (
				wrapped ? 
				<div className={cn(stl.wrapper, { [stl.comparing] : comparing })}>
					<div
						className={ cn(stl.panel, "flex flex-col relative", {
							[ stl.fullwidth ]: panelProps.fullwidth,
							[ stl.fitContent ]: panelProps.fitContent,
							[ stl.minHeight ]: !panelProps.fitContent,
						}) }
					>
						<div className="flex items-center mb-2" >
							{comparing && <div className={cn(stl.circle, { 'bg-tealx' : !compare, 'bg-teal' : compare})} />}
							<Title title={ panelProps.name ? panelProps.name : WIDGET_MAP[ widgetKey ].name } />
							{ <CloseButton className={ cn(stl.closeButton, 'ml-auto') } onClick={ this.handleRemove } size="17" /> }
						</div>
						<div className="flex-1 flex flex-col">
							<BaseComponent { ...this.props } />
						</div>
					</div>
				</div>
				: 
				<BaseComponent  { ...this.props } />
			)
		}
	}