From 5a834105d2f449bc5d9bc05299443504ff59faba Mon Sep 17 00:00:00 2001
From: chaerin <dbcofls6961@ajou.ac.kr>
Date: Sun, 10 Dec 2023 02:59:34 +0900
Subject: [PATCH] feat: upload search
---
src/components/infiniteScroll.js | 72 +++++++++++++++++--------
src/components/recruit/modifyRecruit.js | 1 +
src/components/recruit/recruitList.js | 7 +--
3 files changed, 53 insertions(+), 27 deletions(-)
diff --git a/src/components/infiniteScroll.js b/src/components/infiniteScroll.js
index 611e991..653d364 100644
--- a/src/components/infiniteScroll.js
+++ b/src/components/infiniteScroll.js
@@ -6,20 +6,23 @@ import {ChannelItem} from "./channel/channelList";
function InfiniteScroll(props){
const [items, setItems] = useState([]);
const [minId, setMinId] = useState(0);
+ const [minDate, setMinDate] = useState('');
const [isLoading, setIsLoading] = useState(false);
+ const [search, setSearch] =useState([]);
+
const page = props.pagename;
const queryString1 = props.queryString1;
const queryString2 = props.queryString2;
+ const min = props.min;
const initialFetchData = async ()=>{
try{
const response = await fetch(`/api/${page}${queryString1}`);
const jsonData = await response.json();
-
- const newData = jsonData[page];
- setMinId(jsonData['minId']);
if(page==='channels'){
+ setMinDate(jsonData['minDate']);
+ const newData = jsonData[page];
if (newData.length > 0) {
const components = [];
for (let i = 0; i < newData.length; i += 2) {
@@ -33,21 +36,31 @@ function InfiniteScroll(props){
);
components.push(component);
- console.log('ne', newData[i]);
}
setItems((prevItem) => [...prevItem, ...components]);
}
- }else {
-
+ }else if(page === 'recruits'){
+ setMinId(jsonData['minId']);
+ const newData = jsonData[page];
if(newData.length > 0) {
const components = newData.map((item) => (
<PageItem data={item}/>
));
-
+
setItems(prevItem => [...prevItem, ...components]);
}
- console.log(`/api/${page}${queryString1}`);
- }
+ } else{
+ setMinId(jsonData['minId']);
+ const newData = jsonData['recruits'];
+ if(newData.length > 0) {
+ const components = newData.map((item) => (
+ <PageItem data={item}/>
+ ));
+
+ setSearch([]);
+ setSearch(prevItem => [...prevItem, ...components]);
+ }
+ }
} catch(error){
console.log('Error during fetch:', error);
@@ -56,24 +69,26 @@ function InfiniteScroll(props){
useEffect(() => {
initialFetchData(); // 최초 렌더링 시에 데이터 가져오기
- console.log(`/api/${page}${queryString1}`);
}, [page, queryString1, queryString2]);
const fetchData = async ()=>{
- if (isLoading || minId === 0) return;
+ if (isLoading || minId === 0 || minDate === null) return;
setIsLoading(true);
try{
- const response = await fetch(`/api/${page}?minId=${minId}${queryString2}`);
- console.log(`/api/${page}?minId=${minId}${queryString2}`);
+ const response = '';
+ if(page === 'channels'){
+ response = await fetch(`/api/${page}?${min}=${minDate}${queryString2}`);
+ }else{
+ response = await fetch(`/api/${page}?${min}=${minId}${queryString2}`);
+ }
+
const jsonData = await response.json();
-
- const newData = jsonData[page];
- setMinId(jsonData['minId']);
if(page==='channels'){
-
+ setMinId(jsonData['minDate']);
+ const newData = jsonData[page];
if (newData.length > 0) {
const components = [];
for (let i = 0; i < newData.length; i += 2) {
@@ -91,8 +106,9 @@ function InfiniteScroll(props){
}
setItems((prevItem) => [...prevItem, ...components]);
}
- }else {
-
+ }else if(page==='recruits'){
+ setMinId(jsonData['minId']);
+ const newData = jsonData[page];
if(newData.length > 0) {
const components = newData.map((item) => (
<PageItem data={item}/>
@@ -100,7 +116,17 @@ function InfiniteScroll(props){
setItems(prevItem => [...prevItem, ...components]);
}
- }
+ } else{
+ setMinId(jsonData['minId']);
+ const newData = jsonData["recruits"];
+ if(newData.length > 0) {
+ const components = newData.map((item) => (
+ <PageItem data={item}/>
+ ));
+
+ setSearch(prevItem => [...prevItem, ...components]);
+ }
+ }
} catch(error){
console.log('Error during fetch:', error);
@@ -133,7 +159,11 @@ function InfiniteScroll(props){
return (
<div className="itemList">
- {items}
+ {page === "recruits" || page === "channels" ?(
+ items
+ ):(
+ search
+ )}
{/* 로딩 중일 때 로딩 표시 */}
{isLoading && <div className={InfiniteScrollStyles.loading}>Loading...</div>}
diff --git a/src/components/recruit/modifyRecruit.js b/src/components/recruit/modifyRecruit.js
index a29b2bf..3f763b0 100644
--- a/src/components/recruit/modifyRecruit.js
+++ b/src/components/recruit/modifyRecruit.js
@@ -53,6 +53,7 @@ const ModifyRecruit=({isOpen, onClose, data})=>{
const handleSave = (e) => {
e.preventDefault()
+
if(formData.info.timeCategory === "D"){
modifyInfo({
...formData,
diff --git a/src/components/recruit/recruitList.js b/src/components/recruit/recruitList.js
index ab87b29..84e7ab6 100644
--- a/src/components/recruit/recruitList.js
+++ b/src/components/recruit/recruitList.js
@@ -146,7 +146,6 @@ function RecruitList(){
const [generatedUrl, setGeneratedUrl] = useState('recruits');
const [firstQueryString, setFirstQueryString] = useState('');
const [secondQueryString, setSecondQueryString] = useState('');
- const [forceRender, setForceRender] = useState(false);
const handleUrlGeneration = (url) => {
setGeneratedUrl(url);
@@ -159,11 +158,6 @@ function RecruitList(){
const handleSecondQueryString = (url) => {
setSecondQueryString(url);
};
-
- useEffect(() => {
- setForceRender((prev) => !prev);
- console.log('Component has been re-rendered');
- }, [generatedUrl, firstQueryString, secondQueryString])
return(
<div className={recruitListStyles.RecruitList}>
@@ -177,6 +171,7 @@ function RecruitList(){
pagename={generatedUrl}
queryString1={firstQueryString}
queryString2={secondQueryString}
+ min='minId'
/>
</div>
)
--
GitLab