@@ -4,35 +4,50 @@ import { Button } from '@alifd/next'
44import Cond from '../../components/Cond'
55import DataContext from '../../utils/DataContext'
66import { send } from '../../utils/vscode'
7+ import { useQuery } from '@apollo/react-hooks'
8+ import query from './query'
9+
710import LoadingPage from '../../containers/LoadingPage'
811
912interface Props {
13+ state :any
14+ tutorialList :any [ ]
1015onNew ( tutorialId :string ) :void
1116}
1217
13- export const NewPage = ( props :Props ) => {
18+ export const NewPage = ( props :Props ) => (
19+ < div >
20+ < Cond state = { props . state } path = "SelectTutorial.NewTutorial.SelectTutorial" >
21+ < div >
22+ < h2 > Start a new Project</ h2 >
23+ { props . tutorialList . map ( tutorial => (
24+ < div >
25+ < h3 > { tutorial . title } </ h3 >
26+ < p > { tutorial . description } </ p >
27+ < Button onClick = { ( ) => props . onNew ( tutorial . id ) } > Start</ Button >
28+ </ div >
29+ ) ) }
30+ </ div >
31+ </ Cond >
32+ < Cond state = { props . state } path = "SelectTutorial.NewTutorial.InitializeTutorial" >
33+ < LoadingPage text = "Launching Tutorial..." />
34+ </ Cond >
35+ </ div >
36+ )
37+
38+ export default ( ) => {
39+ console . log ( 'load new' )
1440const { state} = React . useContext ( DataContext )
41+ const { data, loading, error} = useQuery ( query )
1542const [ tutorialList ] = React . useState ( [ { id :'1' , title :'Demo' , description :'A basic demo' } ] )
16- // context
17- return (
18- < div >
19- < Cond state = { state } path = "SelectTutorial.NewTutorial.SelectTutorial" >
20- < div >
21- < h2 > Start a new Project</ h2 >
22- { tutorialList . map ( tutorial => (
23- < div >
24- < h3 > { tutorial . title } </ h3 >
25- < p > { tutorial . description } </ p >
26- < Button onClick = { ( ) => props . onNew ( tutorial . id ) } > Start</ Button >
27- </ div >
28- ) ) }
29- </ div >
30- </ Cond >
31- < Cond state = { state } path = "SelectTutorial.NewTutorial.InitializeTutorial" >
32- < LoadingPage text = "Launching Tutorial..." />
33- </ Cond >
34- </ div >
35- )
36- }
43+ console . log ( 'data' , data )
44+ if ( loading ) {
45+ return null
46+ }
3747
38- export default ( ) => < NewPage onNew = { ( ) => send ( 'TUTORIAL_START' ) } />
48+ if ( error ) {
49+ return < div > 'Error'</ div >
50+ }
51+
52+ return < NewPage onNew = { ( ) => send ( 'TUTORIAL_START' ) } state = { state } tutorialList = { tutorialList } />
53+ }