{"size": 1591, "ext": "js", "max_stars_repo_path": "packages/frontend/src/pages/Scenario/Steps/App/index.js", "max_stars_repo_name": "kevenleone/app-builder-cypress", "max_stars_repo_stars_event_min_datetime": "2020-09-02T13:48:57.000Z", "max_stars_repo_stars_event_max_datetime": "2020-09-02T13:48:57.000Z", "max_issues_repo_path": "packages/frontend/src/pages/Scenario/Steps/App/index.js", "max_issues_repo_name": "kevenleone/app-builder-cypress", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "packages/frontend/src/pages/Scenario/Steps/App/index.js", "max_forks_repo_name": "kevenleone/app-builder-cypress", "max_forks_repo_forks_event_min_datetime": "2020-10-03T12:07:27.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-03T12:07:27.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 24.859375, "max_line_length": 77, "alphanum_fraction": 0.511627907}
import { Col, Row } from '@clayui/layout'
import React, { useContext, useState } from 'react'

import { SYNC_APP } from '../../../../actions'
import AppContext from '../../../../AppContext'
import { LocalizedInput, Toggle } from '../../../../components/Input'

export default function App () {
  const [{ scenario: { app } }, dispatch] = useContext(AppContext)
  const [state, setState] = useState(app)

  const onChange = (name, value) => {
    let val = { [name]: value }
    if (name === 'name') {
    } else {
      val = {
        config: {
          ...state.config,
          [name]: value
        }
      }
    }
    const newState = {
      ...state,
      ...val
    }

    setState(newState)
    dispatch({ payload: newState, type: SYNC_APP })
  }

  return (
    <div>
      <LocalizedInput
        name="name"
        defaultValue={state.name}
        onChange={onChange}
        label="Name"
      />
      <strong>Options</strong>
      <Row className="mt-4">
        <Col>
          <Toggle label="Product Menu"
            onToggle={() => onChange('product', !state.config.product)}
            toggled={state.config.product}
          />
        </Col>
        <Col>
          <Toggle label="Standalone"
            onToggle={() => onChange('standalone', !state.config.standalone)}
            toggled={state.config.standalone}
          />
        </Col>
        <Col>
          <Toggle label="Widget"
            onToggle={() => onChange('widget', !state.config.widget)}
            toggled={state.config.widget}
          />
        </Col>
      </Row>
    </div>
  )
}
