github.com/pluralsh/plural-cli@v0.9.5/pkg/ui/web/src/routes/root.tsx (about)

     1  import { ApolloProvider } from '@apollo/client'
     2  import { GraphQLToast, LoadingSpinner } from '@pluralsh/design-system'
     3  import React, { Suspense, useContext } from 'react'
     4  import { DataRouteObject, Outlet, RouteObject } from 'react-router-dom'
     5  import styled from 'styled-components'
     6  
     7  import { WailsContext } from '../context/wails'
     8  import Header from '../layout/Header'
     9  import { useApolloClient } from '../services/apollo'
    10  
    11  import { Routes } from './routes'
    12  
    13  const Root = styled(RootUnstyled)(({ theme }) => ({
    14    display: 'flex',
    15    flexDirection: 'column' as const,
    16    height: '100%',
    17    overflow: 'hidden',
    18  
    19    '.content': {
    20      padding: theme.spacing.xxlarge,
    21      flexGrow: 1,
    22      overflowY: 'auto',
    23    },
    24  }))
    25  
    26  function RootUnstyled({ ...props }): React.ReactElement {
    27    const { token } = useContext(WailsContext)
    28    const { client, error } = useApolloClient(token)
    29  
    30    return (
    31      <div {...props}>
    32        <ApolloProvider client={client!}>
    33          <Header />
    34          <div className="content"><Outlet /></div>
    35          {error && (
    36            <GraphQLToast
    37              margin="large"
    38              error={{ graphQLErrors: [...error] }}
    39              header="Error"
    40              closeTimeout={10000}
    41            />
    42          )}
    43        </ApolloProvider>
    44      </div>
    45    )
    46  }
    47  
    48  const route = (children: Array<DataRouteObject>): RouteObject => ({
    49    path: Routes.Root,
    50    element: <Suspense fallback={<LoadingSpinner />}><Root /></Suspense>,
    51    children,
    52  })
    53  
    54  export { route as createRootRoute }