@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-7

package/src/together/components/molecules/inputCommentBar/index.styled.tsx

@@ -0,0 +1,227 @@
+import { ThemeProps } from 'misc/theme'
+import { MediaQueries } from 'misc/utils'
+import styled from 'styled-components'
+
+export const StyledInputCommentBar = styled.div`
+  padding: 1rem;
+  border-top: 1px solid #f2f2f2;
+  &[data-is-reply='true'] {
+    padding-right: 0;
+    padding-left: 0;
+    border-top: 1px solid #e4e8ec;
+    margin-right: 1rem;
+    margin-left: 1rem;
+  }
+  .error-text {
+    padding: 1rem;
+    color: ${(props: ThemeProps) => props.theme.colors.red700};
+  }
+  .reply-to-container {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 0.75rem;
+    margin-top: -0.25rem;
+    .icon-close-comment {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+    a {
+      text-decoration: none;
+    }
+  }
+  .input-container {
+    display: flex;
+    align-items: center;
+    .avatar-wrapper {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      margin-right: 0.5rem;
+      &.avatar-wrapper-reply {
+        width: 32px;
+        height: 32px;
+        .avatar {
+          width: 32px;
+          height: 32px;
+        }
+      }
+    }
+    .input-wrapper {
+      margin-right: 0.5rem;
+      &[data-has-error] {
+        .as-input {
+          border-color: ${(props: ThemeProps) => props.theme.colors.red700};
+        }
+      }
+
+      .as-input {
+        .textarea {
+          width: 100%;
+          max-height: 225px;
+          min-height: 75px;
+          .ql-toolbar {
+            padding: 0;
+          }
+          .ql-editor {
+            padding-left: 0;
+            padding-right: 0;
+          }
+          .quill {
+            height: 0;
+          }
+        }
+        width: 100%;
+        padding: 12px 16px;
+        border: solid 1px ${(props: ThemeProps) => props.theme.colors.gray200};
+        border-radius: 6px;
+
+        &:active,
+        &:focus {
+          border-color: ${(props: ThemeProps) =>
+            props.theme.colors.primaryBase};
+          box-shadow: 0px 0px 2px 2px
+            ${(props: ThemeProps) => props.theme.colors.blue200};
+        }
+
+        &:disabled {
+          background-color: ${(props: ThemeProps) =>
+            props.theme.colors.gray100};
+          cursor: not-allowed;
+        }
+
+        span {
+          &[data-error='true'] {
+            color: red;
+            text-decoration: underline;
+          }
+        }
+      }
+
+      &[data-has-action-icon] {
+        .as-input {
+          padding: 12px 48px 12px 16px;
+        }
+      }
+      &[data-has-display-icon] {
+        .as-input {
+          padding: 12px 16px 12px 48px;
+        }
+      }
+
+      &[data-has-action-icon][data-has-display-icon] {
+        .as-input {
+          padding: 12px 48px;
+        }
+      }
+
+      &[data-size='lg'] {
+        .as-input {
+          font-size: 16px;
+          font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+          ${MediaQueries.mbDown} {
+            font-size: 22px;
+            line-height: 1.2;
+          }
+
+          ${MediaQueries.mbUp} {
+            font-size: 26px;
+            line-height: 1.2;
+          }
+        }
+      }
+      &[data-size='md'] {
+        .as-input {
+          font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+          line-height: 22px;
+          ${MediaQueries.mbDown} {
+            font-size: 14px;
+            line-height: 1.2;
+          }
+
+          ${MediaQueries.mbUp} {
+            font-size: 16px;
+            line-height: 1.2;
+          }
+        }
+      }
+      &[data-size='sm'] {
+        .as-input {
+          font-weight: ${(props: ThemeProps) => props.theme.sizes.fwRegular};
+          line-height: 20px;
+          ${MediaQueries.mbDown} {
+            font-size: 13px;
+            line-height: 1.5;
+          }
+
+          ${MediaQueries.mbUp} {
+            font-size: 13px;
+            line-height: 1.5;
+          }
+        }
+      }
+    }
+    .images-input-label {
+      height: 100%;
+      cursor: pointer;
+      .icon-images-input {
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+      }
+    }
+    .send-button {
+      display: flex;
+      width: 40px;
+      height: 40px;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      border: none;
+      &.send-button-post {
+        background: ${(props: ThemeProps) => props.theme.colors.neutral100};
+        border-radius: 50%;
+      }
+      .icon-enter {
+        width: 20px;
+        height: 20px;
+        vertical-align: middle;
+      }
+      &[data-is-loading='true'] {
+        > div {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+    }
+  }
+  .preview-images-container {
+    margin-top: 1rem;
+    .image-src-wrapper {
+      position: relative;
+      width: 100%;
+      padding-top: 66.67%;
+      &:not(:last-child) {
+        margin-bottom: 1rem;
+      }
+      .preview-image {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .icon-close-circle {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+      }
+    }
+  }
+`

package/src/together/components/molecules/inputCommentBar/index.tsx

@@ -0,0 +1,341 @@
+import React, {
+  CSSProperties,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+import { Button } from 'components/atoms/button'
+import { Input } from 'components/atoms/input'
+import { Text } from 'components/atoms/text'
+import { useImagePicker } from 'hooks/useImagesPicker'
+import { useTranslations } from 'hooks/useTranslations'
+import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
+
+import { formatComment } from '../../../api/dataTransform'
+import IconCloseCircleLine from '../../../assets/svg/icon-close-circle-line.svg'
+import IconCloseCircle from '../../../assets/svg/icon-close-circle.svg'
+import IconEnter from '../../../assets/svg/icon-enter.svg'
+import IconTabEditPrimary from '../../../assets/svg/icon-tab-edit-primary.svg'
+import { DEFAULT_AVATAR_IMG } from '../../../interfaces/constants'
+import { Comment, Post, UserInfo } from '../../../interfaces/types'
+import {
+  getCommentFormBody,
+  submitComment,
+  submitReply,
+} from '../../../utils/apiActions/comment'
+import { CardLink } from '../../atoms/cardLink'
+import { Loading } from '../../atoms/loading'
+import { UserAvatar } from '../../atoms/userAvatar'
+import { RichTextEditor } from '../createPostDescription/editor'
+import { StyledInputCommentBar } from './index.styled'
+import { MainInputTriggerContext } from './mainInputTriggerContext'
+
+export type Props = {
+  className?: string
+  onClose?: () => void
+  replyToName?: string
+  replyToUrl?: string
+  replyingId?: string
+  replyingUser?: UserInfo
+  replyingUserExpertId?: string
+  style?: CSSProperties
+  onPostSuccess?: (c: Comment) => void
+  isMainCmt?: boolean
+  post?: Post
+  isReply?: boolean
+  isMarryBaby?: boolean
+}
+const InputCommentBar = ({
+  isReply,
+  className,
+  onClose,
+  replyToName,
+  style,
+  replyingId,
+  replyingUser,
+  onPostSuccess,
+  isMainCmt = false,
+  post,
+  isMarryBaby: isMarryBabyProp,
+}: Props) => {
+  const {
+    action: { pushNotifications, sanitizeFunction },
+    data: {
+      userInfo,
+      locale,
+      env: { isMarryBaby: isMarryBabyContext },
+    },
+  } = useContext(TogetherComponentGlobalContext)
+  const isMarryBaby =
+    typeof isMarryBabyProp === 'boolean' ? isMarryBabyProp : isMarryBabyContext
+  const { t } = useTranslations()
+
+  const {
+    onSelectImages,
+    onRemoveImage,
+    imageSrcs,
+    onRemoveAllImages,
+    imageFiles,
+  } = useImagePicker()
+  const [text, setText] = useState<string>('')
+  const { trigger } = useContext(MainInputTriggerContext)
+  const [isSubmitLoading, setIsSubmitLoading] = useState<boolean>(false)
+  const imagePicker = useRef<HTMLInputElement>(null)
+  const contentEditable = useRef<HTMLElement | null>(null)
+  const mainInput = useRef<HTMLDivElement>(null)
+
+  const [invalidUrls, setInvalidUrls] = useState<string[]>([])
+  const [bannedWords, setBannedWords] = useState<string[]>([])
+  const [previewUrl, setPreviewUrl] = useState<{
+    title?: string
+    url?: string
+    image?: string
+    rawUrl?: string
+    description?: string
+    isFetching?: boolean
+  } | null>(null)
+
+  const onSubmitComment = async () => {
+    if (!post?.id || isSubmitLoading) return
+    setIsSubmitLoading(true)
+    try {
+      const handleSuccess = (res: any) => {
+        setText('')
+        onRemoveAllImages()
+        onClose && onClose()
+        const newComment = formatComment(res.data)
+        if (typeof newComment.images === 'string') {
+          newComment.images = JSON.parse(newComment.images)
+        }
+        onPostSuccess && onPostSuccess(newComment)
+      }
+
+      const formBody = await getCommentFormBody({
+        message: text,
+        photos: imageFiles as File[],
+
+        postId: String(post.id),
+        link: previewUrl?.url,
+        sanitizeFunction,
+        locale,
+        ...(isReply && replyingId
+          ? {
+              replyingUserId: String(
+                replyingUser?.id || post?.author?.id || '',
+              ),
+              replyingId,
+              replyingUserName:
+                replyingUser?.name || replyingUser?.username || '',
+            }
+          : {}),
+      })
+
+      const res = await (isReply && replyingId
+        ? submitReply(formBody, locale)
+        : submitComment(formBody, locale))
+
+      const resData = res?.data
+      if (resData?.id && !res?.messages?.moderation?.type) {
+        handleSuccess(res)
+      } else {
+        if (res?.messages?.moderation?.type === 'banned') {
+          pushNotifications({
+            title: t('notification.comment.blocked.title'),
+            message: t('notification.comment.blocked.message'),
+            type: 'danger',
+          })
+          if (res.messages.moderation.words) {
+            setBannedWords(res.messages.moderation.words)
+          }
+        } else if (res?.messages?.moderation?.type === 'suspect') {
+          pushNotifications({
+            title: t('notification.comment.suspect.title'),
+            message: t('notification.comment.suspect.message'),
+            type: 'warning',
+          })
+          setText('')
+          onRemoveAllImages()
+          onClose && onClose()
+        } else if (
+          res?.messages?.find((m: string) => !!m?.includes?.('suspend'))
+        ) {
+          pushNotifications({
+            message: t('notification.suspend.message'),
+            type: 'warning',
+          })
+          setText('')
+          onRemoveAllImages()
+          onClose && onClose()
+        } else {
+          pushNotifications({
+            title: '',
+            message:
+              res?.messages?.[0] || t('notification.comment.somethingWrong'),
+            type: 'danger',
+          })
+        }
+      }
+    } catch (e) {
+      pushNotifications({
+        title: '',
+        message: t('notification.comment.somethingWrong'),
+        type: 'danger',
+      })
+    }
+    setIsSubmitLoading(false)
+  }
+
+  useEffect(() => {
+    mainInput.current?.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    })
+    setTimeout(() => {
+      contentEditable.current?.focus()
+    }, 400)
+  }, [trigger])
+
+  return (
+    <StyledInputCommentBar
+      data-is-reply={isReply}
+      className={className}
+      style={style}
+    >
+      {isReply && (
+        <div className="reply-to-container">
+          <Text size="p4">
+            <span
+              dangerouslySetInnerHTML={{
+                __html: t('inputComment.replyTo', {
+                  name: `<span style="color: #2D87F3; cursor: pointer">@${
+                    replyToName || ''
+                  }</span>`,
+                }),
+              }}
+            ></span>
+          </Text>
+          <img
+            src={IconCloseCircleLine}
+            className="icon-close-comment"
+            onClick={() => onClose && onClose()}
+          />
+        </div>
+      )}
+      <div className="input-container" ref={mainInput}>
+        <UserAvatar
+          className={`avatar-wrapper ${isReply ? 'avatar-wrapper-reply' : ''}`}
+          avatar={userInfo?.id ? userInfo.avatar : DEFAULT_AVATAR_IMG}
+          username={userInfo?.name || userInfo?.username}
+        />
+        <input
+          ref={imagePicker}
+          onChange={onSelectImages}
+          type="file"
+          multiple
+          accept="image/png,image/jpeg"
+          name="images"
+          style={{ display: 'none' }}
+        />
+        <Input
+          // actionIcon={
+          //   !isPost ? (
+          //     <label className="images-input-label">
+          //       <img
+          //         className="icon-images-input"
+          //         src="./svg/icon-image-input.svg"
+          //       />
+          //       <input
+          //         onChange={onSelectImages}
+          //         type="file"
+          //         multiple
+          //         accept="image/png,image/jpeg"
+          //         name="images"
+          //         style={{ display: 'none' }}
+          //       />
+          //     </label>
+          //   ) : undefined
+          // }
+          value={text}
+          name="input"
+          size="md"
+          className="input-wrapper"
+          displayIcon={<img src={IconTabEditPrimary} />}
+          CustomInput={
+            <div className="as-input">
+              <RichTextEditor
+                className="textarea"
+                html={text}
+                onChange={setText}
+                onImagePickerClick={() => imagePicker.current?.click()}
+                bannedWords={bannedWords}
+                onPreviewUrlChange={setPreviewUrl}
+                onInvalidUrlsChange={setInvalidUrls}
+                setEditorRef={(div) => (contentEditable.current = div)}
+                isReplying={isReply}
+              />
+            </div>
+          }
+        ></Input>
+
+        <Button
+          theme={isMarryBaby ? 'marryBaby' : 'helloSites'}
+          className="send-button"
+          size="sm"
+          onClick={onSubmitComment}
+          isLoading={isSubmitLoading}
+          isDisabled={
+            !!invalidUrls?.length ||
+            isSubmitLoading ||
+            !text ||
+            text?.length < 2 ||
+            !text.trim()
+          }
+        >
+          <img src={IconEnter} className="icon-enter" />
+        </Button>
+      </div>
+      {!!invalidUrls?.length ? (
+        <div className="error-text">{t('notification.limitUrlDomain')}</div>
+      ) : null}
+      {(!imageSrcs || imageSrcs.length === 0) && previewUrl && (
+        <div className="link-preview-wrapper">
+          {previewUrl.isFetching ? (
+            <Loading />
+          ) : (
+            <>
+              <CardLink
+                title={previewUrl.title}
+                url={previewUrl.url || '#'}
+                image={previewUrl.image}
+                noRefetch
+              />
+              <img
+                src={IconCloseCircle}
+                className="icon-close"
+                onClick={() => setPreviewUrl(null)}
+              />
+            </>
+          )}
+        </div>
+      )}
+      {imageSrcs && imageSrcs.length > 0 && (
+        <div className="preview-images-container">
+          {imageSrcs.map((src, index) => (
+            <div key={index} className="image-src-wrapper">
+              <img className="preview-image" src={src} />
+              <img
+                src={IconCloseCircle}
+                className="icon-close-circle"
+                onClick={() => onRemoveImage(index)}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </StyledInputCommentBar>
+  )
+}
+
+export { InputCommentBar }

package/src/together/components/molecules/inputCommentBar/mainInputTriggerContext.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, ReactNode, useState } from 'react'
+
+export type Context = {
+  trigger?: boolean
+  onTrigger?: () => void
+}
+
+export const MainInputTriggerContext = createContext({} as Context)
+
+export const MainInputTriggerContextProvider = ({
+  children,
+}: {
+  children?: ReactNode
+}) => {
+  const [trigger, setTrigger] = useState(false)
+  return (
+    <MainInputTriggerContext.Provider
+      value={{
+        trigger,
+        onTrigger: () => setTrigger((v) => !v),
+      }}
+    >
+      {children}
+    </MainInputTriggerContext.Provider>
+  )
+}