필터기능 구현

1. 정렬 조건은 zutand에서 전역으로 관리

2. 렌더링부분과 count세는부분을 별도로 관리

 

import { useButtonStore } from '@/store/useButtonStore';


const RobotMilkingList: React.FC = () => {
  const { activeFilterButton, setActiveFilterButton} = useButtonStore();
  
  const [allCount, setAllCount] = useState(0);
  const [normalCount, setNormalCount] = useState(0);
  const [errorCount, setErrorCount] = useState(0);
  
  const farmCodes = Object.keys(groupedMessages);
  let sortedFarmCodes;
  
  //정렬코드 생략
  
    const handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
    const list = e.currentTarget.dataset.list;
    
    if (!list) return;
    
    setActiveFilterButton(list);
  };

//렌더링 부분
  const renderFarmList = () => {
    let filteredFarmCodes;
  
    switch (activeFilterButton) {
      case 'error':
        filteredFarmCodes = sortedFarmCodes.filter((farmCode) => (groupedMessages[farmCode].errorList.length > 0) && (groupedMessages[farmCode].robot.length > 0));
        break;
      case 'normal':
        filteredFarmCodes = sortedFarmCodes.filter((farmCode) => (groupedMessages[farmCode].errorList.length === 0) && (groupedMessages[farmCode].robot.length > 0));
        break;
      case 'all':
      default:
        filteredFarmCodes = sortedFarmCodes.filter((farmCode) => groupedMessages[farmCode].robot.length > 0);
        break;
    }
  
    return filteredFarmCodes.map((farmCode, index) => {
      return (
        <FarmItem
        key={index}
        farmCode={farmCode}
        cpu={groupedMessages[farmCode].rman?.cpu}
        ram={groupedMessages[farmCode].rman?.ram}
        hdd={groupedMessages[farmCode].rman?.hdd}
        sql={groupedMessages[farmCode].rman?.sql}
        farmName={`${groupedMessages[farmCode].farmName} (${farmCode})`}
        errorList={groupedMessages[farmCode].errorList.length > 0}
        robotState={groupedMessages[farmCode].robot}
        gateState={groupedMessages[farmCode].smartgate}
        rmanTime={groupedMessages[farmCode].rman?.rmanTime}
        webTime={groupedMessages[farmCode].web?.webTime}
        />
        );
      });
    };
    
    // 카운트를 업데이트하는 로직
useEffect(() => {
  const allFiltered = sortedFarmCodes.filter((farmCode) => groupedMessages[farmCode].robot.length > 0);
  const normalFiltered = sortedFarmCodes.filter((farmCode) => (groupedMessages[farmCode].errorList.length === 0) && (groupedMessages[farmCode].robot.length > 0));
  const errorFiltered = sortedFarmCodes.filter((farmCode) => (groupedMessages[farmCode].errorList.length > 0) && (groupedMessages[farmCode].robot.length > 0));

  setAllCount(allFiltered.length);
  setNormalCount(normalFiltered.length);
  setErrorCount(errorFiltered.length);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [sortedFarmCodes, activeFilterButton])
    
  return (
    <>
      <section className="grid-container h-max w-full gap-y-2 py-2.5 pr-2.5">
        <h2 className="sr-only">목장별 리스트</h2>
        {renderFarmList()}
        <SortButton />
        <CountFarm allCount={allCount} normalCount={normalCount} errorCount={errorCount} onClick={handleClick}/>
      </section>
    </>
  );
};