Merge branch 'sift-15' of https://github.com/ubclaunchpad/sift-web in…

…to andrew

src/components/ConceptInput.js

@@ -0,0 +1,51 @@
+import React, {Component} from 'react';
+
+class ConceptInput extends Component {
+	static displayName = 'ConceptInput';
+
+	state = {
+		tokens: [],
+		inputValue: ''
+	}
+
+	handleOnKeyPress(e) {
+		if (e.key === 'Enter' && this.state.inputValue !== '') {
+			this.setState({
+				tokens: [...this.state.tokens, this.state.inputValue],
+				inputValue: ''
+			});
+		}
+	}
+
+	handleOnChange(e) {
+		this.setState({inputValue: e.target.value});
+	}
+
+	deleteToken(tokenIndex){
+		const newState = this.state.tokens;
+		newState.splice(tokenIndex, 1);
+		this.setState({tokens: newState})
+	}
+
+	render() {
+		const listItem = this.state.tokens.map((token, index) =>
+			(
+				<div key={index}>
+					{token}
+					<button onClick={index => this.deleteToken(index)}>Delete Token</button>
+				</div>
+			)
+		)
+		return (
+			<div>
+				<input
+					type="text"
+					value={this.state.inputValue}
+					onKeyPress={this.handleOnKeyPress.bind(this)}
+					onChange={this.handleOnChange.bind(this)}/>
+				{listItem}
+			</div>
+		);
+	}
+}
+export default ConceptInput;

src/components/__tests__/ConceptInput.test.js

@@ -0,0 +1,29 @@
+import ConceptInput from './../ConceptInput';
+import React from 'react';
+import {shallow} from 'enzyme';
+
+describe('<ConceptInput />', () => {
+	it('Should add a token under the textbox', () => {
+		const wrapper = shallow(<ConceptInput />);
+		const input = wrapper.find('input');
+		input.simulate('change', {target: {value: 'giraffe'}});
+		input.simulate('keypress', {key: 'Enter'});
+		expect(wrapper.state('tokens')[0]).toEqual('giraffe');
+	});
+	it('if the input is empty, do not create a token', () => {
+		const wrapper = shallow(<ConceptInput />);
+		const input = wrapper.find('input');
+		input.simulate('change', {target: {value: ''}});
+		input.simulate('keypress', {key: 'Enter'});
+		expect(wrapper.state('tokens').length).toEqual(0);
+	});
+	it('Should remove the selected token', () => {
+		const wrapper = shallow(<ConceptInput />);
+		const input = wrapper.find('input');
+		input.simulate('change', {target: {value: 'giraffe'}});
+		input.simulate('keypress', {key: 'Enter'});
+		const button = wrapper.find('button');
+		button.simulate('click');
+		expect(wrapper.state('tokens').length).toEqual(0);
+	});
+});

src/views/UploadForm.js

@@ -1,11 +1,13 @@
 import Button from './../components/Button';
+import ConceptInput from './../components/ConceptInput';
 import DropArea from './../components/DropArea';
 import React from 'react';
 
 const UploadForm = () => (
 	<div>
 		<DropArea />
 		<Button />
+		<ConceptInput />
 	</div>
 );