diff --git a/pkg/interface/src/views/apps/launch/app.js b/pkg/interface/src/views/apps/launch/app.js index 045959e939..1e0c937e17 100644 --- a/pkg/interface/src/views/apps/launch/app.js +++ b/pkg/interface/src/views/apps/launch/app.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; import styled from 'styled-components'; import { useHistory } from 'react-router-dom'; import f from 'lodash/fp'; @@ -73,10 +73,13 @@ export default function LaunchApp(props) { const { query } = useQuery(); useEffect(() => { - if(query.tutorial) { - props.api.settings.putEntry('tutorial', 'seen', false); + if(query.get('tutorial')) { + if(hasTutorialGroup(props)) { + nextTutStep(); + } else { + showModal(); + } } - }, [query]); const { tutorialProgress, nextTutStep } = useLocalState(tutSelector); @@ -84,6 +87,8 @@ export default function LaunchApp(props) { const waiter = useWaitForProps(props); const { modal, showModal } = useModal({ + position: 'relative', + maxWidth: '350px', modal: (dismiss) => { const onDismiss = (e) => { e.stopPropagation(); @@ -97,7 +102,7 @@ export default function LaunchApp(props) { await waiter(hasTutorialGroup); await Promise.all( [TUTORIAL_BOOK, TUTORIAL_CHAT, TUTORIAL_LINKS].map(graph => - api.graph.join(TUTORIAL_HOST, graph))); + props.api.graph.join(TUTORIAL_HOST, graph))); await waiter(p => { return `/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}` in p.associations.graph && @@ -109,7 +114,10 @@ export default function LaunchApp(props) { dismiss(); } return ( -