import { useManualQuery , useMutation } from 'graphql-hooks' ; import * as React from 'react' ; import { ErrorMessage } from '../base/ErrorMessage' ; import { Loading } from '../base/Loading' ; import { Feature , Kind , MutationCreateOrderArgs , Query } from '../graphQLTypes' ; import { CreateOrder } from '../order/CreateOrder' ; import { createOrderMutation } from '../order/createOrderMutation' ; import { ListOrders } from '../order/ListOrders' ; import { ordersQuery } from '../order/ordersQuery' ; export const DashboardContainer = ( ) => { const [ fetchOrders , ordersFetchStatus ] = useManualQuery < { orders : Query [ 'orders' ] ; } > ( ordersQuery ) ; React . useEffect ( ( ) => { fetchOrders ( ) ; } , [ false ] ) ; const dumbOrderArgs = { deliveryAddress : 'New York' , customerName : 'Mr. Muffin' , items : [ { kind : Kind . savoury , features : [ Feature . sugarFree ] , name : 'One' } , { kind : Kind . sweet , features : [ Feature . vegan ] , name : 'Two' } , { kind : Kind . sweet , features : [ Feature . exclusive ] , name : 'Three' } , ] , } ; const [ runCreateOrder , createOrderStatus ] = useMutation ( createOrderMutation , { variables : dumbOrderArgs } ) ; const createNewOrder = async ( ) => { await runCreateOrder ( ) ; fetchOrders ( ) ; } ; return ( < > < h1 > Create < small style = { { color : 'silver' } } > fake < /small> Order < /h1> { createOrderStatus . loading && < Loading />} { createOrderStatus . error && < ErrorMessage message = "😿" / > } < CreateOrder onCreateClick = { createNewOrder } /> < h1 > Orders so far < /h1> { ordersFetchStatus . loading && < Loading />} { ordersFetchStatus . error && < ErrorMessage message = "🙀" / > } < ListOrders orders = { ordersFetchStatus . data ?. orders } /> < />); } ;