function ControlsToolbar()

in src/components/View/ControlsToolbar.js [109:248]
124 lines of code
8 McCabe index (conditional complexity)

function ControlsToolbar(props) {
    const classes = useToolbarStyle();
    const [bucketHierarchy, setHierarchy] = useState([]);
    const [viewLayout, setViewLayout] = useState('table');
    const hierarchyLen = bucketHierarchy.length;
    const bucketName = useSelector(state => state.mapsConfig.bucket);
    const selectedPrefix = useSelector(state => state.mapsConfig.prefix);
    const userGroups = useSelector(state => state.userConfig.userGroups);
    const { 
        prefixChangeHandler, 
        viewLayoutChangeHandler, 
        selectedMediaAssets, 
        unselectAssetHandler, 
        alertHandler,
        folderHandler,
        searchHandler
    } = props;
    const [open, setOpen] = useState(false);
    const [folderOpen, setFolderOpen] = useState(false);
    const [folderSelected, isFolderSelected] = useState(false);

    const handleHierarchyChange = (event, prefix) => {
        event.preventDefault();
        const idx = bucketHierarchy.findIndex((val) => {
          return val.key === prefix;
        });
    
        if (idx > -1) {
          bucketHierarchy.splice(idx, hierarchyLen+1);
          setHierarchy(bucketHierarchy);
        } else {
          setHierarchy([]);
        }
        prefixChangeHandler(event, prefix);
      }
    
    useEffect(() => {
        let tempHierarchy = [];
        const subPrefix = selectedPrefix.split('/').slice(0, -1);
        let idx = 0;
        for (idx=0; idx<subPrefix.length; idx++) {
            var n = selectedPrefix.indexOf(subPrefix[idx]);
            var prefixObj = {
            "displayName": subPrefix[idx],
            "key": selectedPrefix.substr(0, n+subPrefix[idx].length+1)
            };
            tempHierarchy.push(prefixObj);
        }
        setHierarchy(tempHierarchy);
    }, [selectedPrefix]);

    // HANDLERS //
    const handleViewLayoutChange = (event, newViewLayout) => {
        setViewLayout(newViewLayout);
        viewLayoutChangeHandler(newViewLayout);
    };

    const handleCheckoutClick = () => {
        console.log('Handle file check out');
        const numSelected = selectedMediaAssets.length;
        if ( numSelected <= 0) {
            alertHandler('error', 'Error', ['No assets selected to download.']);
        } else {
            for (let i=0; i<numSelected; i++) {
                console.log(selectedMediaAssets[i]);
                assetAPI.CheckOutObjectRequest(bucketName, selectedMediaAssets[i].key, false, alertHandler);
            }
        }
        unselectAssetHandler();
    };
    
    const handleClose = () => {
        setOpen(false);
        unselectAssetHandler();
    };

    const handleFolderClose = () => {
        setFolderOpen(false);
    };

    const handleCheckinClick = (event) => {
        event.preventDefault();
        console.log('Handle file check in');
        setOpen(true);
    };

    const handleDeleteClick = () => {
        console.log('Handle delete click');
        const numSelected = selectedMediaAssets.length;
        console.log(numSelected);
        if ( numSelected <= 0) {
            alertHandler('error', 'Error', ['No assets selected to delete.']);
        } else {
            for (let i=0; i<numSelected; i++) {
                console.log(selectedMediaAssets[i]);
                assetAPI.DeleteObjectRequest(bucketName, selectedMediaAssets[i].key, alertHandler);
            }
        }
        unselectAssetHandler();
    };

    const handleNewFileClick = (event) => {
        event.preventDefault();
        console.log('Handle new file click');
        setOpen(true);
    };

    const handleNewFolderClick = (event) => {
        event.preventDefault();
        console.log('Handle new folder click');
        setFolderOpen(true);
    };

    const handleSearch = (event) => {
        searchHandler(event.target.value);
    };

    return (
        <>
        <AppBar className={classes.appBar} position='static'>
            <Toolbar className={classes.toolBar}>
                <section className={classes.leftToolbarControls}>
                    <ToggleButtonGroup
                        value={viewLayout}
                        exclusive
                        onChange={handleViewLayoutChange}
                        aria-label="text alignment"
                        style={{backgroundColor: "#ffffff"}}
                    >
                        <ToggleButton value="card" aria-label="left aligned">
                            <ViewModuleIcon />
                        </ToggleButton>
                        <ToggleButton value="table" aria-label="centered">
                            <ViewListIcon />
                        </ToggleButton>
                    </ToggleButtonGroup>


                    <Breadcrumbs className={classes.breadcrumbs} maxItems={3} aria-label="breadcrumb">
                        <Chip className={classes.breadcrumbLink} href='/' label={bucketName} onClick={event => handleHierarchyChange(event, '')} style={{visibility: bucketName !== '' ? 'visible' : 'hidden'}} />