urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-22 10:21:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

launch: bring tutorial prompt to spec

Browse Source
This commit is contained in:
Liam Fitzgerald 2021-02-11 16:12:04 +10:00
parent 76de225b4a
commit 1f1747cb67
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
pkg/interface/src/views/apps/launch/app.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useMemo, useEffect } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import f from 'lodash/fp'; import f from 'lodash/fp';
@ -73,10 +73,13 @@ export default function LaunchApp(props) {
const { query } = useQuery(); const { query } = useQuery();
useEffect(() => { useEffect(() => {
if(query.tutorial) { if(query.get('tutorial')) {
props.api.settings.putEntry('tutorial', 'seen', false); if(hasTutorialGroup(props)) {
nextTutStep();
} else {
showModal();
}
} }
}, [query]); }, [query]);
const { tutorialProgress, nextTutStep } = useLocalState(tutSelector); const { tutorialProgress, nextTutStep } = useLocalState(tutSelector);
@ -84,6 +87,8 @@ export default function LaunchApp(props) {
const waiter = useWaitForProps(props); const waiter = useWaitForProps(props);
const { modal, showModal } = useModal({ const { modal, showModal } = useModal({
position: 'relative',
maxWidth: '350px',
modal: (dismiss) => { modal: (dismiss) => {
const onDismiss = (e) => { const onDismiss = (e) => {
e.stopPropagation(); e.stopPropagation();
@ -97,7 +102,7 @@ export default function LaunchApp(props) {
await waiter(hasTutorialGroup); await waiter(hasTutorialGroup);
await Promise.all( await Promise.all(
[TUTORIAL_BOOK, TUTORIAL_CHAT, TUTORIAL_LINKS].map(graph => [TUTORIAL_BOOK, TUTORIAL_CHAT, TUTORIAL_LINKS].map(graph =>
api.graph.join(TUTORIAL_HOST, graph))); props.api.graph.join(TUTORIAL_HOST, graph)));
await waiter(p => { await waiter(p => {
return `/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}` in p.associations.graph && return `/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}` in p.associations.graph &&
@ -109,7 +114,10 @@ export default function LaunchApp(props) {
dismiss(); dismiss();
} }
return ( return (
<Col gapY="2" p="3"> <Col maxWidth="350px" gapY="2" p="3">
<Box position="absolute" left="-16px" top="-16px">
<Icon width="32px" height="32px" color="blue" display="block" icon="LargeBullet" />
</Box>
<Text lineHeight="tall" fontWeight="medium">Welcome</Text> <Text lineHeight="tall" fontWeight="medium">Welcome</Text>
<Text lineHeight="tall"> <Text lineHeight="tall">
You have been invited to use Landscape, an interface to chat You have been invited to use Landscape, an interface to chat
@ -118,7 +126,7 @@ export default function LaunchApp(props) {
Would you like a tour of Landscape? Would you like a tour of Landscape?
</Text> </Text>
<Row gapX="2" justifyContent="flex-end"> <Row gapX="2" justifyContent="flex-end">
<Button onClick={onDismiss}>Skip</Button> <Button backgroundColor="washedGray" onClick={onDismiss}>Skip</Button>
<StatelessAsyncButton primary onClick={onContinue}> <StatelessAsyncButton primary onClick={onContinue}>
Yes Yes
</StatelessAsyncButton> </StatelessAsyncButton>
@ -126,12 +134,14 @@ export default function LaunchApp(props) {
</Col> </Col>
)} )}
}); });
const hasLoaded = useMemo(() => Object.keys(props.contacts).length > 0, [props.contacts]);
useEffect(() => { useEffect(() => {
const seenTutorial = _.get(props.settings, ['tutorial', 'seen'], true); const seenTutorial = _.get(props.settings, ['tutorial', 'seen'], true);
if(!seenTutorial && tutorialProgress === 'hidden') { if(hasLoaded && !seenTutorial && tutorialProgress === 'hidden') {
showModal(); showModal();
} }
}, [props.settings]); }, [props.settings, hasLoaded]);
return ( return (
<> <>