From bc0452a12ff00ea3831b8dba94d4d864c30c4134 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 30 Apr 2020 18:04:06 +0100
Subject: [PATCH] fix(ui): rewrite FetchIndicator component with hooks

---
 .../Components/NavBar/FetchIndicator/index.js | 55 ++++++++-----------
 1 file changed, 24 insertions(+), 31 deletions(-)

diff --git a/ui/src/Components/NavBar/FetchIndicator/index.js b/ui/src/Components/NavBar/FetchIndicator/index.js
index 1a684aefc..57d8dc8a8 100644
--- a/ui/src/Components/NavBar/FetchIndicator/index.js
+++ b/ui/src/Components/NavBar/FetchIndicator/index.js
@@ -1,7 +1,7 @@
-import React, { Component } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 
-import { observer } from "mobx-react";
+import { useObserver } from "mobx-react";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleNotch } from "@fortawesome/free-solid-svg-icons/faCircleNotch";
@@ -30,34 +30,27 @@ FetchIcon.defaultProps = {
   spin: false,
 };
 
-const FetchIndicator = observer(
-  class FetchIndicator extends Component {
-    static propTypes = {
-      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
-    };
-
-    render() {
-      const { alertStore } = this.props;
-
-      if (alertStore.status.paused) return <FetchIcon icon={faPauseCircle} />;
-
-      const status = alertStore.status.value.toString();
-
-      if (status === AlertStoreStatuses.Fetching.toString())
-        return (
-          <FetchIcon
-            icon={faCircleNotch}
-            color={alertStore.info.isRetrying ? "danger" : "muted"}
-            spin
-          />
-        );
-
-      if (status === AlertStoreStatuses.Processing.toString())
-        return <FetchIcon icon={faCircleNotch} color="success" spin />;
-
-      return <FetchIcon icon={faCircleNotch} visible={false} />;
-    }
-  }
-);
+const FetchIndicator = ({ alertStore }) => {
+  return useObserver(() =>
+    alertStore.status.paused ? (
+      <FetchIcon icon={faPauseCircle} />
+    ) : alertStore.status.value.toString() ===
+      AlertStoreStatuses.Fetching.toString() ? (
+      <FetchIcon
+        icon={faCircleNotch}
+        color={alertStore.info.isRetrying ? "danger" : "muted"}
+        spin
+      />
+    ) : alertStore.status.value.toString() ===
+      AlertStoreStatuses.Processing.toString() ? (
+      <FetchIcon icon={faCircleNotch} color="success" spin />
+    ) : (
+      <FetchIcon icon={faCircleNotch} visible={false} />
+    )
+  );
+};
+FetchIndicator.propTypes = {
+  alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+};
 
 export { FetchIndicator };