bjg · ciarasastre · Dec 2, 2018
diff --git a/Worksheet5/package-lock.json b/Worksheet5/package-lock.json
diff --git a/Worksheet5/package.json b/Worksheet5/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "react-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "firebase": "^5.5.8",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-scripts": "2.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/Worksheet5/public/favicon.ico b/Worksheet5/public/favicon.ico
diff --git a/Worksheet5/public/index.html b/Worksheet5/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head> 
+  <meta charset="UTF-8">
+  <title> React App </title>
+</head>
+<body>
+  <div id="root"> </div>
+</body>
+</html>
diff --git a/Worksheet5/public/manifest.json b/Worksheet5/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/Worksheet5/src/App.css b/Worksheet5/src/App.css
@@ -0,0 +1,24 @@
+.app {
+  text-align: center;
+}
+.app__logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+.app__header {
+  background-color: black;
+  padding: 20px;
+  color: white;
+}
+
+.chat__list {
+  width: 100%;
+  max-width: 600px;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+@keyframes App-logo-spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
diff --git a/Worksheet5/src/App.js b/Worksheet5/src/App.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import logo from './logo.svg';
+import './App.css';
+import Form from './Form.js';
+import firebase from 'firebase';
+import firebaseConfig from './config';
+
+firebase.initializeApp(firebaseConfig); // Initialize firebase
+
+class App extends Component
+{
+  constructor(props) 
+  {
+    super(props);
+    this.state = 
+    {
+      user: null,
+    }
+  }
+
+  render() 
+  {
+    return (
+      <div className="app">
+        <div className="app__header">
+          <img src={logo} className="app__logo" alt="logo" />
+
+          <h2>
+            CHAT ROOM
+          </h2>
+        </div>
+
+        <div className="chat__list">
+          <Form user={this.state.user} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/Worksheet5/src/Form.css b/Worksheet5/src/Form.css
@@ -0,0 +1,74 @@
+.form 
+{
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    width: 100%;
+}
+
+.inputMessegeRow 
+{
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    padding: 20px;
+}
+
+.typeMessage 
+{
+    width: 100%;
+    padding: 15px 20px;
+    border-radius: 5px 0 0 5px;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    outline: 0;
+}
+
+.typeMessage:focus 
+{
+    background-color: rgba(245, 243, 243, 0.5);
+}
+
+.messageBtn 
+{
+    padding: 0 30px;
+    background-color: #000;
+    color: #fff;
+    border: 0;
+    border-radius: 0 5px 5px 0;
+    outline: 0;
+    cursor: pointer;
+}
+
+.messegeList 
+{
+    width: 100%;
+    padding: 0 20px;
+}
+
+.inputName
+{
+    width: 50%;
+    padding: 10px 20px;
+    border-radius: 5px 0 0 5px;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+    outline: 0;
+}
+
+.inputName:focus 
+{
+    background-color: rgba(245, 243, 243, 0.5);
+}
+
+.nameBtn 
+{
+    margin: 10px;
+    padding: 10px 30px;
+    background-color: #000;
+    color: #fff;
+    border: 0;
+    border-radius: 0 5px 5px 0;
+    outline: 0;
+    cursor: pointer;
+}
diff --git a/Worksheet5/src/Form.js b/Worksheet5/src/Form.js
@@ -0,0 +1,159 @@
+import React, { Component } from 'react';
+import './Form.css';
+import Message from './Message';
+import firebase from 'firebase';
+export default class Form extends Component 
+{
+
+  constructor(props) 
+  {
+    super(props);
+    this.state = 
+    {
+      fbUsername: 'Luke Marshell',
+      fbMessage: '',
+      list: [],
+    };
+
+    // Places messege into firebase database called "FireBaseMessages"
+    this.myRef = firebase.database().ref().child('FirebaseMessages');
+    this.listMessages();
+  }
+
+  //What is put in the input bar is placed in fb
+  //This also stops it from freezing
+  inputMessageChange(event) 
+  {
+    this.setState({fbMessage: event.target.value});
+  }
+
+  inputNameChange(event)
+  {
+    this.setState({fbUsername: event.target.value});
+  }
+
+  // Takes what is in the input bar and pushes it to the list of messages
+  // It will then reset FBMessage to NULL
+  sendMessage() 
+  {
+    if (this.state.fbMessage) 
+    {
+      var newItem = 
+      {
+        fbUsername: this.state.fbUsername,
+        fbMessage: this.state.fbMessage,
+      }
+
+      this.myRef.push(newItem);
+      this.setState({ fbMessage: '' });
+    }
+
+    console.log("Message Sent!");
+  }
+
+  // If they press the ENTER button
+  enterButton(event) 
+  {
+    if (event.key !== 'Enter') return;
+    this.sendMessage();
+  }
+
+  // Set new Name for the user
+  newName()
+  {
+    if(this.state.fbUsername)
+    {
+      var newName =
+      {
+        fbUsername: this.state.fbUsername,
+        fbMessage: "New User has entered the chatroom!",
+      }
+
+      this.myRef.push(newName);
+      this.setState({ fbMessage: '' });
+
+    }
+  }
+
+  // Recall Messages DO NOT USE I WIPED MY DATABASE
+  /*recallMessage()
+  {
+    this.myRef.remove(newName);
+  }*/
+
+  listMessages()
+  {
+    //const myRef: firebase.database.Reference = firebase.database().ref().child('FirebaseMessages');
+    //myRef .on('value', allMessages => {
+      //this.setState = allMessages.val();
+    //});//
+
+    this.myRef
+      .limitToLast(10)
+      .on('value', allMessages => {
+        this.setState({
+          list: Object.values(allMessages.val()),
+        });
+      });
+
+  }
+
+  //Renders HTML output
+  render() 
+  {
+    return (
+
+      <div className="form">
+
+        <div className="messegeList">
+          { this.state.list.map((item, index) =>
+            <Message key={index} fbMessage={item} />
+          )}
+        </div>
+
+        <div className="inputMessegeRow">
+
+          <input
+            className="typeMessage"
+            type="text"
+            placeholder="Type message"
+            value={this.state.fbMessage}
+
+            onChange={this.inputMessageChange.bind(this)}
+            onKeyPress={this.enterButton.bind(this)}
+          />
+
+          <button
+            className="messageBtn"
+            onClick={this.sendMessage.bind(this)}>
+
+            Send
+          </button>
+
+        </div>
+
+        <div>
+
+        <input
+            className="inputName"
+            type="text"
+            placeholder="Enter new Name"
+            value={this.state.fbUsername}
+
+            onChange={this.inputNameChange.bind(this)}
+          />
+
+          <button
+           className="nameBtn"
+            onClick={this.newName.bind(this)}>
+
+            Set new Name
+          </button>
+
+
+        </div>
+
+      </div>
+    );
+  }
+}
diff --git a/Worksheet5/src/Message.css b/Worksheet5/src/Message.css
@@ -0,0 +1,18 @@
+.cssMessage {
+    position: relative;
+    padding: 10px 60px 10px 20px;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.6); 
+
+    background-color: lavender;
+    text-align: left;
+    line-height: 1.7;
+}
+.cssMessage:nth-child(even) {
+    background-color: lavenderblush;
+}
+.cssUsername {
+    font-weight: 600;
+    margin-right: 10px;
+    color: rgba(0, 0, 0, 1);
+}