Skip to content

Commit

Permalink
최신화 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@sehyun0518
sehyun0518 committed Feb 17, 2024
1 parent b907e07 commit a91e570
Showing 1 changed file with 49 additions and 91 deletions.
140 changes: 49 additions & 91 deletions src/pages/SearchResultPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,28 @@
import { escapeHTML } from "@/utils/string";
import { useState, useEffect} from "react";
import { useLocation } from "react-router-dom";
import Styled from "@/styles/SearchResult";
import TagInput from "@/components/SearchPage/SearchComponent";
import SearchNotFound from "@/components/SearchPage/SearchNotFound";
import { escapeHTML } from '@/utils/string';
import { useState, useEffect } from 'react';
import { createSearchParams, useLocation } from 'react-router-dom';
import Styled from '@/styles/SearchResult';
import TagInput from '@/components/SearchPage/SearchComponent';
import SearchNotFound from '@/components/SearchPage/SearchNotFound';
import SearchIcon from '@/assets/icons/search.svg?react';
import { IVideo } from "@/models/search";
import { searchAPI } from "@/apis/search";
import { IVideo } from '@/models/search';
import { searchAPI } from '@/apis/search';
import { useNavigate } from 'react-router-dom';

import SearchResultBox from '@/components/SearchPage/SearchResultBox';

const SearchResult = () => {
const [tags, setTags] = useState<string[]>([]);
const [input, setInput] = useState('');
const [searchType, setSearchType] = useState(true); // True : keyword | False : hashTag
const [loading, setLoading] = useState(false);
const [errormsg, setErrormsg] = useState('');
const [data, setData] = useState<IVideo[]>([]);
const location = useLocation();
const [tags, setTags] = useState<string[]>([]);
const [input, setInput] = useState('');
const [searchType, setSearchType] = useState(true); // True : keyword | False : hashTag
const [loading, setLoading] = useState(false);
const [errormsg, setErrormsg] = useState('');
const [data, setData] = useState<IVideo[]>([]);
const location = useLocation();
const searchNav = useNavigate();

useEffect(() => {
const searchParams = new URLSearchParams(location.search);

setLoading(true);

Expand All @@ -27,55 +32,10 @@ const SearchResult = () => {
const inputValues = searchParams.get('value') as string;
const keywordtype = searchParams.get('type') as string;

switch(searchParams.get('type')) {
case 'keyword':
setSearchType(true);
const inputValues = searchParams.get('value') as string;
const keywordtype = searchParams.get('type') as string

setInput(inputValues);
handleSearchAPI(inputValues, keywordtype, ' ');
if(data.length === 0){
setErrormsg(inputValues)
}
break;
case 'hashtag':
const tagValues = searchParams.get('value') as string;
const tagtype = searchParams.get('type') as string;
setTags(tagValues.replace(/\ /g, '').split('&'))
setSearchType(false);
handleSearchAPI(tagValues, tagtype, '&');
if(data.length === 0){
const changeSpace = tagValues.replace(/\&/g, ' ');
setErrormsg(changeSpace)
}
break;

default:
// 기타 에러
}
}, [location.search])

const handleSearchAPI = async (inputValues : string, type : string, splittype : string) => {
try {
const keywords = inputValues.split(splittype);

const requests = keywords.map((value) => {
if (type === 'hashtag') {
value = value.replace('#', '');
}
const searchData = (searchAPI(type, value));
return searchData.then(value => value.data.result);
})
const responses = await Promise.all(requests);
responses.forEach((response) => {
const ivideos = response.videos as IVideo[];
dataDuplicateHandler(ivideos, inputValues);
})
} catch (error) {

} finally {
setLoading(false);
setInput(inputValues);
handleSearchAPI(inputValues, keywordtype, ' ');
if (data.length === 0) {
setErrormsg(inputValues);
}
break;
case 'hashtag':
Expand Down Expand Up @@ -157,24 +117,14 @@ const SearchResult = () => {
value: searchType ? input : tags.join('&'),
};

const dataDuplicateHandler = (videos : IVideo[], check : string) => {
const newData = videos.filter((value) => {
return !data.some((item) => item.video_id === value.video_id);
})
const mappingData = newData.map((video) => {
const markdata = {
...video,
title: formatContent(video.title, check),
description : formatContent(video.description, check),
content: formatContent(video.content, check)
};
setData([...data, markdata]);
});
mappingData;
}

searchNav({
pathname: '/search/result',
search: `?${createSearchParams(params)}`,
});
window.location.reload();
};

if(loading){
if (loading) {
return (
<div style={{ width: '100%', height: '100vh' }}>스켈레톤 페이지</div>
);
Expand All @@ -184,16 +134,24 @@ const SearchResult = () => {
<div
className="inputContainer"
style={{
height: '210px'
}}>
<div className='inputwrap' style={{width : '908px', height : '72px'}}>
<div className='input-inner' style={{width : '860px', height : '36px'}}>
<div className='input' style={{width : '770px', height : '36px'}}>
<SearchIcon width={36} height={36}/>
<TagInput tags={tags} input={input} searchType={searchType}
setTags={setTags} setInput={setInput} setSearchType={setSearchType}/>
</div>
</div>
height: '210px',
}}
>
<div className="inputwrap" style={{ width: '908px', height: '72px' }}>
<div
className="input-inner"
style={{ width: '860px', height: '36px' }}
>
<div className="input" style={{ width: '770px', height: '36px' }}>
<SearchIcon width={36} height={36} />
<TagInput
tags={tags}
input={input}
searchType={searchType}
setTags={setTags}
setInput={setInput}
setSearchType={setSearchType}
/>
</div>
<button
className="search-btn"
Expand Down

0 comments on commit a91e570

Please sign in to comment.