typing profile folder

This commit is contained in:
Timo K 2022-06-11 15:14:00 +02:00
parent f990530031
commit 17a31e0904
2 changed files with 50 additions and 26 deletions

View file

@ -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,

View file

@ -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 {
loading: boolean;
error: Error;
interface ProfileLoadState {
success?: boolean;
loading?: boolean;
displayName: string;
avatarUrl: string;
saveProfile: ({
displayName,
avatar,
removeAvatar,
}: {
displayName: string;
avatar: any;
removeAvatar: boolean;
}) => Promise<void>;
success: boolean;
error?: Error;
}
export function useProfile(client: MatrixClient): ProfileResult {
type ProfileSaveCallback = ({
displayName,
avatar,
removeAvatar,
}: {
displayName: string;
avatar: FileType;
removeAvatar: boolean;
}) => Promise<void>;
export function useProfile(client: MatrixClient) {
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("User.avatarUrl", onChangeUser);
user.on(UserEvent.DisplayName, onChangeUser);
user.on(UserEvent.AvatarUrl, onChangeUser);
}
return () => {
if (user) {
user.removeListener("User.displayName", onChangeUser);
user.removeListener("User.avatarUrl", onChangeUser);
user.removeListener(UserEvent.DisplayName, 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,
};
}