@kiwicom/smart-faq/src/SmartFAQ/AllBookings/index.js

// @flow

import * as React from 'react';
import css from 'styled-jsx/css';
import { graphql } from 'react-relay';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import Modal from '@kiwicom/orbit-components/lib/Modal';
import ModalHeader from '@kiwicom/orbit-components/lib/Modal/ModalHeader';
import ModalSection from '@kiwicom/orbit-components/lib/Modal/ModalSection';

import { Desktop, Mobile } from '../common/Responsive';
import Loader from '../common/Loader';
import ScrollableContent from '../common/ScrollableContent';
import QueryRenderer from '../relay/QueryRenderer';
import FutureBookingsPaginationContainer from './FutureBookingsPaginationContainer';
import PastBookingsPaginationContainer from './PastBookingsPaginationContainer';
import type { AllBookingsQueryResponse } from './__generated__/AllBookingsQuery.graphql';
import { SelectedBooking } from '../context/SelectedBooking';
import { UserContext } from '../context/User';
import type { UserContextType } from '../context/User';

const styles = css.global`
  .allBookings {
    width: 100%;
    height: 100%;
    padding: 0 10px;
  }
  @media only screen and (max-width: 900px) {
    .allBookings {
      display: grid;
      place-items: center center;
      padding-top: 20px;
    }
  }
`;

type Props = {||};
type State = {||};
type RenderProps = {
  props: ?AllBookingsQueryResponse,
  error: ?Error,
};

export default class AllBookings extends React.Component<Props, State> {
  renderAllBookingPaginationList = (renderProps: RenderProps) => {
    const modalTitle = <Translate t="smartfaq.all_bookings.modal.title" />;
    const modalDesctiption = (
      <Translate t="smartfaq.all_bookings.modal.description" />
    );
    return (
      <>
        <Desktop>
          <SelectedBooking.Consumer>
            {({ closeAllBooking }) => (
              <Modal onClose={closeAllBooking}>
                <ModalHeader
                  title={modalTitle}
                  description={modalDesctiption}
                />
                <ModalSection suppressed>
                  {renderProps.props ? (
                    <div className="allBookings">
                      <FutureBookingsPaginationContainer
                        data={renderProps.props}
                      />
                      <PastBookingsPaginationContainer
                        data={renderProps.props}
                      />
                    </div>
                  ) : (
                    <Loader fullHeight />
                  )}
                </ModalSection>
              </Modal>
            )}
          </SelectedBooking.Consumer>
        </Desktop>
        <Mobile>
          <ScrollableContent styles="background-color: #f5f7f9;">
            {renderProps.props ? (
              <div className="allBookings">
                <FutureBookingsPaginationContainer data={renderProps.props} />
                <PastBookingsPaginationContainer data={renderProps.props} />
              </div>
            ) : (
              <Loader fullHeight />
            )}
          </ScrollableContent>
        </Mobile>
        <style jsx global>
          {styles}
        </style>
      </>
    );
  };

  render = () => (
    <UserContext.Consumer>
      {({ brand }: UserContextType) => (
        <QueryRenderer
          query={graphql`
            query AllBookingsQuery(
              $after: String
              $first: Int
              $brand: String!
            ) {
              ...FutureBookingsPaginationContainer
              ...PastBookingsPaginationContainer
            }
          `}
          variables={{ brand, first: 3 }}
          render={this.renderAllBookingPaginationList}
        />
      )}
    </UserContext.Consumer>
  );
}