GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-27 15:22:56 +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";
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) {
<Head>
<title>JSON Crack | Best JSON Visualizer, Formatter and Viewer for everyone</title>
</Head>
<MantineProvider theme={mantineTheme}>
<ThemeProvider theme={lightTheme}>
<Toaster
@ -74,7 +72,6 @@ function JsonCrack({ Component, pageProps }: AppProps) {
<GlobalStyle />
<Loading />
<Component {...pageProps} />
<ExternalMode />
</ThemeProvider>
</MantineProvider>
</>

61
src/pages/editor.tsx
View File

@ -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 (
<EditorWrapper>
<StyledEditorWrapper>
<Head>
<title>Editor | JSON Crack</title>
<link rel="canonical" href="https://jsoncrack.com/editor" />
{hasQuery && <meta name="robots" content="noindex,nofollow" />}
</Head>
<StyledPageWrapper>
<Toolbar />
<StyledEditorWrapper>
<Panes />
</StyledEditorWrapper>
</StyledPageWrapper>
<BottomBar />
</StyledEditorWrapper>
</EditorWrapper>
<>
<Head>
<title>Editor | JSON Crack</title>
<link rel="canonical" href="https://jsoncrack.com/editor" />
</Head>
<MantineProvider forceColorScheme={darkmodeEnabled ? "dark" : "light"}>
<ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
<QueryClientProvider client={queryClient}>
<ExternalMode />
<ModalController />
<StyledEditorWrapper>
<StyledPageWrapper>
<Toolbar />
<StyledEditorWrapper>
<Panes />
</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 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 (
<MantineProvider forceColorScheme={theme}>
<ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
<Head>
<meta name="robots" content="noindex,nofollow" />
</Head>
<Toolbar isWidget />
<Graph isWidget />
</ThemeProvider>
</MantineProvider>
<>
<Head>
<meta name="robots" content="noindex,nofollow" />
</Head>
<MantineProvider forceColorScheme={theme}>
<ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
<Toolbar isWidget />
<Graph isWidget />
</ThemeProvider>
</MantineProvider>
</>
);
};