From 0010d89735e70ccc815d42ee3fadf1737b8b10d8 Mon Sep 17 00:00:00 2001
From: Ashwanth K <cb.en.u4cse19305@cb.students.amrita.edu>
Date: Sun, 27 Dec 2020 20:25:39 +0530
Subject: [PATCH] Upload New File
---
.../src/Components/Forms/searchborrower.jsx | 106 ++++++++++++++++++
1 file changed, 106 insertions(+)
create mode 100644 client/src/Components/Forms/searchborrower.jsx
diff --git a/client/src/Components/Forms/searchborrower.jsx b/client/src/Components/Forms/searchborrower.jsx
new file mode 100644
index 0000000..bf99f82
--- /dev/null
+++ b/client/src/Components/Forms/searchborrower.jsx
@@ -0,0 +1,106 @@
+import React, { Component } from 'react'
+import './forms.css'
+import axios from 'axios';
+
+export default class BSearch extends Component{
+ constructor(props){
+ super(props)
+ this.state={
+ searchby:'book_id',
+ 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:'book_id'})
+ }
+ rendertable(){
+ console.log(this.state.objects[0])
+ if(this.state.test===0){
+ return <h3 style={{marginLeft:'2%'}}>Results will appear here</h3>
+ }
+ else if(this.state.objects[0]===undefined){
+ 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>Book_id</th>
+
+ </tr>
+ </thead>
+ <tbody>
+ {this.state.objects.map(id => (
+ <Row id = {id}/>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ }
+ }
+ search(){
+ let object = [];
+ axios.get('http://localhost:5000/borrower')
+ .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 Borrowers </b></h3>
+ <h4 style={{marginLeft:'2%'}}>(directly click search to view all details)</h4>
+ <div class="dropdown" style={{marginLeft:"2%"}}>
+ <button class="dropbtn">by book_id</button>
+ <div class="dropdown-content">
+ <a href="#" name="_id" onClick={this.handleChange}>By user_id</a>
+ <a href="#" name="user_name" onClick={this.handleChange}>By user_name</a>
+ <a href="#" name="book_id" onClick={this.handleChange}>By book_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:"black",color:"white"}}>
+ <td>
+ {id._id}
+ </td>
+ <td>
+ {id.user_name}
+ </td>
+ <td>
+ {id.book_id}
+ </td>
+
+ </tr>
+ );
\ No newline at end of file
--
GitLab