fix(ui): rewrite BodyTheme using hooks

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 };

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);
   });