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

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

@@ -1,84 +0,0 @@
-import React, { useContext, useState } from 'react'
-
-import { Button } from 'components/atoms/button'
-import { Text } from 'components/atoms/text'
-import { useTranslations } from 'hooks/useTranslations'
-import { theme } from 'misc/theme'
-import { CSSProperties } from 'styled-components'
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import IconAlertCircle from '../../../assets/svg/icon-alert-circle.svg'
-import { reportPost } from '../../../utils/apiActions/post'
-import { StyledSubmitReportForm } from './index.styled'
-
-export type Props = {
-  className?: string
-  style?: CSSProperties
-  reason: string
-  reasonText: string
-  postId?: number
-  onClose?: () => void
-}
-
-export const SubmitReportForm = ({
-  className,
-  style,
-  reason,
-  reasonText,
-  onClose,
-  postId,
-}: Props) => {
-  const {
-    data: {
-      locale,
-      env: { isMarryBaby },
-    },
-    action: { pushNotifications },
-  } = useContext(TogetherComponentGlobalContext)
-  const { t } = useTranslations()
-  const [loading, setLoading] = useState(false)
-  return (
-    <StyledSubmitReportForm
-      data-is-marrybaby={isMarryBaby}
-      className={className}
-      style={style}
-    >
-      <ul className="report-list">
-        <li className="report-item">
-          <img src={IconAlertCircle} />
-          <Text className="__label" color={theme.colors.gray800} size="p4">
-            {reasonText}
-          </Text>
-        </li>
-      </ul>
-      <Button
-        theme={isMarryBaby ? 'marryBaby' : 'helloSites'}
-        className="report-submit"
-        size="lg"
-        color="primary"
-        isLoading={loading}
-        onClick={async () => {
-          if (!postId || loading) return
-          setLoading(true)
-          try {
-            const res = await reportPost({
-              id: postId,
-              reason,
-              locale,
-            })
-            if (res?.status === 1) {
-              pushNotifications({
-                message: 'Post reported',
-                type: 'success',
-              })
-              onClose && onClose()
-            }
-          } catch {}
-          setLoading(false)
-        }}
-      >
-        {t('submit')}
-      </Button>
-    </StyledSubmitReportForm>
-  )
-}

package/src/together/components/molecules/topicSelectList/index.stories.tsx

@@ -1,93 +0,0 @@
-import React from 'react'
-
-import { Story } from '@storybook/react/types-6-0'
-import styled from 'styled-components'
-
-import {
-  TogetherComponentGlobalContextProvider,
-  Props as ComponentGlobalProps,
-} from '../../../togetherComponentGlobalContext'
-import { TopicSelectList, Props as PostProps } from './index'
-
-export default {
-  component: TopicSelectList,
-  title: 'Projects/Together/Organisms/TopicSelectList',
-}
-
-import 'react-quill/dist/quill.snow.css'
-
-const StoryWrapper = styled.div`
-  width: 368px;
-  padding: 16px;
-  border: 1px solid gray;
-`
-
-type Props = PostProps & {
-  global?: ComponentGlobalProps
-}
-
-const Template: Story<Props> = ({ global, ...rest }: Props) => {
-  return (
-    <TogetherComponentGlobalContextProvider {...global}>
-      <StoryWrapper>
-        <TopicSelectList {...rest} />
-      </StoryWrapper>
-    </TogetherComponentGlobalContextProvider>
-  )
-}
-
-const baseProps = {
-  global: {
-    userInfo: {
-      id: 12798,
-      uid: '6fdbc5c8-bd12-11eb-9276-42010a940004',
-      website_id: 5,
-      provider: 'google',
-      social_id: '110850299647659967554',
-      name: 'Tung Vu',
-      username: 'vmtung93',
-      email: 'vmtung93@gmail.com',
-      avatar:
-        'https://cdn-sso-stag.hellobacsi.com/2021/11/72b32a1f754ba1c09b3695e0cb6cde7f.jpg',
-      birthday: '1993-09-29',
-      gender: 1,
-      status: 1,
-      referrer: 'https://discover.hellobacsi.com/',
-      is_new: 0,
-      notify_number: 0,
-      last_login_at: '2022-03-17 22:48:07',
-      first_time_bookmark: false,
-      is_active: 1,
-      is_suspend: 0,
-      communities_interacted: 1,
-      first_time_login: 0,
-      bookmarks: [],
-      edit_email: false,
-      total_bookmark: 0,
-    },
-    locale: 'vi-VN',
-    router: {
-      basePath: '',
-      pathname: '/[...slug]',
-      asPath:
-        '/benh-truyen-nhiem/coronavirus/nguoi-benh-covid-19-co-nen-xong-hoi/',
-      locale: 'vi-VN',
-    },
-    pushNotifications: (s) => console.log('notification', s),
-    sanitizeFunction: (s) => 'sanitized: ' + s,
-    env: {
-      togetherBasePath: '/community',
-      publicSSO: 'https://staging-id.hellobacsi.com/',
-      togetherBaseApiUrl: 'https://staging-together.hellohealthgroup.com/',
-      discoverBaseApiUrl: 'https://staging.hellosehat.com/',
-    },
-  },
-  communityId: 1,
-  forceTopics: [{ mappedCategoryId: 47381, name: 'Coronavirus' }],
-  // selectedTopics: [{ mappedCategoryId: 47381, name: 'Coronavirus' }],
-}
-
-export const Normal = Template.bind({})
-Normal.args = {
-  ...baseProps,
-}

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

@@ -1,53 +0,0 @@
-import { ThemeProps } from 'misc/theme'
-import styled from 'styled-components'
-
-export const StyledTopicSelectList = styled.div`
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  margin-top: 1rem;
-
-  .tag-item {
-    min-height: 32px;
-    padding: 5px 12px;
-    border: 1px solid ${(props: ThemeProps) => props.theme.colors.neutral100};
-    margin-right: 1rem;
-    margin-bottom: 8px;
-    border-radius: 1rem;
-    color: ${(props: ThemeProps) => props.theme.colors.gray800};
-    cursor: pointer;
-    font-size: 13px;
-    line-height: 22px;
-    transition: all 0.2s;
-
-    &.--active {
-      border-color: ${(props: ThemeProps) => props.theme.colors.blue50};
-      background: ${(props: ThemeProps) => props.theme.colors.blue50};
-      color: ${(props: ThemeProps) => props.theme.colors.primaryBase};
-    }
-    &[data-disabled='true'] {
-      background: ${(props: ThemeProps) => props.theme.colors.gray100};
-      color: ${(props: ThemeProps) => props.theme.colors.gray800};
-    }
-  }
-  .topic-spinner {
-    margin-right: auto;
-    margin-left: auto;
-    & > button {
-      width: 24px;
-      height: 24px;
-    }
-  }
-  &[data-is-marrybaby='true'] {
-    .tag-item {
-      border-color: transparent;
-      background: #f3f3f3;
-      color: #3e3f58;
-      &.--active {
-        border-color: #b6cdff;
-        background: #e0e9fb;
-        color: #3e3f58;
-      }
-    }
-  }
-`

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

@@ -1,186 +0,0 @@
-import React, {
-  CSSProperties,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
-
-import { formatTopic } from '../../../api/dataTransform'
-import { PATHS } from '../../../api/paths'
-import { callApi, getApiPath } from '../../../api/utils'
-import { Topic, TopicApi } from '../../../interfaces/types'
-import { Loading } from '../../atoms/loading'
-import { StyledTopicSelectList } from './index.styled'
-
-export type Props = {
-  className?: string
-  style?: CSSProperties
-  communityId?: number
-  isLoading?: boolean
-  topics?: Topic[]
-  forceTopics?: Topic[]
-  selectedTopics?: Topic[]
-  disabled?: boolean
-  onChange?: (v: Topic[]) => void
-  noFetch?: boolean
-}
-export const TopicSelectList = ({
-  className,
-  style,
-  topics: topicsProp,
-  communityId,
-  onChange,
-  isLoading,
-  disabled,
-  forceTopics,
-  selectedTopics: selectedTopicsProp,
-  noFetch,
-}: Props) => {
-  const {
-    data: {
-      locale,
-      env: { isMarryBaby },
-    },
-  } = useContext(TogetherComponentGlobalContext)
-  const [topics, setTopics] = useState<Topic[]>(
-    topicsProp ? [...topicsProp] : [],
-  )
-  const [selectedTopics, setSelectedTopics] = useState<Topic[]>(
-    selectedTopicsProp ? [...selectedTopicsProp] : [],
-  )
-  const [isLoadingTopics, setIsLoadingTopics] = useState<boolean>(false)
-  const topicsPropRef = useRef(topicsProp)
-  topicsPropRef.current = topicsProp
-  useEffect(() => {
-    if (communityId && !noFetch && !topicsPropRef.current?.length) {
-      setTopics([])
-      setIsLoadingTopics(true)
-      ;(async () => {
-        try {
-          const res = await callApi(
-            getApiPath(PATHS.TOPIC.LIST, {
-              communityId: communityId,
-              _locale: locale,
-            }),
-            'GET',
-          )
-
-          const topicRes: TopicApi[] | undefined = res?.data?.topics
-          if (Array.isArray(topicRes)) {
-            setTopics(
-              () =>
-                topicRes
-                  ?.map<Topic>(formatTopic)
-                  .sort(
-                    (t1: Topic, t2: Topic) => (t1.order || 0) - (t2.order || 0),
-                  ) || [],
-            )
-          }
-        } catch (e) {
-          console.log(e)
-          setIsLoadingTopics(false)
-        }
-        setIsLoadingTopics(false)
-      })()
-    }
-  }, [communityId, noFetch])
-  const topicsPropString = topicsProp?.map((t) => t.id).join('-')
-  const topicsStateString = topics?.map((t) => t.id).join('-')
-  const forceTopicsPropString = forceTopics?.map((t) => t.id).join('-')
-  useEffect(() => {
-    if (
-      topicsProp &&
-      typeof topicsPropString !== 'undefined' &&
-      topicsPropString !== topicsStateString
-    ) {
-      setTopics(topicsProp)
-    }
-  }, [topicsProp, topicsPropString, topicsStateString])
-  const topicsWithoutForced = useMemo(
-    () =>
-      topics.filter(
-        (t) =>
-          !forceTopics?.some(
-            (ft) =>
-              (ft.id && ft.id === t.id) ||
-              (ft.mappedCategoryId &&
-                ft.mappedCategoryId === t.mappedCategoryId),
-          ),
-      ),
-    [topicsStateString, forceTopicsPropString],
-  )
-  return (
-    <StyledTopicSelectList
-      data-is-marrybaby={isMarryBaby}
-      className={className}
-      style={style}
-    >
-      {forceTopics.map((topic) => (
-        <TopicItem
-          key={`${topic.id}-${topic.mappedCategoryId}`}
-          topic={topic}
-          disabled
-          selected
-        ></TopicItem>
-      ))}
-      {topicsWithoutForced.map((topic) => (
-        <TopicItem
-          key={`${topic.id}-${topic.mappedCategoryId}`}
-          topic={topic}
-          disabled={disabled}
-          selected={(selectedTopicsProp || selectedTopics).some(
-            (t) =>
-              (t.id && t.id === topic.id) ||
-              (t.mappedCategoryId &&
-                t.mappedCategoryId === topic.mappedCategoryId),
-          )}
-          onClick={() => {
-            const _selected = selectedTopicsProp || selectedTopics
-            const foundIndex = _selected.findIndex(
-              (_selected) =>
-                (_selected.id && _selected.id === topic.id) ||
-                (_selected.mappedCategoryId &&
-                  _selected.mappedCategoryId === topic.mappedCategoryId),
-            )
-            if (foundIndex !== -1) {
-              _selected.splice(foundIndex, 1)
-            } else {
-              _selected.push(topic)
-            }
-            if (onChange && selectedTopicsProp) {
-              onChange(_selected.slice())
-            } else {
-              onChange && onChange(_selected.slice())
-              setSelectedTopics(_selected.slice())
-            }
-          }}
-        ></TopicItem>
-      ))}
-      {(isLoading || isLoadingTopics) && <Loading className="topic-spinner" />}
-    </StyledTopicSelectList>
-  )
-}
-
-const TopicItem = ({
-  topic,
-  disabled,
-  selected,
-  onClick,
-}: {
-  topic: Topic
-  disabled?: boolean
-  selected?: boolean
-  onClick?: () => void
-}) => (
-  <div
-    className={'tag-item' + (selected ? ' --active' : '')}
-    data-disabled={disabled}
-    onClick={!disabled ? onClick : undefined}
-  >
-    {topic.name}
-  </div>
-)