1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
import React from 'react';
import axios from 'axios';
import { BehaviorSubject, Observable } from 'rxjs';
import { apiBaseUrl } from '../config';
import { User } from '../data/user';
import { updateQueryString } from '../helper';
export function changeNickname(
token: string,
username: string,
newNickname: string
): Promise<User> {
return axios
.patch<User>(`${apiBaseUrl}/users/${username}?token=${token}`, {
nickname: newNickname,
})
.then((res) => res.data);
}
const avatarVersionSubject = new BehaviorSubject<number | undefined>(undefined);
export function changeAvatar(
token: string,
username: string,
data: Blob,
type: string
): Promise<void> {
return axios
.put(`${apiBaseUrl}/users/${username}/avatar?token=${token}`, data, {
headers: {
'Content-Type': type,
},
})
.then(() => {
avatarVersionSubject.next((avatarVersionSubject.value ?? 0) + 1);
});
}
export const avatarVersion$: Observable<
number | undefined
> = avatarVersionSubject;
export function useAvatarVersion(): number | undefined {
const [version, setVersion] = React.useState<number | undefined>();
React.useEffect(() => {
const subscription = avatarVersion$.subscribe((v) => setVersion(v));
return () => subscription.unsubscribe();
}, []);
return version;
}
export function useOptionalVersionedAvatarUrl(
url: string | undefined
): string | undefined {
const avatarVersion = useAvatarVersion();
return React.useMemo(
() =>
url == null
? undefined
: updateQueryString(
'v',
avatarVersion == null ? null : avatarVersion + '',
url
),
[avatarVersion, url]
);
}
export function useAvatarUrlWithGivenVersion(
version: number | null | undefined,
url: string
): string {
return React.useMemo(
() => updateQueryString('v', version == null ? null : version + '', url),
[version, url]
);
}
|
