Newer
Older
import React, { useState, useEffect, useContext } from 'react';
import {Routes, Route, Link, useNavigate, Navigate } from 'react-router-dom';
import SearchMap from '../components/SearchMapByKeyword.js'
import { UserContext } from '../Context.js';
import Article from '../components/Article.js';
import axios from 'axios';
axios.defaults.withCredentials = true;
const userContext = useContext(UserContext);
const navigate = useNavigate();
function MoveTo(link){
navigate(link)
}
const [location, setLocation] = useState({
keyword: "",
center: { lat: null, lng: null }
});
useEffect(() => {
const session = userContext.CheckSession()
.then((response) => {
if (!response.data) {
alert("세션이 만료되었습니다. 다시 로그인 바랍니다.")
MoveTo('/login')
// requestLoadArticle()
// .then((response) => {
// console.log(response)
// setArticleList(response.data)
// })
})
.catch((response)=>{
console.log("error!:LogOut")
console.log(response)
})
}, []);
let listItem = [];
listItem = articleList.map((article)=>{
return(
<Article
key={article._id}
data={article}
></Article>
)
})
const onSubmit = e => {
e.preventDefault();
if (!location.keyword){
alert("검색대상을지정해주세요");
return
}
requestLoadArticleByKeyword(location.keyword)
.then((response) => {
console.log(response)
setArticleList(response.data)
})
};
return (
<div style={{display: 'flex'}}>
<div className="search">
<h1>검색페이지입니다.</h1>
<p>선택한 키워드로 검색합니다.</p>
<form onSubmit={onSubmit} style={{display: 'flex'}}>
<input readonly value={location.keyword} type="text"></input>
<button type="submit">검색!</button>
<button type="button" onClick={()=>{
setLocation({
keyword: "",
center: { lat: null, lng: null }
})}}>선택 해제</button>
</form>
<h1>검색결과 {listItem.length} 개 확인</h1>
{listItem}
</div>
</div>
async function requestLoadArticle() {
const response = await axios({
url: 'http://localhost:8080/article', // 통신할 웹문서
method: 'get', // 통신할 방식
});
return response;
}
async function requestLoadArticleByKeyword(keyword) {
const response = await axios({
url: `http://localhost:8080/article/search/${keyword}`, // 통신할 웹문서
method: 'get', // 통신할 방식
});
return response;
}