openreplay/frontend/app/components/Session_/Player/Controls/AssistSessionsModal/AssistSessionsModal.tsx

import React from 'react';
import { Loader, Pagination, Tooltip, Button } from 'UI';
import SessionItem from 'Shared/SessionItem';
import Select from 'Shared/Select';
import SortOrderButton from 'Shared/SortOrderButton';
import { KEYS } from 'Types/filter/customFilter';
import { capitalize } from 'App/utils';
import { useStore } from 'App/mstore';
import { observer } from 'mobx-react-lite';
import AssistSearchField from 'App/components/Assist/AssistSearchField';
import LiveSessionSearch from 'Shared/LiveSessionSearch';
import cn from 'classnames';
import Session from 'App/mstore/types/session';

const PER_PAGE = 10;

interface ConnectProps {
  onAdd: () => void;
  replaceTarget?: string;
}

function AssistSessionsModal(props: ConnectProps) {
  const { assistMultiviewStore, customFieldStore, searchStoreLive, sessionStore } = useStore();
  const loading = sessionStore.loadingLiveSessions;
  const list = sessionStore.liveSessions;
  const filter = searchStoreLive.instance;
  const currentPage = searchStoreLive.currentPage;
  const total = sessionStore.totalLiveSessions;
  const onUserClick = () => false;
  const { filters } = filter;
  const hasUserFilter = filters.map((i: any) => i.key).includes(KEYS.USERID);
  const metaList = customFieldStore.list;

  const sortOptions = metaList
    .map((i: any) => ({
      label: capitalize(i),
      value: i
    }));

  React.useEffect(() => {
    if (total === 0) {
      reloadSessions();
    }
    // fetchMeta();
    customFieldStore.fetchList();
  }, []);
  const reloadSessions = () => searchStoreLive.edit({ ...filter });
  const onSortChange = ({ value }: any) => {
    searchStoreLive.edit({ sort: value.value });
  };
  const onSessionAdd = (session: Session) => {
    if (props.replaceTarget) {
      assistMultiviewStore.replaceSession(props.replaceTarget, session);
    } else {
      assistMultiviewStore.addSession(session);
    }
    assistMultiviewStore.fetchAgentTokenInfo(session.sessionId).then(() => props.onAdd());
  };

  return (
    <div className="bg-gray-lightest box-shadow h-screen p-4">
      <div className="flex flex-col my-2 w-full gap-2 ">
        <div className="flex items-center gap-2 w-full">
          <Tooltip title="Refresh" placement="top" delay={200}>
            <Button
              loading={loading}
              className="mr-2"
              variant="text"
              onClick={reloadSessions}
              icon="arrow-repeat"
            />
          </Tooltip>
          <AssistSearchField />
        </div>
        <div className="flex self-end items-center gap-2" w-full>
          <span className="color-gray-medium">Sort By</span>
          <Tooltip title="No metadata available to sort" disabled={sortOptions.length > 0}>
            <div className={cn('flex items-center', { disabled: sortOptions.length === 0 })}>
              <Select
                plain
                right
                options={sortOptions}
                onChange={onSortChange}
                value={sortOptions.find((i: any) => i.value === filter.sort) || sortOptions[0]}
              />
              <SortOrderButton
                onChange={(state: any) => searchStoreLive.edit({ order: state })}
                sortOrder={filter.order}
              />
            </div>
          </Tooltip>
        </div>
      </div>
      <LiveSessionSearch />
      <div className="my-4" />
      <Loader loading={loading}>
        <div className={'overflow-y-scroll'} style={{ maxHeight: '85vh' }}>
          {list.map((session) => (
            <React.Fragment key={session.sessionId}>
              <div
                className={cn(
                  'rounded bg-white mb-2 overflow-hidden border',
                  assistMultiviewStore.sessions.findIndex(
                    (s: Record<string, any>) => s.sessionId === session.sessionId
                  ) !== -1
                    ? 'cursor-not-allowed opacity-60'
                    : ''
                )}
              >
                <SessionItem
                  key={session.sessionId}
                  session={session}
                  live
                  hasUserFilter={hasUserFilter}
                  onUserClick={onUserClick}
                  metaList={metaList}
                  isDisabled={
                    assistMultiviewStore.sessions.findIndex(
                      (s: Record<string, any>) => s.sessionId === session.sessionId
                    ) !== -1
                  }
                  isAdd
                  onClick={() => onSessionAdd(session)}
                />
              </div>
            </React.Fragment>
          ))}
        </div>
      </Loader>

      {total > PER_PAGE && (
        <div className="w-full flex items-center justify-center py-6">
          <Pagination
            page={currentPage}
            total={total}
            onPageChange={(page: any) => searchStoreLive.updateCurrentPage(page)}
            limit={PER_PAGE}
          />
        </div>
      )}
    </div>
  );
}

export default observer(AssistSessionsModal);