public render()

in src/views/app/components/LibraryManager.tsx [87:171]
55 lines of code
11 McCabe index (conditional complexity)

    public render() {
        function filterType(element, type) {
            switch (type) {
                case "All":
                    return true;
                case "Updatable":
                    if (element.version && element.versions && element.versions.length) {
                        return versionCompare(element.versions[0], element.version) > 0;
                    }
                    return false;
                case "Installed":
                    return element.installed;
                default:
                    return element.types && element.types.length && element.types.some((ele) => ele === type);
            }
        }

        function filterTopic(element, topic) {
            switch (topic) {
                case "All":
                    return true;
                case "Uncategorized":
                    return !element.category || element.category === topic;
                default:
                    return element.category === topic;
            }
        }

        const SEARCH_KEYS = ["name", "sentence", "paragraph"];
        const filterSearch = createFilter(this.state.searchTerm, SEARCH_KEYS);
        const filteredLibraries = this.props.libraries.filter((element) => {
            const filterSupported = this.state.checked ? element.supported : true;
            if (filterSupported && filterType(element, this.state.type) && filterTopic(element, this.state.topic) && filterSearch(element)) {
                return true;
            } else {
                return false;
            }
        });
        const totalCount = filteredLibraries.length;
        let totalCountTips = "";
        if (this.state.type === "All" && this.state.topic === "All" && !this.state.searchTerm) {
            totalCountTips = `Total ${totalCount} Libraries`;
        } else {
            totalCountTips = `${totalCount} Libraries matched`;
        }

        const libraryItemProps = {
            installLibrary: this.props.installLibrary,
            uninstallLibrary: this.props.uninstallLibrary,
        };
        const isOperating = !!this.props.installingLibraryName || !!this.props.uninstallingLibraryName;

        const itemRenderer = (index, key) => {
            return (<LibraryItemView key={filteredLibraries[index].name} library={filteredLibraries[index]} {...libraryItemProps}/>);
        };
        const itemSizeEstimator = (index, cache) => {
            return 200;
        };

        return (<div className={"librarymanager " + (isOperating ? "disabled" : "")}>
            {
                this.props.requesting && (
                    <div className="mask theme-bgcolor">Loading...</div>
                )
            }
            <div className="arduinomanager-toolbar theme-bgcolor">
                <div className="dropdown-filter">
                    <span className="dropdown-label">Type</span>
                    <DropdownButton id="typeselector" title={this.state.type} onSelect={this.typeUpdate}>
                        { this.props.types.map((c, index) => {
                            return (<MenuItem key={index} eventKey={c} active={c === this.state.type}>{c}</MenuItem>);
                        })}
                    </DropdownButton>
                </div>
                <div className="dropdown-filter">
                    <span className="dropdown-label">Topic</span>
                    <DropdownButton id="topicselector" title={this.state.topic} onSelect={this.topicUpdate}>
                        { this.props.categories.map((c, index) => {
                            return (<MenuItem key={index} eventKey={c} active={c === this.state.topic}>{c}</MenuItem>);
                        })}
                    </DropdownButton>
                </div>
                <SearchInput className="search-input" placeholder="Filter your search..." onChange={this.searchUpdate} />
                <Checkbox className="supported-checkbox" onChange={this.handleCheck}>Only show libraries supported by current board</Checkbox>
                <Button className="operation-btn" bsStyle="link" onClick={() => this.props.loadLibraries(true)}>