nss-evening-cohort-13 · drteresavasquez · Sep 8, 2020 · Sep 8, 2020 · Sep 8, 2020 · Sep 9, 2020
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ]
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,3 @@
+webpack.config.js
+node_modules
+build
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,22 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 9,
+    "sourceType": "module"
+  },
+  "extends": "airbnb-base",
+  "globals": {
+    "document": true,
+    "window": true,
+    "$": true,
+    "XMLHttpRequest": true,
+    "allowTemplateLiterals": true
+  },
+  "rules": {
+    "no-console": [1, { "allow": ["error", "warn"] }],
+    "comma-dangle": ["error", "only-multiline"],
+    "no-debugger": 1,
+    "class-methods-use-this": 0,
+    "linebreak-style": 0,
+    "max-len": [1,200,2]
+  }
+}
diff --git a/.github/.keep b/.github/.keep
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+.vscode/
+.DS_Store
+package-lock.json
+node_modules/
+dist/
+build/
+.firebase/
diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md
@@ -0,0 +1,22 @@
+<!--- Provide a general summary of the issue in the Title above -->
+<!--- DELETE ALL COMMENTS BEFORE CREATING ISSUE -->
+
+# User Story
+<!-- Write a description of what the user should see and experience based on THIS ticket -->
+
+# Acceptance Criteria
+<!-- The Acceptance Criteria of a User Story consists of a set of Test Scenarios that are to be met to confirm that the software is working as expected. The Acceptance Criteria illustrates the scope of the individual ticket and expectations from the team and client. -->
+
+<!-- The Acceptance Criteria is applicable to specific User Story. Acceptance Criteria of each User Story will be different based on the requirements of that User Story. -->
+
+<!-- EXAMPLE -->
+<!-- WHEN the user visits any page -->
+<!-- THEN I should see a Bootstrap NavBar -->
+<!-- AND there should be links to the other pages -->
+<!-- AND the current page should be In Bold -->
+
+# Dependecies
+<!-- List out all of the dev work that needs to be completed for this ticket and what other tickets are impacted or blocking this ticket's start/finish -->
+
+# Dev Notes
+<!-- List out all of the dev work that needs to be completed for this ticket and what other tickets are impacted or blocking this ticket's start/finish -->
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,25 @@
+<!--- Provide a general summary of your changes in the Title above -->
+<!--- DELETE ALL COMMENTS BEFORE CREATING PULL REQUEST -->
+
+## Description
+<!--- Describe your changes in detail -->
+
+## Related Issue
+<!--- This project only accepts pull requests related to open issues -->
+<!--- If suggesting a new feature or change, please discuss it in an issue first -->
+<!--- If fixing a bug, there should be an issue describing it with steps to reproduce -->
+<!--- Please link to the issue here: -->
+
+## Motivation and Context
+<!--- Why is this change required? What problem does it solve? -->
+
+## How Can This Be Tested?
+<!--- Please describe in detail how teammates can test your changes. -->
+
+## Screenshots (if appropriate):
+
+## Types of changes
+<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to change)
diff --git a/README.md b/README.md
@@ -34,7 +34,7 @@ cd [repo name]
 1. If the user unchecks the box, the background color should change back to white with black text for messages.
 
 ### Messages
-1. When the page is first loaded, you must load 5 messages from a local JSON file and pre-fill a message area `<div>` below the input field that will also hold all new messages as they get created.
+1. When the page is first loaded, you must load 5 messages from a module file and pre-fill a message area `<div>` below the input field that will also hold all new messages as they get created.
 1. When the user presses the return key in the message field, the new message should be inserted into the message area.
 1. The message should have a button displayed after it with the text "Delete" inside of it.
 1. When the delete button next to a message is clicked, only that message should be removed from the DOM.
@@ -44,8 +44,8 @@ cd [repo name]
 Create multiple modules, following the Single Responsibility Principle, that perform the following functions.
 
 1. One module should load the seed data file and returns the array of objects.
-1. One module should contain a function that accepts an element `id`, and the user message, and then add the user's message - along with the delete button - to the specified parent element. Each message should be stored in a private array in this IIFE. This IIFE should also expose a function to read all messages, and delete a single message.
-1. One module should accept a message element `id` and then remove the correct element from the DOM. This module should also remove the corresponding message from the private array that was created in the previous IIFE.
+1. One module should contain a function that accepts an element `id`, and the user message, and then add the user's message - along with the delete button - to the specified parent element. Each message should be stored in a private array in this module. This module should also expose a function to read all messages, and delete a single message.
+1. One module should accept a message element `id` and then remove the correct element from the DOM. This module should also remove the corresponding message from the private array that was created in the previous module.
 
 ## Helpful hints
 
@@ -140,4 +140,4 @@ const users = [
 1. Again, this will change the structure of your data file.
 
 ### Need inspiration?
-[Dr. T's Cohort 21 Chatty Group Project](https://drteresavasquez.github.io/d21-group-chatty-justice_league/#)
+[Dr. T's Cohort 21 Chatty Group Project](https://drteresavasquez.github.io/d21-group-chatty-justice_league/#)
diff --git a/documentation/createproject 2.png b/documentation/createproject 2.png
diff --git a/documentation/createproject 3.png b/documentation/createproject 3.png
diff --git a/documentation/createproject.png b/documentation/createproject.png
diff --git a/documentation/lit-screen 2.png b/documentation/lit-screen 2.png
diff --git a/documentation/lit-screen 3.png b/documentation/lit-screen 3.png
diff --git a/documentation/lit-screen.png b/documentation/lit-screen.png
diff --git a/documentation/notacceptable 2.png b/documentation/notacceptable 2.png
diff --git a/documentation/notacceptable 3.png b/documentation/notacceptable 3.png
diff --git a/documentation/notacceptable.png b/documentation/notacceptable.png
diff --git a/documentation/usetemplate 2.png b/documentation/usetemplate 2.png
diff --git a/documentation/usetemplate 3.png b/documentation/usetemplate 3.png
diff --git a/documentation/usetemplate.png b/documentation/usetemplate.png
diff --git a/package.json b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "chatty",
+  "version": "1.0.0",
+  "description": "Creating a messaging application.",
+  "main": "src/javascripts/main.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development --open",
+    "build": "webpack --mode production --module-bind js=babel-loader"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "7.11.4",
+    "@babel/preset-env": "7.11.0",
+    "babel-loader": "8.1.0",
+    "css-loader": "4.2.2",
+    "eslint": "7.7.0",
+    "eslint-config-airbnb-base": "14.2.0",
+    "eslint-loader": "4.0.2",
+    "eslint-plugin-import": "2.22.0",
+    "file-loader": "6.0.0",
+    "html-loader": "1.3.0",
+    "html-webpack-plugin": "4.3.0",
+    "mini-css-extract-plugin": "0.10.0",
+    "node-sass": "4.14.1",
+    "sass-loader": "10.0.1",
+    "webpack": "4.44.1",
+    "webpack-cli": "3.3.12",
+    "webpack-dev-server": "3.11.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-free": "5.14.0",
+    "axios": "0.20.0",
+    "bootstrap": "4.5.2",
+    "emojis": "^1.0.10",
+    "jquery": "3.5.1",
+    "moment": "^2.27.0",
+    "popper.js": "1.16.1"
+  }
+}
diff --git a/src/assets/images/Charlie Brown.png b/src/assets/images/Charlie Brown.png
diff --git a/src/assets/images/Chuck.jpeg b/src/assets/images/Chuck.jpeg
diff --git a/src/assets/images/Franklin.jpg b/src/assets/images/Franklin.jpg
diff --git a/src/assets/images/Linus.png b/src/assets/images/Linus.png
diff --git a/src/assets/images/Lucy.png b/src/assets/images/Lucy.png
diff --git a/src/assets/images/Marcie.png b/src/assets/images/Marcie.png
diff --git a/src/assets/images/Peppermint Patty.png b/src/assets/images/Peppermint Patty.png
diff --git a/src/assets/images/Schroeder.jpg b/src/assets/images/Schroeder.jpg
diff --git a/src/assets/images/Teacher.jpg b/src/assets/images/Teacher.jpg
diff --git a/src/assets/images/flyingace.jpg b/src/assets/images/flyingace.jpg
diff --git a/src/assets/images/pigpen.jpg b/src/assets/images/pigpen.jpg
diff --git a/src/assets/images/pumpkin.jpg b/src/assets/images/pumpkin.jpg
diff --git a/src/assets/images/snoopy.jpg b/src/assets/images/snoopy.jpg
diff --git a/src/assets/images/woodstock.gif b/src/assets/images/woodstock.gif
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Chatty</title>
+</head>
+<body>
+  <div id="navbar" class="d-block">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+      <a class="navbar-brand ml-2 mr-5 my-2" href="#">SnoopyChat</a>
+      <form class="form-inline" id="message-form">
+        <input class="form-control-lg mr-sm-2 message--input" id="message-input" type="text" placeholder="Message">
+      </form>
+        <button class="btn btn-outline-success btn-lg  mx-4 my-2 my-sm-0" type="submit" id="send">Send</button>
+        <button class="btn btn-outline-danger btn-lg mx-3 my-2 my-sm-0" type="submit" id="clear-button">Clear</button>
+    </nav>
+  </div>
+  <div class="container text-center">
+    <div class="error" id="error"></div>
+  </div>
+  <div class="container">
+    <div class="row">
+      <div id="settings-container">
+        <h4>Post as:</h4>
+        <div id="user-options"></div>
+        <div class="container row">
+          <input type="checkbox" class="m-2" id="darkMode">
+          <h3 class="ml-1">Dark Mode</h3>
+          <input type="checkbox" class="m-2" id="largeText">
+          <h3 class="ml-1">Large Text</h3>
+        </div>
+      </div>
+      <div id="messages-container" class="col-9">
+        <ul class="list-unstyled" id="messages-list"></ul>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/src/javascripts/components/addMessage.js b/src/javascripts/components/addMessage.js
@@ -0,0 +1,83 @@
+import moment from 'moment';
+import emojis from 'emojis';
+import Message from '../helpers/data/messageData';
+import Print from './displayMessages';
+import Bot from '../helpers/data/botData';
+
+const messageAction = () => {
+  const lastIndex = Message.getMessages().length - 1;
+  let idNumber = Message.getMessages().length === 0 ? 1 : Number(Message.getMessages()[lastIndex].id) + 1;
+  const messageValue = $('#message-input').val();
+  if (messageValue === '') {
+    $('#error').html('<p>Please enter a message</p>');
+  } else {
+    if (!Message.editing) {
+      const radioSelection = document.querySelector(
+        'input[name=character]:checked'
+      ).value;
+      const imageSelection = document.querySelector(
+        'input[name=character]:checked'
+      ).id;
+      const newMessage = {
+        id: idNumber.toString(),
+        user: `${radioSelection}`,
+        image: `${imageSelection}`,
+        message: emojis.unicode(messageValue),
+        timestamp: moment().format('MMMM Do YYYY, h:mm a'),
+      };
+      Message.getMessages().push(newMessage);
+    } else {
+      Message.holding.message = emojis.unicode(messageValue);
+      Message.getMessages().forEach((obj) => {
+        let oldMessage = obj.message;
+        if (obj.id === Message.holding.id) {
+          oldMessage = Message.holding.message;
+        }
+        return oldMessage;
+      });
+      Message.editing = false;
+    }
+    for (let i = 0; i < Bot.bots.length; i += 1) {
+      const lowerCaseMessageValue = messageValue.toLowerCase();
+      if (
+        lowerCaseMessageValue.includes(
+          Bot.bots[i].respondTo.find((word) => lowerCaseMessageValue.includes(word))
+        )
+      ) {
+        const botMessage = {
+          id: (idNumber + 1).toString(),
+          user: `${Bot.bots[i].user}`,
+          image: `${Bot.bots[i].image}`,
+          message: `${
+            Bot.bots[i].message[
+              Math.floor(Math.random() * Bot.bots[i].message.length)
+            ]
+          }`,
+          timestamp: moment().format('MMMM Do YYYY, h:mm a'),
+        };
+        idNumber += 1;
+        setTimeout(() => {
+          Message.getMessages().push(botMessage);
+          Print.printMessages();
+        }, Math.floor(Math.random() * 10000) + 1000);
+      }
+    }
+    $('#message-input').val('');
+    $('#error').html('');
+    Print.printMessages();
+  }
+};
+
+const addMessage = () => {
+  $('#send').on('click', () => {
+    messageAction();
+  });
+  $('#message-input').on('keypress', (e) => {
+    if (e.which === 13) {
+      e.preventDefault();
+      messageAction();
+    }
+  });
+};
+
+export default { addMessage };
diff --git a/src/javascripts/components/buttonActions.js b/src/javascripts/components/buttonActions.js
@@ -0,0 +1,10 @@
+import Data from '../helpers/data/messageData';
+
+const clearButton = () => {
+  $('#clear-button').on('click', () => {
+    $('#messages-list').empty();
+    Data.getMessages().length = 0;
+  });
+};
+
+export default { clearButton };
diff --git a/src/javascripts/components/displayMessages.js b/src/javascripts/components/displayMessages.js
@@ -0,0 +1,38 @@
+import Data from '../helpers/data/messageData';
+import Delete from './removeMessage';
+import Edit from './editMessage';
+
+const displayMessage = (obj) => {
+  const domString = `
+  <li class="media mb-3 message-content" id="${obj.id}">
+    <img class="mr-3 rounded-circle" src="${obj.image}" alt="${obj.user}">
+    <div class="media-body">
+      <h5 class="mt-0 mb-1">${obj.user}</h5>
+      <p class="message--content">${obj.message}</p>
+      <div class="d-flex justify-content-between">
+       <p class="timestamp">${obj.timestamp}</p>
+       <div class="d-flex justify-content-end">
+        <button type="button" class="edit" id="edit${obj.id}"><i class="far fa-edit"></i></button>
+        <button type="button" class="close" id="delete${obj.id}"><span>&times;</span></button>
+       </div>
+      </div>
+    </div>
+  </li>`;
+  $('#messages-list').append(domString);
+  $(`#delete${obj.id}`).on('click', Delete.removeMessage);
+  $(`#edit${obj.id}`).on('click', Edit.editMessage);
+};
+
+const clearDom = () => {
+  $('#messages-list').html('');
+};
+
+const printMessages = () => {
+  clearDom();
+  for (let i = Data.getMessages().length - 1; i > Data.getMessages().length - 21; i -= 1) {
+    if (typeof Data.getMessages()[i] === 'undefined') break;
+    displayMessage(Data.getMessages()[i]);
+  }
+};
+
+export default { printMessages };
diff --git a/src/javascripts/components/editMessage.js b/src/javascripts/components/editMessage.js
@@ -0,0 +1,17 @@
+import Message from '../helpers/data/messageData';
+
+const editMessage = (e) => {
+  Message.editing = true;
+  const messageId = e.target.closest('li').id;
+  Message.getMessages().forEach((obj) => {
+    const findId = Message.getMessages().indexOf(obj);
+    const messageToBeEdited = Message.getMessages()[findId];
+    const selectedMessage = messageToBeEdited.message;
+    if (messageId === obj.id) {
+      $('#message-input').val(selectedMessage);
+      Message.holding = messageToBeEdited;
+    }
+  });
+};
+
+export default { editMessage };
diff --git a/src/javascripts/components/modes.js b/src/javascripts/components/modes.js
@@ -0,0 +1,13 @@
+const darkMode = () => {
+  $('#darkMode').on('click', () => {
+    document.body.classList.toggle('dark-mode');
+  });
+};
+
+const largeText = () => {
+  $('#largeText').on('click', () => {
+    document.body.classList.toggle('large-text');
+  });
+};
+
+export default { darkMode, largeText };
diff --git a/src/javascripts/components/multipleUsers.js b/src/javascripts/components/multipleUsers.js
@@ -0,0 +1,16 @@
+import Users from '../helpers/data/userData';
+
+const userSelection = () => {
+  Users.selectUsers().forEach((item) => {
+    $('#user-options').append(`
+      <div class="form-check" name ="radioselector">
+        <input class="form-check-input" type="radio" name="character" id="${item.image}" value="${item.user}" checked>
+        <img class="mr-3 rounded-circle" id="image" src="${item.image}"/></br>
+        <label class="form-check-label" for="exampleRadios1">
+         <b>${item.user}</b>
+        </label>
+        `);
+  });
+};
+
+export default { userSelection };