import React from 'react';
import * as R from 'ramda';
import { withRouter } from 'next/router';
import Head from 'next/head';
import { Query } from 'react-apollo';
import MainLayout from 'layouts/main';
import EnvironmentWithTaskQuery from 'lib/query/EnvironmentWithTask';
import Breadcrumbs from 'components/Breadcrumbs';
import ProjectBreadcrumb from 'components/Breadcrumbs/Project';
import EnvironmentBreadcrumb from 'components/Breadcrumbs/Environment';
import NavTabs from 'components/NavTabs';
import Task from 'components/Task';
import withQueryLoading from 'lib/withQueryLoading';
import withQueryError from 'lib/withQueryError';
import {
  withEnvironmentRequired,
  withTaskRequired
} from 'lib/withDataRequired';
import { bp } from 'lib/variables';

const PageTask = ({ router }) => (
  <>
    <Head>
      <title>{`${router.query.taskId} | Task`}</title>
    </Head>
    <Query
      query={EnvironmentWithTaskQuery}
      variables={{
        openshiftProjectName: router.query.openshiftProjectName,
        taskId: router.query.taskId
      }}
    >
      {R.compose(
        withQueryLoading,
        withQueryError,
        withEnvironmentRequired,
        withTaskRequired
      )(({ data: { environment } }) => (
        <MainLayout>
          <Breadcrumbs>
            <ProjectBreadcrumb projectSlug={environment.project.name} />
            <EnvironmentBreadcrumb
              environmentSlug={environment.openshiftProjectName}
              projectSlug={environment.project.name}
            />
          </Breadcrumbs>
          <div className="content-wrapper">
            <NavTabs activeTab="tasks" environment={environment} />
            <div className="content">
              <Task task={environment.tasks[0]} />
            </div>
          </div>
          <style jsx>{`
            .content-wrapper {
              @media ${bp.tabletUp} {
                display: flex;
                padding: 0;
              }
            }

            .content {
              width: 100%;
            }
          `}</style>
        </MainLayout>
      ))}
    </Query>
  </>
);

export default withRouter(PageTask);

@@ -1024,16 +1024,25 @@
 taskId: 
+parseInt(
 router.q
@@ -1052,16 +1052,21 @@
 y.taskId
+, 10)
 %0A      %7D

Fix api query variable type #1437