새 글 정보 알람 기능

배열의 길이를 이용하여 새글이 추가됐는지를 추적하고자 함

1. useState를 이용하여 배열의상태와 알람이 켜졌는지를 추적함

    const [allErrors, setAllErrors] = useState<{ [key: string]: any }[]>([]);
    const [isAlarmChecked, setIsAlarmChecked] = useState(true);

 

2. useEffect를 이용하여 배열의 정보가 업데이트가 되는 것을 추적

  useEffect(() => {
    const farmCodes = Object.keys(groupedMessages);
    let tempAllErrors:{[key:string]:any}[] = [];

    farmCodes.forEach(farmCode => {
      const { errorList, robot, farmName } = groupedMessages[farmCode];
      if (errorList && errorList.length > 0 && robot.length > 0) {
        tempAllErrors = [...tempAllErrors, ...errorList.map(error => ({
          ...error,
          farmCode,
          farmName,
        }))];
      }
    });

    setAllErrors(tempAllErrors);
  }, [groupedMessages]); // groupedMessages가 변경될 때마다 알람 목록 업데이트

  useEffect(() => {
    if (allErrors.length > 0) {
      setIsAlarmChecked(false); // 새로운 알람이 있을 경우 빨간점 표시
    }
  }, [allErrors.length]);

 

3. 특정버튼을 클릭시 알람이 체크된 것을 표시하고 isAlarmChecked을 컴포넌트에 전달

setIsAlarmChecked(true)