hunt-blacklist-frontend/app/components/itemList.tsx

import {BlacklistItem} from "~/classes/blacklistItem";
import {Button, CircularProgress} from "@mui/material";
import useWindowDimensions from "~/hooks/windowDimensions";
import trimLink from "~/functions/trimLink";

export default function ItemList({ isFetching, blacklistItems, showDialog }: { isFetching: boolean, blacklistItems: BlacklistItem[], showDialog: Function }) {
    if (isFetching){
        return(
            <div className="loader">
                <CircularProgress aria-label="Loading…" />
            </div>
        )
    } else {
        if (blacklistItems.length > 0){
            const { width } = useWindowDimensions();
            return (
                <div className="list-container">
                    <div className="item-list">
                        {blacklistItems.map((item) => {
                            return <Button onClick={() => showDialog(item)} variant="text">{width < 570 ? trimLink(item.link) : item.link}</Button>
                        })}
                    </div>
                </div>
            )
        } else {
            return (
                <div className="list-container">
                    <p style={{color: '#E0E3E7'}}>List is empty</p>
                </div>
            )
        }
    }
}