typing profile folder

src/profile/ProfileModal.tsx

@@ -57,10 +57,16 @@ export function ProfileModal({ client, ...rest }: Props) {
     (e) => {
       e.preventDefault();
       const data = new FormData(e.target);
-      const displayName = data.get("displayName");
+      const displayNameDataEntry = data.get("displayName");
       const avatar: File | string = data.get("avatar");
+
       const avatarSize =
         typeof avatar == "string" ? avatar.length : avatar.size;
+      const displayName =
+        typeof displayNameDataEntry == "string"
+          ? displayNameDataEntry
+          : displayNameDataEntry.name;
+
       saveProfile({
         displayName,
         avatar: avatar && avatarSize > 0 ? avatar : undefined,

src/profile/useProfile.ts

@@ -14,28 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { MatrixClient, User } from "matrix-js-sdk";
+import {
+  FileType,
+  MatrixClient,
+  MatrixEvent,
+  User,
+  UserEvent,
+} from "matrix-js-sdk";
 import { useState, useCallback, useEffect } from "react";
 
-interface ProfileResult {
+interface ProfileLoadState {
-  loading: boolean;
+  success?: boolean;
-  error: Error;
+  loading?: boolean;
   displayName: string;
   avatarUrl: string;
-  saveProfile: ({
+  error?: Error;
+}
+
+type ProfileSaveCallback = ({
   displayName,
   avatar,
   removeAvatar,
 }: {
   displayName: string;
-    avatar: any;
+  avatar: FileType;
   removeAvatar: boolean;
 }) => Promise<void>;
-  success: boolean;
+
-}
+export function useProfile(client: MatrixClient) {
-export function useProfile(client: MatrixClient): ProfileResult {
   const [{ loading, displayName, avatarUrl, error, success }, setState] =
-    useState(() => {
+    useState<ProfileLoadState>(() => {
       const user = client?.getUser(client.getUserId());
 
       return {
@@ -48,7 +56,10 @@ export function useProfile(client: MatrixClient): ProfileResult {
     });
 
   useEffect(() => {
-    const onChangeUser = (_event: any, { displayName, avatarUrl }: any) => {
+    const onChangeUser = (
+      _event: MatrixEvent,
+      { displayName, avatarUrl }: User
+    ) => {
       setState({
         success: false,
         loading: false,
@@ -63,19 +74,19 @@ export function useProfile(client: MatrixClient): ProfileResult {
     if (client) {
       const userId = client.getUserId();
       user = client.getUser(userId);
-      user.on("User.displayName", onChangeUser);
+      user.on(UserEvent.DisplayName, onChangeUser);
-      user.on("User.avatarUrl", onChangeUser);
+      user.on(UserEvent.AvatarUrl, onChangeUser);
     }
 
     return () => {
       if (user) {
-        user.removeListener("User.displayName", onChangeUser);
+        user.removeListener(UserEvent.DisplayName, onChangeUser);
-        user.removeListener("User.avatarUrl", onChangeUser);
+        user.removeListener(UserEvent.AvatarUrl, onChangeUser);
       }
     };
   }, [client]);
 
-  const saveProfile = useCallback(
+  const saveProfile = useCallback<ProfileSaveCallback>(
     async ({ displayName, avatar, removeAvatar }) => {
       if (client) {
         setState((prev) => ({
@@ -104,11 +115,11 @@ export function useProfile(client: MatrixClient): ProfileResult {
             loading: false,
             success: true,
           }));
-        } catch (error) {
+        } catch (error: unknown) {
           setState((prev) => ({
             ...prev,
             loading: false,
-            error,
+            error: error instanceof Error ? error : Error(error as string),
             success: false,
           }));
         }
@@ -119,5 +130,12 @@ export function useProfile(client: MatrixClient): ProfileResult {
     [client]
   );
 
-  return { loading, error, displayName, avatarUrl, saveProfile, success };
+  return {
+    loading,
+    error,
+    displayName,
+    avatarUrl,
+    saveProfile,
+    success,
+  };
 }