export function App()

in karavan-designer/src/App.tsx [60:225]
65 lines of code
7 McCabe index (conditional complexity)

export function App() {

    const [pageId, setPageId] = useState<string>('designer');
    const [name, setName] = useState<string>('example.yaml');
    const [key, setKey] = useState<string>('');
    const [yaml, setYaml] = useState<string>('');
    const [loaded, setLoaded] = useState<boolean>(false);

    useEffect(() => {
        Promise.all([
            fetch("metadata/kamelets.yaml"),
            fetch("metadata/components.json"),
            fetch("metadata/spiBeans.json"),
            fetch("snippets/org.apache.camel.AggregationStrategy"),
            fetch("snippets/org.apache.camel.Processor"),
            fetch("example/demo.camel.yaml"),
            // fetch("example/avro-serialize-action.kamelet.yaml"),
            // fetch("components/blocked-components.properties"),
            // fetch("kamelets/blocked-kamelets.properties")
            // fetch("example/plc4x-ads-source.kamelet.yaml")
            // fetch("example/aws-cloudwatch-sink.kamelet.yaml")
            // fetch("example/aws-s3-cdc-source.kamelet.yaml")
            //fetch("components/supported-components.json"),
            
        ]).then(responses =>
            Promise.all(responses.map(response => response.text()))
        ).then(data => {
            const kamelets: string[] = [];
            data[0].split("\n---\n").map(c => c.trim()).forEach(z => kamelets.push(z));
            KameletApi.saveKamelets(kamelets, true);

            const jsons: string[] = [];
            JSON.parse(data[1]).forEach((c: any) => jsons.push(JSON.stringify(c)));
            ComponentApi.saveComponents(jsons, true);

            jsons.length = 0;
            JSON.parse(data[2]).forEach((c: any) => jsons.push(JSON.stringify(c)));
            SpiBeanApi.saveSpiBeans(jsons, true);

            setLoaded(true);

            TemplateApi.saveTemplate("org.apache.camel.AggregationStrategy", data[3]);
            TemplateApi.saveTemplate("org.apache.camel.Processor", data[4]);

            if (data[5]) {
                setYaml(data[5]);
                // setName("plc4x-ads-source.kamelet.yaml");
                setName("demo.camel.yaml");
            }
            if (data[6]) {
                ComponentApi.saveBlockedComponentNames(data[6].split('\r\n'));
            }
            if (data[8]) {
                KameletApi.saveBlockedKameletNames(data[8].split('\n'));
            }
 	        if (data[9]) {
                ComponentApi.saveSupportedComponents(data[9]);
                ComponentApi.setSupportedOnly(true);
            }
           
        }).catch(err => {
                console.log(err);
                EventBus.sendAlert("Error", err.text, 'danger')
            }
        );
    });

    function save(filename: string, yaml: string, propertyOnly: boolean) {
        // console.log(yaml);
    }

    function getSpinner() {
        return (
            <Bullseye className="loading-page">
                <Spinner className="progress-stepper"  diameter="80px" aria-label="Loading..."/>
            </Bullseye>
        )
    }

    function pageNav ()  {
        const pages: MenuItem[] = [
            new MenuItem("designer", "Designer", <BlueprintIcon/>),
            new MenuItem("topology", "Topology", <TopologyIcon/>),
            new MenuItem("knowledgebase", "Knowledgebase", <KnowledgebaseIcon/>),
        ]
        return (<Flex className="nav-buttons" direction={{default: "column"}} style={{height: "100%"}}
                      spaceItems={{default: "spaceItemsNone"}}>
            <FlexItem alignSelf={{default: "alignSelfCenter"}}>
                <Tooltip className="logo-tooltip" content={"Apache Camel Karavan"}
                         position={"right"}>
                    {KaravanIcon()}
                </Tooltip>
            </FlexItem>
            {pages.map(page =>
                <FlexItem key={page.pageId} className={pageId === page.pageId ? "nav-button-selected" : ""}>
                    <Tooltip content={page.tooltip} position={"right"}>
                        <Button id={page.pageId} icon={page.icon} variant={"plain"}
                                className={pageId === page.pageId ? "nav-button-selected" : ""}
                                onClick={event => setPageId(page.pageId)}
                        />
                    </Tooltip>
                </FlexItem>
            )}
            <FlexItem flex={{default: "flex_2"}} alignSelf={{default: "alignSelfCenter"}}>
                <Divider/>
            </FlexItem>
        </Flex>)
    }

    function getPage() {
        const dark = document.body.className.includes('vscode-dark');
        switch (pageId) {
            case "designer":
                return (
                    <DesignerPage
                        name={name}
                        yaml={yaml}
                        onSave={(filename, yaml1, propertyOnly) => save(filename, yaml1, propertyOnly)}
                        dark={dark}/>
                )
            case "knowledgebase":
                return (
                    <KnowledgebaseHome dark={dark}/>
                )
            case "topology":
                return (
                    <TopologyTab
                        files={[new IntegrationFile("demo.camel.yaml", yaml)]}
                        onSetFile={fileName => {}}
                        onClickAddRoute={() => {}}
                        onClickAddREST={() => {}}
                        onClickAddBean={() => {}}
                        onClickAddKamelet={() => {}}
                        hideToolbar={false}
                    />
                )
        }
    }

    function getHeader () {
        return (<Masthead>
        </Masthead>)
    }

    function getSidebar () {
        return (<PageSidebar isSidebarOpen={true} id="fill-sidebar">
            <PageSidebarBody>Navigation</PageSidebarBody>
        </PageSidebar>)
    }

    return (
        <Page className="karavan">
            <Notification/>
            <Flex direction={{default: "row"}} style={{width: "100%", height: "100%"}}
                  alignItems={{default: "alignItemsStretch"}} spaceItems={{default: 'spaceItemsNone'}}>
                <FlexItem>
                    {pageNav()}
                </FlexItem>
                <FlexItem flex={{default: "flex_2"}} style={{height: "100%"}}>
                    {!loaded && getSpinner()}
                    {loaded && getPage()}
                </FlexItem>
            </Flex>
        </Page>
    )
}