typescript src/profile

src/profile/ProfileModal.tsx

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 import React, { useCallback, useEffect, useState } from "react";
+import { MatrixClient } from "matrix-js-sdk";
+
 import { Button } from "../button";
 import { useProfile } from "./useProfile";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
@@ -22,7 +24,12 @@ import { Modal, ModalContent } from "../Modal";
 import { AvatarInputField } from "../input/AvatarInputField";
 import styles from "./ProfileModal.module.css";
 
-export function ProfileModal({ client, ...rest }) {
+interface Props {
+  client: MatrixClient;
+  onClose: () => {};
+  [rest: string]: unknown;
+}
+export function ProfileModal({ client, ...rest }: Props) {
   const { onClose } = rest;
   const {
     success,
@@ -51,12 +58,13 @@ export function ProfileModal({ client, ...rest }) {
       e.preventDefault();
       const data = new FormData(e.target);
       const displayName = data.get("displayName");
-      const avatar = data.get("avatar");
-
+      const avatar: File | string = data.get("avatar");
+      const avatarSize =
+        typeof avatar == "string" ? avatar.length : avatar.size;
       saveProfile({
         displayName,
-        avatar: avatar && avatar.size > 0 ? avatar : undefined,
-        removeAvatar: removeAvatar && (!avatar || avatar.size === 0),
+        avatar: avatar && avatarSize > 0 ? avatar : undefined,
+        removeAvatar: removeAvatar && (!avatar || avatarSize === 0),
       });
     },
     [saveProfile, removeAvatar]

src/profile/useProfile.ts

@@ -14,9 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { MatrixClient, User } from "matrix-js-sdk";
 import { useState, useCallback, useEffect } from "react";
 
-export function useProfile(client) {
+interface ProfileResult {
+  loading: boolean;
+  error: Error;
+  displayName: string;
+  avatarUrl: string;
+  saveProfile: ({
+    displayName,
+    avatar,
+    removeAvatar,
+  }: {
+    displayName: string;
+    avatar: any;
+    removeAvatar: boolean;
+  }) => Promise<void>;
+  success: boolean;
+}
+export function useProfile(client: MatrixClient): ProfileResult {
   const [{ loading, displayName, avatarUrl, error, success }, setState] =
     useState(() => {
       const user = client?.getUser(client.getUserId());
@@ -31,7 +48,7 @@ export function useProfile(client) {
     });
 
   useEffect(() => {
-    const onChangeUser = (_event, { displayName, avatarUrl }) => {
+    const onChangeUser = (_event: any, { displayName, avatarUrl }: any) => {
       setState({
         success: false,
         loading: false,
@@ -41,7 +58,7 @@ export function useProfile(client) {
       });
     };
 
-    let user;
+    let user: User;
 
     if (client) {
       const userId = client.getUserId();
@@ -71,7 +88,7 @@ export function useProfile(client) {
         try {
           await client.setDisplayName(displayName);
 
-          let mxcAvatarUrl;
+          let mxcAvatarUrl: string;
 
           if (removeAvatar) {
             await client.setAvatarUrl("");