agx-chat-web 1.1.0 → 1.2.1

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

@@ -1,51 +1,51 @@
-import React, { useEffect, useState } from 'react'
-import { IImagesContainer } from 'types'
-import RenderFileIcon from '../RenderFileIcon/RenderFileIcon'
-
-function ImagesContainer ({ file, onClose }: IImagesContainer) {
-  const [fileInfo, setFileInfo] = useState<{ name: string; type: string }>({
-    name: '',
-    type: '',
-  })
-
-  const [b64, setB64] = useState<string>('')
-
-  useEffect(() => {
-    function getBase64 (file: File) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-        reader.readAsDataURL(file)
-        reader.onload = () => resolve(reader.result)
-        reader.onerror = (error) => reject(error)
-      })
-    }
-
-    if (file) getBase64(file).then((base64) => setB64(base64 as string))
-  }, [file])
-
-  useEffect(() => {
-    if (file) {
-      setFileInfo({
-        name: file.name,
-        type: file.type,
-      })
-    }
-  }, [file])
-
-  return (
-    <div className='images-container'>
-      <div className='images-container__close'>
-        <button className='images-container__close--icon' onClick={onClose} />
-      </div>
-
-      <div className='images-container__container'>
-        <div className='images-container__image'>
-          <RenderFileIcon fileType={fileInfo.type} b64={b64} />
-          <span className='images-container__title-img'>{fileInfo.name}</span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ImagesContainer
+import React, { useEffect, useState } from 'react'
+import { IImagesContainer } from 'types'
+import RenderFileIcon from '../RenderFileIcon/RenderFileIcon'
+
+function ImagesContainer ({ file, onClose }: IImagesContainer) {
+  const [fileInfo, setFileInfo] = useState<{ name: string; type: string }>({
+    name: '',
+    type: '',
+  })
+
+  const [b64, setB64] = useState<string>('')
+
+  useEffect(() => {
+    function getBase64 (file: File) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => resolve(reader.result)
+        reader.onerror = (error) => reject(error)
+      })
+    }
+
+    if (file) getBase64(file).then((base64) => setB64(base64 as string))
+  }, [file])
+
+  useEffect(() => {
+    if (file) {
+      setFileInfo({
+        name: file.name,
+        type: file.type,
+      })
+    }
+  }, [file])
+
+  return (
+    <div className='images-container'>
+      <div className='images-container__close'>
+        <button className='images-container__close--icon' onClick={onClose} />
+      </div>
+
+      <div className='images-container__container'>
+        <div className='images-container__image'>
+          <RenderFileIcon fileType={fileInfo.type} b64={b64} />
+          <span className='images-container__title-img'>{fileInfo.name}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ImagesContainer

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

@@ -1,166 +1,170 @@
-import useTheme from '../../hooks/useThemes'
-import React, { useCallback, useState } from 'react'
-import { Iimages, IInconmingMessage } from 'types'
-import MessengerAvatar from '../MessengerAvatar/MessengerAvatar'
-import ReactSimpleImageViewer from '../../../../../node_modules/react-simple-image-viewer'
-import DocMessage from '../DocMessage/DocMessage'
-import { useTranslation } from 'react-i18next'
-
-interface IMessagesWithFile {
-  file:
-    | Iimages
-    | {
-        contentType: string
-        location: string
-        mimetype: string
-        originalname: string
-        size?: number
-        pages?: number
-        key?: string
-      }
-    | undefined
-  message: string
-  date: string
-  openImageViewer: (index: number) => void
-  id: string
-  formatDate: (date: string | Date) => string | undefined
-  currentImage: number
-}
-
-export const MessageImage = ({ ...rest }) => {
-  const { t } = useTranslation('messengerMessages')
-  return (
-    <div className='messenger__message--file'>
-      <img
-        {...rest}
-        width={200}
-        height={200}
-        alt={t('incommingMessage.messageImage')}
-      />
-    </div>
-  )
-}
-
-const MessageWithFile = ({
-  file,
-  message,
-  date,
-  openImageViewer,
-  id,
-  formatDate,
-  currentImage,
-}: IMessagesWithFile) => {
-  const isImage = (
-    file:
-      | {
-          contentType: string
-          location: string
-          mimetype: string
-          originalname: string
-          size?: number
-          pages?: number
-          key?: string
-        }
-      | Iimages
-      | undefined
-  ): file is Iimages =>
-    !!file?.mimetype?.includes('image/png') ||
-    !!file?.mimetype?.includes('image/jpeg')
-
-  return (
-    <>
-      {isImage(file) ? (
-        <MessageImage
-          src={file?.location}
-          onClick={() => openImageViewer(currentImage)}
-        />
-      ) : (
-        file && (
-          <DocMessage
-            file={file}
-            message={message}
-            date={date}
-            read={false}
-            id={id}
-            formatDate={formatDate}
-          />
-        )
-      )}
-    </>
-  )
-}
-
-function IncomingMessage ({
-  date,
-  message,
-  user,
-  hasFile,
-  file,
-  isSystemMessage,
-  formatDate,
-  id,
-}: IInconmingMessage) {
-  const { theme } = useTheme()
-  const [currentImage, setCurrentImage] = useState(0)
-  const [isViewerOpen, setIsViewerOpen] = useState(false)
-
-  const openImageViewer = useCallback((index: number) => {
-    setCurrentImage(index)
-    setIsViewerOpen(true)
-  }, [])
-
-  const closeImageViewer = () => {
-    setCurrentImage(0)
-    setIsViewerOpen(false)
-  }
-
-  return (
-    <div className='messenger__messages-row--received' id={id}>
-      {(user.avatar || user.name) && !isSystemMessage && (
-        <div className='messenger__message-avatar mr-2'>
-          <MessengerAvatar image={user.avatar}>
-            {user.name.slice(0, 1)}
-          </MessengerAvatar>
-        </div>
-      )}
-
-      <div
-        className='messenger__messages-received'
-        style={{ background: theme?.messengerIncomerColor }}
-      >
-        {!isSystemMessage && (
-          <p className='messenger__message-title'>{user.name}</p>
-        )}
-
-        <span>
-          {hasFile && (
-            <MessageWithFile
-              file={file}
-              message={message}
-              date={date}
-              openImageViewer={openImageViewer}
-              id={id}
-              formatDate={formatDate}
-              currentImage={currentImage}
-            />
-          )}
-          {message && <p className='messenger__message'>{message}</p>}
-          <p className='messenger__message--date'>
-            {formatDate(date) ?? new Date(date).toLocaleString()}
-          </p>
-        </span>
-      </div>
-      {file && isViewerOpen && (
-        <ReactSimpleImageViewer
-          src={[file.location]}
-          currentIndex={0}
-          disableScroll={false}
-          closeOnClickOutside={true}
-          onClose={closeImageViewer}
-        />
-      )}
-    </div>
-  )
-}
-
-export default IncomingMessage
+import useTheme from '../../hooks/useThemes'
+import React, { useCallback, useState } from 'react'
+import { Iimages, IInconmingMessage } from 'types'
+import MessengerAvatar from '../MessengerAvatar/MessengerAvatar'
+import ReactSimpleImageViewer from '../../../../../node_modules/react-simple-image-viewer'
+import DocMessage from '../DocMessage/DocMessage'
+import { useTranslation } from 'react-i18next'
+
+interface IMessagesWithFile {
+  file:
+    | Iimages
+    | {
+        contentType: string
+        location: string
+        mimetype: string
+        originalname: string
+        size?: number
+        pages?: number
+        key?: string
+      }
+    | undefined
+  message: string
+  date: string
+  openImageViewer: (index: number) => void
+  id: string
+  formatDate: (date: string | Date) => string | undefined
+  currentImage: number
+}
+
+export const MessageImage = ({ ...rest }) => {
+  const { t } = useTranslation('messengerMessages')
+  return (
+    <div className='messenger__message--file'>
+      <img
+        {...rest}
+        width={200}
+        height={200}
+        alt={t('incommingMessage.messageImage')}
+      />
+    </div>
+  )
+}
+
+const MessageWithFile = ({
+  file,
+  message,
+  date,
+  openImageViewer,
+  id,
+  formatDate,
+  currentImage,
+}: IMessagesWithFile) => {
+  const isImage = (
+    file:
+      | {
+          contentType: string
+          location: string
+          mimetype: string
+          originalname: string
+          size?: number
+          pages?: number
+          key?: string
+        }
+      | Iimages
+      | undefined
+  ): file is Iimages => {
+    if (!file) return false
+    if (['image/png', 'image/jpeg'].includes(file?.mimetype ?? '')) {
+      return true
+    }
+    return false
+  }
+
+  return (
+    <>
+      {isImage(file) ? (
+        <MessageImage
+          src={file?.location}
+          onClick={() => openImageViewer(currentImage)}
+        />
+      ) : (
+        file && (
+          <DocMessage
+            file={file}
+            message={message}
+            date={date}
+            read={false}
+            id={id}
+            formatDate={formatDate}
+          />
+        )
+      )}
+    </>
+  )
+}
+
+function IncomingMessage ({
+  date,
+  message,
+  user,
+  hasFile,
+  file,
+  isSystemMessage,
+  formatDate,
+  id,
+}: IInconmingMessage) {
+  const { theme } = useTheme()
+  const [currentImage, setCurrentImage] = useState(0)
+  const [isViewerOpen, setIsViewerOpen] = useState(false)
+
+  const openImageViewer = useCallback((index: number) => {
+    setCurrentImage(index)
+    setIsViewerOpen(true)
+  }, [])
+
+  const closeImageViewer = () => {
+    setCurrentImage(0)
+    setIsViewerOpen(false)
+  }
+
+  return (
+    <div className='messenger__messages-row--received' id={id}>
+      {(user.avatar || user.name) && !isSystemMessage && (
+        <div className='messenger__message-avatar mr-2'>
+          <MessengerAvatar image={user.avatar}>
+            {user.name.slice(0, 1)}
+          </MessengerAvatar>
+        </div>
+      )}
+
+      <div
+        className='messenger__messages-received'
+        style={{ background: theme?.messengerIncomerColor }}
+      >
+        {!isSystemMessage && (
+          <p className='messenger__message-title'>{user.name}</p>
+        )}
+
+        <span>
+          {hasFile && (
+            <MessageWithFile
+              file={file}
+              message={message}
+              date={date}
+              openImageViewer={openImageViewer}
+              id={id}
+              formatDate={formatDate}
+              currentImage={currentImage}
+            />
+          )}
+          {message && <p className='messenger__message'>{message}</p>}
+          <p className='messenger__message--date'>
+            {formatDate(date) ?? new Date(date).toLocaleString()}
+          </p>
+        </span>
+      </div>
+      {file && isViewerOpen && (
+        <ReactSimpleImageViewer
+          src={[file.location]}
+          currentIndex={0}
+          disableScroll={false}
+          closeOnClickOutside={true}
+          onClose={closeImageViewer}
+        />
+      )}
+    </div>
+  )
+}
+
+export default IncomingMessage

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

@@ -1,80 +1,80 @@
-import React, { ReactNode, CSSProperties } from 'react'
-
-interface IInfiniteScroll {
-  loading: boolean
-  more: boolean
-  fetch: () => void
-  children: ReactNode
-  loadingCover: React.ReactElement
-  root: Element | null
-  reverse?: boolean
-  rootMargin?: number
-}
-
-const intersectDivStyle: CSSProperties = {
-  width: 25,
-  height: 25,
-  visibility: 'hidden',
-}
-
-function InfiniteScroll ({
-  loading,
-  loadingCover,
-  more,
-  fetch,
-  children,
-  root,
-  reverse = false,
-  rootMargin = 400,
-}: IInfiniteScroll) {
-  const [infiniteElement, setInfiniteElement] =
-    React.useState<HTMLDivElement | null>(null)
-
-  React.useEffect(() => {
-    if (!root) return
-    const currentElement = infiniteElement
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const first = entries[0]
-        if (first.isIntersecting === true) fetch()
-      },
-      {
-        root,
-        rootMargin: rootMargin.toString() + 'px',
-        threshold: 0.5,
-      }
-    )
-
-    if (currentElement) {
-      observer.observe(currentElement)
-    }
-
-    return () => {
-      if (currentElement) observer.unobserve(currentElement)
-    }
-  }, [infiniteElement])
-
-  if (reverse) {
-    return (
-      <>
-        {more && !loading && (
-          <div ref={setInfiniteElement} style={intersectDivStyle}></div>
-        )}
-        {loading && loadingCover}
-        {children}
-      </>
-    )
-  }
-
-  return (
-    <>
-      {children}
-      {loading && loadingCover}
-      {more && !loading && (
-        <div ref={setInfiniteElement} style={intersectDivStyle}></div>
-      )}
-    </>
-  )
-}
-
-export default InfiniteScroll
+import React, { ReactNode, CSSProperties } from 'react'
+
+interface IInfiniteScroll {
+  loading: boolean
+  more: boolean
+  fetch: () => void
+  children: ReactNode
+  loadingCover: React.ReactElement
+  root: Element | null
+  reverse?: boolean
+  rootMargin?: number
+}
+
+const intersectDivStyle: CSSProperties = {
+  width: 25,
+  height: 25,
+  visibility: 'hidden',
+}
+
+function InfiniteScroll ({
+  loading,
+  loadingCover,
+  more,
+  fetch,
+  children,
+  root,
+  reverse = false,
+  rootMargin = 400,
+}: IInfiniteScroll) {
+  const [infiniteElement, setInfiniteElement] =
+    React.useState<HTMLDivElement | null>(null)
+
+  React.useEffect(() => {
+    if (!root) return
+    const currentElement = infiniteElement
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const first = entries[0]
+        if (first.isIntersecting === true) fetch()
+      },
+      {
+        root,
+        rootMargin: rootMargin.toString() + 'px',
+        threshold: 0.5,
+      }
+    )
+
+    if (currentElement) {
+      observer.observe(currentElement)
+    }
+
+    return () => {
+      if (currentElement) observer.unobserve(currentElement)
+    }
+  }, [infiniteElement])
+
+  if (reverse) {
+    return (
+      <>
+        {more && !loading && (
+          <div ref={setInfiniteElement} style={intersectDivStyle}></div>
+        )}
+        {loading && loadingCover}
+        {children}
+      </>
+    )
+  }
+
+  return (
+    <>
+      {children}
+      {loading && loadingCover}
+      {more && !loading && (
+        <div ref={setInfiniteElement} style={intersectDivStyle}></div>
+      )}
+    </>
+  )
+}
+
+export default InfiniteScroll