PeopleGrid.tsx

import * as React from 'react';
import Grid, { IGridProps } from '../Grid';
import ImgCell from '../Grid/ImgCell';
import TextCell from '../Grid/TextCell';
import LinkCell from '../Grid/LinkCell';
import { IUsersToRender } from '@src/contacts/containers/interfaces';
import UserProfilePreview from '@src/shared/UserProfilePreview';
import { ProjectRow, IProjectRowProps } from '../ProjectsGrid';

const mail = require('./assets/images/mail.svg');
const slackIcon = require('./assets/images/slackIcon.svg');
const defaultUserPick = require('./assets/images/defaultUserpic.svg');

const get = require('lodash/get');

export interface IPeopleGridItem {
  pk: number;
  icon: string;
  name: string;
  phone: string;
  grade: string;
  telegram: string;
  slackName: string;
  email: string;
  occupation: string;
  affiliate: string;
}

export interface IPeopleGridParent {
  pk: number;
  name: string;
  parentName: string;
  members: string[];
}

export interface IPeopleGridProps extends IGridProps {
  items: IUsersToRender[];
  parent: IProjectRowProps;
  returnLink: string;
  reset: () => void;
}

const filterFields = [
  { placeholder: 'Имя сотрудника', name: 'name' },
  { placeholder: 'Телефон', name: 'phone' },
];

const PeopleGrid: React.FunctionComponent<IPeopleGridProps> = ({
  items,
  parent,
  returnLink,
  ...rest
}) => {
  React.useEffect(() => {
    rest.reset();
    rest.load({ limit: rest.limit, offset: 0 }, true);
  }, [rest.limit]);

  const [currentUser, setCurrentUser] = React.useState(null);

  return (
    <>
      {parent && <ProjectRow single {...parent} />}
      <Grid
        rounded={!!parent}
        filterFields={filterFields}
        items={items} {...rest}
      >
        {items.map((user: IUsersToRender, i) => {
          return (
            <Grid.Row key={user.pk} onClick={() => setCurrentUser(user)}>
              <ImgCell
                width={'40px'}
                height={'40px'}
                src={user.crop128 || defaultUserPick}
              />
              <TextCell
                bold
                content={`${user.firstName} ${user.lastName}`}
                caption={`${get(
                  user,
                  'position.title',
                  'Не указана должность',
                )} | ${get(user, 'city.title', 'Не указан город')}`}
              />
              <TextCell content={user.phone || 'Не указан телефон'} />
              <LinkCell
                href={`https://skyeng.slack.com/channels/${user.slackName ||
                  ''}`}
                iconSrc={slackIcon}
              >
                {user.slackName}
              </LinkCell>
              <LinkCell href={`mailto:${user.email}`} iconSrc={mail}>
                {user.email}
              </LinkCell>
            </Grid.Row>
          );
        })}
        {currentUser && (
          <UserProfilePreview
            isOpen={!!currentUser}
            closeModal={() => {
              setCurrentUser(null);
            }}
            chosenUser={currentUser}
          />
        )}
      </Grid>
    </>
  );
};

PeopleGrid.defaultProps = {
  limit: 7,
  offset: 0,
};

export default PeopleGrid;