Move inputs and profile components

src/profile/ProfileModal.jsx

@@ -0,0 +1,95 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { Button } from "../button";
+import { useProfile } from "./useProfile";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
+import { Modal, ModalContent } from "../Modal";
+
+export function ProfileModal({
+  client,
+  isAuthenticated,
+  isPasswordlessUser,
+  ...rest
+}) {
+  const { onClose } = rest;
+  const {
+    success,
+    error,
+    loading,
+    displayName: initialDisplayName,
+    saveProfile,
+  } = useProfile(client);
+  const [displayName, setDisplayName] = useState(initialDisplayName || "");
+
+  const onChangeDisplayName = useCallback(
+    (e) => {
+      setDisplayName(e.target.value);
+    },
+    [setDisplayName]
+  );
+
+  const onSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target);
+      const displayName = data.get("displayName");
+      const avatar = data.get("avatar");
+
+      saveProfile({
+        displayName,
+        avatar,
+      });
+    },
+    [saveProfile]
+  );
+
+  useEffect(() => {
+    if (success) {
+      onClose();
+    }
+  }, [success, onClose]);
+
+  return (
+    <Modal title="Profile" isDismissable {...rest}>
+      <ModalContent>
+        <form onSubmit={onSubmit}>
+          <FieldRow>
+            <InputField
+              id="displayName"
+              name="displayName"
+              label="Display Name"
+              type="text"
+              required
+              autoComplete="off"
+              placeholder="Display Name"
+              value={displayName}
+              onChange={onChangeDisplayName}
+            />
+          </FieldRow>
+          {isAuthenticated && !isPasswordlessUser && (
+            <FieldRow>
+              <InputField
+                type="file"
+                id="avatar"
+                name="avatar"
+                label="Avatar"
+              />
+            </FieldRow>
+          )}
+          {error && (
+            <FieldRow>
+              <ErrorMessage>{error.message}</ErrorMessage>
+            </FieldRow>
+          )}
+          <FieldRow rightAlign>
+            <Button type="button" variant="secondary" onPress={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading ? "Saving..." : "Save"}
+            </Button>
+          </FieldRow>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+}

src/profile/useProfile.js

@@ -0,0 +1,91 @@
+import { useState, useCallback, useEffect } from "react";
+import { getAvatarUrl } from "../matrix-utils";
+
+export function useProfile(client) {
+  const [{ loading, displayName, avatarUrl, error, success }, setState] =
+    useState(() => {
+      const user = client?.getUser(client.getUserId());
+
+      return {
+        success: false,
+        loading: false,
+        displayName: user?.displayName,
+        avatarUrl: user && client && getAvatarUrl(client, user.avatarUrl),
+        error: null,
+      };
+    });
+
+  useEffect(() => {
+    const onChangeUser = (_event, { displayName, avatarUrl }) => {
+      setState({
+        success: false,
+        loading: false,
+        displayName,
+        avatarUrl: getAvatarUrl(client, avatarUrl),
+        error: null,
+      });
+    };
+
+    let user;
+
+    if (client) {
+      const userId = client.getUserId();
+      user = client.getUser(userId);
+      user.on("User.displayName", onChangeUser);
+      user.on("User.avatarUrl", onChangeUser);
+    }
+
+    return () => {
+      if (user) {
+        user.removeListener("User.displayName", onChangeUser);
+        user.removeListener("User.avatarUrl", onChangeUser);
+      }
+    };
+  }, [client]);
+
+  const saveProfile = useCallback(
+    async ({ displayName, avatar }) => {
+      if (client) {
+        setState((prev) => ({
+          ...prev,
+          loading: true,
+          error: null,
+          success: false,
+        }));
+
+        try {
+          await client.setDisplayName(displayName);
+
+          let mxcAvatarUrl;
+
+          if (avatar) {
+            mxcAvatarUrl = await client.uploadContent(avatar);
+            await client.setAvatarUrl(mxcAvatarUrl);
+          }
+
+          setState((prev) => ({
+            ...prev,
+            displayName,
+            avatarUrl: mxcAvatarUrl
+              ? getAvatarUrl(client, mxcAvatarUrl)
+              : prev.avatarUrl,
+            loading: false,
+            success: true,
+          }));
+        } catch (error) {
+          setState((prev) => ({
+            ...prev,
+            loading: false,
+            error,
+            success: false,
+          }));
+        }
+      } else {
+        console.error("Client not initialized before calling saveProfile");
+      }
+    },
+    [client]
+  );
+
+  return { loading, error, displayName, avatarUrl, saveProfile, success };
+}