All files / src/components/profile profile-title-readonly.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react";
import { useDispatch } from "react-redux";
 
import Title from "src/components/title";
import TinyButton from "src/components/tiny-button";
 
import * as user from "src/store/user/actions";
import { useUserName } from "src/store/selectors";
import getRandomName from "src/helpers/get-random-name";
 
/** @private */
interface Props {
	onRename?: () => void;
}
 
export default function ProfileTitleReadonly({ onRename }: Props): JSX.Element {
	const username = useUserName();
	const dispatch = useDispatch();
 
	return (
		<>
			<Title>Greetings, {username}!</Title>
 
			<span className="text-muted text-center">
				<TinyButton
					icon="create"
					className="text-secondary py-0"
					onClick={onRename}
				>
					Rename
				</TinyButton>
 
				<TinyButton
					icon="cached"
					className="text-secondary py-0"
					onClick={(): void => {
						dispatch(user.setName(getRandomName()));
					}}
				>
					Random
				</TinyButton>
			</span>
		</>
	);
}