안형욱

feat: search logic 추가

......@@ -134,9 +134,7 @@ const Header = () => {
/>
</DropDownWrap>
</DropDownContainer>
<InputBlock color="blue" fontsize="20px" width="850px" display="">
<input />
</InputBlock>
<InputBlock color="blue" fontsize="20px" width="850px" display="" />
</SearchContainer>
<MenuContainer>
<ul>
......
......@@ -2,8 +2,11 @@ import React, { useState, useEffect } from 'react';
import { TextInput } from '@mantine/core';
import styled from 'styled-components';
import { useHistory, useLocation } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import SearchBox from './SearchBox';
import { inputColorMap } from '../../lib/styles/palette';
import { esApi } from '../../lib/api/elasticsearch';
import { setParsedDocuments } from '../../features/parsedDocumentsSlice';
const InputBlock = styled.div`
width: ${props => props.width};
......@@ -40,10 +43,16 @@ const MyInput = ({
const history = useHistory();
const search = useLocation();
const name = search.search.substring(7);
const dispatch = useDispatch();
useEffect(() => {
const setSearchDatas = async () => {
const { results } = await esApi.search(name);
dispatch(setParsedDocuments(results));
};
setQuery(name);
}, []);
setSearchDatas();
}, [name]);
return (
<InputBlock
color={color}
......
import { createSlice } from '@reduxjs/toolkit';
const parsedDocumentsSlice = createSlice({
name: 'parsedDocuments',
initialState: {
documents: [],
},
reducers: {
setParsedDocuments: (state, action) => {
state.documents = action.payload;
},
},
});
export const { setParsedDocuments } = parsedDocumentsSlice.actions;
export default parsedDocumentsSlice.reducer;
import React from 'react';
import ReactDOM from 'react-dom';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import App from './App';
import rootReducer from './reducers';
const store = configureStore({
reducer: rootReducer,
});
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
......
......@@ -9,7 +9,6 @@ const Main = styled.div`
display: flex;
align-items: center;
justify-content: center;
padding-left: 7%;
`;
const Container = styled.div`
......
import React from 'react';
import { useSelector } from 'react-redux';
import Header from '../components/Header';
import Main from '../components/document/index';
import Main from '../components/document';
const SearchPage = () => {
const parsedDocuments = useSelector(state => state.parsedDocuments);
if (parsedDocuments.length === 0) {
return (
<>
<Header />
<div>검색 결과가 없습니다.</div>
</>
);
}
return (
<>
<Header />
......
import { combineReducers } from 'redux';
import parsedDocumentsReducer from '../features/parsedDocumentsSlice';
export default combineReducers({
parsedDocuments: parsedDocumentsReducer,
});