<commit_before>import { inject, observer } from 'mobx-react'
import React from 'react'

import { RootStore } from '../store'
import { Overrides } from '../typings'

class CustomComponent extends React.Component<CustomComponentProps, CustomComponentState> {
  state = {
    component: undefined
  }

  componentDidMount() {
    this.loadComponent()
  }

  componentDidUpdate(prevProps) {
    if (prevProps.overrides !== this.props.overrides) {
      this.loadComponent()
    }
  }

  componentDidCatch(error, info) {
    console.log(`Error in overridable component ${this.props.name}. Loading original component.`, error, info)
    this.setState({ component: this.props.original })
  }

  loadComponent() {
    this.setState({
      component: this.getOverridedComponent(this.props.name) || this.props.original
    })
  }

  getOverridedComponent = (componentName: string) => {
    const overrides = this.props.overrides

    if (overrides && overrides[componentName]) {
      const { module, component } = overrides[componentName]
      if (module && component) {
        return window.botpress[module][component]
      }
    }
  }

  render() {
    if (!this.state.component) {
      return null
    }

    const Component = this.state.component
    return <Component {...this.props} />
  }
}

export default inject(({ store }: { store: RootStore }) => ({
  store,
  overrides: store.config.overrides
}))(CustomComponent)

interface CustomComponentProps {
  name: string<commit_msg>fix override logic when not loaded<commit_after>import { inject, observer } from 'mobx-react'
import React from 'react'

import { RootStore } from '../store'
import { Overrides } from '../typings'

class CustomComponent extends React.Component<CustomComponentProps, CustomComponentState> {
  state = {
    component: undefined
  }

  componentDidMount() {
    this.loadComponent()
  }

  componentDidUpdate(prevProps) {
    if (prevProps.overrides !== this.props.overrides) {
      this.loadComponent()
    }
  }

  componentDidCatch(error, info) {
    console.log(`Error in overridable component ${this.props.name}. Loading original component.`, error, info)
    this.setState({ component: this.props.original })
  }

  loadComponent() {
    this.setState({
      component: this.getOverridedComponent(this.props.name) || this.props.original
    })
  }

  getOverridedComponent = (componentName: string) => {
    const overrides = this.props.overrides
    if (!overrides || !overrides[componentName]) {
      return
    }

    const { module, component } = overrides[componentName]
    if (module && component) {
      return window.botpress[module] && window.botpress[module][component]
    }
  }

  render() {
    if (!this.state.component) {
      return null
    }

    const Component = this.state.component
    return <Component {...this.props} />
  }
}

export default inject(({ store }: { store: RootStore }) => ({
  store,
  overrides: store.config.overrides
}))(CustomComponent)

interface CustomComponentProps {
  name: string
{'fraction_non_alphanumeric': 0.1267792121813969, 'fraction_numerical': 0.0, 'mean_word_length': 3.4441176470588237, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6962147', 'n_tokens_mistral': 890, 'n_tokens_neox': 890, 'n_words': 196}