Merge pull request #9 from ubclaunchpad/sift-20

Progress Indicator

package.json

@@ -42,6 +42,7 @@
     "eslint": "^3.7.0",
     "eslint-plugin-import": "^2.0.1",
     "eslint-plugin-react": "^6.4.1",
+    "radium": "^0.18.1",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-dropzone": "^3.6.0",

src/components/ProgressIndicator.js

@@ -0,0 +1,31 @@
+import React, {PropTypes} from 'react';
+import Radium from 'radium';
+
+const getStyles = size => ({
+	width: size,
+	height: size,
+
+	borderRadius: '50%',
+	borderWidth: size / 8,
+	borderStyle: 'solid',
+	borderTopColor: 'blue',
+	borderRightColor: 'green',
+	borderBottomColor: 'red',
+	borderLeftColor: 'yellow',
+
+	animation: 'spin 2s linear infinite',
+	animationName: Radium.keyframes({
+		'0%': {transform: 'rotate(0deg)'},
+		'100%': {transform: 'rotate(360deg)'}
+	}, 'spin')
+})
+
+const ProgressIndicator = ({size}) => (
+	<div style={getStyles(size)} />
+);
+
+ProgressIndicator.displayName = 'ProgressIndicator';
+ProgressIndicator.propTypes = {size: PropTypes.number.isRequired};
+ProgressIndicator.defaultProps = {size: 120};
+
+export default Radium(ProgressIndicator);

src/components/__tests__/ConceptInput.test.js

@@ -3,21 +3,23 @@ import React from 'react';
 import {shallow} from 'enzyme';
 
 describe('<ConceptInput />', () => {
-	it('Should add a token under the textbox', () => {
+	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', () => {
+
+	it('should not create a token if the input is empty', () => {
 		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', () => {
+
+	it('should remove the selected token', () => {
 		const wrapper = shallow(<ConceptInput />);
 		const input = wrapper.find('input');
 		input.simulate('change', {target: {value: 'giraffe'}});

src/components/__tests__/ProgressIndicator.test.js

@@ -0,0 +1,22 @@
+import ProgressIndicator from './../ProgressIndicator';
+import Radium from 'radium';
+import React from 'react';
+import {shallow} from 'enzyme';
+
+// Prevent Radium from throwing errors about app not being wrapped in `StyleRoot`
+Radium.TestMode.enable();
+
+describe('<ProgressIndicator />', () => {
+	it('should render a div', () => {
+		const wrapper = shallow(<ProgressIndicator />);
+		expect(wrapper.find('div')).toBeDefined();
+	});
+
+	it('should scale based on size prop', () => {
+		const size = 240;
+		const wrapper = shallow(<ProgressIndicator size={size} />);
+		const style = wrapper.find('div').node.props.style;
+		expect(style.width).toEqual(size);
+		expect(style.height).toEqual(size);
+	});
+});

src/index.js

@@ -1,5 +1,5 @@
+import App from './views/App';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import UploadForm from './views/UploadForm';
 
-ReactDOM.render(<UploadForm />, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));

src/views/App.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import {StyleRoot} from 'radium';
+import UploadForm from './UploadForm';
+
+const App = () => (
+	<StyleRoot>
+		<UploadForm />
+	</StyleRoot>
+);
+
+App.displayName = 'App';
+
+export default App;

src/views/UploadForm.js

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