like button and timed delet option added

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.18",
+    "@fortawesome/free-solid-svg-icons": "^5.8.2",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "firebase": "^6.1.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

src/components/App.js

@@ -1,6 +1,5 @@
 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';
@@ -11,13 +10,16 @@ class App extends React.Component {
     this.state = {
       messages: [],
       value: "",
-      showError: false
+      showError: false,
+      minutes: 0,
+      seconds: 0,
+      givenTime: 10,
+      showDeleteOption: false
     };
   }
 
   //when mounted, check the DB for data and setState
   componentDidMount() {
-
     const dbRef = firebase.database().ref();
 
     dbRef.on("value", response => {
@@ -29,58 +31,109 @@ class App extends React.Component {
       for (let key in data) {
         newState.push({
           key: key,
-          userMessage: data[key]
+          userMessage: data[key].value,
+          likes: data[key].likeCount
         });
-      }      
+      }
 
       this.setState({
         messages: newState
       });
     });
   }
 
-// componentDidCatch(error, info) {
-//   // display fallback UI
-//   this.setState({
-//     hasError: true
-//   });
-
-//   logErrorToMyService(error, info)
-// }
+  addNewInput = currentInput => {
+    //add new input the state
+    this.setState({
+      value: currentInput
+    });
+  };
 
-addNewInput = (newMessage) => {
-  //??? is this necessary???
-  let currentInput = this.state.value;
-  currentInput = newMessage;
+  //on click post
+  updateDB = event => {
+    event.preventDefault();
 
-  //add new input the state
-  this.setState({
-    value: currentInput
-  })
-}
+    if (this.state.value) {
+      const dbRef = firebase.database().ref();
+      dbRef.push({ value: this.state.value, likeCount: 0 });
+    } else {
+      this.setState({
+        showError: true
+      });
+    } 
 
-updateDB = (event) => {
-  event.preventDefault();
+    this.setState({
+      value: ""
+    });
+  };
 
-  if (this.state.value) {
-    const dbRef = firebase.database().ref();
-    dbRef.push(this.state.value);
-  } else {
+  toggleErrorMessage = () => {
     this.setState({
-      showError: true
-    })
-  }
+      showError: !this.state.showError
+    });
+  };
 
-  this.setState({
-    value: ""
-  })
-}
+  addNewLikeCount = key => {
+    const dbRef = firebase
+      .database()
+      .ref()
+      .child(key);
+    const dbLikeCount = dbRef.child("likeCount");
+    let updatedCount;
 
-toggleErrorMessage = () => {
-  this.setState({
-    showError: !this.state.showError
-  })
-}
+    dbLikeCount.on("value", snapshot => {
+      const currentLikeCount = snapshot.val();
+
+      updatedCount = currentLikeCount + 1;
+
+      return updatedCount;
+    });
+
+    dbLikeCount.set(updatedCount);
+  };
+
+  removeInput = key => {
+    const dbRef = firebase
+      .database()
+      .ref()
+      .child(key);
+
+    dbRef.remove();
+  };
+
+  tick = () => {
+
+    this.timer= setInterval(() => {      
+        const secondsRemaining = this.state.givenTime;
+
+        if(secondsRemaining > 0) {
+          const newTime = secondsRemaining - 1;
+
+          const min = Math.floor(newTime / 60);
+
+          const sec = Math.floor((newTime / 60 - min) * 60);
+
+          this.setState({
+            minutes: min,
+            seconds: sec,
+            givenTime: newTime,
+            showDeleteOption: true
+          });
+        } else {
+          this.setState({
+            showDeleteOption: false
+          })
+        }
+      }, 1000);
+
+  };
+
+  stopTimer = () => {
+    clearInterval(this.timer);
+    this.setState({
+      showDeleteOption: false
+    });
+  }
 
   render() {
     return (
@@ -91,8 +144,18 @@ toggleErrorMessage = () => {
           value={this.state.value}
           showError={this.state.showError}
           toggleErrorMessage={this.toggleErrorMessage}
+          tick={this.tick}
+          showDeleteOption={this.state.showDeleteOption}
+          minutes={this.state.minutes}
+          seconds={this.state.seconds}
+          removeInput={this.removeInput}
+          messages={this.state.messages}
+          stopTimer={this.stopTimer}
+        />
+        <BulletinBoard
+          messages={this.state.messages}
+          addNewLikeCount={this.addNewLikeCount}
         />
-        <BulletinBoard messages={this.state.messages} />
         <Footer />
       </div>
     );

src/components/BulletinBoard.js

@@ -1,16 +1,32 @@
 import React from 'react';
+import Timer from './Timer.js'
+import washiTape from "../styles/image/washiTape.png";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHandHoldingHeart } from "@fortawesome/free-solid-svg-icons";
+
 
 class BulletinBoard extends React.Component {
   render() {
+    const likeIcon = <FontAwesomeIcon icon={faHandHoldingHeart} />;
+
     return (
       <main className="bulletinBoard">
         <div className="wrapper">
           <ul>
             {this.props.messages.map(message => {
               return (
-                <li key={message.key} tabIndex="0">
-                  {message.userMessage}
-                </li>
+                  <li key={message.key} tabIndex="0">
+                    <img src={washiTape} alt="" />
+                    {message.userMessage}
+                    <button
+                      onClick={() => {
+                        this.props.addNewLikeCount(message.key);
+                      }}
+                    >
+                      <p>{message.likes}</p>
+                      <i aria-hidden="true">{likeIcon}</i>
+                    </button>
+                  </li>
               );
             })}
           </ul>

src/components/ErrorMessage.js

@@ -4,11 +4,13 @@ class ErrorMessage extends React.Component {
   render() {
     if(this.props.showError) {
       return (
-        <div className="errorMessage">
-          <h1>Please enter your message!</h1>
-          <button onClick={this.props.toggleErrorMessage}>Close</button>
-        </div>
-      )
+        <React.Fragment>
+          <div className="errorMessage">
+            <h1>Please enter your message!</h1>
+            <button onClick={this.props.toggleErrorMessage}>Close</button>
+          </div>
+        </React.Fragment>
+      );
     }
     return (null)
   }

src/components/Header.js

@@ -3,6 +3,7 @@ import small from '../styles/image/small.png';
 import large from '../styles/image/large.png';
 import MessageGenerator from './MessageGenerator';
 import ErrorMessage from "./ErrorMessage.js";
+import ShowDeleteOption from "./ShowDeleteOption.js"
 
 class Header extends React.Component {
   render() {
@@ -27,21 +28,33 @@ class Header extends React.Component {
               Ahornspeck <br />
               The Speaking Statue
             </h1>
-            <p className="subTitle">  
+            <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>
+            <p>
+              Post your opinions as if you are Ahornspeck, the speaking
+              statue!
+            </p>
             <MessageGenerator
               addNewInput={this.props.addNewInput}
               updateDB={this.props.updateDB}
               value={this.props.value}
+              tick={this.props.tick}
             />
           </div>
           <ErrorMessage
             showError={this.props.showError}
             toggleErrorMessage={this.props.toggleErrorMessage}
           />
+          <ShowDeleteOption
+            showDeleteOption={this.props.showDeleteOption}
+            minutes={this.props.minutes}
+            seconds={this.props.seconds}
+            removeInput={this.props.removeInput}
+            messages={this.props.messages}
+            stopTimer={this.props.stopTimer}
+          />
         </div>
       </header>
     );

src/components/MessageGenerator.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import parchemin from "../styles/image/parchemin.png";
 
+
+
 class MessageGenerator extends React.Component {
   handleChange = event => {
     const userInput = event.target.value;
@@ -28,6 +30,7 @@ class MessageGenerator extends React.Component {
         <button
           onClick={event => {
             this.props.updateDB(event);
+            this.props.tick();
           }}
         >
           Post