agx-chat-web 1.1.0 → 1.2.1

package/src/app/Messenger/components/InputFile/InputFile.tsx

@@ -1,145 +1,147 @@
-import TrashIcon from '../../icons/TrashIcon'
-import React, { useMemo } from 'react'
-import useTheme from '../../hooks/useThemes'
-import { useTranslation } from 'react-i18next'
-
-interface IProps {
-  fileList: File[]
-  onUpdateFile: (files: File) => void
-  label: string
-  onRemoveFile: (files: File) => void
-  maxSize: string
-  loading: boolean
-}
-
-function InputFile ({
-  fileList,
-  onUpdateFile,
-  label,
-  onRemoveFile,
-  maxSize,
-  loading,
-}: IProps) {
-  const { theme } = useTheme()
-  const { t } = useTranslation('newFormChat')
-
-  const validateFileType = useMemo(
-    () => (allowedTypes: string[], file?: File) => {
-      if (file?.type) {
-        return allowedTypes.includes(file.type)
-      }
-      const extension = file?.name.split('.').pop()?.toLowerCase()
-      return extension ? allowedTypes.includes(`.${extension}`) : false
-    },
-    []
-  )
-
-  const onUpload = () => {
-    const input = document.querySelector('.file-input__input') as HTMLElement
-    input?.click()
-  }
-
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e?.target?.files?.[0]
-
-    const isAllowedType = validateFileType(
-      [
-        'image/png',
-        'image/jpeg',
-        'application/pdf',
-        'application/msword',
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-      ],
-      file
-    )
-    if (!isAllowedType) {
-      console.error(t('inputFile.documentSendError'))
-      return false
-    }
-
-    if (file) onUpdateFile(file)
-    return true
-  }
-
-  const removeItem = (file: File) => {
-    if (fileList.some((item) => item === file)) {
-      onRemoveFile(file)
-    }
-  }
-
-  return (
-    <>
-      <div className='file-input'>
-        <label
-          style={{ color: theme.newChatFormTexts }}
-          htmlFor=''
-          className='file-input__label'
-        >
-          {label}
-        </label>
-        <div
-          className='file-input__container'
-          style={{
-            backgroundColor: theme.inputBg,
-            color: theme.newChatFormTexts,
-          }}
-        >
-          <input
-            className='file-input__input'
-            type='file'
-            id='docpicker'
-            hidden
-            accept='.jpg, .jpeg, .png, .pdf, .doc, .docx'
-            onChange={(event) => onChange(event)}
-          />
-
-          <h4>{t('inputFile.chooseFile')}</h4>
-          <button
-            className='file-input__button'
-            type='button'
-            onClick={onUpload}
-            style={{
-              background: theme?.buttonPrimary,
-              color: theme?.buttonPrimaryText,
-            }}
-          >
-            {t('inputFile.chooseFile')}
-          </button>
-
-          {loading ? (
-            ''
-          ) : (
-            <p>
-              {t('inputFile.allowDocuments')}(
-              {t('inputFile.allowSizeDocument', { maxSize })})
-            </p>
-          )}
-        </div>
-      </div>
-
-      <div>
-        {fileList &&
-          fileList.map((item) => (
-            <div
-              className='file-input__list'
-              key={item.name}
-              style={{
-                backgroundColor: theme.inputBg,
-                color: theme.newChatFormTexts,
-              }}
-            >
-              <span className='file-input__list--file-name'>{item.name}</span>
-              <button
-                className='file-input__delete'
-                onClick={() => removeItem(item)}
-              >
-                <TrashIcon color={theme.newChatFormDeleteFileButton || 'red'} />
-              </button>
-            </div>
-          ))}
-      </div>
-    </>
-  )
-}
-
-export default InputFile
+import TrashIcon from '../../icons/TrashIcon'
+import React, { useMemo } from 'react'
+import useTheme from '../../hooks/useThemes'
+import { useTranslation } from 'react-i18next'
+
+interface IProps {
+  fileList: File[]
+  onUpdateFile: (files: File) => void
+  label: string
+  onRemoveFile: (files: File) => void
+  maxSize: string
+  loading: boolean
+}
+
+function InputFile ({
+  fileList,
+  onUpdateFile,
+  label,
+  onRemoveFile,
+  maxSize,
+  loading,
+}: IProps) {
+  const { theme } = useTheme()
+  const { t } = useTranslation('newFormChat')
+
+  const validateFileType = useMemo(
+    () => (allowedTypes: string[], file?: File) => {
+      if (file?.type) {
+        return allowedTypes.includes(file.type)
+      }
+      const extension = file?.name.split('.').pop()?.toLowerCase()
+      return extension ? allowedTypes.includes(`.${extension}`) : false
+    },
+    []
+  )
+
+  const onUpload = () => {
+    const input = document.querySelector('.file-input__input') as HTMLElement
+    input?.click()
+  }
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e?.target?.files?.[0]
+
+    const isAllowedType = validateFileType(
+      [
+        'image/png',
+        'image/jpeg',
+        'application/pdf',
+        'application/msword',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'text/csv',
+        'video/mp4',
+      ],
+      file
+    )
+    if (!isAllowedType) {
+      console.error(t('inputFile.documentSendError'))
+      return false
+    }
+
+    if (file) onUpdateFile(file)
+    return true
+  }
+
+  const removeItem = (file: File) => {
+    if (fileList.some((item) => item === file)) {
+      onRemoveFile(file)
+    }
+  }
+
+  return (
+    <>
+      <div className='file-input'>
+        <label
+          style={{ color: theme.newChatFormTexts }}
+          htmlFor=''
+          className='file-input__label'
+        >
+          {label}
+        </label>
+        <div
+          className='file-input__container'
+          style={{
+            backgroundColor: theme.inputBg,
+            color: theme.newChatFormTexts,
+          }}
+        >
+          <input
+            className='file-input__input'
+            type='file'
+            id='docpicker'
+            hidden
+            accept='.jpg, .jpeg, .png, .pdf, .doc, .docx, .csv, .mp4'
+            onChange={(event) => onChange(event)}
+          />
+
+          <h4>{t('inputFile.chooseFile')}</h4>
+          <button
+            className='file-input__button'
+            type='button'
+            onClick={onUpload}
+            style={{
+              background: theme?.buttonPrimary,
+              color: theme?.buttonPrimaryText,
+            }}
+          >
+            {t('inputFile.chooseFile')}
+          </button>
+
+          {loading ? (
+            ''
+          ) : (
+            <p>
+              {t('inputFile.allowDocuments')}(
+              {t('inputFile.allowSizeDocument', { maxSize })})
+            </p>
+          )}
+        </div>
+      </div>
+
+      <div>
+        {fileList &&
+          fileList.map((item) => (
+            <div
+              className='file-input__list'
+              key={item.name}
+              style={{
+                backgroundColor: theme.inputBg,
+                color: theme.newChatFormTexts,
+              }}
+            >
+              <span className='file-input__list--file-name'>{item.name}</span>
+              <button
+                className='file-input__delete'
+                onClick={() => removeItem(item)}
+              >
+                <TrashIcon color={theme.newChatFormDeleteFileButton || 'red'} />
+              </button>
+            </div>
+          ))}
+      </div>
+    </>
+  )
+}
+
+export default InputFile

package/src/app/Messenger/components/InputFile/inputFile.less

@@ -1,59 +1,59 @@
-.file-input {
-  margin-bottom: 1rem;
-  width: 100%;
-
-  &__label {
-    color: @title-form-color;
-    font-weight: bold;
-    margin: 0.5rem;
-  }
-
-  &__container {
-    align-items: center;
-    background-color: var(--secondary-color);
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-top: 0.5rem;
-    padding: 1rem;
-    width: 100%;
-  }
-
-  &__button {
-    border: none;
-    border-radius: 30px;
-    color: var(--secondary-color);
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    margin: 0.5rem 1rem;
-    padding: 0.5rem;
-  }
-
-  &__list {
-    align-items: center;
-    background-color: var(--secondary-color);
-    border-radius: 10px;
-    display: flex;
-    justify-content: space-between;
-    margin: 0.5rem 0;
-    padding: 0.5rem;
-
-    &--file-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 100%;
-    }
-  }
-
-  &__delete {
-    align-items: center;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-  }
-}
+.file-input {
+  margin-bottom: 1rem;
+  width: 100%;
+
+  &__label {
+    color: @title-form-color;
+    font-weight: bold;
+    margin: 0.5rem;
+  }
+
+  &__container {
+    align-items: center;
+    background-color: var(--secondary-color);
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-top: 0.5rem;
+    padding: 1rem;
+    width: 100%;
+  }
+
+  &__button {
+    border: none;
+    border-radius: 30px;
+    color: var(--secondary-color);
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: bold;
+    margin: 0.5rem 1rem;
+    padding: 0.5rem;
+  }
+
+  &__list {
+    align-items: center;
+    background-color: var(--secondary-color);
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    margin: 0.5rem 0;
+    padding: 0.5rem;
+
+    &--file-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 100%;
+    }
+  }
+
+  &__delete {
+    align-items: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+  }
+}

package/src/app/Messenger/components/MessageBallon/MessageBalloon.tsx

@@ -1,100 +1,100 @@
-import React from 'react'
-import { Iimages, IMessages } from 'types'
-import IncomingMessage from '../IncomingMessage/IncomingMessage'
-import SenderMessages from '../SenderMessages/SenderMessages'
-import SystemMessage from '../SystemMessage/SystemMessage'
-
-function MessageBalloon ({
-  item,
-  creatorId,
-  formatDate,
-  id,
-}: {
-  item: IMessages
-  creatorId?: string
-  formatDate: (date: string | Date) => string | undefined
-  id: string
-}) {
-  if (item.isSystemMessage) {
-    return (
-      <SystemMessage
-        formatDate={formatDate}
-        date={item.createdAt}
-        message={item.content}
-        id={item.senderId}
-        user={{ name: 'System' }}
-      />
-    )
-  }
-
-  if (
-    item.sender.uniqueCode &&
-    !item.isSystemMessage &&
-    item.sender.uniqueCode === creatorId
-  ) {
-    return (
-      <>
-        <SenderMessages
-          id={id}
-          formatDate={formatDate}
-          message={item.content}
-          date={item.createdAt}
-          read={item.everybodyHasRead}
-          hasFile={item.hasFile}
-          file={item.file}
-        />
-
-        {item.images &&
-          item.images.map((image: Iimages, index: number) => (
-            <SenderMessages
-              key={image.key}
-              id={`${id}image-${index}`}
-              formatDate={formatDate}
-              date={item.createdAt}
-              file={image}
-              message=''
-              hasFile={true}
-              read={item.everybodyHasRead}
-            />
-          ))}
-      </>
-    )
-  }
-
-  return (
-    <>
-      <IncomingMessage
-        id={id}
-        formatDate={formatDate}
-        date={item.createdAt}
-        message={item.content}
-        hasFile={item.hasFile}
-        isSystemMessage={item.isSystemMessage}
-        file={item.file}
-        user={{
-          avatar: item.sender?.image,
-          name: item.sender.username,
-        }}
-      />
-
-      {item.images &&
-        item.images.map((image: Iimages, index: number) => (
-          <IncomingMessage
-            key={image.key}
-            id={`${id}image-${index}`}
-            formatDate={formatDate}
-            date={item.createdAt}
-            file={image}
-            message=''
-            hasFile={true}
-            user={{
-              avatar: item.sender?.image,
-              name: item.sender.username,
-            }}
-          />
-        ))}
-    </>
-  )
-}
-
-export default MessageBalloon
+import React from 'react'
+import { Iimages, IMessages } from 'types'
+import IncomingMessage from '../IncomingMessage/IncomingMessage'
+import SenderMessages from '../SenderMessages/SenderMessages'
+import SystemMessage from '../SystemMessage/SystemMessage'
+
+function MessageBalloon ({
+  item,
+  creatorId,
+  formatDate,
+  id,
+}: {
+  item: IMessages
+  creatorId?: string
+  formatDate: (date: string | Date) => string | undefined
+  id: string
+}) {
+  if (item.isSystemMessage) {
+    return (
+      <SystemMessage
+        formatDate={formatDate}
+        date={item.createdAt}
+        message={item.content}
+        id={item.senderId}
+        user={{ name: 'System' }}
+      />
+    )
+  }
+
+  if (
+    item.sender.uniqueCode &&
+    !item.isSystemMessage &&
+    item.sender.uniqueCode === creatorId
+  ) {
+    return (
+      <>
+        <SenderMessages
+          id={id}
+          formatDate={formatDate}
+          message={item.content}
+          date={item.createdAt}
+          read={item.everybodyHasRead}
+          hasFile={item.hasFile}
+          file={item.file}
+        />
+
+        {item.images &&
+          item.images.map((image: Iimages, index: number) => (
+            <SenderMessages
+              key={image.key}
+              id={`${id}image-${index}`}
+              formatDate={formatDate}
+              date={item.createdAt}
+              file={image}
+              message=''
+              hasFile={true}
+              read={item.everybodyHasRead}
+            />
+          ))}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <IncomingMessage
+        id={id}
+        formatDate={formatDate}
+        date={item.createdAt}
+        message={item.content}
+        hasFile={item.hasFile}
+        isSystemMessage={item.isSystemMessage}
+        file={item.file}
+        user={{
+          avatar: item.sender?.image,
+          name: item.sender.username,
+        }}
+      />
+
+      {item.images &&
+        item.images.map((image: Iimages, index: number) => (
+          <IncomingMessage
+            key={image.key}
+            id={`${id}image-${index}`}
+            formatDate={formatDate}
+            date={item.createdAt}
+            file={image}
+            message=''
+            hasFile={true}
+            user={{
+              avatar: item.sender?.image,
+              name: item.sender.username,
+            }}
+          />
+        ))}
+    </>
+  )
+}
+
+export default MessageBalloon

package/src/app/Messenger/components/MessengerAvatar/MessengerAvatar.tsx

@@ -1,29 +1,29 @@
-import useTheme from '../../hooks/useThemes'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { IMesssengerAvatar } from 'types'
-
-function MessengerAvatar ({
-  image,
-  children,
-  className = '',
-}: IMesssengerAvatar) {
-  const { t } = useTranslation('messengerList')
-  const { theme } = useTheme()
-  return (
-    <figure
-      className={`${className} messenger__aside-list-item--avatar`}
-      style={{
-        background: theme.messengerIncomerColor,
-      }}
-    >
-      {image ? (
-        <img loading='lazy' alt={t('messengerAvatar.alt')} src={image} />
-      ) : (
-        children
-      )}
-    </figure>
-  )
-}
-
-export default MessengerAvatar
+import useTheme from '../../hooks/useThemes'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { IMesssengerAvatar } from 'types'
+
+function MessengerAvatar ({
+  image,
+  children,
+  className = '',
+}: IMesssengerAvatar) {
+  const { t } = useTranslation('messengerList')
+  const { theme } = useTheme()
+  return (
+    <figure
+      className={`${className} messenger__aside-list-item--avatar`}
+      style={{
+        background: theme.messengerIncomerColor,
+      }}
+    >
+      {image ? (
+        <img loading='lazy' alt={t('messengerAvatar.alt')} src={image} />
+      ) : (
+        children
+      )}
+    </figure>
+  )
+}
+
+export default MessengerAvatar