nodejs · SMotaal · Mar 11, 2020 · Nov 7, 2019 · Nov 10, 2019 · Nov 10, 2019
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v8.12.0
+v8.12.0
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "author": "Adam Miller <ammiller@linkedin.com>",
   "private": true,
   "dependencies": {
+    "@smotaal.io/dark-mode-controller": "^0.0.4",
     "@emotion/core": "^10.0.7",
     "@types/react-helmet": "^5.0.7",
     "dotenv": "^6.0.0",

diff --git a/src/components/controls.tsx b/src/components/controls.tsx
diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -2,7 +2,7 @@ import { Link } from 'gatsby';
 import React from 'react';
 import logoLight from '../images/logos/nodejs-logo-light-mode.svg';
 import logoDark from '../images/logos/nodejs-logo-dark-mode.svg';
-import DarkModeController from '../util/DarkModeController';
+import defaultDarkModeController from '../util/darkModeController';
 
 const activeStyleTab = {
   fontWeight: 'var(--font-weight-semibold)',
@@ -11,10 +11,12 @@ const activeStyleTab = {
 };
 
 interface Props {
-  darkModeController?: DarkModeController;
+  darkModeController?: typeof defaultDarkModeController;
 }
 
-const Header = ({ darkModeController }: Props): JSX.Element => (
+const Header = ({
+  darkModeController = defaultDarkModeController,
+}: Props): JSX.Element => (
   <nav className="nav">
     <div className="logo">
       <Link to="/">
@@ -56,16 +58,8 @@ const Header = ({ darkModeController }: Props): JSX.Element => (
         <button
           type="button"
           className="dark-mode-toggle"
-          onClick={(): void => {
-            if (!darkModeController)
-              document.body.classList.toggle('dark-mode');
-          }}
-          onPointerDown={(): void => {
-            if (darkModeController) darkModeController.onPointerDown();
-          }}
-          onPointerUp={(): void => {
-            if (darkModeController) darkModeController.onPointerUp();
-          }}
+          onMouseDown={darkModeController.handleEvent}
+          onMouseUp={darkModeController.handleEvent}
         >
           <span className="sr-only">Toggle Dark Mode</span>
           <i className="material-icons light-mode-only">nights_stay</i>

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -7,7 +7,9 @@ import '../styles/tokens.css';
 import '../styles/layout.css';
 import '../styles/mobile.css';
 import SEO from './seo';
-import DarkModeController from '../util/DarkModeController';
+
+// NOTE: Quickly restores dark-mode state to mitigate onload flash
+import darkModeController from '../util/darkModeController';
 
 interface Props {
   children: React.ReactNode;
@@ -17,7 +19,6 @@ interface Props {
   href?: string;
   showFooter?: boolean;
   location?: any;
-  darkModeController?: DarkModeController;
 }
 
 const Layout = ({
@@ -27,7 +28,6 @@ const Layout = ({
   img,
   location,
   showFooter = true,
-  darkModeController = new DarkModeController(),
 }: Props): JSX.Element => {
   return (
     <React.Fragment>

diff --git a/src/util/DarkModeController.js b/src/util/DarkModeController.js
diff --git a/src/util/darkModeController.ts b/src/util/darkModeController.ts
@@ -0,0 +1,18 @@
+import React from 'react';
+import { DarkModeController } from '@smotaal.io/dark-mode-controller/commonjs';
+
+export interface ReactDarkModeController extends DarkModeController {
+  onPointerDown(
+    event: React.PointerEvent | React.MouseEvent | PointerEvent
+  ): void;
+  onPointerUp(
+    event: React.PointerEvent | React.MouseEvent | PointerEvent
+  ): void;
+  handleEvent(event?: React.PointerEvent | React.MouseEvent | Event): void;
+}
+
+// TODO: Figure out a way around HRM glitching (tackled upstream)
+// SEE: https://github.com/SMotaal/meta/issues/7
+
+// We're exporting a singleton
+export default new DarkModeController() as ReactDarkModeController;
diff --git a/test/components/__snapshots__/header.test.tsx.snap b/test/components/__snapshots__/header.test.tsx.snap
@@ -92,9 +92,8 @@ exports[`Tests for Header component renders correctly 1`] = `
     >
       <button
         className="dark-mode-toggle"
-        onClick={[Function]}
-        onPointerDown={[Function]}
-        onPointerUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseUp={[Function]}
         type="button"
       >
         <span

diff --git a/yarn.lock b/yarn.lock
@@ -1547,6 +1547,11 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
   integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
 
+"@smotaal.io/dark-mode-controller@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@smotaal.io/dark-mode-controller/-/dark-mode-controller-0.0.4.tgz#0412651850db97c8f9ca3e2f269042aae6a01755"
+  integrity sha512-BUU3rNWh8VAvpJgMzz/WTk7PdlA5tI+ys4XveO5Q5Zk6xgB0utWZZSGcbSP2rk+TlUvUsLKCzNDA3t3UTLsy2A==
+
 "@types/babel__core@^7.1.0":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		v8.12.0
		v8.12.0
SMotaal marked this conversation as resolved. Show resolved Hide resolved