02/03

💡 Part 1: 항공권 목록 필터링

🧩 Main 컴포넌트에서 항공편을 조회합니다
✓ Main 컴포넌트 내 search 함수는 검색 조건을 담고 있는 상태 객체 condition을 업데이트해야 합니다

  > const [condition, setCondition] = useState({
departure: 'ICN', });

    const search = ({ departure, destination }) => {
if (
  condition.departure !== departure ||
  condition.destination !== destination
) {
  console.log('condition 상태를 변경시킵니다');
  setCondition({ departure, destination }) /* search가 실행될때 setCondition으로 condition에  departure, destination상태를 업데이트 */
}

};

🧩 Search 컴포넌트를 통해 상태 끌어올리기를 학습합니다
✓ 검색 화면이 Search 컴포넌트로 분리되어야 합니다
✓ Search 컴포넌트에는 상태 변경 함수 search가 onSearch props로 전달되어야 합니다

  > <main>
    <h1>여행가고 싶을 땐, States Airline</h1>
    <Search onSearch={search} />  /* Search 컴포넌트로 화면을 표시함과 동시에 search 함수를 OnSearch로 Search 컴포넌트에 전달 */
    <div className="table">
      <div className="row-header">
        <div className="col">출발</div>
        <div className="col">도착</div>
        <div className="col">출발 시각</div>
        <div className="col">도착 시각</div>
        <div className="col"></div>
      </div>
    </div>

✓ 상태 변경 함수 search는 Search 컴포넌트의 검색 버튼 클릭 시 실행되어야 합니다

function Search({onSearch}) {
const [textDestination, setTextDestination] = useState('');

const handleChange = (e) => {
setTextDestination(e.target.value.toUpperCase());
};

const handleKeyPress = (e) => {
if (e.type === 'keypress' && e.code === 'Enter') {
handleSearchClick();
}};

const handleSearchClick = () => {
console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다');
onSearch({departure: 'ICN', destination: textDestination}) / 검색 버튼을 누르거나, 엔터를 치면(handleKeyPress) Prop에서 Onsearch명으로 받은 search함수 실행 /
};

💡 Part 2: AJAX 요청
🧩 Side Effect는 useEffect에서 다뤄야 합니다
✓ 검색 조건이 바뀔 때마다, FlightDataApi의 getFlight를 검색 조건과 함께 요청해야 합니다
✓ getFlight의 결과를 받아, flightList 상태를 업데이트해야 합니다
✓ 더이상, 컴포넌트 내 필터 함수 filterByCondition를 사용하지 않습니다
✓ 더이상, 하드코딩된 flightList JSON을 사용하지 않습니다 (초기값은 빈 배열로 둡니다)
✓ getFlight 요청이 다소 느리므로, 로딩 상태에 따라 LoadingIndicator 컴포넌트를 표시해야 합니다

const [isLoading, setIsLoading] = useState(false); /* 로딩상태를 위한 변수, 상태가 true일경우 로딩화면 나타남

useEffect(() =>{
setIsLoading(true) / getFlight 실행전 로딩 화면 나타남 /
getFlight(condition) / getFlight함수에 condition변수 넣어서 실행 /
.then((filterlist) =>{
setFlightList(filterlist) / 실행에 성공한 경우 setFlightList에 전달 /
setIsLoading(false) / 로딩 화면 사라지게함 /
})
}, [condition]) / condition 값이 변경될때마다 실행 /

🧩 FlightDataApi에서 기존 구현 대신, REST API를 호출하도록 바꿉니다
✓ 검색 조건과 함께 StatesAirline 서버에서 항공편 정보를 요청(fetch)합니다

getFlight(filterBy = {}) {
let nothing = '' / 변수 nothing 선언 /
if(filterBy.departure){
nothing += departure={filterBy.departure}& /* 변수 nothing에 departure값 할당 */ } if(filterBy.destination){ nothing += destination={filterBy.destination} / 변수 nothing에 destination값 할당 /
}
let url = http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?${nothing} / 받아올 url에 변수 nothing넣어서 어떤 값을 가져올지 할당 /

return fetch(url).then((res) => res.json()) / json파일로 받아옴 /
}

Main 컴포넌트

import Head from 'next/head';
import { useEffect, useState } from 'react';
import { getFlight } from '../api/FlightDataApi';
import FlightList from './component/FlightList';
import LoadingIndicator from './component/LoadingIndicator';
import Search from './component/Search';
import Debug from './component/Debug';
// 후반 테스트를 진행할 때 아래 import를 삭제합니다.


export default function Main() {
  // 항공편 검색 조건을 담고 있는 상태
  const [condition, setCondition] = useState({
    departure: 'ICN',
  });
  const [flightList, setFlightList] = useState([]);
  

  // 주어진 검색 키워드에 따라 condition 상태를 변경시켜주는 함수
  const search = ({ departure, destination }) => {
    if (
      condition.departure !== departure ||
      condition.destination !== destination
    ) {
      console.log('condition 상태를 변경시킵니다');

      // TODO: search 함수가 전달 받아온 '항공편 검색 조건' 인자를 condition 상태에 적절하게 담아보세요.
      setCondition({ departure, destination })
    }
  };

  const filterByCondition = (flight) => {
    let pass = true;
    if (condition.departure) {
      pass = pass && flight.departure === condition.departure;
    }
    if (condition.destination) {
      pass = pass && flight.destination === condition.destination;
    }
    return pass;
  };

  global.search = search; // 실행에는 전혀 지장이 없지만, 테스트를 위해 필요한 코드입니다. 이 코드는 지우지 마세요!

  // TODO: Effeck Hook을 이용해 AJAX 요청을 보내보세요.
  // TODO: 더불어, 네트워크 요청이 진행됨을 보여주는 로딩 컴포넌트(<LoadingIndicator/>)를 제공해보세요.
  // useEffect(() => {
  // }, [])
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() =>{
    setIsLoading(true)
    getFlight(condition)
     .then((filterlist) =>{  
       setFlightList(filterlist) 
       setIsLoading(false)
      })
   }, [condition])

  // TODO: 테스트 케이스의 지시에 따라 search 함수를 Search 컴포넌트로 내려주세요.
  return (
    <div>
      <Head>
        <title>States Airline</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>여행가고 싶을 땐, States Airline</h1>
        <Search onSearch={search} />
        <div className="table">
          <div className="row-header">
            <div className="col">출발</div>
            <div className="col">도착</div>
            <div className="col">출발 시각</div>
            <div className="col">도착 시각</div>
            <div className="col"></div>
          </div>
        </div>
        {isLoading ? <LoadingIndicator /> : <FlightList list={flightList} />}
        <div className="debug-area">
          <Debug condition={condition} />
        </div>
        <img id="logo" alt="logo" src="codestates-logo.png" />
      </main>
    </div>
  );
}

Search 컴포넌트

import { useState } from 'react';

function Search({onSearch}) {
const [textDestination, setTextDestination] = useState('');

const handleChange = (e) => {
setTextDestination(e.target.value.toUpperCase());
};

const handleKeyPress = (e) => {
if (e.type === 'keypress' && e.code === 'Enter') {
handleSearchClick();
}
};

const handleSearchClick = () => {
console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다');
onSearch({departure: 'ICN', destination: textDestination})

// TODO: 지시에 따라 상위 컴포넌트에서 props를 받아서 실행시켜 보세요.

};

return (

<fieldset>
  <legend>공항 코드를 입력하고, 검색하세요</legend>
  <span>출발지</span>
  <input id="input-departure" type="text" disabled value="ICN"></input>
  <span>도착지</span>
  <input
    id="input-destination"
    type="text"
    value={textDestination}
    onChange={handleChange}
    placeholder="CJU, BKK, PUS 중 하나를 입력하세요"
    onKeyPress={handleKeyPress}
  />
  <button id="search-btn" onClick={handleSearchClick}>
    검색
  </button>
</fieldset>

);
}

export default Search;

FlightDataApi 컴포넌트

import flightList from '../resource/flightList';
import fetch from 'node-fetch';

if (typeof window !== 'undefined') {
localStorage.setItem('flight', JSON.stringify(flightList));
}

export function getFlight(filterBy = {}) {
// HINT: 가장 마지막 테스트를 통과하기 위해, fetch를 이용합니다. 아래 구현은 완전히 삭제되어도 상관없습니다.
// TODO: 아래 구현을 REST API 호출로 대체하세요.
let nothing = ''
if(filterBy.departure){
nothing += departure=${filterBy.departure}&
}
if(filterBy.destination){
nothing += destination=${filterBy.destination}
}
let url = http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?${nothing}

return fetch(url).then((res) => res.json())
}