Merge branch 'mp/landscape/tutorial' (#4672)

* origin/mp/landscape/tutorial:
  launch: prevent aggressive tutorial render
  launch: get tutorial state from zustand

Signed-off-by: Matilde Park <matilde.park@gmail.com>
This commit is contained in:
Matilde Park 2021-03-26 16:14:29 -04:00
commit 0e5feb6c62
2 changed files with 17 additions and 17 deletions

View File

@ -178,6 +178,7 @@ class App extends React.Component {
ship={this.ship}
api={this.api}
subscription={this.subscription}
connection={this.state.connection}
/>
</ErrorBoundary>
</Router>

View File

@ -46,10 +46,22 @@ const ScrollbarLessBox = styled(Box)`
const tutSelector = f.pick(['tutorialProgress', 'nextTutStep', 'hideGroups']);
export default function LaunchApp(props) {
const connection = { props };
const baseHash = useLaunchState(state => state.baseHash);
const [hashText, setHashText] = useState(baseHash);
const [exitingTut, setExitingTut] = useState(false);
const seen = useSettingsState(s => s?.tutorial?.seen) ?? true;
const associations = useMetadataState(s => s.associations);
const contacts = useContactState(state => state.contacts);
const hasLoaded = useMemo(() => Boolean(connection === "connected"), [connection]);
const notificationsCount = useHarkState(state => state.notificationsCount);
const calmState = useSettingsState(selectCalmState);
const { hideUtilities } = calmState;
const { tutorialProgress, nextTutStep } = useLocalState(tutSelector);
let { hideGroups } = useLocalState(tutSelector);
!hideGroups ? { hideGroups } = calmState : null;
const waiter = useWaitForProps({ ...props, associations });
const hashBox = (
<Box
position={["relative", "absolute"]}
@ -88,14 +100,6 @@ export default function LaunchApp(props) {
}
}, [query]);
const calmState = useSettingsState(selectCalmState);
const { hideUtilities } = calmState;
const { tutorialProgress, nextTutStep } = useLocalState(tutSelector);
let { hideGroups } = useLocalState(tutSelector);
!hideGroups ? { hideGroups } = calmState : null;
const waiter = useWaitForProps({ ...props, associations });
const { modal, showModal } = useModal({
position: 'relative',
maxWidth: '350px',
@ -141,14 +145,14 @@ export default function LaunchApp(props) {
</Box>
<Text mb="3" lineHeight="tall" fontWeight="medium">Welcome</Text>
<Text mb="3" lineHeight="tall">
You have been invited to use Landscape, an interface to chat
You have been invited to use Landscape, an interface to chat
and interact with communities
<br />
Would you like a tour of Landscape?
</Text>
<Row gapX="2" justifyContent="flex-end">
<Button
backgroundColor="washedGray"
backgroundColor="washedGray"
onClick={() => setExitingTut(true)}
>Skip</Button>
<StatelessAsyncButton primary onClick={onContinue}>
@ -158,17 +162,12 @@ export default function LaunchApp(props) {
</Col>
)}
});
const contacts = useContactState(state => state.contacts);
const hasLoaded = useMemo(() => Object.keys(contacts).length > 0, [contacts]);
const notificationsCount = useHarkState(state => state.notificationsCount);
useEffect(() => {
const seenTutorial = _.get(props.settings, ['tutorial', 'seen'], true);
if(hasLoaded && !seenTutorial && tutorialProgress === 'hidden') {
if(hasLoaded && !seen && tutorialProgress === 'hidden') {
showModal();
}
}, [props.settings, hasLoaded]);
}, [seen, hasLoaded]);
return (
<>