47일차 TIL(props 받아오기 / 페이지 교체)

 

props 문제로 꽤나 시간을 보냈다.

 

const Facilities = ({ setFacility, setFilteredDataByArea }) => {
  const navDetailPage = (facility) => {
    setFacility(facility);
  };
  const dispatch = useDispatch();
  const location = useSelector((state) => state.location);
  const { data: publicData, isLoading, isError } = useFetchPublicData();
  // const [filteredDataByArea, setFilteredDataByArea] = useState('');

  // 페이지네이션 관련 변수 및 state 선언
  const itemsPerPage = 10;
  const [currentPage, setCurrentPage] = useState(1);
  const totalItems = publicData?.length;
  const totalPage = Math.ceil(publicData?.length / itemsPerPage);

  // useFetchPublicData훅으로 불러온 api 데이터를 현재 사용자 위치와 가까운 순으로 정렬
  // 1.퍼블릭데이타 => 필터링이 있는 경우와 없는 경우로 나누고
  // 2.상단의 카테고리 선택 값 여부를 스테이트로 내려서
  // 3. 스테이트가 있다면 sort를 해주기전에 먼저 필터링
  // 4. 스테이트가 없다면 전체를 보여주기
  const sortPublicDataByDis =
    // (
    //  ㄴ setFilteredDataByArea
    //     ? publicData?.filter((publicData) => publicData.AREANM === setFilteredDataByArea)
    //     : publicData || null
    // )?
    publicData
      .filter((publicData) => publicData.AREANM == setFilteredDataByArea)
      .sort((a, b) => {
        const dx = calDistance(location.longitude, location.latitude, a.X, a.Y);
        const dy = calDistance(location.longitude, location.latitude, b.X, b.Y);
        return dx - dy;
      });

  useEffect(() => {
    dispatch(setSortedData(sortPublicDataByDis));
  }, [dispatch, sortPublicDataByDis]);

  if (isLoading) return <h3>로딩 중 입니다</h3>;
  if (isError) {
    return (
      <>
        <p>에러가 발생하였습니다</p>
        <p>{publicData.error.toString()}</p>
      </>
    );
  }

  // 현재 페이지 위치에 따라 10개씩 보여줄 데이터
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;
  const sliceData = sortPublicDataByDis.slice(startIndex, endIndex);

  return (
    <>
      <StyledFacilitiesContainer>
        <h2>Reservation Data</h2>
        <StyledItemListBox>
          <p>총 {totalItems}개</p>
          <p>
            현재 페이지 {currentPage}/{totalPage}
          </p>
          <ul>
            {sliceData.map((facility) => (
              <StyledItemBox>
                <li key={facility.SVCID} onClick={() => navDetailPage(facility)}>
                  <p>
                    <span>{facility.AREANM}</span> <span>{facility.MINCLASSNM}</span>
                  </p>
                  <p>{facility.SVCNM}</p>
                </li>
              </StyledItemBox>
            ))}
          </ul>
        </StyledItemListBox>
        <Paging currentPage={currentPage} totalItems={totalItems} setCurrentPage={setCurrentPage} />
      </StyledFacilitiesContainer>
    </>
  );
};

export default Facilities;
`;

 

홈에서 

const Home = ({ setFilteredDataByArea }) => {
  const dispatch = useDispatch();
  const { location, error } = useCurrentLocation();
  const [facility, setFacility] = useState(null);

  console.log(location);

  useEffect(() => {
    if (location) {
      dispatch(setLocation({ latitude: location.latitude, longitude: location.longitude }));
    }
  }, [dispatch, location]);

  return (
    <>
      <ContainerWrapper>
        <StyledMain>
          <TitleTag>Now Loading Map</TitleTag>
          <div>
            <MapComponent />
          </div>
          <TextTag>💥추천 영상</TextTag>
          <UlTag>
            <LiTag>1</LiTag>
            <LiTag>2</LiTag>
            <LiTag>3</LiTag>
            <LiTag>4</LiTag>
          </UlTag>
        </StyledMain>
        {facility ? (
          <Detail setFacility={setFacility} facility={facility} />
        ) : (
          <Facilities setFilteredDataByArea={setFilteredDataByArea} setFacility={setFacility} />
        )}
      </ContainerWrapper>
    </>
  );
};