GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-02-04 01:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: theme

Browse Source
This commit is contained in:
AykutSarac 2024-05-06 22:42:10 +03:00
parent c6147418d9
commit 5a5fb99ee2
No known key found for this signature in database
4 changed files with 59 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/layout/EditorWrapper/index.tsx
View File

@ -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 (
<ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
<MantineProvider forceColorScheme={darkmodeEnabled ? "dark" : "light"}>
<QueryClientProvider client={queryClient}>
<ModalController />
{children}
</QueryClientProvider>
</MantineProvider>
</ThemeProvider>
);
};

11
src/pages/_app.tsx
View File

@ -15,17 +15,16 @@ import { supabase } from "src/lib/api/supabase";
import useUser from "src/store/useUser"; import useUser from "src/store/useUser";
const Toaster = dynamic(() => import("react-hot-toast").then(c => c.Toaster)); 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 isDevelopment = process.env.NODE_ENV === "development";
const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID; const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;
ReactGA.initialize(GA_TRACKING_ID, { testMode: isDevelopment }); ReactGA.initialize(GA_TRACKING_ID, { testMode: isDevelopment });
const mantineTheme = createTheme({
primaryShade: 8,
});
function JsonCrack({ Component, pageProps }: AppProps) { function JsonCrack({ Component, pageProps }: AppProps) {
const router = useRouter(); const router = useRouter();
const setSession = useUser(state => state.setSession); const setSession = useUser(state => state.setSession);
@ -53,7 +52,6 @@ function JsonCrack({ Component, pageProps }: AppProps) {
<Head> <Head>
<title>JSON Crack | Best JSON Visualizer, Formatter and Viewer for everyone</title> <title>JSON Crack | Best JSON Visualizer, Formatter and Viewer for everyone</title>
</Head> </Head>
<MantineProvider theme={mantineTheme}> <MantineProvider theme={mantineTheme}>
<ThemeProvider theme={lightTheme}> <ThemeProvider theme={lightTheme}>
<Toaster <Toaster
@ -74,7 +72,6 @@ function JsonCrack({ Component, pageProps }: AppProps) {
<GlobalStyle /> <GlobalStyle />
<Loading /> <Loading />
<Component {...pageProps} /> <Component {...pageProps} />
<ExternalMode />
</ThemeProvider> </ThemeProvider>
</MantineProvider> </MantineProvider>
</> </>

61
src/pages/editor.tsx
View File

@ -1,13 +1,29 @@
import React from "react"; import React from "react";
import dynamic from "next/dynamic";
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router"; 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 { BottomBar } from "src/containers/Editor/BottomBar";
import Panes from "src/containers/Editor/Panes"; import Panes from "src/containers/Editor/Panes";
import { Toolbar } from "src/containers/Toolbar"; import { Toolbar } from "src/containers/Toolbar";
import { EditorWrapper } from "src/layout/EditorWrapper"; import useConfig from "src/store/useConfig";
import useFile from "src/store/useFile"; 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` export const StyledPageWrapper = styled.div`
height: calc(100vh - 27px); height: calc(100vh - 27px);
width: 100%; width: 100%;
@ -25,30 +41,37 @@ export const StyledEditorWrapper = styled.div`
const EditorPage: React.FC = () => { const EditorPage: React.FC = () => {
const { query, isReady } = useRouter(); const { query, isReady } = useRouter();
const hasQuery = React.useMemo(() => Object.keys(query).length > 0, [query]);
const checkEditorSession = useFile(state => state.checkEditorSession); const checkEditorSession = useFile(state => state.checkEditorSession);
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
React.useEffect(() => { React.useEffect(() => {
if (isReady) checkEditorSession(query?.json); if (isReady) checkEditorSession(query?.json);
}, [checkEditorSession, isReady, query]); }, [checkEditorSession, isReady, query]);
return ( return (
<EditorWrapper> <>
<StyledEditorWrapper> <Head>
<Head> <title>Editor | JSON Crack</title>
<title>Editor | JSON Crack</title> <link rel="canonical" href="https://jsoncrack.com/editor" />
<link rel="canonical" href="https://jsoncrack.com/editor" /> </Head>
{hasQuery && <meta name="robots" content="noindex,nofollow" />} <MantineProvider forceColorScheme={darkmodeEnabled ? "dark" : "light"}>
</Head> <ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
<StyledPageWrapper> <QueryClientProvider client={queryClient}>
<Toolbar /> <ExternalMode />
<StyledEditorWrapper> <ModalController />
<Panes /> <StyledEditorWrapper>
</StyledEditorWrapper> <StyledPageWrapper>
</StyledPageWrapper> <Toolbar />
<BottomBar /> <StyledEditorWrapper>
</StyledEditorWrapper> <Panes />
</EditorWrapper> </StyledEditorWrapper>
</StyledPageWrapper>
<BottomBar />
</StyledEditorWrapper>
</QueryClientProvider>
</ThemeProvider>
</MantineProvider>
</>
); );
}; };

26
src/pages/widget.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import Head from "next/head"; import Head from "next/head";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { MantineProvider, useMantineColorScheme } from "@mantine/core"; import { MantineProvider } from "@mantine/core";
import { ThemeProvider } from "styled-components"; import { ThemeProvider } from "styled-components";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { darkTheme, lightTheme } from "src/constants/theme"; 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 WidgetPage = () => {
const { query, push, isReady } = useRouter(); const { query, push, isReady } = useRouter();
const { setColorScheme } = useMantineColorScheme();
const [theme, setTheme] = React.useState<"dark" | "light">("dark"); const [theme, setTheme] = React.useState<"dark" | "light">("dark");
const checkEditorSession = useFile(state => state.checkEditorSession); const checkEditorSession = useFile(state => state.checkEditorSession);
const setContents = useFile(state => state.setContents); const setContents = useFile(state => state.setContents);
@ -43,7 +42,6 @@ const WidgetPage = () => {
try { try {
if (!event.data?.json) return; if (!event.data?.json) return;
if (event.data?.options?.theme === "light" || event.data?.options?.theme === "dark") { if (event.data?.options?.theme === "light" || event.data?.options?.theme === "dark") {
setColorScheme(event.data.options.theme);
setTheme(event.data.options.theme); setTheme(event.data.options.theme);
} }
@ -57,18 +55,20 @@ const WidgetPage = () => {
window.addEventListener("message", handler); window.addEventListener("message", handler);
return () => window.removeEventListener("message", handler); return () => window.removeEventListener("message", handler);
}, [setColorScheme, setContents, setDirection, theme]); }, [setContents, setDirection, theme]);
return ( return (
<MantineProvider forceColorScheme={theme}> <>
<ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}> <Head>
<Head> <meta name="robots" content="noindex,nofollow" />
<meta name="robots" content="noindex,nofollow" /> </Head>
</Head> <MantineProvider forceColorScheme={theme}>
<Toolbar isWidget /> <ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
<Graph isWidget /> <Toolbar isWidget />
</ThemeProvider> <Graph isWidget />
</MantineProvider> </ThemeProvider>
</MantineProvider>
</>
); );
}; };