Function Message

ui/src/message/Message.tsx:117–218

({
    fDelete,
    title,
    date,
    image,
    priority,
    content,
    extras,
    appName,
    onExpand,
    expanded: initialExpanded,
}: IProps)

};

const Message = ({
    fDelete,
    title,
    date,
    image,
    priority,
    content,
    extras,
    appName,
    onExpand,
    expanded: initialExpanded,
}: IProps) => {
    const theme = useTheme();
    const contentRef = React.useRef<HTMLDivElement | null>(null);
    const {classes} = useStyles();
    const [expanded, setExpanded] = React.useState(initialExpanded);
    const [isOverflowing, setOverflowing] = React.useState(false);
    const smallHeader = useMediaQuery(theme.breakpoints.down('md'));

    const refreshOverflowing = React.useCallback(() => {
        const ref = contentRef.current;
        if (!ref) {
            return;
        }
        setOverflowing((overflowing) => overflowing || ref.scrollHeight > ref.clientHeight);
    }, [contentRef, setOverflowing]);

    const onContentRef = React.useCallback(
        (ref: HTMLDivElement | null) => {
            contentRef.current = ref;
            refreshOverflowing();
        },
        [contentRef, refreshOverflowing]
    );

    React.useEffect(() => void onExpand(expanded), [expanded]);

    const togglePreviewHeight = () => setExpanded((b) => !b);

    const renderContent = () => {
        switch (contentType(extras)) {
            case RenderMode.Markdown:
                return <Markdown onImageLoaded={refreshOverflowing}>{content}</Markdown>;
            case RenderMode.Plain:
            default:
                return <span className={classes.plainContent}>{content}</span>;
        }
    };
    return (
        <div className={`${classes.wrapperPadding} message`}>
            <Container
                style={{
                    display: 'flex',
                    flexWrap: 'wrap',
                    borderLeftColor: priorityColor(priority),
                    borderLeftWidth: 6,
                    borderLeftStyle: 'solid',
                }}>