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

static-user-onboarding-steps (#9799)

Browse source
This commit is contained in:
Marco Bartelt 2023-01-02 15:34:34 +01:00 • committed by GitHub
parent ecb3e7a197
commit 1b06b72b67
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 279 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/hooks/useUserOnboardingTasks.ts
View file

@ -30,7 +30,7 @@ import { UseCase } from "../settings/enums/UseCase";
import { useSettingValue } from "./useSettings";
import { UserOnboardingContext } from "./useUserOnboardingContext";
export interface UserOnboardingTask {
interface UserOnboardingTask {
id: string;
title: string | (() => string);
description: string | (() => string);
@ -41,10 +41,11 @@ export interface UserOnboardingTask {
href?: string;
hideOnComplete?: boolean;
};
completed: (ctx: UserOnboardingContext) => boolean;
}
interface InternalUserOnboardingTask extends UserOnboardingTask {
completed: (ctx: UserOnboardingContext) => boolean;
export interface UserOnboardingTaskWithResolvedCompletion extends Omit<UserOnboardingTask, "completed"> {
completed: boolean;
}
const onClickStartDm = (ev: ButtonEvent) => {
@ -52,7 +53,7 @@ const onClickStartDm = (ev: ButtonEvent) => {
defaultDispatcher.dispatch({ action: "view_create_chat" });
};
const tasks: InternalUserOnboardingTask[] = [
const tasks: UserOnboardingTask[] = [
{
id: "create-account",
title: _t("Create account"),
@ -143,9 +144,15 @@ const tasks: InternalUserOnboardingTask[] = [
},
];
export function useUserOnboardingTasks(context: UserOnboardingContext): [UserOnboardingTask[], UserOnboardingTask[]] {
export function useUserOnboardingTasks(context: UserOnboardingContext) {
const useCase = useSettingValue<UseCase | null>("FTUE.useCaseSelection") ?? UseCase.Skip;
const relevantTasks = useMemo(() => tasks.filter((it) => !it.relevant || it.relevant.includes(useCase)), [useCase]);
const completedTasks = relevantTasks.filter((it) => context && it.completed(context));
return [completedTasks, relevantTasks.filter((it) => !completedTasks.includes(it))];
return useMemo<UserOnboardingTaskWithResolvedCompletion[]>(() => {
return tasks
.filter((task) => !task.relevant || task.relevant.includes(useCase))
.map((task) => ({
...task,
completed: task.completed(context),
}));
}, [context, useCase]);
}