IuryNogueira/myreef

View on GitHub
front/src/components/Indicator/Indicator.tsx

Summary

Maintainability
A
3 hrs
Test Coverage
import './Indicator.css';
import {
CardMonitor,
ContainerCard,
Description,
ValueTitle,
NameIndicator,
IconContainer,
Loader,
} from './Indicator.styles';
import { IconType } from 'react-icons/lib';
import { ReactElement, useEffect, useState } from 'react';
 
export interface IndicatorProps {
value: number;
name: string;
unit: string;
alarm?: {
condition: '>' | '>=' | '<' | '<=' | '==' | 'includes' | 'out_interval';
values: number[];
};
danger?: boolean;
icon?: ReactElement<IconType>;
loading?: boolean;
last_update: string;
}
 
interface config {
config: IndicatorProps;
}
 
Function `Indicator` has a Cognitive Complexity of 18 (exceeds 5 allowed). Consider refactoring.
export const Indicator = (props: config) => {
const { name, value, unit, alarm, icon, loading, last_update } = props.config;
const [loadingState, setLoadingState] = useState<boolean>(false);
 
useEffect(() => {
setLoadingState(loading || false);
}, [loading]);
 
const checkAlarm = (): boolean => {
if (alarm && alarm.values && alarm.values.length) {
return checkDanger(props.config);
}
return false;
};
 
const mountDescription = () => {
if (alarm?.condition === 'out_interval') {
return (
'ideal seria ' +
alarm?.values[0] +
' a ' +
alarm?.values[alarm?.values.length - 1]
);
}
if (alarm?.condition === 'includes' || alarm?.condition === '==') {
return 'não pode ser ' + value;
}
if (alarm?.condition === '>=') {
return 'ideal seria menor que ' + alarm?.values[0];
}
if (alarm?.condition === '<=') {
return 'ideal seria maior que ' + alarm?.values[0];
}
if (alarm?.condition === '>') {
Avoid too many `return` statements within this function.
return 'ideal seria menor ou igual a ' + alarm?.values[0];
}
if (alarm?.condition === '<') {
Avoid too many `return` statements within this function.
return 'ideal seria maior ou igual a ' + alarm?.values[0];
}
};
 
const formatDate = (date: string) => {
const dataObj = new Date(date);
 
const day = String(dataObj.getDate()).padStart(2, '0');
const month = String(dataObj.getMonth() + 1).padStart(2, '0');
const year = String(dataObj.getFullYear()).slice(2);
const hours = String(dataObj.getHours()).padStart(2, '0');
const minutes = String(dataObj.getMinutes()).padStart(2, '0');
 
return `${day}/${month}/${year} ${hours}:${minutes}`;
};
 
return (
<CardMonitor danger={checkAlarm()} key={name}>
<ContainerCard>
<ValueTitle>
{loadingState ? <Loader /> : <span>{value}</span>}
</ValueTitle>
{icon && (
<IconContainer data-testid="icon" danger={checkAlarm()}>
{icon}
</IconContainer>
)}
</ContainerCard>
<NameIndicator>
<span>{unit}</span>
</NameIndicator>
<Description>
<div>
<span>{name}</span>{' '}
{checkAlarm() && <span>{mountDescription()}</span>}
</div>
<span>{formatDate(last_update)}</span>
</Description>
</CardMonitor>
);
};
 
export const checkDanger = (model: IndicatorProps): boolean => {
interface operatorParams {
value: number;
values: number[];
}
 
const operator = {
'>': (params: operatorParams) => {
return params.value > params.values[0];
},
'>=': (params: operatorParams) => {
return params.value >= params.values[0];
},
'<': (params: operatorParams) => {
return params.value < params.values[0];
},
'<=': (params: operatorParams) => {
return params.value <= params.values[0];
},
'==': (params: operatorParams) => {
return params.value === params.values[0];
},
includes: (params: operatorParams) => {
return params.values.includes(params.value);
},
out_interval: (params: operatorParams) => {
const numbersOrdered = params.values.sort((a, b) => {
return a - b;
});
return !(
params.value >= numbersOrdered[0] &&
params.value <= numbersOrdered[numbersOrdered.length - 1]
);
},
};
 
if (model.alarm && model.alarm.values.length) {
const valuesToCompare: operatorParams = {
value: model.value,
values: model.alarm.values,
};
 
if (model.alarm.values.length >= 1) {
return operator[model.alarm.condition](valuesToCompare);
}
}
return false;
};
 
export default Indicator;