tutorial: fix delay on profile

This commit is contained in:
Liam Fitzgerald 2021-02-19 13:22:53 +10:00
parent 2ac9919f41
commit f40b8e1a2b
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
9 changed files with 17 additions and 13 deletions

View File

@ -102,7 +102,7 @@ export default function LaunchApp(props) {
await waiter(hasTutorialGroup);
await Promise.all(
[TUTORIAL_BOOK, TUTORIAL_CHAT, TUTORIAL_LINKS].map(graph =>
props.api.graph.join(TUTORIAL_HOST, graph)));
props.api.graph.joinGraph(TUTORIAL_HOST, graph)));
await waiter(p => {
return `/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}` in p.associations.graph &&

View File

@ -80,7 +80,7 @@ function Group(props: GroupProps) {
useTutorialModal(
'start',
isTutorialGroup,
anchorRef.current
anchorRef
);
return (
<Tile ref={anchorRef} position="relative" bg={isTutorialGroup ? 'lightBlue' : undefined} to={`/~landscape${path}`} gridColumnStart={first ? '1' : null}>

View File

@ -52,7 +52,7 @@ export default function NotificationsScreen(props: any) {
.map((g) => props.associations?.groups?.[g]?.metadata?.title)
.join(", ");
const anchorRef = useRef<HTMLElement | null>(null);
useTutorialModal('notifications', true, anchorRef.current);
useTutorialModal('notifications', true, anchorRef);
return (
<Switch>
<Route

View File

@ -53,7 +53,7 @@ export function Profile(props: any) {
const anchorRef = useRef<HTMLElement | null>(null);
useTutorialModal('profile', ship === `~${window.ship}`, anchorRef.current);
useTutorialModal('profile', ship === `~${window.ship}`, anchorRef);
return (
<Center

View File

@ -47,7 +47,7 @@ const StatusBar = (props) => {
const anchorRef = useRef(null);
const leapHighlight = useTutorialModal('leap', true, anchorRef.current);
const leapHighlight = useTutorialModal('leap', true, anchorRef);
const floatLeap = leapHighlight && window.matchMedia('(max-width: 550px)').matches;

View File

@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, MutableRefObject } from "react";
import { TutorialProgress } from "~/types";
import useLocalState, { selectLocalState } from "~/logic/state/local";
@ -7,15 +7,19 @@ const localSelector = selectLocalState(["tutorialProgress", "setTutorialRef"]);
export function useTutorialModal(
onProgress: TutorialProgress,
show: boolean,
anchorRef: HTMLElement | null
anchorRef: MutableRefObject<HTMLElement | null>
) {
const { tutorialProgress, setTutorialRef } = useLocalState(localSelector);
useEffect(() => {
if (show && onProgress === tutorialProgress && anchorRef) {
setTutorialRef(anchorRef);
if (show && (onProgress === tutorialProgress) && anchorRef?.current) {
setTutorialRef(anchorRef.current);
}
}, [onProgress, tutorialProgress, show, anchorRef]);
return () => {
console.log(tutorialProgress);
}
}, [tutorialProgress, show, anchorRef]);
return show && onProgress === tutorialProgress;
}

View File

@ -20,7 +20,7 @@ export function GroupSummary(props: GroupSummaryProps & PropFunc<typeof Col>) {
useTutorialModal(
"group-desc",
resource === `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
anchorRef.current
anchorRef
);
return (
<Col {...rest} ref={anchorRef} gapY="4">

View File

@ -66,7 +66,7 @@ export function Sidebar(props: SidebarProps) {
const isAdmin = (role === 'admin') || (workspace?.type === 'home');
const anchorRef = useRef<HTMLElement | null>(null);
useTutorialModal('channels', true, anchorRef.current);
useTutorialModal('channels', true, anchorRef);
return (
<ScrollbarLessCol

View File

@ -47,7 +47,7 @@ export function SidebarItem(props: {
useTutorialModal(
mod as any,
groupPath === `/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
anchorRef.current
anchorRef
);
const app = apps[appName];
const isUnmanaged = groups?.[groupPath]?.hidden || false;