Moved AddTweet.jsx to /containers. Implement basic functionality for AddTweet

Author: zzwong

.gitignore

@@ -1,2 +1,3 @@
 .vscode
-node_modules
+node_modules
+.env

ReactMiniProjects/tweeter/README.md

@@ -21,6 +21,9 @@ The DB of choice for this project will be PostgreSQL. I wanted to learn some SQL
 #### Nice to haves
 
 Storybook - UI Component Library
+
 Sort by trending - have some sort of trending algorithm
+
 Users, authentication, restricting number of upvotes to a single time
+
 Editing Tweets by author

ReactMiniProjects/tweeter/client/src/App.js

@@ -1,11 +1,13 @@
 import React, { Component } from 'react';
 import './App.css';
+import AddTweet from './containers/AddTweet';
 import SortableTweetList from './containers/SortableTweetList';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
+        <AddTweet />
         <SortableTweetList />
       </div>
     );

ReactMiniProjects/tweeter/client/src/components/AddTweet.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { addTweet } from '../actions/actions';
+
+const mapDispatchToProps = dispatch => ({
+  onSubmit: tweet => dispatch(addTweet(tweet))
+});
+
+class AddTweet extends React.Component {
+  state = {
+    text: ''
+  };
+
+  inputRef = React.createRef();
+
+  onInputChange = () => {
+    const { value } = this.inputRef.current;
+    this.setState({
+      text: value
+    });
+  };
+
+  onFormSubmit = e => {
+    e.preventDefault();
+
+    if (!this.inputRef.current.value.trim()) return;
+
+    this.props.onSubmit({
+      text: this.state.text,
+      createdAt: new Date(),
+      likes: 0,
+      id: Math.floor(Math.random() * 1000)
+    });
+
+    this.inputRef.current.value = '';
+    this.setState({
+      text: ''
+    });
+  };
+
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.onFormSubmit}>
+          <input type="text" ref={this.inputRef} onChange={this.onInputChange} />
+          <button type="submit" disabled={this.state.text.length <= 0}>
+            Submit
+          </button>
+        </form>
+      </div>
+    );
+  }
+}
+
+AddTweet.propTypes = {
+  onSubmit: PropTypes.func.isRequired
+};
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(AddTweet);