bluejoyq

complete search loading

...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
2 "devToolsPort": 19002, 2 "devToolsPort": 19002,
3 "expoServerPort": 19000, 3 "expoServerPort": 19000,
4 "packagerPort": 19001, 4 "packagerPort": 19001,
5 - "packagerPid": 14964, 5 + "packagerPid": 24884,
6 "expoServerNgrokUrl": "https://s4-47j.anonymous.searchguide.exp.direct", 6 "expoServerNgrokUrl": "https://s4-47j.anonymous.searchguide.exp.direct",
7 "packagerNgrokUrl": "https://packager.s4-47j.anonymous.searchguide.exp.direct", 7 "packagerNgrokUrl": "https://packager.s4-47j.anonymous.searchguide.exp.direct",
8 - "ngrokPid": 3788 8 + "ngrokPid": 25980
9 } 9 }
......
This diff is collapsed. Click to expand it.
1 import React from 'react'; 1 import React from 'react';
2 import AppTabContainer from '../AppTabContainer/AppTabContainer'; 2 import AppTabContainer from '../AppTabContainer/AppTabContainer';
3 -import Loading from '../Loading/Loading';
4 import { connect } from 'react-redux'; 3 import { connect } from 'react-redux';
4 +import Loading from '../Loading/Loading';
5 5
6 const Main = ({ isLoading}) => { 6 const Main = ({ isLoading}) => {
7 if ( isLoading ) { 7 if ( isLoading ) {
...@@ -19,11 +19,10 @@ const Main = ({ isLoading}) => { ...@@ -19,11 +19,10 @@ const Main = ({ isLoading}) => {
19 } 19 }
20 } 20 }
21 21
22 -
23 const MainContainer = ({isLoading}) => { 22 const MainContainer = ({isLoading}) => {
24 return(<Main isLoading={isLoading} />) 23 return(<Main isLoading={isLoading} />)
25 } 24 }
26 25
27 -const mapStateToProps = (state) => ({isLoading : state.loading.isLoading})
28 -
29 -export default connect(mapStateToProps)(MainContainer);
...\ No newline at end of file ...\ No newline at end of file
26 +export default connect(
27 + ({search})=>({isLoading:search.isLoading})
28 +)(MainContainer);
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,9 +2,10 @@ import React from 'react'; ...@@ -2,9 +2,10 @@ import React from 'react';
2 import {View,Alert} from 'react-native'; 2 import {View,Alert} from 'react-native';
3 import { Searchbar } from 'react-native-paper'; 3 import { Searchbar } from 'react-native-paper';
4 import { connect } from 'react-redux'; 4 import { connect } from 'react-redux';
5 -import {toggle} from '../../reducers/loading'; 5 +import {change, submit} from '../../reducers/search';
6 6
7 -const voiceRecognition=()=>{ 7 +
8 +const voiceRecognition = () => {
8 Alert.alert( 9 Alert.alert(
9 '음성 인식', 10 '음성 인식',
10 '아직 구현 못함', 11 '아직 구현 못함',
...@@ -12,58 +13,35 @@ const voiceRecognition=()=>{ ...@@ -12,58 +13,35 @@ const voiceRecognition=()=>{
12 {text: '확인', onPress: () => {}}, 13 {text: '확인', onPress: () => {}},
13 ], 14 ],
14 ) 15 )
15 -} 16 +};
16 17
17 -class SearchBar extends React.Component { 18 +const SearchBar = ({ query, change, submit }) => {
18 - constructor(props){ 19 + return(
19 - super(props); 20 + <>
20 - this.state = { 21 + <View>
21 - query: '', 22 + <Searchbar
22 - }; 23 + placeholder="검색할 질문을 입력하세요."
23 - } 24 + onChangeText={change}
24 - 25 + value={query}
25 - queryChange=(query)=>{ 26 + icon='microphone'
26 - this.setState({ query: query }); 27 + onIconPress={voiceRecognition}
27 - } 28 + onSubmitEditing={submit}
29 + />
30 + </View>
31 + </>
32 + )
33 +};
28 34
29 - submit=()=>{
30 - this.props.toggleLoading();
31 - setTimeout(()=>{this.props.toggleLoading()},1000);
32 - this.setState({query:''});
33 - }
34 35
35 - voiceRecognition=()=>{ 36 +const SearchBarContainer = ({ query, change, submit }) => {
36 - Alert.alert( 37 + return(<SearchBar query={query} change={change} submit={submit} />)
37 - '음성 인식', 38 +};
38 - '아직 구현 못함',
39 - [
40 - {text: '확인', onPress: () => {}},
41 - ],
42 - )
43 - }
44 39
45 - render(){ 40 +export default connect(
46 - return( 41 + ({search})=> ({
47 - <> 42 + query: search.query
48 - <View> 43 + }),
49 - <Searchbar 44 + {
50 - placeholder="검색할 질문을 입력하세요." 45 + change,submit
51 - onChangeText={this.queryChange}
52 - value={this.state.query}
53 - icon='microphone'
54 - onIconPress={voiceRecognition}
55 - onSubmitEditing={this.submit}
56 - />
57 - </View>
58 - </>
59 - )
60 } 46 }
61 -}
62 -
63 -const SearchBarContainer = ({toggle}) => {
64 - return(<SearchBar toggleLoading={toggle} />)
65 -}
66 -
67 -const mapDispatchToProps = (dispatch) => ({toggle : ()=>{ dispatch( toggle() )}});
68 -
69 -export default connect(null,mapDispatchToProps)(SearchBarContainer);
...\ No newline at end of file ...\ No newline at end of file
47 +)(SearchBarContainer);
...\ No newline at end of file ...\ No newline at end of file
......
1 const axios = require('axios') 1 const axios = require('axios')
2 const filter = require('./filter') 2 const filter = require('./filter')
3 3
4 -export const SendToApi = async(searchdata) => { 4 +export const sendSearch = async(searchText) => {
5 - console.log(searchdata) 5 + console.log(searchText)
6 return new Promise((resolve,reject) => { 6 return new Promise((resolve,reject) => {
7 let isBlank_reg = "/\s\g" 7 let isBlank_reg = "/\s\g"
8 - if(searchdata=== "" || searchdata.length > 30 ){ 8 + if(searchText=== "" || searchText.length > 30 ){
9 resolve(JSON.stringify({ "return_code" : -1, "error_code": "검색 단어를 확인해 주세요!" })); 9 resolve(JSON.stringify({ "return_code" : -1, "error_code": "검색 단어를 확인해 주세요!" }));
10 } else{ 10 } else{
11 axios( 11 axios(
...@@ -17,7 +17,7 @@ export const SendToApi = async(searchdata) => { ...@@ -17,7 +17,7 @@ export const SendToApi = async(searchdata) => {
17 url: 'http://1.201.142.118:80/api/cliConnection', 17 url: 'http://1.201.142.118:80/api/cliConnection',
18 data: { 18 data: {
19 data:{ 19 data:{
20 - text: searchdata.replace(/\s{1,}/g,' ') 20 + text: searchText.replace(/\s{1,}/g,' ')
21 } 21 }
22 }, 22 },
23 method: "POST", 23 method: "POST",
......
1 +import test from '../assets/test.json'
2 +
3 +export const readTest = () => {
4 + let testResult = test;
5 + return testResult;
6 +}
...\ No newline at end of file ...\ No newline at end of file
...@@ -1603,6 +1603,22 @@ ...@@ -1603,6 +1603,22 @@
1603 "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", 1603 "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
1604 "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" 1604 "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
1605 }, 1605 },
1606 + "axios": {
1607 + "version": "0.19.0",
1608 + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz",
1609 + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==",
1610 + "requires": {
1611 + "follow-redirects": "1.5.10",
1612 + "is-buffer": "^2.0.2"
1613 + },
1614 + "dependencies": {
1615 + "is-buffer": {
1616 + "version": "2.0.4",
1617 + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
1618 + "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
1619 + }
1620 + }
1621 + },
1606 "babel-plugin-dotenv": { 1622 "babel-plugin-dotenv": {
1607 "version": "0.1.1", 1623 "version": "0.1.1",
1608 "resolved": "https://registry.npmjs.org/babel-plugin-dotenv/-/babel-plugin-dotenv-0.1.1.tgz", 1624 "resolved": "https://registry.npmjs.org/babel-plugin-dotenv/-/babel-plugin-dotenv-0.1.1.tgz",
...@@ -2834,6 +2850,29 @@ ...@@ -2834,6 +2850,29 @@
2834 "locate-path": "^2.0.0" 2850 "locate-path": "^2.0.0"
2835 } 2851 }
2836 }, 2852 },
2853 + "follow-redirects": {
2854 + "version": "1.5.10",
2855 + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
2856 + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
2857 + "requires": {
2858 + "debug": "=3.1.0"
2859 + },
2860 + "dependencies": {
2861 + "debug": {
2862 + "version": "3.1.0",
2863 + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
2864 + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
2865 + "requires": {
2866 + "ms": "2.0.0"
2867 + }
2868 + },
2869 + "ms": {
2870 + "version": "2.0.0",
2871 + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
2872 + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
2873 + }
2874 + }
2875 + },
2837 "fontfaceobserver": { 2876 "fontfaceobserver": {
2838 "version": "2.1.0", 2877 "version": "2.1.0",
2839 "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz", 2878 "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz",
...@@ -5778,6 +5817,11 @@ ...@@ -5778,6 +5817,11 @@
5778 "symbol-observable": "^1.2.0" 5817 "symbol-observable": "^1.2.0"
5779 } 5818 }
5780 }, 5819 },
5820 + "redux-thunk": {
5821 + "version": "2.3.0",
5822 + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
5823 + "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
5824 + },
5781 "regenerate": { 5825 "regenerate": {
5782 "version": "1.4.0", 5826 "version": "1.4.0",
5783 "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", 5827 "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz",
......
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 }, 9 },
10 "dependencies": { 10 "dependencies": {
11 "1.3.0": "^1.3.0", 11 "1.3.0": "^1.3.0",
12 + "axios": "^0.19.0",
12 "expo": "^35.0.0", 13 "expo": "^35.0.0",
13 "expo-permissions": "~7.0.0", 14 "expo-permissions": "~7.0.0",
14 "expo-speech": "~7.0.0", 15 "expo-speech": "~7.0.0",
...@@ -27,7 +28,8 @@ ...@@ -27,7 +28,8 @@
27 "react-navigation-tabs": "^2.5.6", 28 "react-navigation-tabs": "^2.5.6",
28 "react-redux": "^7.1.3", 29 "react-redux": "^7.1.3",
29 "react-thunk": "^1.0.0", 30 "react-thunk": "^1.0.0",
30 - "redux": "^4.0.4" 31 + "redux": "^4.0.4",
32 + "redux-thunk": "^2.3.0"
31 }, 33 },
32 "devDependencies": { 34 "devDependencies": {
33 "babel-preset-expo": "^7.1.0", 35 "babel-preset-expo": "^7.1.0",
......
1 -import { createStore, combineReducers } from 'redux'; 1 +import { createStore, combineReducers, applyMiddleware } from 'redux';
2 -import loading from './loading' 2 +import ReduxThunk from 'redux-thunk'
3 +import search from './search';
3 4
4 -const store = combineReducers({ loading }); 5 +const store = combineReducers({ search });
5 6
6 -export default createStore(store)
...\ No newline at end of file ...\ No newline at end of file
7 +export default createStore(store, applyMiddleware(ReduxThunk) );
...\ No newline at end of file ...\ No newline at end of file
......
1 +
2 +
1 const TOGGLE = 'loading/TOGGLE'; 3 const TOGGLE = 'loading/TOGGLE';
2 4
3 -export const toggle = () => ({ type: TOGGLE,}) 5 +export const toggle = () => ({ type: TOGGLE})
4 6
5 const initialState = { 7 const initialState = {
6 isLoading: false, 8 isLoading: false,
......
1 +import {sendSearch} from '../lib/api'
2 +import {readTest} from '../lib/readTest';
3 +
1 const CHANGE = 'search/CHANGE'; 4 const CHANGE = 'search/CHANGE';
2 -const SUBMIT = 'search/SUBMIT'; 5 +const SUCCESS = 'search/SUCCESS';
6 +const FAILURE = 'search/FAILURE';
7 +const START = 'search/START';
3 8
4 export const change = (text) => ({ 9 export const change = (text) => ({
5 type: CHANGE, 10 type: CHANGE,
6 text, 11 text,
7 }) 12 })
8 13
9 -export const submit = (text) => (dispatch) => ({ 14 +export const submit = (text) => async (dispatch) => {
10 - type: CHANGE, 15 + dispatch( {type:START});
11 - text, 16 + try{
12 -}) 17 + /*const response = await sendSearch(text);*/
18 + const response = await readTest(); // 테스트용입니당~
19 + setTimeout(()=>dispatch( { type:SUCCESS, result:response }),1000); // 셋타임아웃도 테스트용
20 + }
21 + catch(err){
22 + dispatch({ type:FAILURE, result:response })
23 + }
24 +}
25 +
13 26
14 const initialState = { 27 const initialState = {
15 query: '', 28 query: '',
16 searchResult:{}, 29 searchResult:{},
30 + isLoading: false,
17 }; 31 };
18 32
19 export default ToggleLoading = (state = initialState, action) => { 33 export default ToggleLoading = (state = initialState, action) => {
20 switch (action.type) { 34 switch (action.type) {
21 case CHANGE: 35 case CHANGE:
22 return {...state, query: action.text}; 36 return {...state, query: action.text};
23 - case SUBMIT: 37 + case SUCCESS:
24 - return {...state, query: ''} 38 + return {...state, isLoading:false,searchResult: action.response};
39 + case FAILURE:
40 + return {...state, isLoading:false};
41 + case START:
42 + return {...state, query:'',isLoading:true}
25 default: 43 default:
26 return state; 44 return state;
27 } 45 }
28 } 46 }
29 47
30 -submit=()=>{
31 - this.props.toggleLoading();
32 - setTimeout(()=>{this.props.toggleLoading()},1000);
33 - this.setState({query:''});
34 -}
35 48
......