End of chapter 26

This commit is contained in:
Martin Donnelly 2019-10-10 15:16:48 +01:00
parent fefc7ac76b
commit 57d4d8c1ef
2 changed files with 49 additions and 46 deletions

View File

@ -2,11 +2,8 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="5be46653-49b7-409a-9549-21ca1be137cc" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/src/components/repos/RepoItem.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/repos/Repos.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/users/User.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/User.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/users/Search.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/users/Search.js" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
@ -117,7 +114,8 @@
<workItem from="1570713368048" duration="8000" />
<workItem from="1570713507620" duration="154000" />
<workItem from="1570713697039" duration="68000" />
<workItem from="1570713775683" duration="1669000" />
<workItem from="1570713775683" duration="2307000" />
<workItem from="1570716281021" duration="617000" />
</task>
<task id="LOCAL-00001" summary="End of Chapter 14">
<created>1569512995385</created>
@ -203,7 +201,14 @@
<option name="project" value="LOCAL" />
<updated>1570707444485</updated>
</task>
<option name="localTasksCounter" value="13" />
<task id="LOCAL-00013" summary="End of chapter 24">
<created>1570715593335</created>
<option name="number" value="00013" />
<option name="presentableId" value="LOCAL-00013" />
<option name="project" value="LOCAL" />
<updated>1570715593335</updated>
</task>
<option name="localTasksCounter" value="14" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -235,6 +240,7 @@
<MESSAGE value="End of chapter 21" />
<MESSAGE value="End of chapter 22" />
<MESSAGE value="End of chapter 23" />
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 23" />
<MESSAGE value="End of chapter 24" />
<option name="LAST_COMMIT_MESSAGE" value="End of chapter 24" />
</component>
</project>

View File

@ -1,52 +1,49 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import React, { useState } from "react";
import PropTypes from "prop-types";
class Search extends Component {
constructor(props) {
super(props);
this.state = {
text:'martind2000'
}
}
onChange = e => {
this.setState({[e.target.name]: e.target.value});
const Search = ({ searchUsers, showClear, clearUsers, setAlert }) => {
const [text, setText] = useState("");
const onChange = e => {
setText(e.target.value);
};
onSubmit = e => {
const onSubmit = e => {
e.preventDefault();
if (this.state.text === '') {
this.props.setAlert('Please enter something', 'light');
if (text === "") {
setAlert("Please enter something", "light");
} else {
this.props.searchUsers(this.state.text);
this.setState({text:''});
searchUsers(text);
setText('');
}
};
render() {
const {showClear, clearUsers} = this.props;
return (
<div>
<form className='form' onSubmit={this.onSubmit}>
<input type='text' name='text' placeholder='Search users...' value={this.state.text} onChange={this.onChange.bind(this)}/>
<input type='submit' value='Search' className='btn btn-dark btn-block' />
</form>
{showClear &&
<button className='btn btn-light btn-block' onClick={clearUsers}>Clear</button>
}
</div>
);
}
}
return (
<div>
<form className="form" onSubmit={onSubmit}>
<input
type="text"
name="text"
placeholder="Search users..."
value={text}
onChange={onChange}
/>
<input
type="submit"
value="Search"
className="btn btn-dark btn-block"
/>
</form>
{showClear && (
<button className="btn btn-light btn-block" onClick={clearUsers}>
Clear
</button>
)}
</div>
);
};
Search.propTypes = {
searchUsers:PropTypes.func.isRequired,
searchUsers: PropTypes.func.isRequired,
clearUsers: PropTypes.func.isRequired,
showClear: PropTypes.bool.isRequired,
setAlert: PropTypes.func.isRequired