@rnga/orders/src/node_modules/ui/User/Link/index.js

## Get schema from @prisma-cms 1. yarn get-api-schema -e http://localhost:4000 2. yarn build-api-fragments

import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'


import Avatar from '../../Avatar';

import { Link } from 'react-router-dom';

import { withStyles } from 'material-ui/styles';
import Grid from 'material-ui/Grid';

import DoneIcon from "material-ui-icons/Done";
import DoneAllIcon from "material-ui-icons/DoneAll";

export const styles = theme => {



  const {
    palette: {
      text: {
        disabled,
      },
    },
  } = theme;

  return {
    root: {
      display: 'inline-flex',
      alignItems: 'center',
      textDecoration: "none",
      width: "auto",

      "&.inactive": {

        "&, & a": {
          color: disabled,
        },
      },
    },
    row: {
      display: 'inline-flex',
      alignItems: 'center',
      textDecoration: "none",
    },
    // avatar: {
    //   margin: 10,
    // },
    // smallAvatar: {
    //   width: 30,
    //   height: 30,
    // },
    // bigAvatar: {
    //   width: 120,
    //   height: 120,
    // },
    // editable: {
    //   cursor: 'pointer',
    // },
  }
};


export class UserLink extends Component {

  static propTypes = {
    classes: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired,
    withAvatar: PropTypes.bool.isRequired,
    // fullname: PropTypes.bool.isRequired,
    showSyncStatus: PropTypes.bool.isRequired,
  }


  static defaultProps = {
    withAvatar: true,
    // fullname: true,
    showSyncStatus: true,
  };


  render() {

    const {
      user,
      withAvatar,
      classes,
      secondary,
      style,
      showSyncStatus,
      children,
      ...other
    } = this.props;


    if (!user) {
      return null;
    }

    const {
      id,
      username,
      fullname,
      // lastname,
      secondID,
      exported,
      requestJoin,
      active,
    } = user;

    const name = fullname || username;

    // const url = `/users/${username}/`;
    const url = `/users/${id}`;


    let icon;

    if (showSyncStatus) {
      if (exported) {
        icon = <DoneAllIcon
          style={{
            color: "green",
            fontSize: "1.6rem",
          }}
        />
      }
      else if (secondID) {
        icon = <DoneIcon
          style={{
            fontSize: "1.6rem",
          }}
        />
      }
    }

    return (
      <Grid
        container
        className={[classes.root, !active ? "inactive" : undefined].join(" ")}
        style={style}
      >

        <Grid
          item
        >
          {withAvatar && <Link
            key={id}
            to={url}
            href={url}
            title={fullname || username}
            {...other}
          >

            <Avatar
              user={user}
              size="small"
            />

          </Link> || null}

        </Grid>

        <Grid
          item
          xs
        >

          <Link
            key={id}
            to={url}
            href={url}
            {...other}
          >

            {children || name}

          </Link>

          {icon}

          {secondary}

        </Grid>

      </Grid>
    )
  }
}


export default withStyles(styles)(UserLink);