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

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

@@ -1,351 +0,0 @@
-import React, { CSSProperties, useContext, useEffect, useState } from 'react'
-
-import { Button } from 'components/atoms/button'
-import { Text } from 'components/atoms/text'
-import { Dropdown } from 'components/molecules/dropdown'
-import { useTranslations } from 'hooks/useTranslations'
-import innertext from 'innertext'
-import { theme } from 'misc/theme'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-import { getDefaultFailNoti } from 'together/utils/notification'
-
-import { formatPost } from '../../../api/dataTransform'
-import IconAlertCirclePrimary from '../../../assets/svg/icon-alert-circle-primary.svg'
-import IconAlertCircleWarning from '../../../assets/svg/icon-alert-circle-warning.svg'
-import { MAX_IMAGE_UPLOADS } from '../../../interfaces/constants'
-import { Community, Post, PostApi, Topic } from '../../../interfaces/types'
-import { editPost, getPostFormData } from '../../../utils/apiActions/post'
-import { createPost } from '../../../utils/apiActions/post'
-import {
-  decodeMention,
-  decodePostUrl,
-  encodePostContent,
-  getMentionIdsFromString,
-  removeBannedWordWrapper,
-} from '../../../utils/post'
-import { CreatePostDescription } from '../createPostDescription'
-import { CreatePostTitle } from '../createPostTitle/index'
-import { TopicSelectList } from '../topicSelectList'
-import { StyledCreateNewPost } from './index.styled'
-
-export type Props = {
-  className?: string
-  style?: CSSProperties
-  onPostCreatedEdited?: (post: Post, isEdit?: boolean) => void
-  onClose?: () => void
-  communities?: Community[]
-  forceSelectCommunity?: Community
-  forceSelectTopics?: Topic[]
-  articleId?: string
-  optionalTopic?: boolean
-  noFetchTopic?: boolean
-  editPostData?: Post
-  defaultCommunity?: Community
-  defaultTopics?: Topic[]
-  hideTopicList?: boolean
-}
-
-export const CreateNewPostContent = ({
-  className,
-  style,
-  onPostCreatedEdited,
-  onClose,
-  communities = [],
-  forceSelectCommunity,
-  forceSelectTopics,
-  articleId,
-  optionalTopic,
-  editPostData,
-  defaultCommunity,
-  defaultTopics,
-  noFetchTopic,
-  hideTopicList,
-}: Props) => {
-  const isInEditMode = !!editPostData?.id
-  const {
-    data: {
-      locale,
-      env: { isMarryBaby },
-    },
-    action: { pushNotifications, sanitizeFunction },
-  } = useContext(TogetherComponentGlobalContext)
-  const { t } = useTranslations()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [titleValue, setTitleValue] = useState('')
-  const [descriptionValue, setDescriptionValue] = useState('')
-  const [communityValue, setCommunityValue] = useState(
-    forceSelectCommunity
-      ? {
-          label: forceSelectCommunity.name,
-          value: `${forceSelectCommunity.id || ''}-${
-            forceSelectCommunity.mappedCategoryId || ''
-          }`,
-        }
-      : {
-          label: t('community.choose'),
-          value: '',
-        },
-  )
-  const [selectedTopics, setSelectedTopics] = useState<Topic[]>(
-    [...forceSelectTopics] || [],
-  )
-  const [imageFiles, setImageFiles] = useState<(File | string)[]>([])
-  const [bannedWords, setBannedWords] = useState<string[]>([])
-
-  const currentCommunity =
-    forceSelectCommunity ||
-    communities.find(
-      (c) =>
-        `${c.id || ''}-${c.mappedCategoryId || ''}` === communityValue.value,
-    )
-
-  const communitiesList = forceSelectCommunity
-    ? [forceSelectCommunity]
-    : communities
-        .filter((c) => c.isActive)
-        .sort((a, b) => {
-          if (a.name > b.name) return 1
-          if (a.name < b.name) return -1
-          return 0
-        })
-
-  const [previewUrl, setPreviewUrl] = useState<{
-    title?: string
-    url?: string
-    image?: string
-    description?: string
-  } | null>(null)
-  const [invalidUrls, setInvalidUrls] = useState<string[]>([])
-
-  const isReadyToSubmit =
-    titleValue &&
-    innertext(descriptionValue) &&
-    (optionalTopic || (!optionalTopic && selectedTopics.length > 0)) &&
-    currentCommunity &&
-    (!imageFiles || imageFiles.length <= MAX_IMAGE_UPLOADS) &&
-    !invalidUrls?.length &&
-    !isSubmitting
-  // HANDLE etra action when OPEN AND CLOSE
-  useEffect(() => {
-    if (editPostData) {
-      const post = editPostData
-      setTitleValue(post.title || '')
-      setDescriptionValue(
-        decodeMention(
-          decodePostUrl(post.description || '', 'edit'),
-          post.mentions,
-        ),
-      )
-      setCommunityValue({
-        label: post.community.name,
-        value: `${post.community.id || ''}-${
-          post.community.mappedCategoryId || ''
-        }`,
-      })
-      setSelectedTopics(post.topics || [])
-      setImageFiles(post.photos || [])
-    } else {
-      if (defaultCommunity) {
-        setCommunityValue({
-          label: defaultCommunity.name,
-          value: `${defaultCommunity.id || ''}-${
-            defaultCommunity.mappedCategoryId || ''
-          }`,
-        })
-      }
-      if (defaultTopics) {
-        setSelectedTopics(defaultTopics)
-      }
-    }
-  }, [])
-
-  const onCreateEditSuccess = (res: PostApi) => {
-    if (onPostCreatedEdited) {
-      onPostCreatedEdited(formatPost(res), isInEditMode)
-    }
-    onClose && onClose()
-  }
-
-  const submitPost = async () => {
-    const bodyFormData = await getPostFormData({
-      title: titleValue,
-      description: descriptionValue,
-      communityId: String(currentCommunity?.id || ''),
-      imageFiles,
-      previewUrl,
-      topicIds: selectedTopics
-        ?.map((topic) => String(topic.id || ''))
-        .filter(Boolean),
-      locale,
-      sanitizeFunction,
-      categoryCommunityId: String(currentCommunity?.mappedCategoryId || ''),
-      categoryTopicIds: selectedTopics
-        ?.map((topic) => String(topic.mappedCategoryId || ''))
-        .filter(Boolean),
-    })
-    if (articleId) {
-      bodyFormData.append('article_id', articleId)
-    }
-
-    let res: any
-    if (isInEditMode) {
-      if (editPostData?.id) {
-        res = await editPost({
-          id: editPostData.id,
-          formData: bodyFormData,
-          locale,
-        })
-      }
-    } else {
-      res = await createPost({
-        formData: bodyFormData,
-        locale,
-        isArticleComment:
-          !currentCommunity?.id && !!currentCommunity?.mappedCategoryId,
-      })
-    }
-    const resData = res?.data
-    if (resData?.id && !res?.messages?.moderation?.type) {
-      pushNotifications({
-        message: t('createPost.popup.success'),
-        type: 'success',
-      })
-      onCreateEditSuccess(resData)
-    } else {
-      if (res?.messages?.moderation?.type === 'banned') {
-        pushNotifications({
-          title: t('notification.post.blocked.title'),
-          message: t('notification.post.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.post.suspect.title'),
-          message: t('notification.post.suspect.message'),
-          type: 'warning',
-        })
-        onClose && onClose()
-      } else if (
-        res?.messages?.find?.((m: string) => !!m?.includes?.('suspend'))
-      ) {
-        pushNotifications({
-          message: t('notification.suspend.message'),
-          type: 'danger',
-        })
-        onClose && onClose()
-      } else {
-        pushNotifications({
-          message: res?.messages?.[0] || t('notification.failure'),
-          type: 'danger',
-        })
-      }
-    }
-  }
-
-  return (
-    <StyledCreateNewPost className={className} style={style}>
-      <div className="input-group-container">
-        <CreatePostTitle
-          className="input-group"
-          bannedWords={bannedWords}
-          value={titleValue}
-          onChange={setTitleValue}
-        />
-        <CreatePostDescription
-          className="input-group"
-          bannedWords={bannedWords}
-          value={descriptionValue}
-          onChange={setDescriptionValue}
-          onPreviewUrlChange={setPreviewUrl}
-          onInvalidUrlsChange={setInvalidUrls}
-          onImageFilesChange={setImageFiles}
-          imageFiles={imageFiles}
-        />
-        <div className="input-group">
-          <Text size="p4" className="input-group-label">
-            {t('admin.community')}
-          </Text>
-          <Dropdown
-            options={
-              communitiesList?.map((c, index) => ({
-                label: c.name,
-                value: `${c.id || ''}-${c.mappedCategoryId || ''}`,
-              })) || []
-            }
-            id="community-picker"
-            placeholder={t('community.choose')}
-            value={communityValue}
-            onChange={(option) => {
-              setCommunityValue({
-                label: option.label as string,
-                value: String(option.value),
-              })
-              setSelectedTopics([])
-            }}
-            disabled={!!forceSelectCommunity}
-          />
-          <Text size="sm" className="warning" color={theme.colors.gray400}>
-            * {t('commentPopup.warning.newPost')}
-          </Text>
-        </div>
-        {!hideTopicList && (
-          <div className="input-group">
-            <Text size="p4" className="input-group-label">
-              {t('tab.topic')}
-            </Text>
-            <div className="input-notification">
-              <img
-                src={
-                  currentCommunity
-                    ? IconAlertCirclePrimary
-                    : IconAlertCircleWarning
-                }
-              />
-              <Text size="base" color={theme.colors.gray500}>
-                {t(
-                  currentCommunity
-                    ? 'createPost.popup.primary'
-                    : 'createPost.popup.warning',
-                )}
-              </Text>
-            </div>
-            {currentCommunity && (
-              <TopicSelectList
-                className="tag-list"
-                communityId={currentCommunity.id}
-                forceTopics={forceSelectTopics}
-                onChange={setSelectedTopics}
-                selectedTopics={selectedTopics}
-                noFetch={noFetchTopic}
-              />
-            )}
-          </div>
-        )}
-      </div>
-      <Button
-        theme={isMarryBaby ? 'marryBaby' : 'helloSites'}
-        className="submit-btn"
-        size="lg"
-        onClick={async () => {
-          if (isReadyToSubmit && !isSubmitting) {
-            setIsSubmitting(true)
-            try {
-              await submitPost()
-            } catch (e) {
-              console.error(e)
-              pushNotifications(getDefaultFailNoti(t))
-            }
-            setIsSubmitting(false)
-          }
-        }}
-        isDisabled={!isReadyToSubmit}
-        isLoading={isSubmitting}
-      >
-        {t('createPost.popup.submit')}
-      </Button>
-    </StyledCreateNewPost>
-  )
-}