From f54ff38039fb530ef0893d064d428e77b6e6ea1f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9goire=20Delattre?= <gregoire.delattre@gmail.com>
Date: Sat, 3 Jun 2017 13:56:41 +0200
Subject: [PATCH] Add a RefreshIndicator component

---
 src/public/js/components/buttons/actions.js   | 13 +++----------
 src/public/js/components/buttons/refresh.js   | 18 ++++++++++++++++++
 src/public/js/components/buttons/subtitles.js | 15 +++------------
 src/public/js/components/shows/details.js     | 13 ++-----------
 4 files changed, 26 insertions(+), 33 deletions(-)
 create mode 100644 src/public/js/components/buttons/refresh.js

diff --git a/src/public/js/components/buttons/actions.js b/src/public/js/components/buttons/actions.js
index 5fa0b43..41b42e1 100644
--- a/src/public/js/components/buttons/actions.js
+++ b/src/public/js/components/buttons/actions.js
@@ -2,6 +2,8 @@ import React from "react"
 
 import { MenuItem } from "react-bootstrap"
 
+import RefreshIndicator from "./refresh"
+
 export class WishlistButton extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -71,16 +73,7 @@ export class RefreshButton extends React.PureComponent {
   render() {
     return (
       <MenuItem onClick={this.handleClick}>
-        {this.props.fetching ||
-          <span>
-            <i className="fa fa-refresh"></i> Refresh
-          </span>
-        }
-        {this.props.fetching &&
-            <span>
-              <i className="fa fa-spin fa-refresh"></i> Refreshing
-            </span>
-        }
+        <RefreshIndicator refresh={this.props.fetching} />
       </MenuItem>
     );
   }
diff --git a/src/public/js/components/buttons/refresh.js b/src/public/js/components/buttons/refresh.js
new file mode 100644
index 0000000..b031732
--- /dev/null
+++ b/src/public/js/components/buttons/refresh.js
@@ -0,0 +1,18 @@
+import React from "react"
+
+export default function RefreshIndicator(props) {
+  if (!props.refresh) {
+    return (
+      <span>
+        <i className="fa fa-refresh"></i> Refresh
+      </span>
+    );
+  } else {
+    return (
+      <span>
+        <i className="fa fa-spin fa-refresh"></i> Refreshing
+      </span>
+    );
+  }
+}
+
diff --git a/src/public/js/components/buttons/subtitles.js b/src/public/js/components/buttons/subtitles.js
index 8d48064..951eae0 100644
--- a/src/public/js/components/buttons/subtitles.js
+++ b/src/public/js/components/buttons/subtitles.js
@@ -2,6 +2,8 @@ import React from "react"
 
 import { DropdownButton, MenuItem } from "react-bootstrap"
 
+import RefreshIndicator from "./refresh"
+
 export default class SubtitlesButton extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -34,18 +36,7 @@ export default class SubtitlesButton extends React.PureComponent {
             case "action":
               return (
                 <MenuItem key={index} onClick={(event) => this.handleClick(event, e.url)}>
-                  {this.props.fetching ||
-                      <span>
-                        <i className="fa fa-refresh">
-                        </i> Refresh
-                      </span>
-                  }
-                  {this.props.fetching &&
-                      <span>
-                        <i className="fa fa-spin fa-refresh">
-                        </i> Refreshing
-                      </span>
-                  }
+                  <RefreshIndicator refresh={this.props.fetching} />
                 </MenuItem>
               );
             case "divider":
diff --git a/src/public/js/components/shows/details.js b/src/public/js/components/shows/details.js
index 803a525..0618fed 100644
--- a/src/public/js/components/shows/details.js
+++ b/src/public/js/components/shows/details.js
@@ -9,7 +9,7 @@ import Loader from "../loader/loader"
 import DownloadButton from "../buttons/download"
 import SubtitlesButton from "../buttons/subtitles"
 import ImdbButton from "../buttons/imdb"
-
+import RefreshIndicator from "../buttons/refresh"
 
 import { OverlayTrigger, Tooltip } from "react-bootstrap"
 
@@ -349,16 +349,7 @@ class GetDetailsButton extends React.PureComponent {
   render() {
     return (
       <a type="button" className="btn btn-xs btn-info" onClick={(e) => this.handleClick(e)}>
-        {this.props.data.get("fetching") ||
-            <span>
-              <i className="fa fa-refresh"></i> Refresh
-            </span>
-        }
-        {this.props.data.get("fetching") &&
-            <span>
-              <i className="fa fa-spin fa-refresh"></i> Refreshing
-            </span>
-        }
+        <RefreshIndicator refresh={this.props.data.get("fetching")} />
       </a>
     );
   }