Significantly reduce work of useUserOnboardingContext

Author: justjanne

src/hooks/useUserOnboardingContext.ts

@@ -15,54 +15,86 @@ limitations under the License.
 */
 
 import { logger } from "matrix-js-sdk/src/logger";
-import { ClientEvent, IMyDevice, Room } from "matrix-js-sdk/src/matrix";
-import { useCallback, useEffect, useState } from "react";
+import { ClientEvent } from "matrix-js-sdk/src/matrix";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 import { MatrixClientPeg } from "../MatrixClientPeg";
+import { Notifier } from "../Notifier";
 import DMRoomMap from "../utils/DMRoomMap";
-import { useEventEmitter } from "./useEventEmitter";
 
 export interface UserOnboardingContext {
-    avatar: string | null;
-    myDevice: string;
-    devices: IMyDevice[];
-    dmRooms: {[userId: string]: Room};
+    hasAvatar: boolean;
+    hasDevices: boolean;
+    hasDmRooms: boolean;
+    hasNotificationsEnabled: boolean;
+}
+
+const USER_ONBOARDING_CONTEXT_INTERVAL = 5000;
+
+function useRefOf<T extends [], R>(value: (...values: T) => R): (...values: T) => R {
+    const ref = useRef(value);
+    ref.current = value;
+    return useCallback(
+        (...values: T) => ref.current(...values),
+        [],
+    );
 }
 
 export function useUserOnboardingContext(): UserOnboardingContext | null {
     const [context, setContext] = useState<UserOnboardingContext | null>(null);
 
     const cli = MatrixClientPeg.get();
-    const handler = useCallback(async () => {
-        try {
-            const profile = await cli.getProfileInfo(cli.getUserId());
-
-            const myDevice = cli.getDeviceId();
-            const devices = await cli.getDevices();
-
-            const dmRooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals() ?? {};
-            setContext({
-                avatar: profile?.avatar_url ?? null,
-                myDevice,
-                devices: devices.devices,
-                dmRooms: dmRooms,
-            });
-        } catch (e) {
-            logger.warn("Could not load context for user onboarding task list: ", e);
-            setContext(null);
-        }
-    }, [cli]);
-
-    useEventEmitter(cli, ClientEvent.AccountData, handler);
+    const handler = useRefOf(
+        useCallback(async () => {
+            try {
+                let hasAvatar = context?.hasAvatar;
+                if (!hasAvatar) {
+                    const profile = await cli.getProfileInfo(cli.getUserId());
+                    hasAvatar = Boolean(profile?.avatar_url);
+                }
+
+                let hasDevices = context?.hasDevices;
+                if (!hasDevices) {
+                    const myDevice = cli.getDeviceId();
+                    const devices = await cli.getDevices();
+                    hasDevices = Boolean(devices.devices.find(device => device.device_id !== myDevice));
+                }
+
+                let hasDmRooms = context?.hasDmRooms;
+                if (!hasDmRooms) {
+                    const dmRooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals() ?? {};
+                    hasDmRooms = Boolean(Object.keys(dmRooms).length);
+                }
+
+                let hasNotificationsEnabled = context?.hasNotificationsEnabled;
+                if (!hasNotificationsEnabled) {
+                    hasNotificationsEnabled = Notifier.isPossible();
+                }
+
+                if (hasAvatar !== context?.hasAvatar
+                    || hasDevices !== context?.hasDevices
+                    || hasDmRooms !== context?.hasDmRooms
+                    || hasNotificationsEnabled !== context?.hasNotificationsEnabled) {
+                    setContext({ hasAvatar, hasDevices, hasDmRooms, hasNotificationsEnabled });
+                }
+            } catch (e) {
+                logger.warn("Could not load context for user onboarding task list: ", e);
+                setContext(null);
+            }
+        }, [context, cli]),
+    );
+
     useEffect(() => {
-        const handle = setInterval(handler, 2000);
+        cli.on(ClientEvent.AccountData, handler);
+        const handle = setInterval(handler, USER_ONBOARDING_CONTEXT_INTERVAL);
         handler();
         return () => {
+            cli.off(ClientEvent.AccountData, handler);
             if (handle) {
                 clearInterval(handle);
             }
         };
-    }, [handler]);
+    }, [cli, handler]);
 
     return context;
 }

src/hooks/useUserOnboardingTasks.ts

@@ -46,8 +46,6 @@ interface InternalUserOnboardingTask extends UserOnboardingTask {
     completed: (ctx: UserOnboardingContext) => boolean;
 }
 
-const hasOpenDMs = (ctx: UserOnboardingContext) => Boolean(Object.entries(ctx.dmRooms).length);
-
 const onClickStartDm = (ev: ButtonEvent) => {
     PosthogTrackers.trackInteraction("WebUserOnboardingTaskSendDm", ev);
     defaultDispatcher.dispatch({ action: 'view_create_chat' });
@@ -64,7 +62,7 @@ const tasks: InternalUserOnboardingTask[] = [
         id: "find-friends",
         title: _t("Find and invite your friends"),
         description: _t("It’s what you’re here for, so lets get to it"),
-        completed: hasOpenDMs,
+        completed: (ctx: UserOnboardingContext) => ctx.hasDmRooms,
         relevant: [UseCase.PersonalMessaging, UseCase.Skip],
         action: {
             label: _t("Find friends"),
@@ -75,7 +73,7 @@ const tasks: InternalUserOnboardingTask[] = [
         id: "find-coworkers",
         title: _t("Find and invite your co-workers"),
         description: _t("Get stuff done by finding your teammates"),
-        completed: hasOpenDMs,
+        completed: (ctx: UserOnboardingContext) => ctx.hasDmRooms,
         relevant: [UseCase.WorkMessaging],
         action: {
             label: _t("Find people"),
@@ -86,7 +84,7 @@ const tasks: InternalUserOnboardingTask[] = [
         id: "find-community-members",
         title: _t("Find and invite your community members"),
         description: _t("Get stuff done by finding your teammates"),
-        completed: hasOpenDMs,
+        completed: (ctx: UserOnboardingContext) => ctx.hasDmRooms,
         relevant: [UseCase.CommunityMessaging],
         action: {
             label: _t("Find people"),
@@ -97,9 +95,7 @@ const tasks: InternalUserOnboardingTask[] = [
         id: "download-apps",
         title: _t("Download Element"),
         description: _t("Don’t miss a thing by taking Element with you"),
-        completed: (ctx: UserOnboardingContext) => {
-            return Boolean(ctx.devices.filter(it => it.device_id !== ctx.myDevice).length);
-        },
+        completed: (ctx: UserOnboardingContext) => ctx.hasDevices,
         action: {
             label: _t("Download apps"),
             onClick: (ev: ButtonEvent) => {
@@ -112,7 +108,7 @@ const tasks: InternalUserOnboardingTask[] = [
         id: "setup-profile",
         title: _t("Set up your profile"),
         description: _t("Make sure people know it’s really you"),
-        completed: (info: UserOnboardingContext) => Boolean(info.avatar),
+        completed: (ctx: UserOnboardingContext) => ctx.hasAvatar,
         action: {
             label: _t("Your profile"),
             onClick: (ev: ButtonEvent) => {
@@ -128,7 +124,7 @@ const tasks: InternalUserOnboardingTask[] = [
         id: "permission-notifications",
         title: _t("Turn on notifications"),
         description: _t("Don’t miss a reply or important message"),
-        completed: () => Notifier.isPossible(),
+        completed: (ctx: UserOnboardingContext) => ctx.hasNotificationsEnabled,
         action: {
             label: _t("Enable notifications"),
             onClick: (ev: ButtonEvent) => {