SidebarButtonContainer.jsx

// @flow
import * as React from 'react';
import Mixpanel from 'utils/mixpanel';
import * as Sentry from 'utils/sentry';
import client from '../apolloClient';
import { MIXPANEL_TRACKS } from '../constants';

import { SidebarButton } from '../components/Inner/SidebarButton';
import { actionsIntoSlugs } from '../../InAppHelpSidebar/helpers/actionsIntoSlugs';
import type { Props as Slugs } from '../../InAppHelpSidebar/helpers/actionsIntoSlugs';
import { GET_FEATURE_STATE, TOGGLE_FEATURE_STATE } from '../graphql';

type State = {
  showHelpSidebar: boolean,
  slug: Object | string,
  loading: boolean,
  error: boolean,
};

type Props = {
  isHelpSidebarV2: boolean,
  locale: string,
  match: {
    params: Slugs,
  },
  locale: string,
  slug: string,
  featureState?: {
    state: boolean,
  },
  toggleFeatureStatus: (variables: Object) => void,
};

type QueryResponse = {
  data?: {
    userFeatureToggle: {
      [key: string]: {
        state: boolean,
      },
    },
  },
};

export class SidebarButtonContainer extends React.PureComponent<Props, State> {
  constructor(props: Props): void {
    super(props);

    window.openHelpSidebar = this.openHelpSidebar;
    window.closeHelpSidebar = this.closeHelpSidebar;
    window.reloadHelpSidebar = this.reloadHelpSidebar;
  }

  state = {
    showHelpSidebar: false,
    slug: actionsIntoSlugs(this.props.match.params),
    loading: false,
    error: false,
  };

  componentDidMount() {
    this.queryFeatureState();
  }

  elBody = ((document.body: any): HTMLBodyElement);

  queryFeatureState = async (): Promise<any> => {
    try {
      const { data }: { data: QueryResponse } = await client().query({
        query: GET_FEATURE_STATE,
        variables: { feature: this.state.slug },
      });

      this.showHelpSidebar(data.userFeatureToggle);
    } catch (err) {
      Sentry.captureException(err);
    }
  };

  showHelpSidebar = (feature?: any): void => {
    const shouldShowHelpSidebar =
      feature === null || feature === undefined ? true : !!feature.state;

    this.setState(
      {
        showHelpSidebar: shouldShowHelpSidebar,
      },
      () => this.state.showHelpSidebar && this.elBody.classList.toggle('sidebar--open')
    );
  };

  persistFeatureState = async (): Promise<any> => {
    try {
      await client().mutate({
        mutation: TOGGLE_FEATURE_STATE,
        variables: { feature: this.state.slug },
      });
    } catch (err) {
      Sentry.captureException(err);
    }
  };

  trackEvents = (): void => {
    const { slug, showHelpSidebar } = this.state;
    const event = showHelpSidebar
      ? MIXPANEL_TRACKS.SIDEBAR_OPEN_CLICK
      : MIXPANEL_TRACKS.SIDEBAR_CLOSE_CLICK;

    Mixpanel.track(event, {
      sidebar_page: slug,
    });
  };

  openHelpSidebar = (slug: string): void => {
    this.setState(
      {
        showHelpSidebar: true,
        slug,
      },
      () => {
        this.elBody.classList.add('sidebar--open');
      }
    );
  };

  closeHelpSidebar = (slug: string = actionsIntoSlugs(this.props.match.params)): void => {
    this.setState(
      {
        showHelpSidebar: false,
        slug,
      },
      () => {
        this.elBody.classList.remove('sidebar--open');
      }
    );
  };

  reloadHelpSidebar = (slug: string = actionsIntoSlugs(this.props.match.params)): void => {
    this.setState(
      {
        slug,
      }
    );
  };

  toggleSidebar = (): void => {
    this.setState(
      prevState => ({
        showHelpSidebar: !prevState.showHelpSidebar,
        slug: actionsIntoSlugs(this.props.match.params),
      }),
      () => {
        this.elBody.classList.toggle('sidebar--open');
        this.trackEvents();
      }
    );
    this.persistFeatureState();
  };

  render(): React.Node {
    const { loading, error } = this.state;

    if (loading) return '...';

    if (error) return '';

    return (
      <SidebarButton
        {...this.props}
        showHelpSidebar={this.state.showHelpSidebar}
        slug={this.state.slug}
        toggleSidebar={this.toggleSidebar}
      />
    );
  }
}