8952830773

Committed 04 May 2024 07:41PM UTC coverage: 31.974% (+0.003%) from 31.971%

Build # 8952830773

Build Type

Pull #9190

github

Committed by

Stvad

Commit Message

Generalizing the onboarding flow: review feedback

Pull Request Pull Request #9190: Generalize OnboardingFlow and introduce BasicOnboardingFlow for non-EA forums #to-upstream

Run Details

4709 of 38481 branches covered (12.24%)

Branch coverage included in aggregate %.

20 of 37 new or added lines in 7 files covered. (54.05%)

1 existing line in 1 file now uncovered.

27510 of 62286 relevant lines covered (44.17%)

180.03 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

18.6

/packages/lesswrong/components/ea-forum/onboarding/useEAOnboarding.tsx

import React, { FC, ReactNode, createContext, useCallback, useContext, useState } from "react";
import { Components } from "../../../lib/vulcan-lib";
import { useCurrentUser, useRefetchCurrentUser } from "../../common/withUser";
import { UpdateCurrentUserFunction, useUpdateCurrentUser } from "../../hooks/useUpdateCurrentUser";
import { useTracking } from "../../../lib/analyticsEvents";

export type OnboardingStage = string

type EAOnboardingContext = {
  currentStage?: OnboardingStage,
  goToNextStage: () => Promise<void>,
  goToNextStageAfter: <T>(promise: Promise<T>) => Promise<void>,
  nextStageIsLoading: boolean,
  currentUser: UsersCurrent,
  updateCurrentUser: UpdateCurrentUserFunction,
  captureOnboardingEvent: (type?: string, trackingData?: Record<string,any>) => void,
  // if viewAsAdmin is true, this is an admin testing out the flow, so don't update their account
  viewAsAdmin?: boolean,
}

const eaOnboardingContext = createContext<EAOnboardingContext>({
  goToNextStage: async () => {},
  goToNextStageAfter: async () => {},
  nextStageIsLoading: false,
  currentUser: {} as UsersCurrent,
  updateCurrentUser: async () => {},
  captureOnboardingEvent: (type?: string, trackingData?: Record<string,any>) => {},
  viewAsAdmin: false,
});

export const EAOnboardingContextProvider: FC<{
  stages: Record<string, ReactNode>,
  onOnboardingComplete?: () => void,
  viewAsAdmin?: boolean,
}> = ({stages, onOnboardingComplete, viewAsAdmin}) => {
  const stageNames = Object.keys(stages)
  const [stage, setStage] = useState<OnboardingStage>(stageNames[0]);
  const [loading, setLoading] = useState(false);
  const currentUser = useCurrentUser();
  const updateCurrentUser = useUpdateCurrentUser();
  const refetchCurrentUser = useRefetchCurrentUser();
  const {captureEvent} = useTracking();

  const goToNextStage = useCallback(async () => {
    const getNextStage = (currentStage: OnboardingStage): OnboardingStage | undefined =>
      stageNames[stageNames.indexOf(currentStage) + 1]

    setLoading(true);
    await refetchCurrentUser();
    setLoading(false);
    const nextStage = getNextStage(stage);
    if (nextStage) {
      setStage(nextStage);
    } else {
      onOnboardingComplete?.();
    }
  }, [stage, onOnboardingComplete, refetchCurrentUser, stageNames]);

  const goToNextStageAfter = useCallback(async function<T>(promise: Promise<T>) {
    setLoading(true);
    await promise;
    await goToNextStage();
  }, [goToNextStage]);
  
  /**
   * Wrapper around captureEvent() that suppresses events when we are viewing as admin
   */
  const captureOnboardingEvent = useCallback((type?: string, trackingData?: Record<string,any>) => {
    !viewAsAdmin && captureEvent(type, trackingData);
  }, [viewAsAdmin, captureEvent])

  // This should never happen
  if (!currentUser) {
    const {LoginForm} = Components;
    return (
      <LoginForm />
    );
  }

  return (
    <eaOnboardingContext.Provider value={{
      currentStage: stage,
      goToNextStage,
      goToNextStageAfter,
      nextStageIsLoading: loading,
      currentUser,
      updateCurrentUser,
      captureOnboardingEvent,
      viewAsAdmin,
    }}>
      {...Object.values(stages)}
    </eaOnboardingContext.Provider>
  );
}

export const useEAOnboarding = () => useContext(eaOnboardingContext);

1	import React, { FC, ReactNode, createContext, useCallback, useContext, useState } from "react";	3✔
2	import { Components } from "../../../lib/vulcan-lib";	1✔
3	import { useCurrentUser, useRefetchCurrentUser } from "../../common/withUser";	1✔
4	import { UpdateCurrentUserFunction, useUpdateCurrentUser } from "../../hooks/useUpdateCurrentUser";	1✔
5	import { useTracking } from "../../../lib/analyticsEvents";	1✔
6
7	export type OnboardingStage = string
8
9	type EAOnboardingContext = {
10	currentStage?: OnboardingStage,
11	goToNextStage: () => Promise<void>,
12	goToNextStageAfter: <T>(promise: Promise<T>) => Promise<void>,
13	nextStageIsLoading: boolean,
14	currentUser: UsersCurrent,
15	updateCurrentUser: UpdateCurrentUserFunction,
16	captureOnboardingEvent: (type?: string, trackingData?: Record<string,any>) => void,
17	// if viewAsAdmin is true, this is an admin testing out the flow, so don't update their account
18	viewAsAdmin?: boolean,
19	}
20
21	const eaOnboardingContext = createContext<EAOnboardingContext>({	1✔
22	goToNextStage: async () => {},
23	goToNextStageAfter: async () => {},
24	nextStageIsLoading: false,
25	currentUser: {} as UsersCurrent,
26	updateCurrentUser: async () => {},
27	captureOnboardingEvent: (type?: string, trackingData?: Record<string,any>) => {},
28	viewAsAdmin: false,
29	});
30
31	export const EAOnboardingContextProvider: FC<{
32	stages: Record<string, ReactNode>,
33	onOnboardingComplete?: () => void,
34	viewAsAdmin?: boolean,
35	}> = ({stages, onOnboardingComplete, viewAsAdmin}) => {	1✔
NEW 36	const stageNames = Object.keys(stages)	×
NEW 37	const [stage, setStage] = useState<OnboardingStage>(stageNames[0]);	×
38	const [loading, setLoading] = useState(false);	×
39	const currentUser = useCurrentUser();	×
40	const updateCurrentUser = useUpdateCurrentUser();	×
41	const refetchCurrentUser = useRefetchCurrentUser();	×
42	const {captureEvent} = useTracking();	×
43
44	const goToNextStage = useCallback(async () => {	×
NEW 45	const getNextStage = (currentStage: OnboardingStage): OnboardingStage \| undefined =>	×
NEW 46	stageNames[stageNames.indexOf(currentStage) + 1]	×
47
48	setLoading(true);	×
49	await refetchCurrentUser();	×
50	setLoading(false);	×
51	const nextStage = getNextStage(stage);	×
52	if (nextStage) {	×
53	setStage(nextStage);	×
54	} else {
55	onOnboardingComplete?.();	×
56	}
57	}, [stage, onOnboardingComplete, refetchCurrentUser, stageNames]);
58
59	const goToNextStageAfter = useCallback(async function<T>(promise: Promise<T>) {	×
60	setLoading(true);	×
61	await promise;	×
62	await goToNextStage();	×
63	}, [goToNextStage]);
64
65	/**
66	* Wrapper around captureEvent() that suppresses events when we are viewing as admin
67	*/
68	const captureOnboardingEvent = useCallback((type?: string, trackingData?: Record<string,any>) => {	×
69	!viewAsAdmin && captureEvent(type, trackingData);	×
70	}, [viewAsAdmin, captureEvent])
71
72	// This should never happen
73	if (!currentUser) {	×
74	const {LoginForm} = Components;	×
75	return (	×
76	<LoginForm />
77	);
78	}
79
80	return (	×
81	<eaOnboardingContext.Provider value={{
82	currentStage: stage,
83	goToNextStage,
84	goToNextStageAfter,
85	nextStageIsLoading: loading,
86	currentUser,
87	updateCurrentUser,
88	captureOnboardingEvent,
89	viewAsAdmin,
90	}}>
91	{...Object.values(stages)}
92	</eaOnboardingContext.Provider>
93	);
94	}
95
96	export const useEAOnboarding = () => useContext(eaOnboardingContext);	1✔

ForumMagnum / ForumMagnum / 8952830773

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous