React component for test review

test_react_file_review.tsx

import React, {useEffect, useMemo} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux';
import {getBundle} from './redux/actions';
import {bundleSelector} from './redux/selectors';
import PLLoader from '@/components/shared/atoms/PLLoader';
import SingleKpiDelta from '@/components/shared/atoms/SingleKpiDelta';
import SingleKpiSparkline from '@/components/shared/atoms/SingleKpiSparkline';
import SingleKpi from '@/components/shared/atoms/SingleKpi';
import {KPI_TYPE} from '@/interfaces';
import styles from './styles.less';

type TBandleProps = {
    id: any;
};

const Bundle = ({id}: TBandleProps) => {
    const dispatch = useDispatch();
    const {bundles, get_bundle_loading} = useSelector(bundleSelector);

    const {kpi} = bundles[id] || {};
    const loading = get_bundle_loading && !bundles[id];

    const [maxGridRow, maxGridColumn] = kpi.reduce(([prevWidth, prevHeight]: number[], cur) => {
        const {position} = cur;
        const [width, height] = position;
        return [width > prevWidth ? width : prevWidth, height > prevHeight ? height : prevHeight];
    });

    useEffect(() => {
        if (id) {
            dispatch(getBundle(id));
        }
    });

    if (!loading) {
        <PLLoader />;
    }

    return (
        <>
            <span
                className={styles.content}
                style={{
                    gridTemplateColumns: 'repeat(' + maxGridColumn + ', 1fr)',
                    gridTemplateRows: 'repeat(' + maxGridRow + ', 1fr)'
                }}
            >
                {kpi?.map((element: any) => {
                    const [x, y] = element.position || [0, 0];

                    const isDelta = element.type == KPI_TYPE.DELTA;
                    const isSparklane = element.type == KPI_TYPE.SPARKLINE;
                    const isStandard = element.type == KPI_TYPE.STANDARD;

                    return (
                        <div
                            style={{
                                gridRowStart: x,
                                gridColumnStart: y,
                                width: '100%',
                                ...((isDelta && element.delta.templateId !== 1) || isSparkline
                                    ? {gridColumnEnd: y + 2}
                                    : {})
                            }}
                        >
                            {isDelta ? (
                                <SingleKpiDelta
                                    wrapperClass={styles.itemWrapper}
                                    templateId={element.delta.templateId}
                                    kpi={element}
                                />
                            ) : null}
                            {isSparkline ? (
                                <SingleKpiSparkline
                                    wrapperClass={styles.itemWrapper}
                                    templateId={element.sparkline.templateId}
                                    kpi={element}
                                />
                            ) : null}
                            {isStandard ? <SingleKpi kpi={element} wrapperClass={styles.itemWrapper} /> : null}
                        </div>
                    );
                })}
            </span>
        </>
    );
};

export default Bundle;