Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import './App.css';
- import Student from './Student'
- //Front End Assessment coded by Victor Zohni in React 2018
- class App extends Component {
- state = {
- items: [],
- namesearch: '',
- tagsearch: '',
- }
- async componentDidMount() {
- try {
- const res = await fetch("https://www.hatchways.io/api/assessment/students");
- const items = await res.json();
- const tags = [];
- // console.log(items.students);
- items.students.forEach((item) => { item.tags = tags; });
- this.setState({
- items: items.students,
- });
- // console.log(items.students);
- } catch (e) {
- // console.log(e);
- }
- }
- onChangeHandler = (e) => {
- this.setState({
- namesearch: e.target.value,
- })
- }
- onChangeHandler2= (e) =>{
- this.setState({
- tagsearch: e.target.value,
- })
- }
- hasTag(tags, inputTag){
- return tags.indexOf(inputTag) > -1
- }
- render() {
- // console.log(this.state.items);
- let filteredStudents = this.state.items.filter(
- (item) =>{
- return item.firstName.toLowerCase().indexOf(this.state.namesearch) !== -1
- || item.lastName.toLowerCase().indexOf(this.state.namesearch) !== -1
- }
- );
- // console.log(this.state.items);
- let studentsWithTags = filteredStudents.filter((student) => {
- //Get student state somehow here???
- return this.hasTag(student.tags, this.state.tagsearch);
- });
- const ids = [];
- const noDups = [];
- filteredStudents.forEach((val) => {
- if (!ids.includes(val.id)) {
- ids.push(val.id);
- noDups.push(val);
- }
- });
- studentsWithTags.forEach((val) => {
- if (!ids.includes(val.id)) {
- ids.push(val.id);
- noDups.push(val);
- }
- });
- return (
- <div className="App">
- <div className="student-box">
- <input type="text" placeholder = "Search by name" value={this.state.namesearch} onChange={this.onChangeHandler}/>
- <input type="text" placeholder = "Search by tag" value={this.state.tagsearch} onChange={this.onChangeHandler2}/>
- <nav>
- <ul>
- {noDups.map(item => <Student key = {item.id} student = {item} />)}
- </ul>
- </nav>
- </div>
- </div>
- );
- }
- }
- export default App;
- // {filteredStudents.map( item => <Student key = {item.id} student = {item} /> )}
- // {studentsWithTags.map(item => <Student key = {item.id} student = {item} /> )}
- // {filteredStudents.map( item => <Student key = {item.id} student = {item} /> )}
- //{filteredTags.map(item => <Student key = {item.id} student = {item} /> )}
- // let filteredTags = this.state.items.filter(
- // (item) =>{
- // item.tags.filter((tag) => {
- // return tag.toLowerCase().indexOf(this.state.taginput) !== -1;
- // });
- // }
- // );
- //let array1 = filteredStudents.map(item => <Student key = {item.id} student = {item} /> );
- //let array2 = studentsWithTags.map(item => <Student key = {item.id} student = {item} /> );
- //console.log(array1);
- //console.log(array2);
- // let joinedArray = array1.concat(array2);
- // let noDuplicates = [...new Set(joinedArray)];
- // const uniqueNames = Array.from(new Set(joinedArray));
- _________________
- import React, { Component } from 'react';
- import PropTypes from 'prop-types';
- //Front End Assessment coded by Victor Zohni in React 2018
- export default class Student extends Component{
- static propTypes = {
- student: PropTypes.shape({
- firstName: PropTypes.string.isRequired,
- lastName: PropTypes.string.isRequired,
- company: PropTypes.string.isRequired,
- skill: PropTypes.string.isRequired,
- email: PropTypes.string.isRequired,
- pic: PropTypes.string,
- grades: PropTypes.array,
- tags: PropTypes.array,
- }),
- }
- state = {
- toggle: false,
- input: '',
- tagsarr: [],
- }
- toggle = () => {
- this.setState({
- toggle: !this.state.toggle
- })
- }
- componentWillReceiveProps(nextProps) {
- //Perform any computations you want to perform with new prop here
- }
- calcAverage = (grades) => {
- var sum = 0;
- //console.log(grades);
- grades.forEach ((grade) => {
- sum += parseInt(grade); });
- return sum / grades.length;
- }
- handleKeyPress = (e) => {
- var newTag = e.target.value;
- this.setState({
- input: newTag,
- })
- if (e.key === 'Enter') {
- //console.log(this.props.tags);
- this.setState(prevState => ({
- tagsarr: prevState.tagsarr.concat(newTag)
- }))
- //console.log(newTag);
- }
- //return clonedElementWithTag;
- }
- render(){
- const {student} = this.props;
- const avg = this.calcAverage (student.grades);
- //const tags = this.handleKeyPress();
- var rows = []
- for (var i = 0; i < student.grades.length; i++) {
- rows.push(<li key={i}/>);
- rows.push("Test " + (i+1) + ": " + student.grades[i] + "%");
- }
- var tagslist = []
- for (var j = 0; j < this.state.tagsarr.length; j++)
- {
- tagslist.push(<li className = "tag-box" key={j}> {this.state.tagsarr[j]} </li>);
- }
- return(
- <div className = "border-div">
- <button onClick = {this.toggle}>+</button>
- <img width={100} height={100} alt="" src={student.pic} />
- <h3>{student.firstName} {student.lastName} </h3>
- <div className = "student-text">
- <p>Email: {student.email}</p>
- <p>Company: {student.company}</p>
- <p>Skill: {student.skill}</p>
- <p>Average: {avg}%</p>
- {this.state.toggle &&
- <div>
- <div className="test-list">{rows}</div>
- <div className="test-list">{tagslist}</div>
- <input className="tag-input" type="text" value = {this.state.input}
- onChange={evt => this.handleKeyPress(evt)}
- placeholder = "Add a tag" onKeyPress={this.handleKeyPress} />
- </div>
- }
- </div>
- </div>
- )
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement