2021-1-capstone-design1 / GCL_Project1

Go to a project
Toggle navigation Toggle navigation pinning
안형욱
6af7a58a 1 parent 35d10318

feat: option 검색 기능 추가

Inline Side-by-side
Showing 2 changed files with 42 additions and 14 deletions
...@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; ...@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
2 import { TextInput } from '@mantine/core'; 2 import { TextInput } from '@mantine/core';
3 import styled from 'styled-components'; 3 import styled from 'styled-components';
4 import { useHistory, useLocation } from 'react-router-dom'; 4 import { useHistory, useLocation } from 'react-router-dom';
5 -import { useDispatch } from 'react-redux'; 5 +import { useDispatch, useSelector } from 'react-redux';
6 import SearchBox from './SearchBox'; 6 import SearchBox from './SearchBox';
7 import { inputColorMap } from '../../lib/styles/palette'; 7 import { inputColorMap } from '../../lib/styles/palette';
8 import { esApi } from '../../lib/api/elasticsearch'; 8 import { esApi } from '../../lib/api/elasticsearch';
...@@ -47,16 +47,27 @@ const MyInput = ({ ...@@ -47,16 +47,27 @@ const MyInput = ({
47 const name = decodeURIComponent( 47 const name = decodeURIComponent(
48 new URLSearchParams(search).get('query') || '' 48 new URLSearchParams(search).get('query') || ''
49 ); 49 );
50 + const option = decodeURIComponent(
51 + new URLSearchParams(search).get('option') || ''
52 + );
50 const dispatch = useDispatch(); 53 const dispatch = useDispatch();
54 + const { option: currentSearchOption } = useSelector(
55 + state => state.searchOption
56 + );
51 57
52 useEffect(() => { 58 useEffect(() => {
53 const setSearchDatas = async () => { 59 const setSearchDatas = async () => {
54 - const { results } = await esApi.search(name); 60 + if (option === '') {
55 - dispatch(setParsedDocuments(results)); 61 + const { results } = await esApi.search(name);
62 + dispatch(setParsedDocuments(results));
63 + } else {
64 + const { results } = await esApi.searchWithOption(name, option);
65 + dispatch(setParsedDocuments(results));
66 + }
56 }; 67 };
57 setQuery(name); 68 setQuery(name);
58 setSearchDatas(); 69 setSearchDatas();
59 - }, [name]); 70 + }, [name, option]);
60 71
61 return ( 72 return (
62 <InputBlock 73 <InputBlock
...@@ -84,7 +95,13 @@ const MyInput = ({ ...@@ -84,7 +95,13 @@ const MyInput = ({
84 alert('검색어를 입력 해 주세요.'); 95 alert('검색어를 입력 해 주세요.');
85 return; 96 return;
86 } 97 }
87 - const params = new URLSearchParams({ query }); 98 + const searchRequest = {};
99 + searchRequest.query = query;
100 + if (currentSearchOption === 'WRITER')
101 + searchRequest.option = 'writer';
102 + if (currentSearchOption === 'CONTENT')
103 + searchRequest.option = 'content';
104 + const params = new URLSearchParams(searchRequest);
88 history.push(`search?${decodeURIComponent(params.toString())}`); 105 history.push(`search?${decodeURIComponent(params.toString())}`);
89 } 106 }
90 }} 107 }}
...@@ -96,7 +113,13 @@ const MyInput = ({ ...@@ -96,7 +113,13 @@ const MyInput = ({
96 alert('검색어를 입력 해 주세요.'); 113 alert('검색어를 입력 해 주세요.');
97 return; 114 return;
98 } 115 }
99 - const params = new URLSearchParams({ query }); 116 + const searchRequest = {};
117 + searchRequest.query = query;
118 + if (currentSearchOption === 'WRITER') searchRequest.option = 'writer';
119 + if (currentSearchOption === 'CONTENT')
120 + searchRequest.option = 'content';
121 +
122 + const params = new URLSearchParams(searchRequest);
100 history.push(`search?${decodeURIComponent(params.toString())}`); 123 history.push(`search?${decodeURIComponent(params.toString())}`);
101 }} 124 }}
102 > 125 >
......
...@@ -19,12 +19,17 @@ export const esApi = { ...@@ -19,12 +19,17 @@ export const esApi = {
19 19
20 return res.data; 20 return res.data;
21 }, 21 },
22 - // searchByFilter: async (filters, searchWord = '') => { 22 + searchWithOption: async (searchWord, option) => {
23 - // // const res = await esInstance.post( 23 + const res = await esInstance.post(
24 - // // `/api/as/v1/engines/${process.env.REACT_APP_ENGINE_NAME}/search`, 24 + `/api/as/v1/engines/${process.env.REACT_APP_ENGINE_NAME}/search`,
25 - // // { 25 + {
26 - // // query: searchWord, 26 + query: searchWord,
27 - // // } 27 + search_fields: {
28 - // // ); 28 + [option]: {},
29 - // }, 29 + },
30 + }
31 + );
32 +
33 + return res.data;
34 + },
30 }; 35 };
......