index.tsx

import * as React from 'react';
import { render } from 'react-dom';

import Button from '@material-ui/core/Button';
import { MuiThemeProvider } from '@material-ui/core/styles';

import { theme } from '../src/components/MUITheme';
import { GraphQLVoyager } from '../src';
import LogoIcon from './icons/logo-small.svg';

import { IntrospectionModal } from './IntrospectionModal';
import { defaultPreset } from './presets';

import './components.css';

export default class Demo extends React.Component {
  state = {
    changeSchemaModalOpen: false,
    introspection: defaultPreset,
  };

  // not part of state because we parse it in constructor and just use in render
  displayOptions = {};

  constructor(props) {
    super(props);

    const { url, withCredentials, ...restQueryParams } = getQueryParams();
    // parse rest of query params we expect them to be in JSON format
    // we might pick also some options that are not valid displayOptions but they will be ignored
    // by Voyager component
    for (const [key, value] of Object.entries(restQueryParams)) {
      try {
        this.displayOptions[key] = JSON.parse(value);
      } catch (_) {
        console.log(
          `Not expected value for key "${key}" or value >${value}< is not in json format so just ignoring it`,
        );
      }
    }
    if (url) {
      this.state.introspection = introspectionQuery =>
        fetch(url, {
          method: 'post',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ query: introspectionQuery }),
          ...(withCredentials === 'true' ? { credentials: 'include', mode: 'cors' } : {}),
        }).then(response => response.json());
    }
  }

  public render() {
    const { changeSchemaModalOpen, introspection } = this.state;

    const openChangeSchema = () => this.setState({ changeSchemaModalOpen: true });
    const closeChangeSchema = () => this.setState({ changeSchemaModalOpen: false });

    return (
      <MuiThemeProvider theme={theme}>
        <GraphQLVoyager
          introspection={introspection}
          displayOptions={this.displayOptions}
          onDisplayOptionsChange={setQueryParamsWithoutRefresh}
        >
          <GraphQLVoyager.PanelHeader>
            <div className="voyager-panel">
              <Logo />
              <Button
                color="primary"
                style={{ color: 'white' }}
                variant="contained"
                className="choosebutton"
                onClick={openChangeSchema}
              >
                Change Schema
              </Button>
            </div>
          </GraphQLVoyager.PanelHeader>
        </GraphQLVoyager>
        <IntrospectionModal
          open={changeSchemaModalOpen}
          onClose={closeChangeSchema}
          onChange={introspection => this.setState({ introspection })}
        />
      </MuiThemeProvider>
    );
  }
}

function setQueryParamsWithoutRefresh(displayOptions) {
  if ('URLSearchParams' in window) {
    const searchParams = new URLSearchParams(window.location.search);
    for (const [key, value] of Object.entries(displayOptions)) {
      searchParams.set(key, JSON.stringify(value));
    }
    var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
    history.pushState(null, '', newRelativePathQuery);
  } else {
    console.log('Missing URLSearchParams so just printing new displayOptions', displayOptions);
  }
}

function getQueryParams(): { [key: string]: string } {
  const query = window.location.search.substring(1);
  const params = {};

  for (const param of query.split('&')) {
    const [key, value] = param.split('=');
    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
  }
  return params;
}

class Logo extends React.Component {
  render() {
    return (
      <div className="voyager-logo">
        <a href="https://github.com/APIs-guru/graphql-voyager" target="_blank">
          <div className="logo">
            <LogoIcon />
            <h2 className="title">
              <strong>GraphQL</strong> Voyager
            </h2>
          </div>
        </a>
      </div>
    );
  }
}

render(<Demo />, document.getElementById('root'));