From 81d0cf7aceba56b12fa66f68b5a1bd99b36d6c06 Mon Sep 17 00:00:00 2001
From: Amit Dhamu <amit.dhamu@yum.com>
Date: Tue, 26 Sep 2023 15:40:34 +0100
Subject: [PATCH] Leave it at that

---
 src/Wrapper.tsx                      |  9 +++---
 src/components/DarkModeToggle.tsx    |  2 +-
 src/components/Preferences/Theme.tsx |  3 +-
 src/context/SettingsProvider.tsx     |  4 +--
 src/hooks/useTheme.ts                | 43 ++++++++++++++++------------
 src/index.html                       | 34 +++++++++++-----------
 src/utils.ts                         |  2 --
 7 files changed, 52 insertions(+), 45 deletions(-)
 delete mode 100644 src/utils.ts

diff --git a/src/Wrapper.tsx b/src/Wrapper.tsx
index 10c8511..826e8c6 100644
--- a/src/Wrapper.tsx
+++ b/src/Wrapper.tsx
@@ -9,17 +9,18 @@ import { globalStyles } from './theme'
 
 import type { ReactNode } from 'react'
 
-const matchMediaFallback = (): boolean =>
-  window.matchMedia?.('(prefers-color-scheme: dark)')?.matches
-
 const Wrapper = ({ children }: { children: ReactNode }) => {
   const {
-    settings: { prefersDarkMode = matchMediaFallback() },
+    settings: { prefersDarkMode },
     setSetting,
   } = useContext(SettingsContext)
 
   const theme = useTheme()
 
+  if (!theme) {
+    return null
+  }
+
   return (
     <ThemeProvider theme={theme}>
       <Global styles={globalStyles(theme)} />
diff --git a/src/components/DarkModeToggle.tsx b/src/components/DarkModeToggle.tsx
index 09d9f22..a46ad68 100644
--- a/src/components/DarkModeToggle.tsx
+++ b/src/components/DarkModeToggle.tsx
@@ -31,7 +31,7 @@ const ToggleArea = styled(Switch)`
 `
 
 type Props = {
-  isDarkMode: boolean
+  isDarkMode?: boolean
   toggleDarkMode: () => void
 }
 
diff --git a/src/components/Preferences/Theme.tsx b/src/components/Preferences/Theme.tsx
index 926913c..f5562c7 100644
--- a/src/components/Preferences/Theme.tsx
+++ b/src/components/Preferences/Theme.tsx
@@ -5,7 +5,6 @@ import styled from '@emotion/styled'
 import Button from './Button'
 import { SettingsContext } from '../../context/SettingsProvider'
 import { useTheme } from '../../hooks/useTheme'
-import { matchMediaFallback } from '../../utils'
 
 import type { Theme } from '@emotion/react'
 
@@ -48,7 +47,7 @@ type AvailableOption =
 
 const Themer = () => {
   const {
-    settings: { prefersDarkMode = matchMediaFallback() },
+    settings: { prefersDarkMode },
     setSetting,
     deleteSetting,
   } = useContext(SettingsContext)
diff --git a/src/context/SettingsProvider.tsx b/src/context/SettingsProvider.tsx
index cfd7c7b..149ffe1 100644
--- a/src/context/SettingsProvider.tsx
+++ b/src/context/SettingsProvider.tsx
@@ -63,13 +63,13 @@ const SettingsProvider = ({ children }: SettingsProviderProps) => {
     })()
   }, [])
 
-  const setSetting = <
+  const setSetting = async <
     T extends string | boolean | BookmarkLink[] | undefined | Theme,
   >(
     setting: string,
     value: T
   ) => {
-    set(setting, value, store).then(() => {
+    await set(setting, value, store).then(() => {
       setSettings(prevState => ({
         ...prevState,
         [setting]: value,
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index b39caa6..1a41931 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -1,30 +1,37 @@
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useMemo, useState } from 'react'
 
 import { SettingsContext } from '../context/SettingsProvider'
 import { getTheme } from '../theme'
-import { matchMediaFallback } from '../utils'
 
 import type { Theme } from '@emotion/react'
 
-export const useTheme = (): Theme => {
+export const useTheme = () => {
   const {
-    settings: { themeLight, themeDark, prefersDarkMode = matchMediaFallback() },
+    settings: { themeLight, themeDark, prefersDarkMode },
   } = useContext(SettingsContext)
-  const [theme, setTheme] = useState(getTheme(prefersDarkMode))
-
-  useEffect(() => {
-    const refreshTheme = () => {
-      if (prefersDarkMode) {
-        return themeDark !== undefined
-          ? setTheme(themeDark)
-          : setTheme(getTheme(true))
-      }
-
-      return themeLight !== undefined
-        ? setTheme(themeLight)
-        : setTheme(getTheme(false))
+
+  const [theme, setTheme] = useState<Theme>()
+
+  useMemo(() => {
+    let themeToSet
+
+    if (
+      prefersDarkMode ||
+      window.matchMedia?.('(prefers-color-scheme: dark)')?.matches
+    ) {
+      themeToSet = themeDark ?? getTheme(true)
+    }
+
+    if (
+      !prefersDarkMode ||
+      !window.matchMedia?.('(prefers-color-scheme: dark)')?.matches
+    ) {
+      themeToSet = themeLight ?? getTheme(false)
+    }
+
+    if (JSON.stringify(themeToSet) !== JSON.stringify(theme)) {
+      setTheme(themeToSet)
     }
-    refreshTheme()
   }, [prefersDarkMode, themeLight, themeDark])
 
   return theme
diff --git a/src/index.html b/src/index.html
index 1790aae..22d3db7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,19 +1,21 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <title>Start 🚀</title>
-    <meta charset="utf-8" />
-    <meta name="description" content="Start Page" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap"
-      rel="stylesheet"
-    />
-  </head>
 
-  <body>
-    <main id="app"></main>
-    <script type="module" src="./index.tsx"></script>
-  </body>
-</html>
+<head>
+  <title>Start 🚀</title>
+  <meta charset="utf-8" />
+  <meta name="description" content="Start Page" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap" rel="stylesheet" />
+  <style>
+
+  </style>
+</head>
+
+<body>
+  <main id="app"></main>
+  <script type="module" src="./index.tsx"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/utils.ts b/src/utils.ts
deleted file mode 100644
index 78268d8..0000000
--- a/src/utils.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const matchMediaFallback = (): boolean =>
-  window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches