Upload app.js

IT17160162/webapp/src/App.js

+import React from 'react';
+import './asserts/css/App.css';
+import { Button, Spinner, FormControl, Form, Tabs, Tab  } from 'react-bootstrap';
+import { v4 as uuidv4 } from 'uuid';
+import { Trash } from 'react-bootstrap-icons';
+import mockData from './mock-data';
+import UploadFiles from './components/uploadFiles';
+
+// eslint-disable-next-line
+const originUrl = "http://localhost:5000";
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      requirments: "",
+      resumes: [],
+      counter: 0,
+      isRanked: false
+    };
+
+    this.setRequirements = this.setRequirements.bind(this);
+    this.setResume = this.setResume.bind(this);
+    this.onRankClick = this.onRankClick.bind(this);
+    this.onAddNewResume = this.onAddNewResume.bind(this);
+    this.removeResume = this.removeResume.bind(this);
+    this.addMockData = this.addMockData.bind(this);
+  }
+
+  addMockData() {
+    this.setState({
+      ...mockData,
+      counter: mockData.resumes.length,
+      isRanked: false
+    })
+  }
+
+  removeResume(id) {
+    const { resumes } = this.state;
+    const newResumes = resumes.filter(resume => resume.id != id)
+    this.setState({
+      resumes: newResumes,
+      isRanked: false
+    })
+  }
+  
+  onAddNewResume() {
+    const { resumes, counter } = this.state;
+    const newId = uuidv4();
+    const newCounter = counter + 1
+    resumes.push({ 
+      name: newId, 
+      data: "", 
+      id: newCounter,
+      rank: 0
+    })
+    this.setState({
+      resumes,
+      counter: newCounter,
+      isRanked: false
+    })
+    console.log(resumes)
+  }
+
+  onRankClick() {
+    const { requirements, resumes } = this.state;
+    const bodyData = {
+      requirments: {
+        data: requirements
+      },
+      resumes
+    }
+    const requestOptions = {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(bodyData),
+    };
+    this.setState({
+      isRanked: true
+    });
+    fetch(`${originUrl}/rank`, requestOptions)
+      .then(response => {
+        return response.json();
+      })
+      .then(data => {
+        const { resumes } = this.state;
+        const newResumes = resumes.map(resume => {
+          return {
+            ...resume,
+            rank: data[resume.name].rank,
+            score: data[resume.name].score
+          }
+        });
+        this.setState({
+          isRanked: true,
+          resumes: newResumes
+        })
+
+      });
+  }
+
+  setRequirements(e) {
+    const requirements = e.target.value;
+    this.setState({
+      requirements: requirements,
+      isRanked: false
+    });
+  }
+
+  setResume(e) {
+    const resumeContent = e.target.value;
+    const resumeId = e.target.dataset.id
+    const { resumes } = this.state
+    resumes.forEach(resume => {
+      if (resume.id == resumeId) {
+        resume.data = resumeContent
+      }
+    });
+    this.setState({
+      resumes,
+      isRanked: false
+    });
+  }
+
+  render() {
+    const { requirements, resumes, isRanked } = this.state;
+    console.log("rendering", this.state)
+    return (
+      <div className="App">
+        <header className="App-header">
+          <p>
+            RanQx - Applicant Ranker
+          </p>
+        </header>
+
+        <div className="content">
+ 
+          {/* <div className="mock-data-div">
+              <Button className="" variant="primary" onClick={this.addMockData}>
+                Fill with mock data
+              </Button>
+          </div> */}
+
+          <div className="form-wrap" id="envOneApi_auth_content">
+            <Form>
+              <Form.Group controlId="formBasicEmail">
+                <Form.Label><b>Enter your opening requirements here : </b></Form.Label>
+                <FormControl className="text-area" as="textarea" value={requirements} onChange={this.setRequirements} aria-label="With textarea" placeholder="Enter your opening requirements." />
+              </Form.Group> 
+            </Form>
+
+            <b>Feed your applicant data here : </b>
+            <Tabs defaultActiveKey="pdf-mode" id="uncontrolled-tab-example" style={{ marginTop: '10px' }}>
+              <Tab eventKey="pdf-mode" title="Bulk PDF upload">
+                  <UploadFiles requirements={requirements} />
+              </Tab>
+              <Tab eventKey="text-input" title="Text conent">
+                  <b> Applicant Qualifications ({resumes ? resumes.length : 0})</b>
+                  <Form>
+                    <Button className="addNewResume-button" variant="primary" onClick={this.onAddNewResume}>
+                      + Add new applicant qualification
+                    </Button>
+
+                    {resumes.map(item => (
+                      <div key={item.id} className="resume-row">
+                        <div className={ isRanked ? "input-section-half" : "input-section-full"}>
+                          <Form.Group controlId="formBasicEmail">
+                            <Form.Label className="text-applicant-id-row"><b>Applicant ID - {item.id}</b> (<b onClick={() => this.removeResume(item.id)} className="remove-text"> <Trash /></b>)</Form.Label>
+                          
+                            <FormControl className="text-area" as="textarea" value={item.data} data-id={item.id} onChange={this.setResume} aria-label="With textarea" placeholder="Paste the resume content or qualifications." />
+                          </Form.Group> 
+                        </div>
+                        {isRanked && (
+                          <div className="ranking-section">
+                            {item.score != undefined ? (
+                              <>
+                                <div className="ranking-section-rank"> RANK </div>
+                                <div className="ranking-section-val"> {item.rank} </div>
+                                <div className="score"> Score: {item.score} </div>
+                              </>
+                            ) : (
+                              <Spinner animation="border" role="status">
+                                <span className="sr-only">Loading...</span>
+                              </Spinner>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                      
+                    ))}
+
+                    
+                    <div className="rank-div">
+                      <Button disabled={resumes.length == 0 ? true : false} className="rank-button" variant="success" onClick={this.onRankClick}>
+                        Start Applicant Ranking
+                      </Button>
+                    </div>
+                  </Form>
+              </Tab>
+            </Tabs>
+
+
+            
+          </div>
+        
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;