From 5f5ee9eb63a947b0bfea2ac09617be2e800e781c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 16 Apr 2020 19:39:15 +0100
Subject: [PATCH] fix(ui): rewrite BodyTheme using hooks

---
 ui/src/Components/Theme/index.js      | 35 +++++++++---------------
 ui/src/Components/Theme/index.test.js | 38 ++++++++++++++++-----------
 2 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/ui/src/Components/Theme/index.js b/ui/src/Components/Theme/index.js
index 9617189a3..e5d0702a7 100644
--- a/ui/src/Components/Theme/index.js
+++ b/ui/src/Components/Theme/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -40,28 +40,19 @@ const Placeholder = () => {
 
 const ThemeContext = React.createContext();
 
-class BodyTheme extends Component {
-  onToggleBodyClass = (isDark) => {
-    document.body.classList.toggle("theme-dark", isDark);
-    document.body.classList.toggle("theme-light", !isDark);
-  };
+const BodyTheme = () => {
+  const context = React.useContext(ThemeContext);
 
-  componentDidMount() {
-    this.onToggleBodyClass(this.context.isDark);
-  }
+  useEffect(() => {
+    document.body.classList.toggle("theme-dark", context.isDark);
+    document.body.classList.toggle("theme-light", !context.isDark);
+  }, [context.isDark]);
 
-  componentDidUpdate() {
-    this.onToggleBodyClass(this.context.isDark);
-  }
-
-  render() {
-    return (
-      <React.Suspense fallback={<Placeholder />}>
-        {this.context.isDark ? <DarkTheme /> : <LightTheme />}
-      </React.Suspense>
-    );
-  }
-}
-BodyTheme.contextType = ThemeContext;
+  return (
+    <React.Suspense fallback={<Placeholder />}>
+      {context.isDark ? <DarkTheme /> : <LightTheme />}
+    </React.Suspense>
+  );
+};
 
 export { BodyTheme, ThemeContext };
diff --git a/ui/src/Components/Theme/index.test.js b/ui/src/Components/Theme/index.test.js
index f08338103..6a56ae67e 100644
--- a/ui/src/Components/Theme/index.test.js
+++ b/ui/src/Components/Theme/index.test.js
@@ -1,43 +1,49 @@
-import * as React from "react";
+import React from "react";
 
 import { mount } from "enzyme";
 
-import { BodyTheme, ThemeContext } from ".";
+import { BodyTheme } from ".";
+
+const context = {
+  isDark: true,
+};
 
 beforeEach(() => {
   document.body.classList.remove("theme-light");
   document.body.classList.remove("theme-dark");
+
+  jest.spyOn(React, "useContext").mockImplementation(() => {
+    return context;
+  });
+});
+
+afterEach(() => {
+  jest.resetAllMocks();
 });
 
 describe("<BodyTheme />", () => {
   it("uses light theme when ThemeContext->isDark is false", () => {
-    mount(<BodyTheme />, {
-      wrappingComponent: ThemeContext.Provider,
-      wrappingComponentProps: { value: { isDark: false } },
-    });
+    context.isDark = false;
+    mount(<BodyTheme />);
     expect(document.body.classList.contains("theme-light")).toEqual(true);
   });
 
   it("uses dark theme when ThemeContext->isDark is true", () => {
-    mount(<BodyTheme />, {
-      wrappingComponent: ThemeContext.Provider,
-      wrappingComponentProps: { value: { isDark: true } },
-    });
+    context.isDark = true;
+    mount(<BodyTheme />);
     expect(document.body.classList.contains("theme-dark")).toEqual(true);
   });
 
   it("updates theme when ThemeContext->isDark is updated", () => {
-    const tree = mount(<BodyTheme />, {
-      wrappingComponent: ThemeContext.Provider,
-      wrappingComponentProps: { value: { isDark: true } },
-    });
+    context.isDark = true;
+    const tree = mount(<BodyTheme />);
     expect(document.body.classList.contains("theme-dark")).toEqual(true);
 
     document.body.classList.remove("theme-light");
     document.body.classList.remove("theme-dark");
 
-    const provider = tree.getWrappingComponent();
-    provider.setProps({ value: { isDark: false } });
+    context.isDark = false;
+    tree.setProps({});
 
     expect(document.body.classList.contains("theme-light")).toEqual(true);
   });