{"version":3,"file":"CommentsSection-Gw3NGtoK.js","sources":["../../../frontend/src/Components/Comments/Show/SortBy.tsx","../../../frontend/src/Components/Comments/Show/CommentsSection.tsx"],"sourcesContent":["import React from 'react';\nimport { Select, MenuItem, Typography } from '@mui/material';\nimport { FormattedMessage } from 'react-intl';\n\nfunction SortBy({ onChange, items, value }: any) {\n  return (\n    <Select\n      value={value || ''}\n      onChange={(event: any) => onChange(event.target.value)}\n      variant=\"outlined\"\n      sx={{ minWidth: { sm: '100%', md: '30%' } }}\n    >\n      {items.map((item: any) => (\n        <MenuItem value={item.value} key={item.value}>\n          <Typography sx={{ fontWeight: 'medium' }}>\n            <FormattedMessage id={`SORT.${item.label}`} />\n          </Typography>\n        </MenuItem>\n      ))}\n    </Select>\n  );\n}\n\nexport default SortBy;\n","import React, { useState, useMemo } from 'react';\nimport { Typography, Box, Grid2 as Grid, Pagination, Paper } from '@mui/material';\nimport { Chat as ChatIcon } from '@mui/icons-material';\nimport { FormattedMessage, useIntl } from 'react-intl';\nimport { useLocation } from 'react-router-dom';\nimport { get } from 'lodash';\nimport { useQueryClient } from 'react-query';\n\nimport { moment } from '../../../I18n';\nimport CommentsList from './List';\nimport { PostStatuses, getCategoryForPostType } from '../../../Utils/Types';\nimport { updateQueryParams, getQueryParams } from '../../../Utils/Url';\nimport {\n  postParticipationStarted,\n  postIsClosedForParticipation,\n  postHasParent,\n} from '../../../Utils/Post';\nimport EmptyState from '../../DesignSystem/EmptyState';\nimport CustomIcon from '../../DesignSystem/CustomIcon';\nimport { Icons } from '../../../Themes';\nimport SortBy from './SortBy';\nimport useWidth from '../../../Hooks/useWidth';\nimport InlineCommentForm from '../../InlineCommentForm';\nimport useApiQuery from '../../../Hooks/useApiQuery';\nimport queriesConfig from '../../../Services/queriesConfig';\nimport usePostQuery from '../../../Hooks/usePostQuery';\nimport { Post } from '../../../Utils/Types/Posts';\nimport useCurrentUser from '../../../Hooks/useCurrentUser';\n\nconst sortingFields = [\n  {\n    value: '-created_at',\n    label: 'RECENT',\n  },\n  {\n    value: '-popularity',\n    label: 'POPULAR',\n  },\n];\n\nfunction CommentsSection({ post, disabled = false }: { post: Post; disabled?: boolean }) {\n  const isMobile = useWidth('down', 'md');\n  const intl = useIntl();\n  const queryClient = useQueryClient();\n  const location = useLocation();\n  const { isLoggedIn } = useCurrentUser();\n\n  const { post: parentPost } = usePostQuery(post.parent_id);\n  const postCategory = getCategoryForPostType(post.type);\n\n  const listParamsFromQueryParams = getQueryParams(location)?.comments as any;\n  const [listParams, setListParams] = useState({\n    page: parseInt(listParamsFromQueryParams?.page, 10) || 1,\n    sortBy: listParamsFromQueryParams?.sortBy || sortingFields[0].value,\n  });\n\n  const queryParams = {\n    sort: listParams.sortBy,\n    page: listParams.page - 1,\n  };\n\n  const {\n    data: comments,\n    paging,\n    isLoading,\n    refetch,\n  } = useApiQuery({ query: queriesConfig.getComments(post.id, queryParams) });\n\n  const handleChangePage = (_e: any, value: any) => {\n    const updatedState = { ...listParams, page: value };\n\n    setListParams(updatedState);\n    updateQueryParams({ comments: updatedState });\n  };\n\n  const handleChangeSortBy = (value: any) => {\n    const updatedState = { ...listParams, sortBy: value };\n\n    setListParams(updatedState);\n    updateQueryParams({ comments: updatedState });\n  };\n\n  const emptyComments = useMemo(() => {\n    const postWithParent = postHasParent(post);\n\n    let formattedDate = moment(post.published_at).format(\n      intl.formatMessage({ id: 'MOMENT.DATE.DEFAULT' }),\n    );\n    let message = intl.formatMessage(\n      {\n        id: `COMMENTS.SHOW.BE_THE_FIRST_TO_COMMENT_${postCategory.toUpperCase()}`,\n      },\n      { date: formattedDate },\n    );\n    let messageIcon = <ChatIcon style={{ fontSize: 32 }} color=\"primary\" />;\n\n    if (post.status === PostStatuses.DONE) {\n      // when the post has a stutus 'done'\n      message = intl.formatMessage({\n        id: 'COMMENTS.SHOW.CONTRIBUTION_ENDED',\n      });\n\n      messageIcon = <CustomIcon src={Icons.posts.phases.coming} color=\"primary\" size={30} />;\n    } else if (postWithParent && postIsClosedForParticipation(post)) {\n      // when the parent of the post has ended\n      formattedDate = moment(post.included.source.end_at).format(\n        intl.formatMessage({ id: 'MOMENT.DATE.DEFAULT' }),\n      );\n\n      message = intl.formatMessage(\n        {\n          id: 'COMMENTS.SHOW.CONTRIBUTION_ENDED_ON',\n        },\n        { date: formattedDate },\n      );\n\n      messageIcon = <CustomIcon src={Icons.posts.phases.coming} color=\"primary\" size={30} />;\n    } else if (postWithParent && !postParticipationStarted(post)) {\n      // if the participation hasn't started yet\n      formattedDate = moment(post.included.source.start_at).format(\n        intl.formatMessage({ id: 'MOMENT.DATE.DEFAULT' }),\n      );\n\n      message = intl.formatMessage(\n        {\n          id: 'COMMENTS.SHOW.CONTRIBUTION_HAS_NOT_STARTED',\n        },\n        { date: formattedDate },\n      );\n\n      messageIcon = <CustomIcon src={Icons.posts.phases.coming} color=\"primary\" size={30} />;\n    }\n\n    return (\n      <EmptyState\n        icon={messageIcon}\n        content={\n          <Typography variant=\"body1\" data-testid=\"empty-state-content\">\n            {message}\n          </Typography>\n        }\n      />\n    );\n  }, [post]);\n\n  return (\n    <>\n      <Paper elevation={1}>\n        <Box sx={{ p: 2 }}>\n          <InlineCommentForm\n            post={post}\n            onSubmit={() => {\n              refetch();\n              queryClient.invalidateQueries(queriesConfig.getPost(post.id).queryKey);\n            }}\n            isLoggedIn={isLoggedIn}\n            parentPost={parentPost}\n          />\n        </Box>\n      </Paper>\n      <Box sx={{ my: 3 }}>\n        <Grid container sx={{ alignItems: 'center' }}>\n          <Grid size={{ xs: 12, sm: 'grow' }}>\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'space-between',\n                alignItems: 'center',\n                flexDirection: isMobile ? 'column' : 'row',\n              }}\n            >\n              <Box sx={{ my: { xs: 3, md: 0 } }}>\n                <Typography variant=\"body1\" component=\"div\" sx={{ fontWeight: 'bold' }}>\n                  <FormattedMessage\n                    id={`COMMENTS.SHOW.COUNT_${postCategory.toUpperCase()}`}\n                    values={{ count: post.post_contributions_stats.comments_count }}\n                  />\n                </Typography>\n              </Box>\n\n              <SortBy\n                value={listParams.sortBy}\n                items={sortingFields}\n                onChange={handleChangeSortBy}\n              />\n            </Box>\n          </Grid>\n        </Grid>\n      </Box>\n      {!post.post_contributions_stats.comments_count && !comments?.length ? (\n        emptyComments\n      ) : (\n        <Box>\n          <CommentsList\n            comments={comments || []}\n            loading={isLoading}\n            post={post}\n            postAuthorId={get(post, 'included.author.id')}\n            disabled={disabled}\n            refetch={refetch}\n            parentPost={parentPost}\n          />\n\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: 'center',\n            }}\n          >\n            <Pagination\n              count={paging.total_pages}\n              page={listParams.page}\n              onChange={handleChangePage}\n              color=\"primary\"\n              variant=\"outlined\"\n            />\n          </Box>\n        </Box>\n      )}\n    </>\n  );\n}\n\nexport default CommentsSection;\n"],"names":["SortBy","_ref","onChange","items","value","React","createElement","Select","event","target","variant","sx","minWidth","sm","md","map","item","MenuItem","key","Typography","fontWeight","FormattedMessage","id","concat","label","sortingFields","CommentsSection","_getQueryParams","post","_ref$disabled","disabled","isMobile","useWidth","intl","useIntl","queryClient","useQueryClient","location","useLocation","_useCurrentUser","useCurrentUser","isLoggedIn","_usePostQuery","usePostQuery","parent_id","parentPost","postCategory","getCategoryForPostType","type","listParamsFromQueryParams","getQueryParams","comments","_useState","useState","page","parseInt","sortBy","_useState2","_slicedToArray","listParams","setListParams","queryParams","sort","_useApiQuery","useApiQuery","query","queriesConfig","getComments","data","paging","isLoading","refetch","handleChangePage","_e","updatedState","_objectSpread","updateQueryParams","handleChangeSortBy","emptyComments","useMemo","postWithParent","postHasParent","formattedDate","moment","published_at","format","formatMessage","message","toUpperCase","date","messageIcon","ChatIcon","style","fontSize","color","status","PostStatuses","DONE","CustomIcon","src","Icons","posts","phases","coming","size","postIsClosedForParticipation","included","source","end_at","postParticipationStarted","start_at","EmptyState","icon","content","Fragment","Paper","elevation","Box","p","InlineCommentForm","onSubmit","invalidateQueries","getPost","queryKey","my","Grid","container","alignItems","xs","display","justifyContent","flexDirection","component","values","count","post_contributions_stats","comments_count","length","CommentsList","loading","postAuthorId","get","Pagination","total_pages"],"mappings":"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"}