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 type { NextPage } from 'next';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), { const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), {
...@@ -8,34 +8,16 @@ const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), { ...@@ -8,34 +8,16 @@ const GraphQL = dynamic(() => import('ui/graphQL/GraphQL'), {
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; import React from 'react';
import isBrowser from 'lib/isBrowser';
import Page from 'ui/shared/Page/Page'; import Page from 'ui/shared/Page/Page';
import PageTitle from 'ui/shared/Page/PageTitle'; import PageTitle from 'ui/shared/Page/PageTitle';
const AppsPage: NextPage = () => { 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 ( return (
<Page> <Page>
<Head><title>Graph Page</title></Head> <Head><title>Graph Page</title></Head>
<PageTitle text="GraphQL playground"/> <PageTitle text="GraphQL playground"/>
{ show && <GraphQL key={ colorMode }/> } <GraphQL/>
</Page> </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 { createGraphiQLFetcher } from '@graphiql/toolkit';
import { GraphiQL } from 'graphiql'; import { GraphiQL } from 'graphiql';
import React from 'react'; import React from 'react';
...@@ -6,6 +6,7 @@ import React from 'react'; ...@@ -6,6 +6,7 @@ import React from 'react';
import appConfig from 'configs/app/config'; import appConfig from 'configs/app/config';
import buildUrl from 'lib/api/buildUrl'; import buildUrl from 'lib/api/buildUrl';
import 'graphiql/graphiql.css'; import 'graphiql/graphiql.css';
import isBrowser from 'lib/isBrowser';
const graphQLStyle = { const graphQLStyle = {
'.graphiql-container': { '.graphiql-container': {
...@@ -15,6 +16,21 @@ const graphQLStyle = { ...@@ -15,6 +16,21 @@ const graphQLStyle = {
const GraphQL = () => { 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 = `{ const initialQuery = `{
transaction( transaction(
hash: "${ appConfig.graphQL.defaultTxnHash }" hash: "${ appConfig.graphQL.defaultTxnHash }"
...@@ -40,7 +56,7 @@ const GraphQL = () => { ...@@ -40,7 +56,7 @@ const GraphQL = () => {
return ( return (
<Box h="100vh" overflowX="scroll" sx={ graphQLStyle }> <Box h="100vh" overflowX="scroll" sx={ graphQLStyle }>
<Box h="100vh" minW="900px" sx={ graphQLStyle }> <Box h="100vh" minW="900px" sx={ graphQLStyle }>
<GraphiQL fetcher={ fetcher } defaultQuery={ initialQuery }/> <GraphiQL fetcher={ fetcher } defaultQuery={ initialQuery } key={ colorModeState }/>
</Box> </Box>
</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