From dc49b8f6c90a186d535dc525769ce6d4686279a8 Mon Sep 17 00:00:00 2001
From: marabesi <matheus.marabesi@gmail.com>
Date: Mon, 4 Mar 2024 06:10:48 +0100
Subject: [PATCH] refactor: split theme context into a file

---
 src/App.tsx                             | 8 +++-----
 src/DarkMode.tsx                        | 7 +++++++
 src/components/ui/editor/JsonEditor.tsx | 3 ++-
 3 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 src/DarkMode.tsx

diff --git a/src/App.tsx b/src/App.tsx
index dc37461..aee81ed 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import { createContext, useEffect, useState } from 'react';
 import DefaultLayout from './components/ui/layout/Default';
 import { editorOptions } from './components/ui/editor/default-options';
 import { EditorOptions } from './types/components/Editor';
+import { theme, ThemeProvider } from './DarkMode';
 
 export const SettingsContext = createContext(editorOptions);
 
@@ -12,9 +13,6 @@ const isDarkModeSet = () => {
   return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 };
 
-const theme = { darkMode: false };
-export const ThemeContext = createContext(theme);
-
 function App() {
   const [savedState, setSavedState] = useState<string>('');
   const [darkModeEnabled, setDarkMode] = useState<boolean>(theme.darkMode);
@@ -39,7 +37,7 @@ function App() {
 
   return (
     <Router>
-      <ThemeContext.Provider value={theme as never}>
+      <ThemeProvider value={theme as never}>
         <DefaultLayout onDarkThemeChanged={onDarkThemeChanged} darkModeEnabled={darkModeEnabled}>
           <Routes>
             <Route path="/" element={<Editors onPersist={saveState} currentJson={savedState} />} />
@@ -50,7 +48,7 @@ function App() {
             } />
           </Routes>
         </DefaultLayout>
-      </ThemeContext.Provider>
+      </ThemeProvider>
     </Router>
   );
 }
diff --git a/src/DarkMode.tsx b/src/DarkMode.tsx
new file mode 100644
index 0000000..bd92f69
--- /dev/null
+++ b/src/DarkMode.tsx
@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+export const theme = { darkMode: false };
+export const ThemeContext = createContext(theme);
+
+export const ThemeProvider = ThemeContext.Provider;
+
diff --git a/src/components/ui/editor/JsonEditor.tsx b/src/components/ui/editor/JsonEditor.tsx
index 0dee58b..8a42e43 100644
--- a/src/components/ui/editor/JsonEditor.tsx
+++ b/src/components/ui/editor/JsonEditor.tsx
@@ -1,10 +1,11 @@
 import CodeMirror, { BasicSetupOptions, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import fullConfig from '../../../tailwindResolver';
 import { json } from '@codemirror/lang-json';
-import { SettingsContext, ThemeContext } from '../../../App';
+import { SettingsContext } from '../../../App';
 import { CSSProperties, ForwardedRef, forwardRef, useContext } from 'react';
 import { Option, Properties } from '../../../types/components/Editor';
 import { duotoneLight } from '@uiw/codemirror-theme-duotone';
+import { ThemeContext } from '../../../DarkMode';
 
 type Event = {
   value: string;