Playground lint fixes

Author: paveltiunov

packages/cubejs-playground/.eslintrc.js

@@ -1,14 +1,17 @@
 module.exports = {
-  extends: 'airbnb',
+  extends: 'react-app',
   plugins: ['react', 'jsx-a11y', 'import'],
   rules: {
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/no-static-element-interactions': 0,
+    'jsx-a11y/anchor-is-valid': 0,
     'react/jsx-no-bind': 0,
     'react/jsx-first-prop-new-line': 0,
     'react/jsx-indent-props': 0,
     'react/jsx-filename-extension': 0,
+    'react/destructuring-assignment': 0,
     'react/react-in-jsx-scope': 0, // remove when import React is ready
     'import/no-unresolved': 0,
-    'react/jsx-props-no-spreading': 0,
     'comma-dangle': 0,
     'no-console': 0,
     'no-plusplus': 0,
@@ -46,6 +49,11 @@ module.exports = {
       {
         order: ['static-methods', 'lifecycle', 'everything-else', 'render']
       }
-    ]
+    ],
+    'react/jsx-props-no-spreading': [false, {
+      "html": "ignore",
+      "custom": "ignore",
+      "explicitSpread": "ignore"
+    }],
   }
 };

packages/cubejs-playground/src/App.js

@@ -2,11 +2,11 @@
 import React, { Component } from 'react';
 import * as PropTypes from 'prop-types';
 import '@ant-design/compatible/assets/index.css';
-import "./index.less";
-import "./index.css";
-import { Layout, Alert, notification } from "antd";
+import './index.less';
+import './index.css';
+import { Layout, Alert, notification } from 'antd';
 import { fetch } from 'whatwg-fetch';
-import { withRouter } from "react-router";
+import { withRouter } from 'react-router';
 import Header from './components/Header';
 import { event, setAnonymousId } from './events';
 
@@ -19,8 +19,12 @@ const selectedTab = (pathname) => {
 };
 
 class App extends Component {
+  static getDerivedStateFromError(error) {
+    return { fatalError: error };
+  }
+
   async componentDidMount() {
-    window.addEventListener("unhandledrejection", (promiseRejectionEvent) => {
+    window.addEventListener('unhandledrejection', (promiseRejectionEvent) => {
       const error = promiseRejectionEvent.reason;
       console.log(error);
       const e = (error.stack || error).toString();
@@ -57,10 +61,6 @@ class App extends Component {
     });
   }
 
-  static getDerivedStateFromError(error) {
-    return { fatalError: error };
-  }
-
   componentDidCatch(error, info) {
     event('Playground Error', {
       error: (error.stack || error).toString(),

packages/cubejs-playground/src/ChartContainer.jsx

@@ -18,7 +18,7 @@ import { fetch } from 'whatwg-fetch';
 import { map } from 'ramda';
 import { Redirect, withRouter } from 'react-router-dom';
 import { QueryRenderer } from '@cubejs-client/react';
-import sqlFormatter from "sql-formatter";
+import sqlFormatter from 'sql-formatter';
 import PropTypes from 'prop-types';
 import PrismCode from './PrismCode';
 import CachePane from './components/CachePane';
@@ -55,11 +55,11 @@ class ChartContainer extends React.Component {
       codeSandboxSource,
       dependencies
     } = this.props;
-    const codeSandboxRes = await fetch("https://codesandbox.io/api/v1/sandboxes/define?json=1", {
-      method: "POST",
+    const codeSandboxRes = await fetch('https://codesandbox.io/api/v1/sandboxes/define?json=1', {
+      method: 'POST',
       headers: {
-        "Content-Type": "application/json",
-        Accept: "application/json"
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
       },
       body: JSON.stringify(this.codeSandboxDefinition(codeSandboxSource, dependencies))
     });
@@ -321,17 +321,17 @@ class ChartContainer extends React.Component {
     const copyCodeToClipboard = async () => {
       if (!navigator.clipboard) {
         notification.error({
-          message: `Your browser doesn't support copy to clipboard`
+          message: 'Your browser doesn\'t support copy to clipboard'
         });
       }
       try {
         await navigator.clipboard.writeText(showCode === 'query' ? queryText : codeExample);
         notification.success({
-          message: `Copied to clipboard`
+          message: 'Copied to clipboard'
         });
       } catch (e) {
         notification.error({
-          message: `Can't copy to clipboard`,
+          message: 'Can\'t copy to clipboard',
           description: e,
         });
       }

packages/cubejs-playground/src/ChartRenderer.js

@@ -34,11 +34,11 @@ export const babelConfig = {
 const prettify = (object) => {
   let str = object;
   if (typeof object === 'object') {
-    str = JSON.stringify(object, null, 2)
+    str = JSON.stringify(object, null, 2);
   }
 
-  return str.split('\n').map((l, i) => (i > 0 ? `  ${l}` : l)).join('\n')
-}
+  return str.split('\n').map((l, i) => (i > 0 ? `  ${l}` : l)).join('\n');
+};
 
 const sourceCodeTemplate = (props) => {
   const {
@@ -90,7 +90,7 @@ export const chartLibraries = Object.keys(libraryToTemplate)
   .map(k => ({ value: k, title: libraryToTemplate[k].title }));
 
 export const ChartRenderer = (props) => {
-  const [jsCompilingError, setError] = useState(null)
+  const [jsCompilingError, setError] = useState(null);
   const [chartLibrary, setChartLibrary] = useState('bizcharts');
 
   const {
@@ -105,7 +105,7 @@ export const ChartRenderer = (props) => {
     pivotConfig
   } = props;
 
-  const sourceCodeFn = sourceCodeFnProp || sourceCodeTemplate
+  const sourceCodeFn = sourceCodeFnProp || sourceCodeTemplate;
 
   const selectedChartLibrary = selectChartLibrary(chartType, chartLibrary);
   const source = sourceCodeFn({
@@ -123,9 +123,9 @@ export const ChartRenderer = (props) => {
 
   useEffect(() => {
     if (jsCompilingError) {
-      setError(null)
+      setError(null);
     }
-  }, [source, chartType])
+  }, [source, chartType]);
 
   return (
     <ChartContainer
@@ -149,21 +149,21 @@ export const ChartRenderer = (props) => {
               description={<pre>{jsCompilingError.toString()}</pre>}
               type="error"
             />
-          )
+          );
         }
 
         return (
           <SourceRender
-            onRender={(error) => {
-              if (error) {
-                setError(error)
+            onRender={(renderError) => {
+              if (renderError) {
+                setError(renderError);
               }
             }}
             babelConfig={babelConfig}
             resolver={importName => dependencies[importName]}
             source={source}
           />
-        )
+        );
       }}
     />
   );

packages/cubejs-playground/src/DashboardPage.js

@@ -1,11 +1,12 @@
 /* globals window */
 import React, { Component } from 'react';
 import '@ant-design/compatible/assets/index.css';
-import { Spin, Button, Alert, Menu, Dropdown } from 'antd';
+import {
+  Spin, Button, Alert
+} from 'antd';
 import { Link, withRouter, Redirect } from 'react-router-dom';
-import DashboardSource from "./DashboardSource";
+import DashboardSource from './DashboardSource';
 import fetch from './playgroundFetch';
-import { chartLibraries } from "./ChartRenderer";
 
 const Frame = ({ children }) => (
   <div style={{ textAlign: 'center', marginTop: 50 }}>
@@ -14,19 +15,19 @@ const Frame = ({ children }) => (
 );
 
 const Hint = () => (
-  <p style={{ width: 450, margin: "20px auto" }}>
-    Dashboard App is a convenient way to setup and deploy frontend app to work with Cube.js backend. You can learn more about it the <a href="https://cube.dev/docs/dashboard-app" target="_blankl">Cube.js docs</a>.
+  <p style={{ width: 450, margin: '20px auto' }}>
+    Dashboard App is a convenient way to setup and deploy frontend app to work with Cube.js backend.
+    You can learn more about in the
+    {' '}
+    <a href="https://cube.dev/docs/dashboard-app" target="_blankl">Cube.js docs</a>
+    .
   </p>
 );
 
 class DashboardPage extends Component {
   constructor(props) {
     super(props);
-    this.state = {
-      chartLibrary: chartLibraries[0].value,
-      framework: 'react',
-      templatePackageName: 'react-antd-dynamic'
-    };
+    this.state = {};
   }
 
   async componentDidMount() {
@@ -140,7 +141,7 @@ class DashboardPage extends Component {
     return (
       <div
         style={{
-          height: '100%', width: '100%', padding: "15px 30px 30px 30px", background: "#fff"
+          height: '100%', width: '100%', padding: '15px 30px 30px 30px', background: '#fff'
         }}
       >
         <Alert

packages/cubejs-playground/src/DashboardRenderer.js

@@ -4,10 +4,10 @@ import * as cubejsReact from '@cubejs-client/react';
 import * as antd from 'antd';
 import { Spin } from 'antd';
 import ChartContainer from './ChartContainer';
-import { libraryToTemplate } from "./ChartRenderer";
+import { libraryToTemplate } from './ChartRenderer';
 
 const DashboardRenderer = (props) => {
-  let {
+  const {
     source,
     sourceFiles
   } = props;

packages/cubejs-playground/src/IndexPage.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { fetch } from 'whatwg-fetch';
 import { Spin } from 'antd';
-import { Redirect } from "react-router-dom";
+import { Redirect } from 'react-router-dom';
 
 class IndexPage extends Component {
   constructor(props) {
@@ -23,12 +23,15 @@ class IndexPage extends Component {
 
   render() {
     if (!this.state.files) {
-      return <div style={{ textAlign: 'center', padding: 24}}><Spin /></div>
+      return <div style={{ textAlign: 'center', padding: 24 }}><Spin /></div>;
     }
-    return <Redirect to={
-      !this.state.files.length || this.state.files.length === 1 && this.state.files[0].fileName === 'Orders.js' ?
-        '/schema' : '/build'
-    } />;
+    return (
+      <Redirect to={
+      !this.state.files.length || this.state.files.length === 1 && this.state.files[0].fileName === 'Orders.js'
+        ? '/schema' : '/build'
+    }
+      />
+    );
   }
 }