src/containers/settings/ReleaseNotesWindow.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import { inject, observer } from 'mobx-react';
import { Component, type ReactPortal } from 'react';
import ReactDOM from 'react-dom';
import { Outlet } from 'react-router-dom';

import type { StoresProps } from '../../@types/ferdium-components.types';
import Layout from '../../components/settings/releaseNotes/ReleaseNotesLayout';
import ErrorBoundary from '../../components/util/ErrorBoundary';

interface IProps {}

@inject('stores', 'actions')
@observer
class SettingsContainer extends Component<IProps> {
  portalRoot: any;

  el: HTMLDivElement;

  constructor(props: StoresProps) {
    super(props);

    this.portalRoot = document.querySelector('#portalContainer');
    this.el = document.createElement('div');
  }

  componentDidMount(): void {
    this.portalRoot.append(this.el);
  }

  componentWillUnmount(): void {
    this.el.remove();
  }

  render(): ReactPortal {
    return ReactDOM.createPortal(
      <ErrorBoundary>
        <Layout>
          <Outlet />
        </Layout>
      </ErrorBoundary>,
      this.el,
    );
  }
}

export default SettingsContainer;