Skip to content

F
frontend
Commit cd13580e authored by isstuev's avatar isstuev
Browse files
Options

better cm update

parent f5349175
Hide whitespace changes
Inline Side-by-side
Showing with 20 additions and 22 deletions
pages/graphql.tsx
View file @ cd13580e
import { Spinner, useColorMode } from '@chakra-ui/react';
import { Spinner } from '@chakra-ui/react';
import type { NextPage } from 'next';
import dynamic from 'next/dynamic';
const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), {
......@@ -8,34 +8,16 @@ const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), {
import Head from 'next/head';
import React from 'react';
import isBrowser from 'lib/isBrowser';
import Page from 'ui/shared/Page/Page';
import PageTitle from 'ui/shared/Page/PageTitle';
const AppsPage: NextPage = () => {
const { colorMode } = useColorMode();
const [ show, setShow ] = React.useState(true);
React.useEffect(() => {
// force re-render GraphQL component to apply new theme
setShow(true);
}, [ show ]);
React.useEffect(() => {
if (isBrowser()) {
const graphqlTheme = window.localStorage.getItem('graphiql:theme');
if (graphqlTheme !== colorMode) {
window.localStorage.setItem('graphiql:theme', colorMode);
setShow(false);
}
}
}, [ colorMode ]);
return (
<Page>
<Head><title>Graph Page</title></Head>
<PageTitle text="GraphQL playground"/>
{ show && <GraphQL key={ colorMode }/> }
<GraphQL/>
</Page>
);
};
......
ui/graphQL/GraphQL.tsx
View file @ cd13580e
import { Box } from '@chakra-ui/react';
import { Box, useColorMode } from '@chakra-ui/react';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { GraphiQL } from 'graphiql';
import React from 'react';
......@@ -6,6 +6,7 @@ import React from 'react';
import appConfig from 'configs/app/config';
import buildUrl from 'lib/api/buildUrl';
import 'graphiql/graphiql.css';
import isBrowser from 'lib/isBrowser';
const graphQLStyle = {
'.graphiql-container': {
......@@ -15,6 +16,21 @@ const graphQLStyle = {
const GraphQL = () => {
const { colorMode } = useColorMode();
// use colorModeState as a key to re-render GraphiQL conponent after color mode change
const [ colorModeState, setColorModeState ] = React.useState(colorMode);
React.useEffect(() => {
if (isBrowser()) {
const graphqlTheme = window.localStorage.getItem('graphiql:theme');
if (graphqlTheme !== colorMode) {
window.localStorage.setItem('graphiql:theme', colorMode);
setColorModeState(colorMode);
}
}
}, [ colorMode ]);
const initialQuery = `{
transaction(
hash: "${ appConfig.graphQL.defaultTxnHash }"
......@@ -40,7 +56,7 @@ const GraphQL = () => {
return (
<Box h="100vh" overflowX="scroll" sx={ graphQLStyle }>
<Box h="100vh" minW="900px" sx={ graphQLStyle }>
<GraphiQL fetcher={ fetcher } defaultQuery={ initialQuery }/>
<GraphiQL fetcher={ fetcher } defaultQuery={ initialQuery } key={ colorModeState }/>
</Box>
</Box>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment