welcome screen: track actual click interaction with upload avatar button

Author: justjanne

src/components/structures/HomePage.tsx

@@ -74,11 +74,9 @@ const UserWelcomeTop = () => {
             hasAvatar={!!ownProfile.avatarUrl}
             hasAvatarLabel={_tDom("Great, that'll help people know it's you")}
             noAvatarLabel={_tDom("Add a photo so people know it's you.")}
-            setAvatarUrl={async url => {
-                PosthogTrackers.trackInteraction("WebHomeMiniAvatarUploadButton");
-                await cli.setAvatarUrl(url);
-            }}
+            setAvatarUrl={url => cli.setAvatarUrl(url)}
             isUserAvatar
+            onClick={ev => PosthogTrackers.trackInteraction("WebHomeMiniAvatarUploadButton", ev)}
         >
             <BaseAvatar
                 idName={userId}

src/components/views/elements/MiniAvatarUploader.tsx

@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useContext, useRef, useState } from 'react';
-import { EventType } from 'matrix-js-sdk/src/@types/event';
 import classNames from 'classnames';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+import React, { useContext, useRef, useState, MouseEvent } from 'react';
 
-import AccessibleButton from "./AccessibleButton";
-import Spinner from "./Spinner";
+import Analytics from "../../../Analytics";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import RoomContext from "../../../contexts/RoomContext";
 import { useTimeout } from "../../../hooks/useTimeout";
-import Analytics from "../../../Analytics";
 import { TranslatedString } from '../../../languageHandler';
-import RoomContext from "../../../contexts/RoomContext";
 import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
+import AccessibleButton from "./AccessibleButton";
+import Spinner from "./Spinner";
 
 export const AVATAR_SIZE = 52;
 
@@ -35,10 +35,11 @@ interface IProps {
     hasAvatarLabel?: TranslatedString;
     setAvatarUrl(url: string): Promise<unknown>;
     isUserAvatar?: boolean;
+    onClick?(ev: MouseEvent<HTMLInputElement>): void;
 }
 
 const MiniAvatarUploader: React.FC<IProps> = ({
-    hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, isUserAvatar, children,
+    hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, isUserAvatar, children, onClick,
 }) => {
     const cli = useContext(MatrixClientContext);
     const [busy, setBusy] = useState(false);
@@ -66,7 +67,10 @@ const MiniAvatarUploader: React.FC<IProps> = ({
             type="file"
             ref={uploadRef}
             className="mx_MiniAvatarUploader_input"
-            onClick={chromeFileInputFix}
+            onClick={(ev) => {
+                chromeFileInputFix(ev);
+                onClick?.(ev);
+            }}
             onChange={async (ev) => {
                 if (!ev.target.files?.length) return;
                 setBusy(true);