@finsemble/finsemble-ui 1.0.0-beta-1

package/react/componentTemplateGenerator.js

@@ -0,0 +1,150 @@
+"use strict";
+const fs = require("fs");
+const path = require("path");
+const args = process.argv.slice(2);
+let file = "";
+let name = "MyComponent";
+// Stupid simple args parser
+for (let i = 0; i < args.length; i++) {
+    switch (args[i]) {
+        case "--file": {
+            file = args[++i];
+            break;
+        }
+        case "--name": {
+            name = args[++i];
+            break;
+        }
+        default: {
+            console.log(`Unknown flag: ${args[i]}`);
+        }
+    }
+}
+if (file === "") {
+    console.log("Error: no provided file");
+    return;
+}
+const prepRelativeLink = (from, to) => path
+    .relative(from, to)
+    .replace(/\\/g, "/") // swap the slashes
+    .replace("../", ""); // path.relative adds an extra "../" for some reason, so remove it
+const base_path = path.join("src", "components", file);
+const component_file = `${base_path}.tsx`;
+const story_file = `${base_path}.stories.tsx`;
+const test_file = `${base_path}.spec.tsx`;
+const parsed_component_file = path.parse(component_file);
+const { dir } = parsed_component_file;
+if (!fs.existsSync(dir)) {
+    console.log(`Target directory, ${path.relative(".", dir)}, does not exist`);
+    return;
+}
+const component_template = `
+import React from "react";
+
+export interface ${name}Props {
+    example: string;
+    onClick: () => void;
+};
+
+export const ${name}: React.FunctionComponent<${name}Props> = (props: ${name}Props) => {
+    // Do things
+    return (
+        <div>
+            <button onClick={props.onClick}>{props.example}</button>
+        </div>
+    );
+};
+`;
+const story_template = `
+import React from "react";
+import { ${name}, ${name}Props } from "./${parsed_component_file.name}";
+import { Story } from "@storybook/react/types-6-0";
+import { action } from "@storybook/addon-actions";
+import "${prepRelativeLink(story_file, "./src/assets/css/finsemble.css")}";
+
+export default {
+    title: "${name}",
+    component: ${name}
+};
+
+const Template: Story<${name}Props> = (args: ${name}Props) => <${name} {...args} />;
+
+export const BasicStory = Template.bind({});
+BasicStory.args = {
+    example: "My Example",
+    onClick: action("Clicked")
+};
+`;
+const test_template = `
+import * as React from "react";
+import { mount } from "enzyme";
+import { describe, it, afterEach } from "mocha";
+import { expect } from "chai";
+import { ${name}Props } from "./${path.parse(component_file).name}";
+import { BasicStory } from "./${path.parse(component_file).name}.stories";
+
+// For running accessibility scans
+import { accessibilityAssessor } from "${prepRelativeLink(test_file, "./src/components/sdd/tests/a11y_helper")}";
+
+// For testing user interactions (like click events):
+import sinon from "sinon";
+// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)
+import addons, { mockChannel } from "@storybook/addons";
+addons.setChannel(mockChannel());
+
+describe("<${name}/>", () => {
+    // Used to clear after each interactive test using sinon
+    afterEach(() => {
+        sinon.restore();
+    });
+
+    // Example basic test
+    it("should display text", () => {
+        const wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);
+
+        expect(wrapper.find("button").exists(), "The button exists").to.be.true;
+        expect(wrapper.find("button").text(), "The button's text").to.equal("My Example");
+    });
+
+    // Example interactive test
+    it("should call function when clicked", () => {
+		const buttonSpy = sinon.spy(BasicStory.args as ${name}Props, "onClick");
+		const wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);
+
+        wrapper.find("button").simulate("click");
+        expect(buttonSpy.calledOnce).to.be.true;
+    });
+
+	// Example accessibility scan
+	it("should pass accessibility scans", async () => {
+		const wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);
+
+		expect(await accessibilityAssessor(wrapper)).to.be.true;
+	});
+});
+`;
+fs.writeFile(component_file, component_template, (err) => {
+    if (err) {
+        console.log(`Error writing to file path ${component_file}`, err);
+        return;
+    }
+    console.log(`Component added at ${path.relative(".", component_file)}`);
+});
+fs.writeFile(story_file, story_template, (err) => {
+    if (err) {
+        console.log(`Error writing to file path ${story_file}`, err);
+        return;
+    }
+    console.log(`Story added at path "${path.relative(".", story_file)}".
+To view it, run: yarn storybook`);
+});
+fs.writeFile(test_file, test_template, (err) => {
+    if (err) {
+        console.log(`Error writing to file path ${test_file}`, err);
+        return;
+    }
+    console.log(`Tests added at "${path.relative(".", test_file)}".
+To run this test, run: yarn test-storybook -g ${name}
+To run all tests, run: yarn test`);
+});
+//# sourceMappingURL=componentTemplateGenerator.js.map

package/react/componentTemplateGenerator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentTemplateGenerator.js","sourceRoot":"","sources":["../src/componentTemplateGenerator.js"],"names":[],"mappings":"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","sourcesContent":["const fs = require(\"fs\");\nconst path = require(\"path\");\n\nconst args = process.argv.slice(2);\nlet file = \"\";\nlet name = \"MyComponent\";\n\n// Stupid simple args parser\nfor (let i = 0; i < args.length; i++) {\n\tswitch (args[i]) {\n\t\tcase \"--file\": {\n\t\t\tfile = args[++i];\n\t\t\tbreak;\n\t\t}\n\t\tcase \"--name\": {\n\t\t\tname = args[++i];\n\t\t\tbreak;\n\t\t}\n\t\tdefault: {\n\t\t\tconsole.log(`Unknown flag: ${args[i]}`);\n\t\t}\n\t}\n}\n\nif (file === \"\") {\n\tconsole.log(\"Error: no provided file\");\n\treturn;\n}\n\nconst prepRelativeLink = (from, to) =>\n\tpath\n\t\t.relative(from, to)\n\t\t.replace(/\\\\/g, \"/\") // swap the slashes\n\t\t.replace(\"../\", \"\"); // path.relative adds an extra \"../\" for some reason, so remove it\nconst base_path = path.join(\"src\", \"components\", file);\nconst component_file = `${base_path}.tsx`;\nconst story_file = `${base_path}.stories.tsx`;\nconst test_file = `${base_path}.spec.tsx`;\n\nconst parsed_component_file = path.parse(component_file);\nconst { dir } = parsed_component_file;\nif (!fs.existsSync(dir)) {\n\tconsole.log(`Target directory, ${path.relative(\".\", dir)}, does not exist`);\n\treturn;\n}\n\nconst component_template = `\nimport React from \"react\";\n\nexport interface ${name}Props {\n    example: string;\n    onClick: () => void;\n};\n\nexport const ${name}: React.FunctionComponent<${name}Props> = (props: ${name}Props) => {\n    // Do things\n    return (\n        <div>\n            <button onClick={props.onClick}>{props.example}</button>\n        </div>\n    );\n};\n`;\n\nconst story_template = `\nimport React from \"react\";\nimport { ${name}, ${name}Props } from \"./${parsed_component_file.name}\";\nimport { Story } from \"@storybook/react/types-6-0\";\nimport { action } from \"@storybook/addon-actions\";\nimport \"${prepRelativeLink(story_file, \"./src/assets/css/finsemble.css\")}\";\n\nexport default {\n    title: \"${name}\",\n    component: ${name}\n};\n\nconst Template: Story<${name}Props> = (args: ${name}Props) => <${name} {...args} />;\n\nexport const BasicStory = Template.bind({});\nBasicStory.args = {\n    example: \"My Example\",\n    onClick: action(\"Clicked\")\n};\n`;\n\nconst test_template = `\nimport * as React from \"react\";\nimport { mount } from \"enzyme\";\nimport { describe, it, afterEach } from \"mocha\";\nimport { expect } from \"chai\";\nimport { ${name}Props } from \"./${path.parse(component_file).name}\";\nimport { BasicStory } from \"./${path.parse(component_file).name}.stories\";\n\n// For running accessibility scans\nimport { accessibilityAssessor } from \"${prepRelativeLink(test_file, \"./src/components/sdd/tests/a11y_helper\")}\";\n\n// For testing user interactions (like click events):\nimport sinon from \"sinon\";\n// Necessary to allow sinon to work with mocked actions (which are shown in the Actions panel in Storybook)\nimport addons, { mockChannel } from \"@storybook/addons\";\naddons.setChannel(mockChannel());\n\ndescribe(\"<${name}/>\", () => {\n    // Used to clear after each interactive test using sinon\n    afterEach(() => {\n        sinon.restore();\n    });\n\n    // Example basic test\n    it(\"should display text\", () => {\n        const wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n        expect(wrapper.find(\"button\").exists(), \"The button exists\").to.be.true;\n        expect(wrapper.find(\"button\").text(), \"The button's text\").to.equal(\"My Example\");\n    });\n\n    // Example interactive test\n    it(\"should call function when clicked\", () => {\n\t\tconst buttonSpy = sinon.spy(BasicStory.args as ${name}Props, \"onClick\");\n\t\tconst wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n        wrapper.find(\"button\").simulate(\"click\");\n        expect(buttonSpy.calledOnce).to.be.true;\n    });\n\n\t// Example accessibility scan\n\tit(\"should pass accessibility scans\", async () => {\n\t\tconst wrapper = mount(<BasicStory {...(BasicStory.args as ${name}Props)} />);\n\n\t\texpect(await accessibilityAssessor(wrapper)).to.be.true;\n\t});\n});\n`;\n\nfs.writeFile(component_file, component_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${component_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Component added at ${path.relative(\".\", component_file)}`);\n});\nfs.writeFile(story_file, story_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${story_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Story added at path \"${path.relative(\".\", story_file)}\".\nTo view it, run: yarn storybook`);\n});\nfs.writeFile(test_file, test_template, (err) => {\n\tif (err) {\n\t\tconsole.log(`Error writing to file path ${test_file}`, err);\n\t\treturn;\n\t}\n\tconsole.log(`Tests added at \"${path.relative(\".\", test_file)}\".\nTo run this test, run: yarn test-storybook -g ${name}\nTo run all tests, run: yarn test`);\n});\n"]}

package/react/components/FinsembleProvider.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { store, createStore } from "../store";
+export { createStore };
+/**
+ * The <FinsembleProvider> must be an ancestor of any Finsemble React UI components or hooks.
+ * It manages FSBL initialization (ensuring that all components and hooks are operating with a properly initialized API.)
+ * It also constructs the UI API's redux store and makes it available through a Context Provider for all descendent components and hooks.
+ *
+ * The <FinsembleProvider> will render its children.
+ */
+export declare type FinsembleProviderProps = {
+    store?: typeof store;
+};
+export declare const FinsembleProvider: React.FunctionComponent<FinsembleProviderProps>;

package/react/components/FinsembleProvider.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { store, createStore } from "../store";
+import { Provider } from "react-redux";
+import { useState, useEffect } from "react";
+//import { common } from "@finsemble/finsemble-api";
+//let { Globals } = common;
+export { createStore };
+export const FinsembleProvider = (props) => {
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        if (ready)
+            return;
+        const release = () => {
+            setReady(true);
+        };
+        window.FSBL && (FSBL === null || FSBL === void 0 ? void 0 : FSBL.addEventListener)
+            ? FSBL.addEventListener("onReady", release)
+            : window.addEventListener("FSBLReady", release);
+    }, [ready]);
+    return ready ? React.createElement(Provider, { store: props.store || store }, props.children) : null;
+};
+//# sourceMappingURL=FinsembleProvider.js.map

package/react/components/FinsembleProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FinsembleProvider.js","sourceRoot":"","sources":["../../src/components/FinsembleProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,oDAAoD;AAEpD,2BAA2B;AAE3B,OAAO,EAAE,WAAW,EAAE,CAAC;AAcvB,MAAM,CAAC,MAAM,iBAAiB,GAAoD,CAAC,KAAK,EAAE,EAAE;IAC3F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,KAAK;YAAE,OAAO;QAClB,MAAM,OAAO,GAAG,GAAG,EAAE;YACpB,QAAQ,CAAC,IAAI,CAAC,CAAC;QAChB,CAAC,CAAC;QACF,MAAM,CAAC,IAAI,KAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAA;YACpC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC;YAC3C,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,KAAK,CAAC,CAAC,CAAC,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,KAAK,IAAG,KAAK,CAAC,QAAQ,CAAY,CAAC,CAAC,CAAC,IAAI,CAAC;AAC1F,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\nimport { store, createStore } from \"../store\";\nimport { Provider } from \"react-redux\";\nimport { useState, useEffect } from \"react\";\n//import { common } from \"@finsemble/finsemble-api\";\n\n//let { Globals } = common;\n\nexport { createStore };\n\n/**\n * The <FinsembleProvider> must be an ancestor of any Finsemble React UI components or hooks.\n * It manages FSBL initialization (ensuring that all components and hooks are operating with a properly initialized API.)\n * It also constructs the UI API's redux store and makes it available through a Context Provider for all descendent components and hooks.\n *\n * The <FinsembleProvider> will render its children.\n */\n\nexport type FinsembleProviderProps = {\n\tstore?: typeof store;\n};\n\nexport const FinsembleProvider: React.FunctionComponent<FinsembleProviderProps> = (props) => {\n\tconst [ready, setReady] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (ready) return;\n\t\tconst release = () => {\n\t\t\tsetReady(true);\n\t\t};\n\t\twindow.FSBL && FSBL?.addEventListener\n\t\t\t? FSBL.addEventListener(\"onReady\", release)\n\t\t\t: window.addEventListener(\"FSBLReady\", release);\n\t}, [ready]);\n\n\treturn ready ? <Provider store={props.store || store}>{props.children}</Provider> : null;\n};\n"]}

package/react/components/appCatalog/AppCatalog.d.ts

@@ -0,0 +1,10 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+/// <reference types="react" />
+/**
+ * A UI component that stores all the applications and allows the end user to add, remove, browse, or launch an application
+ * from the app catalog window.
+ */
+export declare const AppCatalog: () => JSX.Element;

package/react/components/appCatalog/AppCatalog.js

@@ -0,0 +1,25 @@
+/*!
+ * Copyright 2017 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+import React, { useState, useEffect } from "react";
+import { createStore } from "./stores/appStore";
+import { AppCatalogComponent } from "./AppCatalogComponent";
+import storeActions from "./stores/storeActions";
+/**
+ * A UI component that stores all the applications and allows the end user to add, remove, browse, or launch an application
+ * from the app catalog window.
+ */
+export const AppCatalog = () => {
+    const [isReady, setIsReady] = useState(false);
+    useEffect(() => {
+        createStore(() => {
+            storeActions.initialize(() => {
+                setIsReady(true);
+            });
+        });
+        return () => { };
+    });
+    return React.createElement(React.Fragment, null, isReady && React.createElement(AppCatalogComponent, null));
+};
+//# sourceMappingURL=AppCatalog.js.map

package/react/components/appCatalog/AppCatalog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppCatalog.js","sourceRoot":"","sources":["../../../src/components/appCatalog/AppCatalog.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,YAAY,MAAM,uBAAuB,CAAC;AAEjD;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,SAAS,CAAC,GAAG,EAAE;QACd,WAAW,CAAC,GAAG,EAAE;YAChB,YAAY,CAAC,UAAU,CAAC,GAAG,EAAE;gBAC5B,UAAU,CAAC,IAAI,CAAC,CAAC;YAClB,CAAC,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IACjB,CAAC,CAAC,CAAC;IACH,OAAO,0CAAG,OAAO,IAAI,oBAAC,mBAAmB,OAAG,CAAI,CAAC;AAClD,CAAC,CAAC","sourcesContent":["/*!\n * Copyright 2017 by ChartIQ, Inc.\n * All rights reserved.\n */\n\nimport React, { useState, useEffect } from \"react\";\nimport { createStore } from \"./stores/appStore\";\nimport { AppCatalogComponent } from \"./AppCatalogComponent\";\nimport storeActions from \"./stores/storeActions\";\n\n/**\n * A UI component that stores all the applications and allows the end user to add, remove, browse, or launch an application\n * from the app catalog window.\n */\nexport const AppCatalog = () => {\n\tconst [isReady, setIsReady] = useState(false);\n\tuseEffect(() => {\n\t\tcreateStore(() => {\n\t\t\tstoreActions.initialize(() => {\n\t\t\t\tsetIsReady(true);\n\t\t\t});\n\t\t});\n\t\treturn () => {};\n\t});\n\treturn <>{isReady && <AppCatalogComponent />}</>;\n};\n"]}

package/react/components/appCatalog/AppCatalogComponent.d.ts

@@ -0,0 +1,82 @@
+export class AppCatalogComponent extends React.Component<any, any, any> {
+    constructor(props: any);
+    bindCorrectContext(): void;
+    addedAppsChanged(): void;
+    /**
+     * Force an update. Used to update from store listeners.
+     *
+     * @memberof AppMarket
+     */
+    update(): void;
+    /**
+     * Action to take when the back button is clicked (which just goes home)
+     */
+    goHome(): void;
+    /**
+     * Calls the store to add a tag to the activeTag list. Also updates the app view to switch to the AppResults page (since adding a tag implies filtering has begun)
+     * @param {string} tag The name of the tag to add
+     */
+    addTag(tag: string): void;
+    /**
+     * Calls the store to remove a tag from the activeTag list. Also updates the app view to switch to the homepage if all tags have been removed
+     * @param {string} tag The name of the tag to add
+     */
+    removeTag(tag: string): void;
+    /**
+     * Performs a search through the catalog
+     * @param {string} search The text to search the catalog with
+     */
+    changeSearch(search: string): void;
+    /**
+     * Opens the AppShowcase page for the app supplied
+     */
+    openAppShowcase(): void;
+    /**
+     * When the notification for installing/removing an app is shown a timeout is set to call this function to cease showing the notification
+     */
+    stopShowingInstalledNotification(): void;
+    /**
+     * Compiles a list of apps that are installed from the information received back from appd
+     * and the information contained on the system
+     * @param {boolean} filtered If true, uses the filtered apps array. Otherwise uses all apps
+     */
+    compileAddedInfo(filtered: boolean): any;
+    getPageContents(): JSX.Element;
+    /**
+     * Determines the apps page based on the state of the activeTags, search text, etc
+     */
+    determineActivePage(): string | undefined;
+    navigateToShowcase(id: any): void;
+    viewApp(error: any, event: any): void;
+    /**
+     * Checks if we have an activeApp defined
+     *
+     * @returns {boolean}
+     * @memberof AppMarket
+     */
+    isActiveApp(): boolean;
+    /**
+     * Returns the active tags from the store
+     *
+     * @returns {array} activeTags
+     * @memberof AppMarket
+     */
+    getActiveTags(): array;
+    _asyncAppRequest: Promise<void> | undefined;
+    _asyncTagsRequest: Promise<void> | undefined;
+    /**
+     * Returns the activeApp from the Store
+     *
+     * @returns {string} activeApp
+     * @memberof AppMarket
+     */
+    getActiveApp(): string;
+    /**
+     * Returns the filtered list of apps from search
+     *
+     * @returns {object} filteredApps
+     * @memberof AppMarket
+     */
+    getFilteredApps(): object;
+}
+import React from "react";

package/react/components/appCatalog/AppCatalogComponent.js

@@ -0,0 +1,304 @@
+import React from "react";
+// components
+import SearchBar from "./components/SearchBar";
+import Home from "./components/Home";
+import AppResults from "./components/AppResults";
+import AppShowcase from "./components/Showcase/AppShowcase";
+// data
+import { getStore } from "./stores/appStore";
+import storeActions from "./stores/storeActions";
+import "../../assets/css/appCatalog.css";
+export class AppCatalogComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            apps: [],
+            isLoading: false,
+            serverError: false,
+            installed: [],
+            tags: [],
+            installationActionTaken: null, // type: string | null
+        };
+        this.bindCorrectContext();
+    }
+    bindCorrectContext() {
+        this.addedAppsChanged = this.addedAppsChanged.bind(this);
+        this.update = this.update.bind(this);
+        this.goHome = this.goHome.bind(this);
+        this.addTag = this.addTag.bind(this);
+        this.removeTag = this.removeTag.bind(this);
+        this.changeSearch = this.changeSearch.bind(this);
+        this.openAppShowcase = this.openAppShowcase.bind(this);
+        this.stopShowingInstalledNotification = this.stopShowingInstalledNotification.bind(this);
+        this.compileAddedInfo = this.compileAddedInfo.bind(this);
+        this.getPageContents = this.getPageContents.bind(this);
+        this.determineActivePage = this.determineActivePage.bind(this);
+        this.navigateToShowcase = this.navigateToShowcase.bind(this);
+        this.viewApp = this.viewApp.bind(this);
+        this.isActiveApp = this.isActiveApp.bind(this);
+        this.getActiveTags = this.getActiveTags.bind(this);
+    }
+    // eslint-disable-next-line react/no-deprecated
+    UNSAFE_componentWillMount() {
+        // For more information on async react rendering, see here
+        // https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html
+        this.setState({
+            isLoading: true,
+        }, () => {
+            this._asyncAppRequest = storeActions
+                .getApps()
+                .then((apps) => {
+                this.setState({
+                    apps,
+                    isLoading: false,
+                });
+            })
+                .catch((err) => {
+                this.setState({
+                    serverError: true,
+                }, () => {
+                    FSBL.Clients.Logger.error("Error connecting to FDC3 AppD server.", err);
+                });
+            });
+        });
+        this._asyncTagsRequest = storeActions
+            .getTags()
+            .then((tags) => {
+            this.setState({
+                tags,
+            });
+        })
+            .catch((err) => {
+            this.setState({
+                serverError: true,
+            }, () => {
+                FSBL.Clients.Logger.error("Error retrieving tags from FDC3 AppD server.", err);
+            });
+        });
+    }
+    componentDidMount() {
+        getStore().addListener({ field: "appDefinitions" }, this.addedAppsChanged);
+        getStore().addListener({ field: "filteredApps" }, this.update);
+        getStore().addListener({ field: "activeTags" }, this.update);
+        getStore().addListener({ field: "activeApp" }, this.openAppShowcase);
+        // Get notified when user wants to view an app
+        FSBL.Clients.RouterClient.addListener("viewApp", this.viewApp);
+        let installed = storeActions.getInstalledApps();
+        this.setState({
+            installed: Object.keys(installed),
+        });
+    }
+    componentWillUnmount() {
+        getStore().removeListener({ field: "appDefinitions" }, this.addedAppsChanged);
+        getStore().removeListener({ field: "filteredApps" }, this.update);
+        getStore().removeListener({ field: "activeTags" }, this.update);
+        getStore().removeListener({ field: "activeApp" }, this.openAppShowcase);
+        // Get notified when user wants to view an app
+        FSBL.Clients.RouterClient.removeListener("viewApp", this.viewApp);
+        // Make sure async requests have finished.
+        if (this._asyncAppRequest && this._asyncAppRequest.cancel) {
+            this._asyncAppRequest.cancel();
+        }
+        if (this._asyncTagsRequest && this._asyncTagsRequest.cancel) {
+            this._asyncTagsRequest.cancel();
+        }
+    }
+    viewApp(error, event) {
+        !error && this.navigateToShowcase(event.data.app.appID);
+    }
+    addedAppsChanged() {
+        let action;
+        if (this.state.installed.length > Object.keys(storeActions.getInstalledApps()).length) {
+            // If the components installed apps is greater than that of the store, that means an app was removed
+            action = "remove";
+        }
+        else if (this.state.installed.length < Object.keys(storeActions.getInstalledApps()).length) {
+            // If the component's installed apps is less than that of the store, that means an app was added
+            action = "add";
+        }
+        if (action) {
+            this.setState({
+                installationActionTaken: action,
+                installed: Object.keys(storeActions.getInstalledApps()),
+            }, () => {
+                setTimeout(this.stopShowingInstalledNotification, 1500);
+                this.update();
+            });
+        }
+    }
+    /**
+     * Force an update. Used to update from store listeners.
+     *
+     * @memberof AppMarket
+     */
+    update() {
+        this.forceUpdate();
+    }
+    /**
+     * Determines the apps page based on the state of the activeTags, search text, etc
+     */
+    determineActivePage() {
+        const activeTags = this.getActiveTags();
+        const filteredApps = this.getFilteredApps();
+        const activeApp = this.getActiveApp();
+        const forceSearch = storeActions.getForceSearch();
+        let page;
+        if (activeApp && !forceSearch) {
+            page = "showcase";
+        }
+        else if (filteredApps.length > 0 || forceSearch) {
+            page = "appSearch";
+        }
+        else if (filteredApps.length === 0 && activeTags.length === 0) {
+            page = "home";
+        }
+        return page;
+    }
+    /**
+     * Returns the activeApp from the Store
+     *
+     * @returns {string} activeApp
+     * @memberof AppMarket
+     */
+    getActiveApp() {
+        return storeActions.getActiveApp();
+    }
+    /**
+     * Checks if we have an activeApp defined
+     *
+     * @returns {boolean}
+     * @memberof AppMarket
+     */
+    isActiveApp() {
+        return storeActions.getActiveApp() !== null;
+    }
+    /**
+     * Returns the active tags from the store
+     *
+     * @returns {array} activeTags
+     * @memberof AppMarket
+     */
+    getActiveTags() {
+        return storeActions.getActiveTags();
+    }
+    /**
+     * Returns the filtered list of apps from search
+     *
+     * @returns {object} filteredApps
+     * @memberof AppMarket
+     */
+    getFilteredApps() {
+        return storeActions.getFilteredApps();
+    }
+    /**
+     * Calls the store to add a tag to the activeTag list. Also updates the app view to switch to the AppResults page (since adding a tag implies filtering has begun)
+     * @param {string} tag The name of the tag to add
+     */
+    addTag(tag) {
+        storeActions.addTag(tag);
+    }
+    /**
+     * Calls the store to remove a tag from the activeTag list. Also updates the app view to switch to the homepage if all tags have been removed
+     * @param {string} tag The name of the tag to add
+     */
+    removeTag(tag) {
+        storeActions.removeTag(tag);
+    }
+    /**
+     * Action to take when the back button is clicked (which just goes home)
+     */
+    goHome() {
+        storeActions.goHome();
+    }
+    /**
+     * Performs a search through the catalog
+     * @param {string} search The text to search the catalog with
+     */
+    changeSearch(search) {
+        storeActions.searchApps(search);
+    }
+    /**
+     * When the notification for installing/removing an app is shown a timeout is set to call this function to cease showing the notification
+     */
+    stopShowingInstalledNotification() {
+        this.setState({
+            installationActionTaken: null,
+        });
+    }
+    navigateToShowcase(id) {
+        storeActions.openApp(id);
+    }
+    /**
+     * Opens the AppShowcase page for the app supplied
+     */
+    openAppShowcase() {
+        let app = storeActions.getActiveApp();
+        if (app !== null) {
+            storeActions.setForceSearch(false);
+            storeActions.clearTags();
+            storeActions.clearFilteredApps();
+        }
+        this.forceUpdate();
+    }
+    /**
+     * Compiles a list of apps that are installed from the information received back from appd
+     * and the information contained on the system
+     * @param {boolean} filtered If true, uses the filtered apps array. Otherwise uses all apps
+     */
+    compileAddedInfo(filtered) {
+        const { installed } = this.state;
+        const forceSearch = storeActions.getForceSearch();
+        const apps = filtered || forceSearch ? storeActions.getFilteredApps() : this.state.apps;
+        return apps.map((app) => {
+            if (installed.includes(app.appId)) {
+                app.installed = true;
+            }
+            else {
+                app.installed = false;
+            }
+            return app;
+        });
+    }
+    getPageContents() {
+        const filteredApps = this.getFilteredApps();
+        const activeTags = this.getActiveTags();
+        const activePage = this.determineActivePage();
+        const apps = this.compileAddedInfo(filteredApps.length > 0);
+        // Force default case if activepage isn't search and apps.length is 0
+        if (apps.length === 0 && activePage !== "appSearch")
+            activePage = -1;
+        const theApp = this.compileAddedInfo(false).find((app) => this.getActiveApp() === app.appId);
+        switch (activePage) {
+            case "home":
+                return (React.createElement(Home, { tags: this.state.tags, cards: apps, seeMore: this.addTag, addApp: this.addApp, removeApp: this.removeApp, addTag: this.addTag, viewAppShowcase: this.navigateToShowcase }));
+            case "appSearch":
+                return (React.createElement(AppResults, { cards: apps, tags: activeTags, addApp: this.addApp, removeApp: this.removeApp, viewAppShowcase: this.navigateToShowcase, addTag: this.addTag }));
+            case "showcase":
+                return React.createElement(AppShowcase, { app: theApp, addApp: this.addApp, removeApp: this.removeApp, addTag: this.addTag });
+            default:
+                return React.createElement("div", null);
+        }
+    }
+    render() {
+        let { tags } = this.state;
+        let page = this.determineActivePage();
+        let pageContents = this.getPageContents();
+        return (React.createElement("div", { className: "app-catalog" },
+            this.state.serverError && (React.createElement("div", { className: "server-error" },
+                React.createElement("br", null),
+                React.createElement("br", null),
+                React.createElement("span", null, "Catalog contents are currently unavailable."),
+                React.createElement("br", null),
+                React.createElement("span", null, "Please check your connection or consult your System Admin."))),
+            this.state.apps.length === 0 && !this.state.isLoading && (React.createElement("div", { className: "server-error" },
+                React.createElement("br", null),
+                React.createElement("br", null),
+                React.createElement("span", null, "There are no apps available in this catalog."),
+                React.createElement("br", null),
+                React.createElement("span", null, "Please contact your System Admin."))),
+            this.state.apps.length > 0 && (React.createElement("div", null,
+                React.createElement(SearchBar, { hidden: page === "showcase", backButton: page !== "home", tags: tags, activeTags: this.getActiveTags, tagSelected: this.addTag, removeTag: this.removeTag, goHome: this.goHome, installationActionTaken: this.state.installationActionTaken, search: this.changeSearch, isViewingApp: this.isActiveApp }),
+                React.createElement("div", { className: "market_content" }, pageContents)))));
+    }
+}
+//# sourceMappingURL=AppCatalogComponent.js.map