imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rework how the onboarding notifications task works (#12839)

Browse source 
* Rework how the onboarding notifications task works

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-30 15:55:08 +01:00 • committed by GitHub
parent dd20741b87
commit 02047243f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 85 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/hooks/useUserOnboardingContext.ts
View file

@ -18,15 +18,17 @@ import { logger } from "matrix-js-sdk/src/logger";
import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/matrix";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Notifier } from "../Notifier";
import { Notifier, NotifierEvent } from "../Notifier";
import DMRoomMap from "../utils/DMRoomMap";
import { useMatrixClientContext } from "../contexts/MatrixClientContext";
import { useSettingValue } from "./useSettings";
import { useEventEmitter } from "./useEventEmitter";
export interface UserOnboardingContext {
hasAvatar: boolean;
hasDevices: boolean;
hasDmRooms: boolean;
hasNotificationsEnabled: boolean;
showNotificationsPrompt: boolean;
}
const USER_ONBOARDING_CONTEXT_INTERVAL = 5000;
@ -82,6 +84,18 @@ function useUserOnboardingContextValue<T>(defaultValue: T, callback: (cli: Matri
return value;
}
function useShowNotificationsPrompt(): boolean {
const [value, setValue] = useState<boolean>(Notifier.shouldShowPrompt());
useEventEmitter(Notifier, NotifierEvent.NotificationHiddenChange, () => {
setValue(Notifier.shouldShowPrompt());
});
const setting = useSettingValue("notificationsEnabled");
useEffect(() => {
setValue(Notifier.shouldShowPrompt());
}, [setting]);
return value;
}
export function useUserOnboardingContext(): UserOnboardingContext {
const hasAvatar = useUserOnboardingContextValue(false, async (cli) => {
const profile = await cli.getProfileInfo(cli.getUserId()!);
@ -96,12 +110,10 @@ export function useUserOnboardingContext(): UserOnboardingContext {
const dmRooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals() ?? {};
return Boolean(Object.keys(dmRooms).length);
});
const hasNotificationsEnabled = useUserOnboardingContextValue(false, async () => {
return Notifier.isPossible();
});
const showNotificationsPrompt = useShowNotificationsPrompt();
return useMemo(
() => ({ hasAvatar, hasDevices, hasDmRooms, hasNotificationsEnabled }),
[hasAvatar, hasDevices, hasDmRooms, hasNotificationsEnabled],
() => ({ hasAvatar, hasDevices, hasDmRooms, showNotificationsPrompt }),
[hasAvatar, hasDevices, hasDmRooms, showNotificationsPrompt],
);
}

10
src/hooks/useUserOnboardingTasks.ts
View file

@ -136,14 +136,18 @@ const tasks: UserOnboardingTask[] = [
id: "permission-notifications",
title: _t("onboarding|enable_notifications"),
description: _t("onboarding|enable_notifications_description"),
completed: (ctx: UserOnboardingContext) => ctx.hasNotificationsEnabled,
completed: (ctx: UserOnboardingContext) => !ctx.showNotificationsPrompt,
action: {
label: _t("onboarding|enable_notifications_action"),
onClick: (ev: ButtonEvent) => {
PosthogTrackers.trackInteraction("WebUserOnboardingTaskEnableNotifications", ev);
Notifier.setEnabled(true);
defaultDispatcher.dispatch({
action: Action.ViewUserSettings,
initialTabId: UserTab.Notifications,
});
Notifier.setPromptHidden(true);
},
hideOnComplete: true,
hideOnComplete: !Notifier.isPossible(),
},
},
];