Select Git revision
userManagementController.js
-
Jinyeong Kim authoredJinyeong Kim authored
search.js 7.25 KiB
import React, { useState, createContext, useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import searchStyles from './search.module.css';
import CreateRecruit from './recruit/createRecruit';
import MyChannelModal from './channel/myChannelModal';
import ExistingChannel from './channel/existingChannel';
export const SearchContext = createContext();
function Search({ currentPage, onUrlGenerated, onFirstQueryString, onSecondQueryString }){
const [isModalOpen, setIsModalOpen] = useState(false);
const [searchTerm, setSearchTerm] = useState('');
const [searchType, setSearchType] = useState('title');
const [sortType, setSortType] = useState('');
const [haveChannel, sethaveChannel]=useState(true);
const [myChannelData, setmyChannelData]=useState('');
const [fetchCount, setfetchCount] = useState(0);
const searchValue = {
fetchCount,
setfetchCount,
};
const navigate = useNavigate();
const openModal = () => {
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
};
const goToRecruit = ()=>{
navigate("/recruits");
}
const goToSubscribe = ()=>{
navigate("/subscribes");
}
const fetchChannelData = async () => {
try {
openModal();
const response = await fetch('/api/channels/mychannel');
const backendData = await response.json();
console.log(backendData);
if (backendData.data ) {
sethaveChannel(true);
// openModal();
setmyChannelData(backendData);
}
else{
sethaveChannel(false);
}
} catch (error) {
console.error('Error fetching weekly schedules:', error);
}
};
useEffect(() => {
if (fetchCount !== 0) {
fetchChannelData();
}
}, [fetchCount]);
const handleSearch = () => {
let searchURL = `${currentPage}/search`;
let firstQueryString = '?';
let secondQueryString = '&';
if (searchType === 'title') {
firstQueryString += `title=${searchTerm}`;
secondQueryString += `title=${searchTerm}`;
} else if (searchType === 'content') {
firstQueryString += `content=${searchTerm}`;
secondQueryString += `content=${searchTerm}`;
} else if (searchType === 'writer') {
firstQueryString += `writer=${searchTerm}`;
secondQueryString += `writer=${searchTerm}`;
} else if (searchType === 'double') {
firstQueryString += `title=${searchTerm}&content=${searchTerm}`;
secondQueryString += `title=${searchTerm}&content=${searchTerm}`;
}
if (sortType !== ''){
firstQueryString += `&sort=${sortType}`;
secondQueryString += `&sort=${sortType}`;
}
onUrlGenerated(searchURL);
onFirstQueryString(firstQueryString);
onSecondQueryString(secondQueryString);
};
return(
<div>
<div className={searchStyles.search}>
<div className={searchStyles.top}>
<div className={searchStyles.input}>
<input
className={searchStyles.content}
type='search'
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
<div onClick={handleSearch}>
<svg className={searchStyles.icon} width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_40_6242)">
<path d="M14.8542 13.9808H14.0971L13.8287 13.722C14.7679 12.6295 15.3333 11.2112 15.3333 9.66825C15.3333 6.22784 12.5446 3.43909 9.10417 3.43909C5.66375 3.43909 2.875 6.22784 2.875 9.66825C2.875 13.1087 5.66375 15.8974 9.10417 15.8974C10.6471 15.8974 12.0654 15.332 13.1579 14.3928L13.4167 14.6612V15.4183L18.2083 20.2003L19.6362 18.7724L14.8542 13.9808ZM9.10417 13.9808C6.71792 13.9808 4.79167 12.0545 4.79167 9.66825C4.79167 7.282 6.71792 5.35575 9.10417 5.35575C11.4904 5.35575 13.4167 7.282 13.4167 9.66825C13.4167 12.0545 11.4904 13.9808 9.10417 13.9808Z" fill="#323232"/>
</g>
<defs>
<clipPath id="clip0_40_6242">
<rect width="23" height="23" fill="white" transform="translate(0 0.564087)"/>
</clipPath>
</defs>
</svg>
</div>
</div>
<select
className={searchStyles.parameter}
value={searchType}
onChange={(e) => setSearchType(e.target.value)}
>
<option value="title">제목</option>
<option value="content">내용</option>
<option value="double">제목+내용</option>
<option value="writer">작성자</option>
</select>
<select
className={searchStyles.sort}
value={sortType}
onChange={(e) => setSortType(e.target.value)}
>
<option value="">선택</option>
<option value="latest">최신순</option>
<option value="oldest">오래된순</option>
</select>
</div>
<div className={searchStyles.bottom}>
<div className={searchStyles.goto}>
<button className={`${searchStyles.commonStyle} ${currentPage === "recruits" ? searchStyles.choose : searchStyles.notChoose}`} onClick={goToRecruit}>recruitment</button>
<button className={`${searchStyles.commonStyle} ${currentPage ==="subscribes" ? searchStyles.choose : searchStyles.notChoose }`} onClick={goToSubscribe}>subscribe</button>
</div>
{currentPage === 'recruits' && (
<button className={searchStyles.create} onClick={openModal}>+</button>
)}
{currentPage === 'subscribes' && (
<button className={searchStyles.channelCreate} onClick={fetchChannelData}>My Channel</button>
)}
</div>
</div>
{currentPage === 'recruits' && (
<CreateRecruit isOpen={isModalOpen} onClose={closeModal}/>
)}
{currentPage === 'subscribes' && (!haveChannel)&&(
<MyChannelModal isOpen={isModalOpen} onClose={closeModal}/>
)}
<SearchContext.Provider value={searchValue}>
{currentPage==='subscribes' && (haveChannel) &&(
<ExistingChannel isOpen={isModalOpen} onClose={closeModal} data={myChannelData}/>
)}
</SearchContext.Provider>
</div>
)
}
export default Search;