@kiwicom/smart-faq
Version:
Smart FAQ
107 lines (95 loc) • 2.73 kB
JavaScript
// @flow
import idx from 'idx';
import * as React from 'react';
import { graphql, createPaginationContainer } from 'react-relay';
import Translate from '@kiwicom/nitro/lib/components/Translate';
import type { RelayPaginationProp } from 'react-relay';
import BookingError from '../SingleBookingPage/BookingError';
import Loader from '../common/Loader';
import {
getVariables,
getFragmentVariables,
createPaginator,
} from './paginationHelpers';
import BookingCardsList from './BookingCardsList';
import type { FutureBookingsPaginationContainerQueryResponse } from './__generated__/FutureBookingsPaginationContainerQuery.graphql';
export type Props = {|
+relay: RelayPaginationProp,
+data: ?FutureBookingsPaginationContainerQueryResponse,
+error: ?Error,
|};
type State = {|
isLoading: boolean,
|};
class FutureBookingsPaginationContainer extends React.Component<Props, State> {
state = {
isLoading: false,
};
loadMore = () => createPaginator(this);
render() {
const { error, data, relay } = this.props;
const { isLoading } = this.state;
// FIXME
// $FlowExpectedError: Doesn't exist according to relay props, do something with it...
const customerBookings = idx(data, _ => _.future);
const edges = idx(customerBookings, _ => _.edges) || [];
const bookings = edges.map(edge => idx(edge, _ => _.node));
if (error) {
return <BookingError />;
}
return (
<React.Fragment>
{bookings && (
<div data-cy="upcoming-bookings">
<BookingCardsList
bookings={bookings}
loadMore={this.loadMore}
hasMore={relay.hasMore()}
isLoading={isLoading}
title={
<Translate t={__('smartfaq.all_bookings.upcoming.subtitle')} />
}
/>
</div>
)}
{isLoading && <Loader />}
</React.Fragment>
);
}
}
export default createPaginationContainer(
FutureBookingsPaginationContainer,
graphql`
fragment FutureBookingsPaginationContainer on RootQuery {
future: customerBookings(
only: FUTURE
first: $first
after: $after
brand: $brand
) @connection(key: "FutureBookingsPaginationContainer_future") {
pageInfo {
hasNextPage
endCursor
}
edges {
node {
...BookingCardsList_bookings
}
}
}
}
`,
{
getFragmentVariables,
getVariables,
query: graphql`
query FutureBookingsPaginationContainerQuery(
$after: String
$first: Int
$brand: String!
) {
...FutureBookingsPaginationContainer
}
`,
},
);