Wire up bunch of interaction events into Posthog (#7707)

This commit is contained in:
Michael Telatynski 2022-02-09 14:42:08 +00:00 committed by GitHub
parent 5620b83d34
commit 999e1b7421
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 120 additions and 26 deletions

View file

@ -19,7 +19,7 @@ import classNames from 'classnames';
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { _t } from "../../../languageHandler";
import AccessibleButton from "../elements/AccessibleButton";
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
import { backLabelForPhase } from '../../../stores/right-panel/RightPanelStorePhases';
@ -30,8 +30,9 @@ interface IProps {
className?: string;
withoutScrollContainer?: boolean;
closeLabel?: string;
onClose?(): void;
cardState?;
onClose?(ev: ButtonEvent): void;
onBack?(ev: ButtonEvent): void;
cardState?: any;
}
interface IGroupProps {
@ -49,6 +50,7 @@ export const Group: React.FC<IGroupProps> = ({ className, title, children }) =>
const BaseCard: React.FC<IProps> = ({
closeLabel,
onClose,
onBack,
className,
header,
footer,
@ -59,7 +61,8 @@ const BaseCard: React.FC<IProps> = ({
const cardHistory = RightPanelStore.instance.roomPhaseHistory;
if (cardHistory.length > 1) {
const prevCard = cardHistory[cardHistory.length - 2];
const onBackClick = () => {
const onBackClick = (ev: ButtonEvent) => {
onBack?.(ev);
RightPanelStore.instance.popCard();
};
const label = backLabelForPhase(prevCard.phase) ?? _t("Back");

View file

@ -23,7 +23,7 @@ import { useIsEncrypted } from '../../../hooks/useIsEncrypted';
import BaseCard, { Group } from "./BaseCard";
import { _t } from '../../../languageHandler';
import RoomAvatar from "../avatars/RoomAvatar";
import AccessibleButton from "../elements/AccessibleButton";
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import defaultDispatcher from "../../../dispatcher/dispatcher";
import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
import Modal from "../../../Modal";
@ -47,6 +47,7 @@ import RoomName from "../elements/RoomName";
import UIStore from "../../../stores/UIStore";
import ExportDialog from "../dialogs/ExportDialog";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import PosthogTrackers from "../../../PosthogTrackers";
interface IProps {
room: Room;
@ -59,7 +60,7 @@ interface IAppsSectionProps {
interface IButtonProps {
className: string;
onClick(): void;
onClick(ev: ButtonEvent): void;
}
const Button: React.FC<IButtonProps> = ({ children, className, onClick }) => {
@ -229,16 +230,18 @@ const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
</Group>;
};
export const onRoomMembersClick = (allowClose = true) => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, allowClose);
const onRoomMembersClick = (ev: ButtonEvent) => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true);
PosthogTrackers.trackInteraction("WebRightPanelRoomInfoPeopleButton", ev);
};
export const onRoomFilesClick = (allowClose = true) => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, allowClose);
const onRoomFilesClick = () => {
RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, true);
};
const onRoomSettingsClick = () => {
const onRoomSettingsClick = (ev: ButtonEvent) => {
defaultDispatcher.dispatch({ action: "open_room_settings" });
PosthogTrackers.trackInteraction("WebRightPanelRoomInfoSettingsButton", ev);
};
const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {

View file

@ -34,7 +34,7 @@ import Modal from '../../../Modal';
import { _t } from '../../../languageHandler';
import createRoom, { findDMForUser, privateShouldBeEncrypted } from '../../../createRoom';
import DMRoomMap from '../../../utils/DMRoomMap';
import AccessibleButton from '../elements/AccessibleButton';
import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
import SdkConfig from '../../../SdkConfig';
import RoomViewStore from "../../../stores/RoomViewStore";
import MultiInviter from "../../../utils/MultiInviter";
@ -78,6 +78,7 @@ import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
import { IRightPanelCardState } from '../../../stores/right-panel/RightPanelStoreIPanelState';
import { useUserStatusMessage } from "../../../hooks/useUserStatusMessage";
import UserIdentifierCustomisations from '../../../customisations/UserIdentifier';
import PosthogTrackers from "../../../PosthogTrackers";
export interface IDevice {
deviceId: string;
@ -422,7 +423,7 @@ const UserOptionsSection: React.FC<{
if (canInvite && (member?.membership ?? 'leave') === 'leave' && shouldShowComponent(UIComponent.InviteUsers)) {
const roomId = member && member.roomId ? member.roomId : RoomViewStore.getRoomId();
const onInviteUserButton = async () => {
const onInviteUserButton = async (ev: ButtonEvent) => {
try {
// We use a MultiInviter to re-use the invite logic, even though
// we're only inviting one user.
@ -438,6 +439,8 @@ const UserOptionsSection: React.FC<{
description: ((err && err.message) ? err.message : _t("Operation failed")),
});
}
PosthogTrackers.trackInteraction("WebRightPanelRoomUserInfoInviteButton", ev);
};
inviteUserButton = (
@ -1719,6 +1722,11 @@ const UserInfo: React.FC<IProps> = ({
onClose={onClose}
closeLabel={closeLabel}
cardState={cardState}
onBack={(ev: ButtonEvent) => {
if (RightPanelStore.instance.previousCard.phase === RightPanelPhases.RoomMemberList) {
PosthogTrackers.trackInteraction("WebRightPanelRoomUserInfoBackButton", ev);
}
}}
>
{ content }
</BaseCard>;