content: import React from 'react';
  import { state, props, sequences } from 'cerebral';
  import { connect } from '@cerebral/react';
  import {
    faCheck,
    faPencilAlt,
    faTimes,
  } from '@fortawesome/free-solid-svg-icons';
  
  import Mails from './Mails';
  import Status from './Status';
  
  import UserLanguage from 'common/UserLanguage';
  
  import { TableRow, TableCell, Icon, IconClickable } from './elements';
  
  export default connect(
    {
      member: state`profiles.${props`uid`}`,
      editing: state`members.edit.uid`,
      semester: state`members.edit.semester`,
      year: state`members.edit.year`,
      editMember: sequences`members.editMember`,
      updateMemberUntil: sequences`members.updateMemberUntil`,
      format: state`format`,
    },
    function TableRowComponent({
      className,
      member,
      editing,
      uid,
      editMember,
      updateMemberUntil,
      format,
    }) {
      const isEditing = editing === uid;
  
      return (
        <UserLanguage>
          {t => (
            <TableRow className={className}>
              <TableCell>{member.name}</TableCell>
              <TableCell>{member.email}</TableCell>
              <TableCell>
                <Mails uid={uid} />
              </TableCell>
              <TableCell>
                {member.termsAccepted
                  ? format(member.termsAccepted, 'Do MMM HH:mm')
                  : '-'}
              </TableCell>
              <TableCell centered>
                {member.isAdmin && <Icon icon={faCheck} />}
              </TableCell>
              <TableCell>
                <Status uid={uid} />
              </TableCell>
              <TableCell centered>
                {isEditing ? (
                  <React.Fragment>
                    <IconClickable
                      onClick={() => editMember({ uid: null })}
                      icon={faTimes}
                    />
                    <IconClickable
                      onClick={() => updateMemberUntil()}
                      icon={faCheck}
                    />
                  </React.Fragment>
                ) : (
                  <IconClickable
                    onClick={() => editMember({ uid })}
                    icon={faPencilAlt}
                  />
                )}
              </TableCell>
            </TableRow>
          )}
        </UserLanguage>
      );
    }
  );
  