From f94778ec0990209727766871412589a4407defe0 Mon Sep 17 00:00:00 2001
From: teodosii <teodosii3@outlook.com>
Date: Sun, 2 Sep 2018 17:31:24 +0300
Subject: [PATCH] Refactored samples to pass linter

---
 samples/js/components/Content.js               | 16 ++++++++--------
 samples/js/components/Header.js                |  3 ++-
 .../js/components/examples/AnimationExample.js |  7 +++----
 .../js/components/examples/ContainerExample.js |  4 ++--
 .../examples/CustomContentExample.js           |  6 +++---
 .../js/components/examples/InsertExample.js    |  5 ++---
 samples/js/components/examples/TypeExample.js  |  4 ++--
 samples/js/components/examples/UsageExample.js |  6 ++----
 samples/js/helpers/code.js                     |  5 +++--
 samples/js/helpers/notification.js             |  4 +---
 samples/js/helpers/randomize.js                | 18 ++++++++++++++----
 samples/js/index.js                            |  4 ++--
 12 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/samples/js/components/Content.js b/samples/js/components/Content.js
index 4d87657..666f596 100644
--- a/samples/js/components/Content.js
+++ b/samples/js/components/Content.js
@@ -1,12 +1,12 @@
 import React from "react";
 import Highlight from "react-highlight";
-import { install, usage } from "../helpers/code";
-import ContainerExample from "./examples/ContainerExample";
-import TypeExample from "./examples/TypeExample";
-import InsertExample from "./examples/InsertExample";
-import AnimationWrapper from "./examples/AnimationExample";
-import CustomContentExample from "./examples/CustomContentExample";
-import UsageExample from "./examples/UsageExample";
+import { install, } from "helpers/code";
+import ContainerExample from "components/examples/ContainerExample";
+import TypeExample from "components/examples/TypeExample";
+import InsertExample from "components/examples/InsertExample";
+import AnimationWrapper from "components/examples/AnimationExample";
+import CustomContentExample from "components/examples/CustomContentExample";
+import UsageExample from "components/examples/UsageExample";
 
 function NPMInstall() {
   return (
@@ -34,7 +34,7 @@ function ExampleHeading() {
       </div>
     </div>
   );
-};
+}
 
 const Examples = ({ addNotification }) => {
   return (
diff --git a/samples/js/components/Header.js b/samples/js/components/Header.js
index b96ca64..2364d7a 100644
--- a/samples/js/components/Header.js
+++ b/samples/js/components/Header.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Header({ instance }) {
+export default function Header() {
   return (
     <div className="header">
       <div className="header-content">
@@ -9,6 +9,7 @@ export default function Header({ instance }) {
         <div className="header-buttons">
           <a
             target="_blank"
+            rel="noopener noreferrer"
             className="btn btn-primary no-corner"
             href={"https://github.com/teodosii/react-notifications-component"}
           >
diff --git a/samples/js/components/examples/AnimationExample.js b/samples/js/components/examples/AnimationExample.js
index 5abdd41..f4435f2 100644
--- a/samples/js/components/examples/AnimationExample.js
+++ b/samples/js/components/examples/AnimationExample.js
@@ -1,11 +1,10 @@
 import React from "react";
-import notification from "../../helpers/notification";
+import notification from "helpers/notification";
 import {
   getContainer,
   getType,
-  getMessage,
-  getTitle
-} from "../../helpers/randomize";
+  getMessage
+} from "helpers/randomize";
 
 function AnimationInExample({ addNotification }) {
   const add = (htmlClasses) => {
diff --git a/samples/js/components/examples/ContainerExample.js b/samples/js/components/examples/ContainerExample.js
index 43dd46c..b390d64 100644
--- a/samples/js/components/examples/ContainerExample.js
+++ b/samples/js/components/examples/ContainerExample.js
@@ -1,10 +1,10 @@
 import React from "react";
-import notification from "../../helpers/notification";
+import notification from "helpers/notification";
 import {
   getType,
   getMessage,
   getTitle
-} from "../../helpers/randomize";
+} from "helpers/randomize";
 
 export default class ContainerExample extends React.Component {
   constructor(props) {
diff --git a/samples/js/components/examples/CustomContentExample.js b/samples/js/components/examples/CustomContentExample.js
index 67dafbd..0062d27 100644
--- a/samples/js/components/examples/CustomContentExample.js
+++ b/samples/js/components/examples/CustomContentExample.js
@@ -1,7 +1,7 @@
 import React from "react";
-import notification from "../../helpers/notification";
-import reactImage from "../../../images/react.png";
-import { getContainer } from "../../helpers/randomize";
+import notification from "helpers/notification";
+import reactImage from "images/react.png";
+import { getContainer } from "helpers/randomize";
 
 export default class CustomContentExample extends React.Component {
   constructor(props) {
diff --git a/samples/js/components/examples/InsertExample.js b/samples/js/components/examples/InsertExample.js
index 2c4aaa9..5c6b005 100644
--- a/samples/js/components/examples/InsertExample.js
+++ b/samples/js/components/examples/InsertExample.js
@@ -1,11 +1,10 @@
 import React from "react";
-import notification from "../../helpers/notification";
+import notification from "helpers/notification";
 import {
-  getContainer,
   getType,
   getMessage,
   getTitle
-} from "../../helpers/randomize";
+} from "helpers/randomize";
 
 export default function InsertExample({ addNotification }) {
   const add = (insert) => {
diff --git a/samples/js/components/examples/TypeExample.js b/samples/js/components/examples/TypeExample.js
index 68632b7..8d4a23a 100644
--- a/samples/js/components/examples/TypeExample.js
+++ b/samples/js/components/examples/TypeExample.js
@@ -1,10 +1,10 @@
 import React from "react";
-import notification from "../../helpers/notification";
+import notification from "helpers/notification";
 import {
   getContainer,
   getMessage,
   getTitle
-} from "../../helpers/randomize";
+} from "helpers/randomize";
 
 export default class TypeExample extends React.Component {
   constructor(props) {
diff --git a/samples/js/components/examples/UsageExample.js b/samples/js/components/examples/UsageExample.js
index 5620c2c..2ebf2aa 100644
--- a/samples/js/components/examples/UsageExample.js
+++ b/samples/js/components/examples/UsageExample.js
@@ -1,10 +1,8 @@
 import React from "react";
 import Highlight from "react-highlight";
-import { usage } from "../../helpers/code";
-import notification from "../../helpers/notification";
-import notificationObject from "../../../../tests/mocks/notification.mock";
+import { usage } from "helpers/code";
 
-export default function UsageExample({ addNotification }) {
+export default function UsageExample() {
   return (
     <div className="row">
       <div className="col-lg-8 offset-lg-2 column col-md-10 offset-md-1 col-sm-12 heading">
diff --git a/samples/js/helpers/code.js b/samples/js/helpers/code.js
index 3444f93..cfcc5a3 100644
--- a/samples/js/helpers/code.js
+++ b/samples/js/helpers/code.js
@@ -7,10 +7,11 @@ class App extends React.Component {
   constructor(props) {
     super(props);
     this.addNotification = this.addNotification.bind(this);
+    this.notificationDOMRef = React.createRef();
   }
 
   addNotification() {
-    this.notificationDOMRef.addNotification({
+    this.notificationDOMRef.current.addNotification({
       title: "Awesomeness",
       message: "Awesome Notifications!",
       type: "success",
@@ -26,7 +27,7 @@ class App extends React.Component {
   render() {
     return (
       <div className="app-content">
-        <ReactNotification ref={input => this.notificationDOMRef = input} />
+        <ReactNotification ref={this.notificationDOMRef} />
         <button onClick={this.addNotification} className="btn btn-primary">
           Add Awesome Notification
         </button>
diff --git a/samples/js/helpers/notification.js b/samples/js/helpers/notification.js
index d34146a..3d43232 100644
--- a/samples/js/helpers/notification.js
+++ b/samples/js/helpers/notification.js
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default {
   title: "Awesomeness",
   message: "Awesome Notifications!",
@@ -47,7 +45,7 @@ export default {
       delay: 0
     }
   },
-  
+
   dismiss: {
     duration: 5000
   }
diff --git a/samples/js/helpers/randomize.js b/samples/js/helpers/randomize.js
index e571716..6caa779 100644
--- a/samples/js/helpers/randomize.js
+++ b/samples/js/helpers/randomize.js
@@ -1,8 +1,18 @@
-import React from "react";
-
-const containers = ["top-left", "top-right", "bottom-left", "bottom-right"];
+const containers = [
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
 
-const types = ["success", "danger", "warning", "default", "info", "awesome"];
+const types = [
+  "success",
+  "danger",
+  "warning",
+  "default",
+  "info",
+  "awesome"
+];
 
 const successMessages = [
   "All your data has been successfully updated",
diff --git a/samples/js/index.js b/samples/js/index.js
index 5e70810..de547f4 100644
--- a/samples/js/index.js
+++ b/samples/js/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import App from "./components/App";
-import "../styles/stylesheet.scss";
+import App from "components/App";
+import "styles/stylesheet.scss";
 import "@babel/polyfill";
 
 ReactDOM.render(<App />, document.getElementById("root"));
\ No newline at end of file