summaryrefslogtreecommitdiffstats
path: root/devtools/client/application/src/components/manifest/ManifestPage.js
blob: 60caea591e48bfc370a1d6236dc109243fb8e3b5 (plain)
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

"use strict";

const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
const {
  createFactory,
  PureComponent,
} = require("resource://devtools/client/shared/vendor/react.js");
const {
  section,
} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");

const {
  connect,
} = require("resource://devtools/client/shared/vendor/react-redux.js");

const Types = require("resource://devtools/client/application/src/types/index.js");

const ManifestLoader = createFactory(
  require("resource://devtools/client/application/src/components/manifest/ManifestLoader.js")
);
const Manifest = createFactory(
  require("resource://devtools/client/application/src/components/manifest/Manifest.js")
);
const ManifestEmpty = createFactory(
  require("resource://devtools/client/application/src/components/manifest/ManifestEmpty.js")
);

class ManifestPage extends PureComponent {
  static get propTypes() {
    return {
      // these props are automatically injected via connect
      hasLoadingFailed: PropTypes.bool.isRequired,
      isManifestLoading: PropTypes.bool.isRequired,
      manifest: PropTypes.shape(Types.manifest),
    };
  }

  get shouldShowLoader() {
    const { isManifestLoading, hasLoadingFailed } = this.props;
    const mustLoadManifest = typeof this.props.manifest === "undefined";
    return isManifestLoading || mustLoadManifest || hasLoadingFailed;
  }

  renderManifest() {
    const { manifest } = this.props;
    return manifest ? Manifest({ ...manifest }) : ManifestEmpty({});
  }

  render() {
    const { manifest } = this.props;

    return section(
      {
        className: `app-page js-manifest-page ${
          !manifest ? "app-page--empty" : ""
        }`,
      },
      this.shouldShowLoader ? ManifestLoader({}) : this.renderManifest()
    );
  }
}

function mapStateToProps(state) {
  return {
    hasLoadingFailed: !!state.manifest.errorMessage,
    isManifestLoading: state.manifest.isLoading,
    manifest: state.manifest.manifest,
  };
}

// Exports
module.exports = connect(mapStateToProps)(ManifestPage);