1
1
import * as React from 'react'
2
2
import { useQuery } from '@apollo/react-hooks'
3
3
import * as G from 'typings/graphql'
4
- import * as CR from 'typings'
4
+ import * as T from 'typings'
5
5
6
6
import queryTutorials from '../../services/apollo/queries/tutorials'
7
7
import NewPage from './NewPage'
8
8
import LoadingPage from '../LoadingPage'
9
9
import ErrorView from '../../components/Error'
10
10
11
- const Loading = ( ) => < LoadingPage text = "Loading tutorials" />
12
-
13
11
interface ContainerProps {
14
- send ( action :CR . Action ) :void
12
+ send ( action :T . Action ) :void
13
+ context :T . MachineContext
15
14
}
16
15
17
16
interface TutorialsData {
@@ -20,23 +19,20 @@ interface TutorialsData {
20
19
21
20
const NewPageContainer = ( props :ContainerProps ) => {
22
21
const { data, loading, error} = useQuery < TutorialsData > ( queryTutorials )
23
- if ( loading ) {
24
- return < Loading />
25
- }
26
22
27
23
if ( error ) {
28
24
return < ErrorView error = { error } />
29
25
}
30
26
27
+ if ( loading ) {
28
+ return < LoadingPage text = "Loading tutorials" context = { props . context } />
29
+ }
30
+
31
31
if ( ! data ) {
32
32
return null
33
33
}
34
34
35
- return (
36
- < React . Suspense fallback = { Loading } >
37
- < NewPage tutorialList = { data . tutorials } />
38
- </ React . Suspense >
39
- )
35
+ return < NewPage tutorialList = { data . tutorials } />
40
36
}
41
37
42
38
export default NewPageContainer