diff --git a/client/src/Components/Forms/searchuser.jsx b/client/src/Components/Forms/searchuser.jsx new file mode 100644 index 0000000000000000000000000000000000000000..58eb93edac702e10d6b2382b76d90b864da81a08 --- /dev/null +++ b/client/src/Components/Forms/searchuser.jsx @@ -0,0 +1,107 @@ +import React, { Component } from 'react' +import './forms.css' +import axios from 'axios'; + +export default class USearch extends Component{ + constructor(props){ + super(props) + this.state={ + searchby:'name', + inp: '', + objects:[], + test:0 + } + this.handleChange=this.handleChange.bind(this); + this.handleinp = this.handleinp.bind(this); + this.rendertable=this.rendertable.bind(this); + this.search=this.search.bind(this); + this.view=this.view.bind(this); + } + handleChange (event) { + this.setState({ searchby: event.target.name}); + } + handleinp(event){ + this.setState({inp : event.target.value}); + } + view(){ + this.setState({searchby:'name'}) + } + rendertable(){ + if(this.state.test===0){ + return <h3 style={{marginLeft:'2%'}}>Results will appear here</h3> + } + else if(this.state.objects===null){ + return <h3>No Results!</h3> + } + else { + return <div style={{marginLeft:'2%'}}> + <button onClick={this.view}>View Results</button> + <table> + <thead> + <tr> + <th>User_id</th> + <th>user_name</th> + <th>Email</th> + <th>Password</th> + </tr> + </thead> + <tbody> + {this.state.objects.map(id => ( + <Row id = {id}/> + ))} + </tbody> + </table> + </div> + } + } + search(){ + let object = []; + axios.get('http://localhost:5000/user') + .then(response=> {response.data.map((obj,idx) => { + if(obj[this.state.searchby].includes(this.state.inp)){ + object.push(obj) + } + })}) + this.setState({objects:object,test:1}); + console.log(object); + } + + + render(){ + return( + <div style={{position:"absolute",right:"5%",top:"6%",backgroundColor:"white",width:"600px"}}> + <h3 style={{marginLeft:'2%'}}><b>Search Users </b></h3> + <h4 style={{marginLeft:'2%'}}>(directly click search to view all details)</h4> + <div class="dropdown" style={{marginLeft:"2%"}}> + <button class="dropbtn">by name</button> + <div class="dropdown-content"> + <a href="#" name="name" onClick={this.handleChange}>by_name</a> + <a href="#" name="email" onClick={this.handleChange}>by_Email</a> + <a href="#" name="_id" onClick={this.handleChange}>By_id</a> + </div> + </div> + + <input type="text" placeholder="Search" onChange={this.handleinp} style={{marginLeft:"2%"}}/> + + <button onClick={this.search} className="b1">Search</button> + {this.rendertable()} + </div> + ) + } +} +const Row = ({ id }) => ( + <tr style={{backgroundColor:"#181818",color:"white"}}> + <td> + {id._id} + </td> + <td> + {id.name} + </td> + <td> + {id.email} + </td> + <td> + {id.password} + </td> + </tr> + ); \ No newline at end of file