about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features/drawer/account/index.js
blob: 168d0c2cfb352067322e033418ffbcbd513137ec (plain) (blame)
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
//  Package imports.
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import {
  FormattedMessage,
  defineMessages,
} from 'react-intl';

//  Components.
import Avatar from 'flavours/glitch/components/avatar';
import Permalink from 'flavours/glitch/components/permalink';

//  Utils.
import { hiddenComponent } from 'flavours/glitch/util/react_helpers';

//  Messages.
const messages = defineMessages({
  edit: {
    defaultMessage: 'Edit profile',
    id: 'navigation_bar.edit_profile',
  },
});

//  The component.
export default function DrawerAccount ({ account }) {

  //  We need an account to render.
  if (!account) {
    return (
      <div className='drawer--account'>
        <a
          className='edit'
          href='/settings/profile'
        >
          <FormattedMessage {...messages.edit} />
        </a>
      </div>
    );
  }

  //  The result.
  return (
    <div className='drawer--account'>
      <Permalink
        className='avatar'
        href={account.get('url')}
        to={`/accounts/${account.get('id')}`}
      >
        <span {...hiddenComponent}>{account.get('acct')}</span>
        <Avatar
          account={account}
          size={40}
        />
      </Permalink>
      <Permalink
        className='acct'
        href={account.get('url')}
        to={`/accounts/${account.get('id')}`}
      >
        <strong>@{account.get('acct')}</strong>
      </Permalink>
      <a
        className='edit'
        href='/settings/profile'
      ><FormattedMessage {...messages.edit} /></a>
    </div>
  );
}

//  Props.
DrawerAccount.propTypes = { account: ImmutablePropTypes.map };