Function ProgramList

src/Components/ProgramPage/SideBar/SideBar.jsx:96–140

({univProgram, selectProgram, setSelectProgram, ButtonComponent})

}

export function ProgramList({univProgram, selectProgram, setSelectProgram, ButtonComponent}) {
    const univName = univProgram[0];
    const programList = univProgram[1];
    const hasPrograms = programList.length > 0;
    const [isFolded, setIsFolded] = React.useState(!hasPrograms);
    const region = programList[0]?.Region ?? univRegionMapping[univName] ?? [];
    const flags = region.map((r) => regionFlagMapping[r]).filter(Boolean).join(' ');
    return (
        <>
            <ListItemButton
                onClick={() => setIsFolded(!isFolded)}
            >
                {isFolded ? <ExpandMore fontSize="0.9em"/> : <NavigateNext fontSize="0.9em"/>}
                <ListItemText
                    primary={
                        <Box sx={{display: 'flex', justifyContent: 'space-between'}}>
                            <Typography>{univName}</Typography>
                            <Typography>{flags}</Typography>
                        </Box>
                    }
                    secondary={
                        <Typography variant='subtitle1' sx={{fontSize: 'clamp(11px, 1.5vw, 13px)', color: 'text.secondary'}}>
                            {univAbbrFullNameMapping[univName]}
                        </Typography>
                    }/>

            </ListItemButton>
            <Divider component="li" light/>
            <Collapse in={isFolded} timeout='auto' unmountOnExit>
                <List component="div" disablePadding>
                    {
                        hasPrograms ? programList.map((program) => (
                            <ButtonComponent
                                program={program}
                                selectProgram={selectProgram}
                                setSelectProgram={setSelectProgram}
                                key={program.ProgramID}
                            />
                        )) : <EmptyProgramButton univName={univName}/>
                    }
                </List>
            </Collapse>
        </>
    )
}

function EmptyProgramButton({univName}) {
    return (