front/src/pages/Dashboard/Dashboard.tsx
import { useState, useEffect } from 'react';import Header from '../../components/Header/Header';import LogoImg from '../../assets/logo.png';import { IndicatorProps } from '../../components/Indicator';import { Indicator } from '../../components/Indicator';import { FaTemperatureLow, FaStrikethrough } from 'react-icons/fa';import { AiOutlineReload } from 'react-icons/ai';import { HeaderSection, ImgMonitor, Container, CardsSection, Actions, EquipmentSection,} from './Dashboard.styles';import { Api } from 'infra/http/api';import { Aquarium } from 'entity/Aquarium';import { ReefChartList } from 'components';import Equipment from 'components/Equipment/Equipment';import { Fan } from 'entity/Fan';import { useParams } from 'react-router-dom'; type PropsHistoricChart = Array<{ hour: string; yesterday: number; today: number;}>; type PropsHistoricList = Array<{ created_at: string; value: number;}>; Function `Dashboard` has a Cognitive Complexity of 7 (exceeds 5 allowed). Consider refactoring.const Dashboard = () => { const indicators: IndicatorProps[] = [ { value: 27, unit: 'celsius', name: 'Temparature', alarm: { condition: 'out_interval', values: [26, 29], }, icon: <FaTemperatureLow />, loading: true, last_update: new Date().toDateString(), }, { value: 1023, unit: 'graus', name: 'salinidade', alarm: { condition: 'out_interval', values: [1024, 1026], }, icon: <FaStrikethrough />, last_update: new Date().toDateString(), }, { value: 0.06, unit: 'ppm', name: 'fosfato', alarm: { condition: '>', values: [0.12], }, last_update: new Date().toDateString(), }, ]; const [aquariums, setAquariums] = useState<Aquarium[]>(); const [tankSelected, setTankSelected] = useState<Aquarium>(); const [indicatorHist, setIndicatorHist] = useState<PropsHistoricChart>([]); const [indicatorList, setIndicatorList] = useState<PropsHistoricList>([]); const [temperature, setTemperature] = useState(indicators[0]); const [fans, setFans] = useState<Fan[]>(); const reefApi = new Api(); const { aquarium_id } = useParams(); const reloadIndicators = () => { setTemperature({ ...temperature, loading: true }); loadIndicators(); loadFans(); }; const loadAquariums = async () => { const responseTanksList = await reefApi.get<Aquarium[]>('/aquariums'); setAquariums(responseTanksList); const aquariumSelected = responseTanksList?.filter((aquarium) => { return aquarium.id === Number(aquarium_id); }); if (aquariumSelected?.length) { setTankSelected(aquariumSelected[0]); } }; const loadIndicators = async () => { const response = await reefApi.get<any[]>('/indicators'); let indicatorsByAquarium = []; if (tankSelected) { indicatorsByAquarium = response.filter( (indicator) => indicator.aquariumId === tankSelected.id ); } const { name, currentValue, minValue, maxValue, unit, id, last_update } = indicatorsByAquarium[0]; setTemperature({ name, unit, value: currentValue, alarm: { condition: 'out_interval', values: [minValue, maxValue], }, icon: <FaTemperatureLow />, loading: false, last_update: last_update, }); loadHistoricChart(id); loadListChart(id); }; const loadListChart = async (indicatorID: number) => { const response = await reefApi.get<PropsHistoricList>( `/indicator/${indicatorID}/list` ); setIndicatorList(response); }; const loadHistoricChart = async (indicatorID: number) => { const response = await reefApi.get<PropsHistoricChart>( `/indicator/${indicatorID}/historic` ); setIndicatorHist(response); }; const loadFans = async () => { const response = await reefApi.get<Fan[]>('/fans'); if (tankSelected) { const fansByAquarium = response.filter( (fan) => fan.aquariumId === tankSelected.id ); setFans(fansByAquarium); } }; useEffect(() => { loadAquariums(); }, []); useEffect(() => { if (tankSelected) { loadIndicators(); loadFans(); } }, [tankSelected]); return ( <div> <div> <Header /> <div style={{ background: '#edfbfe' }}> <HeaderSection> <div> <h2>{tankSelected?.name}</h2> <h3>Bem vindo ao monitoramento do seu aquário</h3> </div> <ImgMonitor src={LogoImg} alt="Shark Good" /> </HeaderSection> </div> </div> <Container> {/* <Select options={aquariums} setOptionSelected={setTankSelected} /> */} <Actions> <AiOutlineReload size={30} onClick={reloadIndicators} cursor="pointer" /> </Actions> <EquipmentSection> {fans && fans.length && fans.map((fan, index) => ( <Equipment name={fan.name} key={`equipament-${index}`} status={fan.on} /> ))} </EquipmentSection> <CardsSection> <Indicator key={temperature.name} config={temperature} /> </CardsSection> <ReefChartList values={indicatorList} /> </Container> </div> );}; export default Dashboard;