41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import { KeyboardEvent } from 'react';
|
|
import { Base, Column, Flex, LayoutAvatarImageView, Text } from '../../../../../common';
|
|
import { useFriends, useMessenger, useSessionInfo } from '../../../../../hooks';
|
|
|
|
export const MyInfoView = () =>
|
|
{
|
|
const { userFigure = null, userName = null, motto,setMotto, saveMotto } = useSessionInfo();
|
|
const { unreadThreads = 0 } = useMessenger();
|
|
const { requests = [] } = useFriends();
|
|
|
|
const onMottoKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
|
|
{
|
|
event.stopPropagation();
|
|
|
|
switch(event.key)
|
|
{
|
|
case 'Enter':
|
|
saveMotto((event.target as HTMLInputElement).value);
|
|
return;
|
|
}
|
|
}
|
|
|
|
return <Column fullHeight fullWidth className="friends-myinfo">
|
|
<Flex fullHeight fullWidth center gap={ 1 } className="px-2">
|
|
<Base className="myinfo-avatar">
|
|
<LayoutAvatarImageView figure={ userFigure } direction={ 3 } position="absolute" headOnly />
|
|
</Base>
|
|
<Column>
|
|
<Text variant="white" bold>{ userName }</Text>
|
|
<input className="fi fi-white" value={ motto } onChange={ event => setMotto(event.target.value) } onKeyDown={ onMottoKeyDown } />
|
|
</Column>
|
|
</Flex>
|
|
<Flex fullHeight fullWidth center>
|
|
<Column>
|
|
<Text variant="white" bold underline>{ unreadThreads } Unread Messages</Text>
|
|
<Text variant="white" bold underline>{ requests.length } Friend Requests</Text>
|
|
</Column>
|
|
</Flex>
|
|
</Column>
|
|
}
|