react-redux實現,搜尋
阿新 • • 發佈:2018-11-29
1.home.js
import React, { Component } from "react"; import { connect } from 'react-redux' import { Table, Menu, Icon, Popup, Button, Header, Input } from "semantic-ui-react"; import "semantic-ui-css/semantic.min.css"; import "./DeviceList.css"; import {getPatientInfo } from "../action/searchAction.js"; class Home extends Component { constructor(props) { super(props); this.state = { searchQuery: "", sirenId: "", userId: "", fullName: "", phone: "", isSearchOpen: false }; } handleSearchItemsChange(searchText,event) { if(searchText === 'sirenId'){ this.setState({sirenId:event.target.value}); }else if(searchText === 'userId'){ this.setState({userId:event.target.value}); }else if(searchText === 'fullName'){ this.setState({fullName:event.target.value}); }else if(searchText === 'phone'){ this.setState({phone:event.target.value}); } } searchItems = () => { const{getPatientInfo} = this.props; getPatientInfo(this,this.props.listPatients); }; render() { let self = this; return ( <div className="device-list-container"> <Header as="h2" style={{ float: "left" }}> <Icon name="treatment" /> <Header.Content>User List</Header.Content> </Header> <div id="user-search-bar"> <Popup trigger={ <Input icon={ <Icon name="search" onClick={() => self.searchItems()} circular link /> } placeholder="Search..." id="search-bar" value={this.state.searchQuery} /> } position="bottom left" flowing on="click" > <div className="search-item-container"> <Input label="Siren ID" placeholder="siren id" className="search-items" value={this.state.sirenId} onChange={event=>this.handleSearchItemsChange("sirenId",event)} /> <br /> <Input label="User ID" placeholder="user id" className="search-items" value={this.state.userId} onChange={event=>this.handleSearchItemsChange("userId",event)} /> <br /> <Input label="Name " placeholder="name" className="search-items" value={this.state.fullName} onChange={event=>this.handleSearchItemsChange("fullName",event)} /> <br /> <Input label="Phone " placeholder="phone" className="search-items" value={this.state.phone} onChange={event=>this.handleSearchItemsChange("phone",event)} /> </div> </Popup> </div> </div> ); } } const mapStateToProp = state => ({ listPatients: state.patientsListStore.listPatients }); const mapDispatchToProp = dispatch => ({ getPatientInfo: (self,patientList) => dispatch(getPatientInfo(self,patientList)) }); export default connect( mapStateToProp, mapDispatchToProp )(Home);
2.searchAction.js
import * as TYPES from "../types/types"; import { listPatients,getPatient } from "../graphql/queries"; import { graphqlOperation, API } from "aws-amplify"; export function getPatientInfo(self,patientList){ return dispatch=>{ const patients = []; patientList.map(item=>{ if( (self.state.sirenId != null && item.sirenId===parseInt(self.state.sirenId)) ||(self.state.userId != null && item.userId===self.state.userId) ||(self.state.fullName != null && item.fullName===self.state.fullName) ||(self.state.phone != null && item.phone===self.state.phone) ){ patients.push(item); } }); console.log('patients: ',patients); dispatch(changeSearchListState(patients)); }; } function changeSearchListState(patients){ return{ type: TYPES.SEARCH_LIST, text: patients } }
3.type.js
export const SEARCH_LIST = "search_list";
4.searchReducer.js
import * as TYPES from "../types/types"; const initialState = { listPatients: [], patientStatus: {} }; export default function patientsList(state = initialState, action) { switch (action.type) { case TYPES.SEARCH_LIST: return{ ...state, listPatients: action.text } default: return state; } }