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 [articleList, setArticleList] = useState([])
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');
}
else {
// requestLoadArticle()
// .then((response) => {
// console.log(response)
// setArticleList(response.data)
// })
}
})
.catch((response) => {
console.log("error!:LogOut")
console.log(response)
useEffect(() => {
if (!location.keyword) {
return;
}
requestLoadArticleByKeyword(location.keyword)
.then((response) => {
console.log(response);
setArticleList(response.data);
});
}, [location.keyword]);
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 style={{ textAlign: 'center' }}>검색</h1>
<SearchMap loc={location} setLoc={setLocation}></SearchMap>
</div>
<div className="searchresult">
<h3>{(articleList.length === 0 ? '검색결과 없음' : (`검색결과 ${listItem.length} 개 확인`))}</h3>
{listItem}
</div>
</div>
const response = await axios({
url: 'http://localhost:8080/article', // 통신할 웹문서
method: 'get', // 통신할 방식
});
return response;
}
const response = await axios({
url: `http://localhost:8080/article/search/${keyword}`, // 통신할 웹문서
method: 'get', // 통신할 방식
});
return response;