Stateairline client
16357 ワード
Main.js
export default function Main() {
const [condition, setCondition] = useState({
departure: 'ICN'
})
const [flightList, setFlightList] = useState(json)
const search = ({ departure, destination }) => {
if (condition.departure !== departure || condition.destination !== destination) {
console.log('condition 상태를 변경시킵니다')
setCondition({ departure, destination })
// TODO:
}
}
const [isloading, setisloading] = useState(false)
useEffect(()=> {
setisloading(true)
getFlight(condition)
.then(res => {
setFlightList(res)
setisloading(false)
})
}, [condition]
)
<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>
{isloading ? <LoadingIndicator /> : <FlightList list={flightList}/>}
</div>
Search.js
const handleKeyPress = (departure, destination, e) => {
if (e.type === 'keypress' && e.code === 'Enter') {
handleSearchClick(departure, destination)
}
}
const handleSearchClick = (departure, destination) => {
console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다')
onSearch({departure, destination})
// TODO:
}
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={(e) => handleKeyPress("ICN", textDestination, e)} />
<button id="search-btn" onClick={() => handleSearchClick("ICN", textDestination)}>검색</button>
</fieldset>
}
FlightDataApi.js
export function getFlight(filterBy = {}) {
// HINT: 가장 마지막 테스트를 통과하기 위해, fetch를 이용합니다. 아래 구현은 완전히 삭제되어도 상관없습니다.
// TODO: 아래 구현을 REST API 호출로 대체하세요.
let endpoint = 'http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?departure=ICN'
if (filterBy.destination) {
endpoint = `${endpoint}&destination=${filterBy.destination}`
}
return fetch(endpoint)
.then(res => res.json())
Reference
この問題について(Stateairline client), 我々は、より多くの情報をここで見つけました https://velog.io/@qjastar/Stateairline-clientテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol