From 0359cdf6302558e7dab24f374d2d5c4761af313c Mon Sep 17 00:00:00 2001 From: Justin Hall Date: Sat, 9 Feb 2019 10:38:00 -0700 Subject: [PATCH 1/3] Replace react-use and local hook with use-dark-mode --- package.json | 4 +- src/@types/react-wait.d.ts | 1 - src/@types/use-callbag.d.ts | 1 - src/@types/use-onclickoutside.d.ts | 1 - src/components/layout.tsx | 8 +- src/utils/use-local-storage-state.ts | 24 ---- yarn.lock | 162 +++------------------------ 7 files changed, 19 insertions(+), 182 deletions(-) delete mode 100644 src/@types/react-wait.d.ts delete mode 100644 src/@types/use-callbag.d.ts delete mode 100644 src/@types/use-onclickoutside.d.ts delete mode 100644 src/utils/use-local-storage-state.ts diff --git a/package.json b/package.json index 5c51dabb..9d876e83 100644 --- a/package.json +++ b/package.json @@ -56,9 +56,9 @@ "react-helmet": "6.0.0-beta", "react-icons": "3.3.0", "react-key-handler": "1.2.0-beta.3", - "react-use": "5.3.0", "typeface-nunito": "0.0.54", - "typeface-source-sans-pro": "0.0.54" + "typeface-source-sans-pro": "0.0.54", + "use-dark-mode": "2.2.2" }, "devDependencies": { "@babel/core": "7.2.2", diff --git a/src/@types/react-wait.d.ts b/src/@types/react-wait.d.ts deleted file mode 100644 index 71a54ba9..00000000 --- a/src/@types/react-wait.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'react-wait'; diff --git a/src/@types/use-callbag.d.ts b/src/@types/use-callbag.d.ts deleted file mode 100644 index 9908446e..00000000 --- a/src/@types/use-callbag.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'use-callbag'; diff --git a/src/@types/use-onclickoutside.d.ts b/src/@types/use-onclickoutside.d.ts deleted file mode 100644 index f0727c5e..00000000 --- a/src/@types/use-onclickoutside.d.ts +++ /dev/null @@ -1 +0,0 @@ -declare module 'use-onclickoutside'; diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 00d6ee52..5ab931fc 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -7,7 +7,7 @@ import { css, Global, ClassNames } from '@emotion/core'; import { ThemeProvider } from 'emotion-theming'; import { IconContext } from 'react-icons'; import { StaticQuery, graphql } from 'gatsby'; -import useLocalStorageState from '../utils/use-local-storage-state'; +import useDarkMode from 'use-dark-mode'; import styled from '../utils/styled'; import { light, dark } from '../theme'; import Header from './header'; @@ -22,7 +22,7 @@ const FullHeightThemedContainer = styled.div` `; const Layout: React.FunctionComponent = ({ children }) => { - const [darkMode, setDarkMode] = useLocalStorageState('pwl:darkMode', false); + const darkMode = useDarkMode(false); return ( { data-version={siteMetadata.buildInfo.version} /> - + -
setDarkMode(!darkMode)} /> +
{children}