{"size": 1474, "ext": "js", "max_stars_repo_path": "src/components/Layout/index.js", "max_stars_repo_name": "stevenselcuk/onion-old", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Layout/index.js", "max_issues_repo_name": "stevenselcuk/onion-old", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Layout/index.js", "max_forks_repo_name": "stevenselcuk/onion-old", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 26.8, "max_line_length": 65, "alphanum_fraction": 0.4762550882}
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { StaticQuery, graphql } from 'gatsby';
import { ThemeProvider } from 'styled-components';

import GlobalStyle from '../../style/globalStyle';
import { Wrapper } from './style';
import Helmet from '../Head';

const withLayout = WrappedComponent =>
  class WithLayout extends React.Component {
    state = {
      open: false,
      theme: 'Dark',
      changeTheme: () =>
        this.setState({
          theme: this.state.theme === 'Light' ? 'Dark' : 'Light',
        }),
      showModal: () => this.setState({ open: true }),
      hideModal: () => this.setState({ open: false }),
    };

    render() {
      return (
        <ThemeProvider theme={{ mode: this.state.theme }}>
          <Helmet title={'Onion'} />
          <GlobalStyle />
          <StaticQuery
            query={graphql`
              query LayoutQuery {
                site {
                  siteMetadata {
                    siteTitle
                  }
                }
              }
            `}
            render={data => (
              <Wrapper className={'onion'}>
                <WrappedComponent
                  siteMeta={data}
                  data={this.state}
                  location={this.props.location}
                  {...this.props}
                />
              </Wrapper>
            )}
          />
        </ThemeProvider>
      );
    }
  };

export default withLayout;
