daily pastebin goal
69%
SHARE
TWEET

Untitled

a guest Dec 16th, 2018 75 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import './App.css';
  3. import Student from './Student'
  4.  
  5. //Front End Assessment coded by Victor Zohni in React 2018
  6.  
  7. class App extends Component {
  8.  
  9.  state = {
  10.   items: [],
  11.   namesearch: '',
  12.   tagsearch: '',    
  13.  }
  14.  
  15.  
  16.   async componentDidMount() {
  17.     try {
  18.       const res = await fetch("https://www.hatchways.io/api/assessment/students");
  19.       const items = await res.json();
  20.       const tags = [];
  21.       // console.log(items.students);    
  22.  
  23.       items.students.forEach((item) => { item.tags = tags; });
  24.  
  25.       this.setState({
  26.         items: items.students,
  27.          });
  28.     // console.log(items.students);      
  29.  
  30.     } catch (e) {
  31.      // console.log(e);
  32.     }
  33.   }
  34.  
  35.   onChangeHandler = (e) => {
  36.     this.setState({
  37.       namesearch: e.target.value,
  38.     })
  39.   }
  40.   onChangeHandler2= (e) =>{
  41.     this.setState({
  42.       tagsearch: e.target.value,      
  43.     })      
  44.   }
  45.  
  46.   hasTag(tags, inputTag){
  47.     return tags.indexOf(inputTag) > -1
  48.   }
  49.  
  50.  
  51.  
  52.   render() {
  53.  
  54.     // console.log(this.state.items);        
  55.       let filteredStudents = this.state.items.filter(      
  56.         (item) =>{                
  57.           return item.firstName.toLowerCase().indexOf(this.state.namesearch) !== -1
  58.           || item.lastName.toLowerCase().indexOf(this.state.namesearch) !== -1                          
  59.         }    
  60.       );
  61.      
  62.        // console.log(this.state.items);
  63.  
  64.         let studentsWithTags = filteredStudents.filter((student) => {
  65.           //Get student state somehow here???        
  66.           return this.hasTag(student.tags, this.state.tagsearch);
  67.  
  68.         });
  69.            
  70.       const ids = [];
  71.       const noDups = [];  
  72.  
  73.       filteredStudents.forEach((val) => {
  74.         if (!ids.includes(val.id)) {
  75.           ids.push(val.id);
  76.           noDups.push(val);
  77.         }
  78.       });
  79.      
  80.       studentsWithTags.forEach((val) => {
  81.         if (!ids.includes(val.id)) {
  82.           ids.push(val.id);
  83.           noDups.push(val);
  84.         }
  85.       });
  86.  
  87.  
  88.     return (
  89.       <div className="App">            
  90.         <div className="student-box">      
  91.         <input type="text" placeholder = "Search by name"  value={this.state.namesearch} onChange={this.onChangeHandler}/>
  92.         <input type="text" placeholder = "Search by tag" value={this.state.tagsearch} onChange={this.onChangeHandler2}/>
  93.           <nav>            
  94.             <ul>                              
  95.               {noDups.map(item => <Student key = {item.id} student = {item} />)}          
  96.             </ul>                    
  97.           </nav>          
  98.         </div>    
  99.       </div>
  100.     );
  101.   }
  102. }
  103.  
  104. export default App;
  105.  
  106.  
  107. // {filteredStudents.map(  item => <Student key = {item.id} student = {item} /> )}
  108. // {studentsWithTags.map(item => <Student key = {item.id} student = {item} />  )}  
  109.  
  110. // {filteredStudents.map(  item => <Student key = {item.id} student = {item} />               )}      
  111. //{filteredTags.map(item => <Student key = {item.id} student = {item} />  )}  
  112.  
  113.  // let filteredTags = this.state.items.filter(
  114.       //   (item) =>{
  115.       //     item.tags.filter((tag) => {            
  116.       //       return tag.toLowerCase().indexOf(this.state.taginput) !== -1;
  117.       //      });
  118.       //   }
  119.       // );
  120.  
  121.       //let array1 = filteredStudents.map(item => <Student key = {item.id} student = {item} /> );
  122.       //let array2 = studentsWithTags.map(item => <Student key = {item.id} student = {item} /> );
  123.       //console.log(array1);
  124.       //console.log(array2);
  125.       // let joinedArray = array1.concat(array2);
  126.       // let noDuplicates = [...new Set(joinedArray)];      
  127.       // const uniqueNames = Array.from(new Set(joinedArray));
  128.  
  129. _________________
  130.  
  131.  
  132. import React, { Component } from 'react';
  133. import PropTypes from 'prop-types';
  134.  
  135. //Front End Assessment coded by Victor Zohni in React 2018
  136.  
  137. export default class Student extends Component{
  138.     static propTypes = {
  139.         student: PropTypes.shape({
  140.             firstName: PropTypes.string.isRequired,            
  141.             lastName: PropTypes.string.isRequired,            
  142.             company: PropTypes.string.isRequired,    
  143.             skill: PropTypes.string.isRequired,              
  144.             email: PropTypes.string.isRequired,  
  145.             pic: PropTypes.string,
  146.             grades: PropTypes.array,
  147.             tags: PropTypes.array,
  148.         }),      
  149.     }
  150.  
  151.  
  152.     state = {      
  153.         toggle: false,
  154.         input: '',
  155.         tagsarr: [],
  156.       }
  157.    
  158.       toggle = () => {
  159.           this.setState({
  160.             toggle: !this.state.toggle
  161.           })
  162.       }
  163.  
  164.       componentWillReceiveProps(nextProps) {
  165.         //Perform any computations you want to perform with new prop here
  166.  
  167.       }
  168.  
  169.     calcAverage = (grades) => {
  170.         var sum = 0;
  171.         //console.log(grades);
  172.         grades.forEach ((grade) => {
  173.         sum += parseInt(grade); });
  174.         return sum / grades.length;      
  175.     }
  176.  
  177.    
  178.     handleKeyPress = (e) => {
  179.         var newTag = e.target.value;
  180.  
  181.         this.setState({
  182.             input: newTag,
  183.         })            
  184.         if (e.key === 'Enter') {      
  185.             //console.log(this.props.tags);                    
  186.             this.setState(prevState => ({                
  187.                 tagsarr: prevState.tagsarr.concat(newTag)
  188.             }))              
  189.            
  190.           //console.log(newTag);
  191.         }
  192.         //return clonedElementWithTag;
  193.       }
  194.  
  195.      render(){  
  196.         const {student} = this.props;      
  197.         const avg = this.calcAverage (student.grades);    
  198.         //const tags = this.handleKeyPress();      
  199.        
  200.         var rows = []
  201.         for (var i = 0; i < student.grades.length; i++) {            
  202.             rows.push(<li key={i}/>);
  203.             rows.push("Test " + (i+1) + ": " +  student.grades[i] + "%");
  204.         }        
  205.        
  206.         var tagslist = []
  207.         for (var j = 0; j < this.state.tagsarr.length; j++)
  208.         {
  209.             tagslist.push(<li className = "tag-box" key={j}> {this.state.tagsarr[j]} </li>);                
  210.         }
  211.        
  212.  
  213.         return(              
  214.             <div className = "border-div">
  215.                 <button onClick = {this.toggle}>+</button>
  216.                 <img width={100} height={100} alt="" src={student.pic} />
  217.                 <h3>{student.firstName} {student.lastName} </h3>
  218.                 <div className = "student-text">                    
  219.                     <p>Email: {student.email}</p>              
  220.                     <p>Company: {student.company}</p>              
  221.                     <p>Skill: {student.skill}</p>  
  222.                     <p>Average: {avg}%</p>                      
  223.                         {this.state.toggle &&  
  224.                         <div>
  225.                             <div className="test-list">{rows}</div>  
  226.                             <div className="test-list">{tagslist}</div>  
  227.                             <input className="tag-input" type="text" value = {this.state.input}
  228.                             onChange={evt => this.handleKeyPress(evt)}
  229.                             placeholder = "Add a tag" onKeyPress={this.handleKeyPress} />
  230.                         </div>                                
  231.                         }
  232.                     </div>                    
  233.              </div>
  234.                  
  235.         )
  236.     }    
  237. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top