From 5a5fb99ee21d0d5aa906da220a55ef55da4a5c54 Mon Sep 17 00:00:00 2001 From: AykutSarac Date: Mon, 6 May 2024 22:42:10 +0300 Subject: [PATCH] fix: theme --- src/layout/EditorWrapper/index.tsx | 40 -------------------- src/pages/_app.tsx | 11 ++---- src/pages/editor.tsx | 61 ++++++++++++++++++++---------- src/pages/widget.tsx | 26 ++++++------- 4 files changed, 59 insertions(+), 79 deletions(-) delete mode 100644 src/layout/EditorWrapper/index.tsx diff --git a/src/layout/EditorWrapper/index.tsx b/src/layout/EditorWrapper/index.tsx deleted file mode 100644 index 70ffd30..0000000 --- a/src/layout/EditorWrapper/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import dynamic from "next/dynamic"; -import { MantineProvider, useMantineColorScheme } from "@mantine/core"; -import { ThemeProvider } from "styled-components"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { lightTheme, darkTheme } from "src/constants/theme"; -import useConfig from "src/store/useConfig"; - -const ModalController = dynamic(() => import("src/layout/ModalController")); - -const queryClient = new QueryClient({ - defaultOptions: { - queries: { - refetchOnWindowFocus: false, - retry: false, - }, - }, -}); - -export const EditorWrapper: React.FC<{ - children: React.ReactNode; -}> = ({ children }) => { - const { setColorScheme } = useMantineColorScheme(); - const darkmodeEnabled = useConfig(state => state.darkmodeEnabled); - - React.useEffect(() => { - if (darkmodeEnabled) setColorScheme("dark"); - }, [darkmodeEnabled, setColorScheme]); - - return ( - - - - - {children} - - - - ); -}; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 65c5b09..f81091c 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -15,17 +15,16 @@ import { supabase } from "src/lib/api/supabase"; import useUser from "src/store/useUser"; const Toaster = dynamic(() => import("react-hot-toast").then(c => c.Toaster)); -const ExternalMode = dynamic(() => import("src/layout/ExternalMode")); - -const mantineTheme = createTheme({ - primaryShade: 8, -}); const isDevelopment = process.env.NODE_ENV === "development"; const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID; ReactGA.initialize(GA_TRACKING_ID, { testMode: isDevelopment }); +const mantineTheme = createTheme({ + primaryShade: 8, +}); + function JsonCrack({ Component, pageProps }: AppProps) { const router = useRouter(); const setSession = useUser(state => state.setSession); @@ -53,7 +52,6 @@ function JsonCrack({ Component, pageProps }: AppProps) { JSON Crack | Best JSON Visualizer, Formatter and Viewer for everyone - - diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx index 5451c12..21e1eed 100644 --- a/src/pages/editor.tsx +++ b/src/pages/editor.tsx @@ -1,13 +1,29 @@ import React from "react"; +import dynamic from "next/dynamic"; import Head from "next/head"; import { useRouter } from "next/router"; -import styled from "styled-components"; +import { MantineProvider } from "@mantine/core"; +import styled, { ThemeProvider } from "styled-components"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import { darkTheme, lightTheme } from "src/constants/theme"; import { BottomBar } from "src/containers/Editor/BottomBar"; import Panes from "src/containers/Editor/Panes"; import { Toolbar } from "src/containers/Toolbar"; -import { EditorWrapper } from "src/layout/EditorWrapper"; +import useConfig from "src/store/useConfig"; import useFile from "src/store/useFile"; +const ModalController = dynamic(() => import("src/layout/ModalController")); +const ExternalMode = dynamic(() => import("src/layout/ExternalMode")); + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + retry: false, + }, + }, +}); + export const StyledPageWrapper = styled.div` height: calc(100vh - 27px); width: 100%; @@ -25,30 +41,37 @@ export const StyledEditorWrapper = styled.div` const EditorPage: React.FC = () => { const { query, isReady } = useRouter(); - const hasQuery = React.useMemo(() => Object.keys(query).length > 0, [query]); const checkEditorSession = useFile(state => state.checkEditorSession); + const darkmodeEnabled = useConfig(state => state.darkmodeEnabled); React.useEffect(() => { if (isReady) checkEditorSession(query?.json); }, [checkEditorSession, isReady, query]); return ( - - - - Editor | JSON Crack - - {hasQuery && } - - - - - - - - - - + <> + + Editor | JSON Crack + + + + + + + + + + + + + + + + + + + + ); }; diff --git a/src/pages/widget.tsx b/src/pages/widget.tsx index 7fc5ff9..2453f14 100644 --- a/src/pages/widget.tsx +++ b/src/pages/widget.tsx @@ -2,7 +2,7 @@ import React from "react"; import dynamic from "next/dynamic"; import Head from "next/head"; import { useRouter } from "next/router"; -import { MantineProvider, useMantineColorScheme } from "@mantine/core"; +import { MantineProvider } from "@mantine/core"; import { ThemeProvider } from "styled-components"; import toast from "react-hot-toast"; import { darkTheme, lightTheme } from "src/constants/theme"; @@ -23,7 +23,6 @@ const Graph = dynamic(() => import("src/containers/Views/GraphView").then(c => c const WidgetPage = () => { const { query, push, isReady } = useRouter(); - const { setColorScheme } = useMantineColorScheme(); const [theme, setTheme] = React.useState<"dark" | "light">("dark"); const checkEditorSession = useFile(state => state.checkEditorSession); const setContents = useFile(state => state.setContents); @@ -43,7 +42,6 @@ const WidgetPage = () => { try { if (!event.data?.json) return; if (event.data?.options?.theme === "light" || event.data?.options?.theme === "dark") { - setColorScheme(event.data.options.theme); setTheme(event.data.options.theme); } @@ -57,18 +55,20 @@ const WidgetPage = () => { window.addEventListener("message", handler); return () => window.removeEventListener("message", handler); - }, [setColorScheme, setContents, setDirection, theme]); + }, [setContents, setDirection, theme]); return ( - - - - - - - - - + <> + + + + + + + + + + ); };