agx-chat-web 1.2.1 → 1.2.3

package/src/app/Messenger/views/MessengerList.tsx

@@ -1,170 +0,0 @@
-import React, { Fragment } from 'react'
-import { IList } from 'types'
-import ChatTabs from '../components/ChatTabs/ChatTabs'
-import ChatButtons from '../components/ChatButton/ChatButton'
-import SearchInput from '../components/SearchInput/SearchInput'
-import MessengerListItem, { activeItem } from './MessengerListItem'
-import useTheme from '../hooks/useThemes'
-import EmptyIcon from '../icons/EmptyIcon'
-import InfiniteScroll from '../components/InfiniteScroll/InfiniteScroll'
-import { useTranslation } from 'react-i18next'
-
-interface IMessengerList {
-  affix?: React.ReactElement
-  loading: boolean
-  conversations: IList[]
-  currentId?: string
-  failed?: boolean
-  showBadge: boolean
-  tab?: 'list' | 'messages'
-  className?: string
-  onClick: (item: IList) => void
-  searchChat: (search: string, key: string) => void
-  searchKeys: { label: string; value: string }[]
-  messegerView: 'empty' | 'messages' | 'newChat'
-  helpDesk: boolean
-  handleChangeTickets: (tab: string) => void
-  loadingSearch: boolean
-  chatListTabs: { value: string; label: string }[]
-  chatButtons: {
-    label: string
-    onClick: () => void
-    type: string
-    canSee: boolean
-    disabled?: boolean
-  }[]
-  canSeeDetailsChat: boolean
-  hasNext: boolean
-  onIntersect: () => void
-  sliceCount: number
-  currentViewerId: string
-}
-
-const ListLoading = () => {
-  const { theme } = useTheme()
-  return (
-    <Fragment>
-      {new Array(5).fill('').map((_, idx) => (
-        <button
-          key={`asideSkeleton${idx}`}
-          style={{
-            background: theme.listItemHover,
-            borderBottom: idx < 4 ? `1px solid ${theme.borderColor}` : '0',
-          }}
-          className='messenger__aside-skeleton'
-        />
-      ))}
-    </Fragment>
-  )
-}
-
-function MessengerList ({
-  affix,
-  conversations,
-  tab,
-  className = '',
-  loading,
-  failed,
-  showBadge,
-  currentId,
-  onClick,
-  searchChat,
-  searchKeys,
-  messegerView,
-  helpDesk,
-  handleChangeTickets,
-  chatListTabs,
-  chatButtons,
-  loadingSearch,
-  canSeeDetailsChat,
-  hasNext,
-  onIntersect,
-  sliceCount,
-  currentViewerId,
-}: IMessengerList) {
-  const { t } = useTranslation('messengerList')
-  const { theme } = useTheme()
-
-  return (
-    <aside
-      className={`messenger__aside ${className} ${tab === 'messages' ? 'messenger__mobile-hide' : ''}`}
-      style={{
-        border: `1px solid ${theme.borderColor}`,
-        borderRadius: '20px 0 0 20px',
-        background: theme.asideBg,
-      }}
-    >
-      <div className='messenger__buttons-container'>
-        <ChatButtons
-          chatButtons={chatButtons}
-          messegerView={messegerView}
-          removeActiveItem={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            activeItem(
-              e,
-              'messenger__aside-list-item',
-              'messenger__aside-list-item--active'
-            )
-          }}
-        />
-
-        {helpDesk && (
-          <SearchInput
-            searchKeys={searchKeys}
-            searchChat={searchChat}
-            loadingSearch={loadingSearch}
-          />
-        )}
-      </div>
-
-      {affix && (
-        <div className='messenger__aside-header'>
-          {React.cloneElement(affix)}
-        </div>
-      )}
-
-      <ChatTabs
-        chatListTabs={chatListTabs}
-        handleChangeTickets={handleChangeTickets}
-      />
-
-      <div className='messenger__aside-list'>
-        <InfiniteScroll
-          root={document.querySelector('.messenger__aside-list')}
-          loading={loading}
-          loadingCover={<ListLoading />}
-          more={hasNext}
-          fetch={onIntersect}
-        >
-          {Array.isArray(conversations) &&
-            conversations.length > 0 &&
-            conversations.slice(0, sliceCount).map((item) => {
-              return (
-                <div
-                  key={item?._id}
-                  className={`messenger__aside-item-container ${showBadge ? 'messenger__active-badge' : ''}`}
-                >
-                  <MessengerListItem
-                    canSeeDetailsChat={canSeeDetailsChat}
-                    currentId={currentId}
-                    item={item}
-                    onClick={onClick}
-                    currentViewerId={currentViewerId}
-                  />
-                </div>
-              )
-            })}
-        </InfiniteScroll>
-
-        {failed ||
-          (conversations?.length === 0 && !loading && (
-            <div className='messenger__aside-empty'>
-              <EmptyIcon />
-              <p>{t('noChatFound')}</p>
-            </div>
-          ))}
-      </div>
-    </aside>
-  )
-}
-
-export default MessengerList

package/src/app/Messenger/views/MessengerListItem.tsx

@@ -1,178 +0,0 @@
-import React, { useState, useMemo, useEffect } from 'react'
-import { IList } from 'types'
-import { SlaDates, timeAsDayjs } from '../classes/slaCalculations'
-import MessengerAvatar from '../components/MessengerAvatar/MessengerAvatar'
-import useTheme from '../hooks/useThemes'
-import TimerIcon from '../icons/TimerIcon'
-
-interface IListItem {
-  onClick: (item: IList) => void
-  item: IList
-  currentId?: string
-  canSeeDetailsChat: boolean
-  currentViewerId: string
-}
-
-export function activeItem (
-  e: React.MouseEvent<HTMLElement, MouseEvent>,
-  defaultClass: string,
-  activeClass: string
-) {
-  const click = document.querySelectorAll(`.${defaultClass}`)
-  click.forEach((item) => {
-    item.classList.remove(activeClass)
-  })
-
-  e.currentTarget.className += ` ${activeClass} `
-}
-
-function MessengerListItem ({
-  item,
-  onClick,
-  canSeeDetailsChat,
-  currentId,
-  currentViewerId,
-}: IListItem) {
-  const [unreadMessages, setUnreadMessages] = useState<
-    typeof item.totalUnreadMessages
-  >(item.totalUnreadMessages)
-  const closedChat = useMemo(
-    () =>
-      item.status.current.state === 'final'
-        ? 'messenger__aside-list-item--closed'
-        : '',
-    [item]
-  )
-  const [background, setBackground] = useState<string | undefined>('')
-  const [counter, setCounter] = useState<number | null>(null)
-
-  const { theme } = useTheme()
-  const isInprogress = item.status?.current?.systemicValue === 'inprogress'
-
-  const otherChatMember = useMemo(
-    () =>
-      item?.users.find((item) => item.uniqueCode !== currentViewerId) ||
-      item.creator,
-    [item?.users, currentViewerId]
-  )
-
-  useEffect(() => {
-    let interval: NodeJS.Timer
-    if (isInprogress && canSeeDetailsChat) {
-      const sla = new SlaDates(
-        timeAsDayjs(item.currentTime).diff(item.createdAt, 'second')
-      )
-      const diference = sla.calculateWorkingTime(
-        timeAsDayjs(item.createdAt),
-        timeAsDayjs(),
-        { start: 9, end: 18 }
-      )
-
-      setCounter(diference)
-      if (sla.canUpdateClock(timeAsDayjs())) {
-        interval = setInterval(() => {
-          setCounter((prev) => (prev !== null ? prev + 1 : null))
-        }, 1000)
-      }
-    } else {
-      setCounter(item.SLATimePassed ?? null)
-    }
-
-    return () => {
-      clearInterval(interval)
-    }
-  }, [])
-
-  useEffect(() => {
-    setUnreadMessages(item.totalUnreadMessages)
-  }, [item])
-
-  function handleClick (
-    e: React.MouseEvent<HTMLElement, MouseEvent>,
-    item: IList
-  ) {
-    activeItem(
-      e,
-      'messenger__aside-list-item',
-      'messenger__aside-list-item--active'
-    )
-    onClick(item)
-  }
-
-  function formatUnreadMessages (unread: number) {
-    if (!unread) return 0
-    if (unread >= 99) return 99
-    return unread
-  }
-
-  const onMouseOver = () => {
-    setBackground(theme?.listItemHover)
-  }
-
-  const onMouseLeave = () => {
-    setBackground('')
-  }
-
-  const ShowTimer = () => {
-    if (counter === null) return null
-
-    return (
-      <span
-        className='messenger__aside-timer'
-        style={{
-          background: SlaDates.getColorsByTime(counter),
-          color: 'var(--secondary-color)',
-          width: 'fit-content',
-        }}
-      >
-        <TimerIcon color='var(--secondary-color)' />
-        &nbsp;
-        <b>{SlaDates.secondsInHours(counter)}</b>
-      </span>
-    )
-  }
-
-  return (
-    <div
-      className={`messenger__aside-list-item ${closedChat}`}
-      onClick={(e) => handleClick(e, item)}
-      onMouseOver={onMouseOver}
-      onMouseLeave={onMouseLeave}
-      style={{
-        color: theme?.asideFontColor,
-        backgroundColor: currentId === item._id ? theme?.active : background,
-      }}
-    >
-      <MessengerAvatar image={otherChatMember?.image}>
-        {otherChatMember && otherChatMember.username
-          ? otherChatMember.username.slice(0, 1)
-          : ''}
-      </MessengerAvatar>
-
-      <div className='messenger__aside-list-item--info'>
-        <p className='messenger__aside-list-item--title'>
-          {otherChatMember?.username}
-        </p>
-        {item?.reason && (
-          <p className='messenger__aside-list-item--description'>
-            {item.reason}
-          </p>
-        )}
-        {canSeeDetailsChat && <ShowTimer />}
-      </div>
-
-      {item && (
-        <div className='messenger__aside-list-item--additional'>
-          {canSeeDetailsChat && `#${item.protocol}`}
-          {unreadMessages > 0 && (
-            <div className='messenger__aside-list-item--unread'>
-              <span>{formatUnreadMessages(unreadMessages)}</span>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default MessengerListItem