{"size": 1496, "ext": "js", "max_stars_repo_path": "src/components/Scene.js", "max_stars_repo_name": "cascade-mcu/cascade-frontend", "max_stars_repo_stars_event_min_datetime": "2018-03-29T15:06:39.000Z", "max_stars_repo_stars_event_max_datetime": "2018-03-29T15:06:39.000Z", "max_issues_repo_path": "src/components/Scene.js", "max_issues_repo_name": "cascade-mcu/cascade-frontend", "max_issues_repo_issues_event_min_datetime": "2018-03-29T13:17:51.000Z", "max_issues_repo_issues_event_max_datetime": "2018-04-11T08:09:51.000Z", "max_forks_repo_path": "src/components/Scene.js", "max_forks_repo_name": "cascade-mcu/cascade-frontend", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 35, "max_forks_count": null, "avg_line_length": 18.4691358025, "max_line_length": 59, "alphanum_fraction": 0.3643048128}
import React, { Component } from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';

import Navbar from './Navbar';
import Container from './Container';
import Loader from './Loader';

const GET_SCENE = gql`
  query scene($sceneId: ID!) {
    scene(where: {
      id: $sceneId
   }) {
      id
      name
      createdAt

      location {
        places {
          devices {
            name

            sensors {
              logs {
                id
                value
              }
            }
          }
        }
      }
    }
  }
`;

export default class Scene extends Component {
  render() {
    const {
      match: {
        params: {
          sceneId,
        },
      },
    } = this.props;

    return (
      <div>
        <Navbar {...this.props} />
        <Container>
          <Query query={GET_SCENE} variables={{ sceneId }}>
            {({ loading, error, data }) => {
              if (loading) return <Loader />;
              if (error) return `Error! ${error.message}`;

              const {
                scene: {
                  id,
                  name,
                },
              } = data;

              return (
                <div>
                  <h1>
                    Scene
                  </h1>

                  <div>
                    {name} ({id})
                  </div>

                </div>
              );
            }}
          </Query>
        </Container>
      </div>
    );
  }
}
