fixed react-toastr

mplibunao · Dec 29, 2017 · b48798f · b48798f
1 parent ae66bcd
commit b48798f
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 30 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,16 +1,19 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -19,14 +22,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -36,5 +40,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/components/ChatContent.js b/src/components/ChatContent.js
@@ -19,7 +19,7 @@ const ChatContent = ({ messages }) => {
     });
 
     return (
-        <div className="col-sm-9">
+        <div className="col-sm-10">
             <div id="chat-messages" className="input-container">
                 {allMessages}
             </div>

diff --git a/src/components/ChatInput.js b/src/components/ChatInput.js
@@ -8,9 +8,10 @@ function ChatInput({ sendMessage, updateMsg, value }) {
     };
 
     return (
-        <div className="col-sm-12">
+        <div>
             <input
-                type="text form-control"
+                type="text"
+                className="form-control col-sm-12"
                 onKeyPress={e => _handleKeyPress(e)}
                 onChange={e => updateMsg(e)}
                 value={value}

diff --git a/src/components/app.js b/src/components/app.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button } from "react-bootstrap";
+import { Button, CloseButton } from "react-bootstrap";
 // import emojione from "emojione";
 import Materialize from "materialize-css";
 import { connect } from "react-redux";
@@ -74,13 +74,38 @@ class App extends Component {
     join() {
         const { email, username } = this.state;
 
-        if (!email) {
-            Materialize.toast("You must enter an email", 2000);
+        if (!email && username) {
+            this.toastr.error(
+                "You must enter an email address",
+                "Login Failed",
+                {
+                    closeButton: true,
+                    timeout: 30000,
+                    extendedTimeOut: 10000
+                }
+            );
             return;
         }
 
-        if (!username) {
-            Materialize.toast("You must choose a username", 2000);
+        if (!username && email) {
+            this.toastr.error("You must enter a username", "Login Failed", {
+                closeButton: true,
+                timeout: 30000,
+                extendedTimeOut: 10000
+            });
+            return;
+        }
+
+        if (!username && !email) {
+            this.toastr.error(
+                "You must enter a username and email address",
+                "Login Failed",
+                {
+                    closeButton: true,
+                    timeout: 30000,
+                    extendedTimeOut: 10000
+                }
+            );
             return;
         }
 
@@ -102,10 +127,6 @@ class App extends Component {
     render() {
         return (
             <div>
-                <ToastContainer
-                    ref={ref => (this.toastr = ref)}
-                    className="toast-top-right"
-                />
                 <header>
                     <ChatNav>
                         <div className="navbar-header">
@@ -125,6 +146,10 @@ class App extends Component {
                     </ChatNav>
                 </header>
                 <div className="container">
+                    <ToastContainer
+                        ref={ref => (this.toastr = ref)}
+                        className="toast-top-right"
+                    />
                     <div className="row">
                         <ChatContent messages={this.state.messages} />
                     </div>