first commit with React MVP

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "firebase": "^6.1.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-scripts": "3.0.1"

src/components/App.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import Header from './Header.js';
+import MessageGenerator from './MessageGenerator.js';
+import BulletinBoard from './BulletinBoard.js';
+import Footer from './Footer.js';
+import firebase from '../firebase.js';
+import '../styles/App.css';
+
+class App extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      messages: [],
+      value: "I, Ahronspeck,"
+    };
+  }
+
+  //when mounted, check the DB for data and setState
+  componentDidMount() {
+    const dbRef = firebase.database().ref();
+
+    dbRef.on("value", response => {
+      //create an empty array to contain data from the db
+      const newState = [];
+      //store the data from the db in a variable
+      const data = response.val();
+
+      for (let key in data) {
+        newState.push({
+          key: key,
+          userMessage: data[key]
+        });
+      }      
+
+      this.setState({
+        messages: newState
+      });
+    });
+  }
+
+addNewInput = (newMessage) => {
+  //??? is this necessary???
+  let currentInput = this.state.value;
+  currentInput = newMessage;
+
+  //add new input the state
+  this.setState({
+    value: currentInput
+  })
+}
+
+updateDB = (event) => {
+  event.preventDefault();
+
+  const dbRef = firebase.database().ref();
+
+  dbRef.push(this.state.value);
+
+  this.setState({
+    value: "I, Ahronspeck,"
+  })
+}
+
+  render() {
+    return (
+      <div className="App">
+        {/* Is this a good syntax? */}
+        <header>
+          <div className="wrapper">
+            <Header />
+            <MessageGenerator
+              addNewInput={this.addNewInput}
+              updateDB={this.updateDB}
+              value={this.state.value}
+            />
+          </div>
+        </header>
+        <BulletinBoard messages={this.state.messages} />
+        <Footer />
+      </div>
+    );
+  }
+}
+
+export default App;

src/components/BulletinBoard.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+class BulletinBoard extends React.Component {
+  render() {
+    return (
+      <ul>
+        {this.props.messages.map(message => {
+          return <li key={message.key}>{message.userMessage}</li>
+        })}
+      </ul>
+    );
+  }
+}
+
+export default BulletinBoard;

src/components/Footer.js

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer>
+      <div className="wrapper">
+        <p>Created by SooYeon Shim</p>
+        <a href="https://www.freepik.com/free-photos-vectors/border">
+          Border vector created by vectorpouch - www.freepik.com
+        </a>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

src/components/Header.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import image from '../styles/image/image.png';
+
+const Header = () => {
+  return (
+    <div className="wrapper">
+      <img
+        src={image}
+        alt="A bust of a statue, presumably called Ahronspeck"
+      />
+      <div className="headerContent">
+        <h1>Ahornspeck The Speaking Statue</h1>
+        <p className="subTitle">
+          Inspired by the Talking Statues of Rome, this virtual space
+          provides a room for public opinion.
+        </p>
+        <p>Speak as if you are Ahornspeck, the speaking statue!</p>
+      </div>
+    </div>
+  );
+}
+
+export default Header;

src/components/MessageGenerator.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+class MessageGenerator extends React.Component {
+
+  handleChange = event => {
+    const userInput = event.target.value;
+    this.props.addNewInput(userInput);
+  };
+
+
+  render() {
+    return (
+      <form action="">
+        <label htmlFor="userMessage">
+          Enter your opinion here
+          <textarea
+            name="userMessage"
+            id="userMessage"
+            cols="30"
+            rows="10"
+            maxLength="200"
+            required
+            value={this.props.value}
+            onChange={this.handleChange}
+          />
+        </label>
+        {/* !!!! WHY IS THIS WORKING? REACT DOC SAYS TO AVOID!*/}
+        <button
+          onClick={event => {
+            this.props.updateDB(event);
+          }}
+        >
+          Post
+        </button>
+      </form>
+    );
+  }
+}
+
+export default MessageGenerator;

src/firebase.js

@@ -0,0 +1,16 @@
+import firebase from 'firebase';
+
+// web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyBSIo-hy2Tj1YsPOERpkfGIr42igt6XvY4",
+  authDomain: "ahornspeck-app.firebaseapp.com",
+  databaseURL: "https://ahornspeck-app.firebaseio.com",
+  projectId: "ahornspeck-app",
+  storageBucket: "ahornspeck-app.appspot.com",
+  messagingSenderId: "509423607111",
+  appId: "1:509423607111:web:0c79ecd1845365a5"
+};
+// Initialize Firebase
+firebase.initializeApp(firebaseConfig);
+
+export default firebase;

src/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
+import App from './components/App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));

src/styles/App.css

@@ -0,0 +1,74 @@
+@import url('https://fonts.googleapis.com/css?family=Schoolbell|Walter+Turncoat&display=swap');
+
+:root {
+  --black: #333;
+
+  --lgFont: 'Walter Turncoat', cursive;
+  --smFont: 'Schoolbell', cursive;
+}
+
+body {
+  font-size: 125%;
+  color: var(--black);
+  background-color: #DFDBE5;
+  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%239C92AC' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+
+  font-family: var(--smFont);
+}
+
+h1 {
+  font-family: var(--lgFont);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  width: 300px;
+}
+
+ul {
+  list-style: none;
+}
+
+li {
+  border: 1px solid #000;
+}
+
+.wrapper {
+  width: 90%;
+  max-width: 1440px;
+  margin: 0 auto;
+}
+
+header {
+  height: 100vh;
+}
+
+header .wrapper {
+  display: flex;
+}
+
+textarea {
+  resize: none;
+  width: 450px;
+  height: 350px;
+  padding: 50px;
+  border: 1px solid #000;
+  background-image: url(./image/parchemin.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: transparent;
+  font-size: 2.0rem;
+}
+
+/* NEED TO STYLE! */
+textarea:valid {
+  /* color: green; */
+}
+
+textarea:invalid {
+  /* background: palegoldenrod; */
+}
+
+
+