openreplay/frontend/app/components/shared/SessionItem/SessionItem.tsx

import React from 'react';
import cn from 'classnames';
import { CountryFlag, Avatar, TextEllipsis, Label, Icon, Tooltip } from 'UI';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import { durationFormatted, formatTimeOrDate } from 'App/date';
import stl from './sessionItem.module.css';
import Counter from './Counter';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import SessionMetaList from './SessionMetaList';
import PlayLink from './PlayLink';
import ErrorBars from './ErrorBars';
import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from 'App/routes';
import { capitalize } from 'App/utils';
import { Duration } from 'luxon';

const ASSIST_ROUTE = assistRoute();
const ASSIST_LIVE_SESSION = liveSession();
const SESSIONS_ROUTE = sessionsRoute();

interface Props {
  session: {
    sessionId: string;
    userBrowser: string;
    userOs: string;
    userId: string;
    userAnonymousId: string;
    userDisplayName: string;
    userCountry: string;
    startedAt: number;
    duration: Duration;
    eventsCount: number;
    errorsCount: number;
    pagesCount: number;
    viewed: boolean;
    favorite: boolean;
    userDeviceType: string;
    userUuid: string;
    userNumericHash: number;
    live: boolean;
    metadata: Record<string, any>;
    issueTypes: [];
    active: boolean;
    isCallActive?: boolean;
    agentIds?: string[];
  };
  onUserClick?: (userId: string, userAnonymousId: string) => void;
  hasUserFilter?: boolean;
  disableUser?: boolean;
  metaList?: Array<any>;
  // showActive?: boolean;
  lastPlayedSessionId?: string;
  live?: boolean;
  onClick?: any;
  compact?: boolean;
  isDisabled?: boolean;
  isAdd?: boolean;
}

function SessionItem(props: RouteComponentProps & Props) {
  const { settingsStore } = useStore();
  const { timezone } = settingsStore.sessionSettings;

  const {
    session,
    onUserClick = () => null,
    hasUserFilter = false,
    disableUser = false,
    metaList = [],
    lastPlayedSessionId,
    onClick = null,
    compact = false,
  } = props;

  const {
    sessionId,
    userBrowser,
    userOs,
    userId,
    userAnonymousId,
    userDisplayName,
    userCountry,
    startedAt,
    duration,
    eventsCount,
    viewed,
    userDeviceType,
    userNumericHash,
    live,
    metadata,
    issueTypes,
    active,
  } = session;

  const location = props.location;
  const queryParams = Object.fromEntries(new URLSearchParams(location.search));

  const formattedDuration = durationFormatted(duration);
  const hasUserId = userId || userAnonymousId;
  const isSessions = isRoute(SESSIONS_ROUTE, location.pathname);
  const isAssist =
    isRoute(ASSIST_ROUTE, location.pathname) ||
    isRoute(ASSIST_LIVE_SESSION, location.pathname) ||
    location.pathname.includes('multiview');
  const isLastPlayed = lastPlayedSessionId === sessionId;

  const _metaList = Object.keys(metadata)
    .filter((i) => metaList.includes(i))
    .map((key) => {
      const value = metadata[key];
      return { label: key, value };
    });

  return (
    <div
      className={cn(stl.sessionItem, 'flex flex-col py-2 px-4')}
      id="session-item"
      onClick={(e) => e.stopPropagation()}
    >
      <div className="flex items-start">
        <div className={cn('flex items-center w-full')}>
          {!compact && (
            <div className="flex items-center pr-2 shrink-0" style={{ width: '40%' }}>
              <div>
                <Avatar isActive={active} seed={userNumericHash} isAssist={isAssist} />
              </div>
              <div className="flex flex-col overflow-hidden color-gray-medium ml-3 justify-between items-center shrink-0">
                <div
                  className={cn('text-lg', {
                    'color-teal cursor-pointer': !disableUser && hasUserId,
                    [stl.userName]: !disableUser && hasUserId,
                    'color-gray-medium': disableUser || !hasUserId,
                  })}
                  onClick={() =>
                    !disableUser && !hasUserFilter && hasUserId
                      ? onUserClick(userId, userAnonymousId)
                      : null
                  }
                >
                  <TextEllipsis
                    text={userDisplayName}
                    maxWidth="200px"
                    popupProps={{ inverted: true, size: 'tiny' }}
                  />
                </div>
              </div>
            </div>
          )}
          <div
            style={{ width: compact ? '40%' : '20%' }}
            className="px-2 flex flex-col justify-between"
          >
            <div>
              <Tooltip
                delay={0}
                title={`${formatTimeOrDate(startedAt, timezone, true)} ${timezone.label}`}
                className="w-fit !block"
              >
                <TextEllipsis
                  text={formatTimeOrDate(startedAt, timezone)}
                  popupProps={{ inverted: true, size: 'tiny' }}
                />
              </Tooltip>
            </div>
            <div className="flex items-center color-gray-medium py-1">
              {!isAssist && (
                <>
                  <div className="color-gray-medium">
                    <span className="mr-1">{eventsCount}</span>
                    <span>{eventsCount === 0 || eventsCount > 1 ? 'Events' : 'Event'}</span>
                  </div>
                  <Icon name="circle-fill" size={3} className="mx-4" />
                </>
              )}
              <div>{live ? <Counter startTime={startedAt} /> : formattedDuration}</div>
            </div>
          </div>
          <div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
            <div style={{ height: '21px' }}>
              <CountryFlag country={userCountry} style={{ paddingTop: '4px' }} label />
            </div>
            <div className="color-gray-medium flex items-center py-1">
              <span className="capitalize" style={{ maxWidth: '70px' }}>
                <TextEllipsis
                  text={capitalize(userBrowser)}
                  popupProps={{ inverted: true, size: 'tiny' }}
                />
              </span>
              <Icon name="circle-fill" size={3} className="mx-4" />
              <span className="capitalize" style={{ maxWidth: '70px' }}>
                <TextEllipsis
                  text={capitalize(userOs)}
                  popupProps={{ inverted: true, size: 'tiny' }}
                />
              </span>
              <Icon name="circle-fill" size={3} className="mx-4" />
              <span className="capitalize" style={{ maxWidth: '70px' }}>
                <TextEllipsis
                  text={capitalize(userDeviceType)}
                  popupProps={{ inverted: true, size: 'tiny' }}
                />
              </span>
            </div>
          </div>
          {isSessions && (
            <div style={{ width: '10%' }} className="self-center px-2 flex items-center">
              <ErrorBars count={issueTypes.length} />
            </div>
          )}
        </div>

        <div className="flex items-center">
          <div
            className={cn(stl.playLink, props.isDisabled ? 'cursor-not-allowed' : 'cursor-pointer')}
            id="play-button"
            data-viewed={viewed}
          >
            {live && session.isCallActive && session.agentIds!.length > 0 ? (
              <div className="mr-4">
                <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
                  <span className="color-gray-medium text-xs" style={{ whiteSpace: 'nowrap' }}>
                    CALL IN PROGRESS
                  </span>
                </Label>
              </div>
            ) : null}
            {isSessions && (
              <div className="mr-4 flex-shrink-0 w-24">
                {isLastPlayed && (
                  <Label className="bg-gray-lightest p-1 px-2 rounded-lg">
                    <span className="color-gray-medium text-xs" style={{ whiteSpace: 'nowrap' }}>
                      LAST PLAYED
                    </span>
                  </Label>
                )}
              </div>
            )}
            {props.isAdd ? (
              <div
                className="rounded-full border-tealx p-2 border"
                onClick={() => (props.isDisabled ? null : props.onClick())}
              >
                <div className="bg-tealx rounded-full p-2">
                  <Icon name="plus" size={16} color="white" />
                </div>
              </div>
            ) : (
              <PlayLink
                isAssist={isAssist}
                sessionId={sessionId}
                viewed={viewed}
                onClick={onClick}
                queryParams={queryParams}
              />
            )}
          </div>
        </div>
      </div>
      {_metaList.length > 0 && <SessionMetaList className="mt-4" metaList={_metaList} />}
    </div>
  );
}

export default withRouter(observer(SessionItem));