strapi-plugin-comments 1.0.4 → 2.0.0-beta.4

package/admin/src/components/ItemDetails/CardLevelWrapper.js

@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-
-import { colors, sizes } from 'strapi-helper-plugin';
-
-const CardLevelWrapper = styled.ul`
-  padding: 0;
-  margin: 0;
-
-  list-style: none;
-
-  position: relative;
-  z-index: 1;
-
-  ul {
-    padding-left: 4rem;
-
-    position: relative;
-    z-index: 0;
-  }
-`;
-
-export default CardLevelWrapper;

package/admin/src/components/ItemDetails/CardWrapper.js

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-
-import { colors, sizes } from 'strapi-helper-plugin';
-import CardItem from './CardItem';
-
-const CardWrapper = styled.li`
-  padding: 0;
-  margin: 0 0 2rem 0;
-
-  position: relative;
-  z-index: 1;
-
-  ${CardItem}:before {
-    display: ${ props => props.root ? 'none' : 'block' };
-    content: '';
-    margin-top: -1px;
-
-    height: 2px;
-    width: 2rem;
-
-    position: absolute;
-    top: 50%;
-    left: -2rem;
-    z-index: -1;
-
-    background-color: ${colors.relations.boxShadow};
-  }
-
-  &:after {
-      display: ${ props => props.root ? 'none' : 'block' };
-      content: '';
-      margin-left: -1px;
-
-      width: 2px;
-
-      position: absolute;
-      top: -2rem;
-      bottom: 0;
-      left: -2rem;
-      z-index: -1;
-
-      background-color: ${colors.relations.boxShadow};
-    }
-
-    &:last-child {
-      &:after {
-        bottom: ${props => props.active ? `calc(50% - 1px + 2rem)` : `calc(50% - 1px)`};
-      }
-    }
-`;
-
-export default CardWrapper;

package/admin/src/components/ItemDetails/index.js

@@ -1,167 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
-import { isEmpty, isArray, first } from 'lodash';
-import CardWrapper from './CardWrapper';
-import CardItem from './CardItem';
-import CardLevelCounter from './CardLevelCounter';
-import CardLevelCounterLink from './CardLevelCounterLink';
-import ItemFooter from '../ItemFooter';
-import ItemModeration from '../ItemModeration';
-import ItemHeader from '../ItemHeader';
-import AbuseReportsPopUp from '../AbuseReportsPopUp';
-import pluginId from '../../pluginId';
-import { APPROVAL_STATUS } from "../../utils/constants";
-
-const ItemDetails = ({
-  id,
-  content,
-  active,
-  clickable,
-  root,
-  threadsCount,
-  authorName,
-  authorUser,
-  created_at,
-  createdAt,
-  updated_at,
-  updatedAt,
-  related,
-  reports,
-  blocked,
-  blockedThread,
-  removed,
-  onClick,
-  onBlockClick,
-  onBlockThreadClick,
-  onAbuseReportResolve,
-  onApproveCommentClick,
-  onRejectCommentClick,
-  approvalStatus,
-}) => {
-  const [showPopUp, setPopUpVisibility] = useState(false);
-
-  const onPopUpOpen = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    setPopUpVisibility(true);
-  };
-
-  const onPopUpClose = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    setPopUpVisibility(false);
-  };
-
-  const onAbuseReportResolveClick = (e, reportId) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onAbuseReportResolve(reportId, id);
-  };
-  const hasThreads = (threadsCount !== undefined) && (threadsCount > 0);
-  const isAbuseReported = !isEmpty(reports);
-  const isPending = approvalStatus === APPROVAL_STATUS.PENDING;
-  const isItemHeaderDisplayed = blocked || blockedThread || removed || isAbuseReported || isPending;
-  const footerProps = {
-    authorName,
-    authorUser,
-    related: isArray(related) ? first(related) : related,
-    created_at: created_at || createdAt,
-    updated_at: updated_at || updatedAt,
-    isDetailedView: true,
-  };
-  const headerProps = {
-    active,
-    blocked,
-    blockedThread,
-    isRemoved: removed,
-    abuseReports: reports || [],
-    isAbuseReported: !isEmpty(reports),
-    isDetailedView: true,
-    onReportsClick: onPopUpOpen,
-    approvalStatus,
-  };
-  const moderationProps = {
-    id,
-    blocked,
-    blockedThread,
-    onBlockClick,
-    onBlockThreadClick,
-    onApproveCommentClick,
-    onRejectCommentClick,
-    approvalStatus,
-  };
-  const reportsPopUpProps = {
-    blocked,
-    blockedThread,
-    reports,
-    comment: {
-      id, content, authorName, authorUser, created_at, updated_at,
-    },
-    onBlockClick,
-    onBlockThreadClick,
-    onAbuseReportResolveClick,
-    isOpen: showPopUp,
-    onClose: onPopUpClose,
-  };
-
-  return (
-    <CardWrapper root={root} active={active}>
-      <CardItem
-        onClick={e => (hasThreads || root) && clickable && !active && onClick(e)}
-        clickable={clickable}
-        root={root}
-        active={active}>
-        {isItemHeaderDisplayed && (<ItemHeader { ...headerProps } />) }
-        <p>{content}</p>
-        <ItemFooter {...footerProps} />
-      </CardItem>
-      {hasThreads && (<CardLevelCounter>
-          <FormattedMessage id={`${pluginId}.list.item.threads.count`} values={{ count: threadsCount }}/>
-          <CardLevelCounterLink onClick={onClick}>
-            <FormattedMessage id={`${pluginId}.list.item.threads.drilldown`} />
-            <FontAwesomeIcon icon={faArrowRight} />
-          </CardLevelCounterLink>
-        </CardLevelCounter>
-      )}
-      {active && !removed && (<ItemModeration { ...moderationProps } />)}
-      {(!isEmpty(reports) && active) && (
-        <AbuseReportsPopUp
-          {...reportsPopUpProps}
-        />
-      )}
-    </CardWrapper>
-  );
-};
-
-ItemDetails.propTypes = {
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  content: PropTypes.string.isRequired,
-  active: PropTypes.bool,
-  clickable: PropTypes.bool,
-  root: PropTypes.bool,
-  threadsCount: PropTypes.number,
-  authorName: PropTypes.string,
-  authorUser: PropTypes.object,
-  created_at: PropTypes.string.isRequired,
-  updated_at: PropTypes.string,
-  related: PropTypes.array,
-  reports: PropTypes.array,
-  blocked: PropTypes.bool,
-  blockedThread: PropTypes.bool,
-  onClick: PropTypes.func,
-  onBlockClick: PropTypes.func,
-  onBlockThreadClick: PropTypes.func,
-  onAbuseReportResolve: PropTypes.func,
-  approvalStatus: PropTypes.oneOf([
-    APPROVAL_STATUS.APPROVED,
-    APPROVAL_STATUS.PENDING,
-    APPROVAL_STATUS
-  ]),
-  onApproveCommentClick: PropTypes.func,
-  onRejectCommentClick: PropTypes.func,
-};
-
-export default ItemDetails;

package/admin/src/components/ItemFooter/CardItemAuthor.js

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-
-const CardItemAuthor = styled.span`
-  display: flex;
-  flex-grow: 1;
-`;
-
-export default CardItemAuthor;

package/admin/src/components/ItemFooter/CardItemRelation.js

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-import { sizes } from 'strapi-helper-plugin';
-
-const CardItemRelation = styled.span`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: row;
-
-  align-items: center;
-  justify-content: flex-end;
-
-  svg {
-    margin-right: ${sizes.margin/2}px;
-  }
-`;
-
-export default CardItemRelation;

package/admin/src/components/ItemFooter/Wrapper.js

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-
-const Wrapper = styled.div`
-  display: flex;
-  padding-top: 1rem;
-  margin-top: 1rem;
-
-  flex-wrap: wrap;
-  justify-items: center;
-  align-items: stretch;
-
-  color: ${colors.leftMenu.grey};
-  font-size: 1.25rem;
-
-  border-top: 1px ${colors.leftMenu.lightGrey} solid;
-`;
-
-export default Wrapper;

package/admin/src/components/ItemFooter/index.js

@@ -1,87 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import moment from 'moment';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faLink } from '@fortawesome/free-solid-svg-icons';
-import CardItemRelation from './CardItemRelation';
-import CardItemAuthor from './CardItemAuthor';
-import Wrapper from './Wrapper';
-import { find, isNil, isObject, kebabCase, snakeCase, startCase } from 'lodash';
-import { Link } from 'react-router-dom';
-
-const ENTITY_NAME_PARAMS = ['title', 'Title', 'subject', 'Subject', 'name', 'Name'];
-
-const getLink = (to, contentType) => (
-  <Link to={`${to}`}>
-    {startCase(contentType)}
-  </Link>
-);
-
-const getContentTypeLink = (name) => `application::${name}.${name}`;
-
-const resolveEntityName = entity => ENTITY_NAME_PARAMS.map(_ => entity[_]).filter(_ => _)[0] || '';
-
-const ItemFooter = ({ authorName, authorUser, related, created_at, isDetailedView, relatedContentTypes }) => {
-  const formatAuthor = () => {
-    if (authorUser) {
-      return authorUser.username;
-    }
-    return authorName;
-  };
-
-  const formatDateTime = () => {
-    return moment(created_at).format('DD/MM/YYYY, HH:mm:ss');
-  };
-
-  const relatedExist = useMemo(() => !isNil(related) && isObject(related), [related]);
-
-  const formatRelationType = () => {
-    if (relatedExist) {
-      const { id, __contentType: contentType } = related;
-      const name = snakeCase(contentType);
-      const relation = find(relatedContentTypes, ({ globalName }) => globalName === name);
-      if (relation && relation.contentManager) {
-        const contentManagerRoot = `/plugins/content-manager`;
-        if (relation.isSingle) {
-          return getLink(
-            relation.url || `${contentManagerRoot}/singleType/${getContentTypeLink(kebabCase(name))}`,
-            related.__contentType,
-          );
-        } else if (relation.url) {
-          const url = `${relation.url.replace(':id', id)}'?_sort=id:ASC&_where[0][id]=${id}`;
-          return getLink(url, related[relation.key] || related.__contentType);
-        } else {
-          const url = `${contentManagerRoot}/collectionType/${getContentTypeLink(
-            kebabCase(name))}?_sort=id:ASC&_where[0][id]=${id}`;
-          return getLink(url, related[relation.key] || related.__contentType);
-        }
-      }
-      return startCase(related.__contentType);
-    }
-    return '';
-  };
-
-  const formatRelationName = () => relatedExist ? resolveEntityName(related) : '';
-
-  return (
-    <Wrapper>
-      <CardItemAuthor>{formatAuthor()} @ {formatDateTime()}</CardItemAuthor>
-      {!isNil(related) && (
-        <CardItemRelation title={!isDetailedView && formatRelationName()}>
-          <FontAwesomeIcon icon={faLink} />
-          {isDetailedView ? `(${formatRelationType()}) ${formatRelationName()}` : formatRelationType()}
-        </CardItemRelation>
-      )}
-    </Wrapper>
-  );
-};
-
-ItemFooter.propTypes = {
-  authorName: PropTypes.string,
-  authorUser: PropTypes.object,
-  related: PropTypes.object,
-  created_at: PropTypes.string.isRequired,
-  isDetailedView: PropTypes.bool,
-};
-
-export default ItemFooter;

package/admin/src/components/ItemHeader/CardHeaderBlocked.js

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-
-const CardHeaderBlocked = styled.span`
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-items: center;
-  height: 2.5rem;
-  margin-right: 1rem;
-  padding: .25rem 1rem;
-
-  color: ${colors.leftMenu.grey};
-
-  border-radius: 1.25rem;
-  background: ${colors.leftMenu.lightGrey};
-
-  svg {
-    margin-right: .5rem;
-  }
-`;
-
-export default CardHeaderBlocked;

package/admin/src/components/ItemHeader/CardHeaderIndicator.js

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-
-const CardHeaderIndicator = styled.span`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.8rem;
-  height: 1.8rem;
-
-  font-size: 1rem;
-  color: ${colors.beige};
-  vertical-align: middle;
-  line-height: 1.8rem;
-  text-align: center;
-
-  border-radius: .9rem;
-  background: ${colors.grey};
-
-  &:first-child {
-    margin-right: .5rem;
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
-`;
-
-export default CardHeaderIndicator;

package/admin/src/components/ItemHeader/CardHeaderIndicatorBlue.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-import CardHeaderIndicator from './CardHeaderIndicator';
-
-const CardHeaderIndicatorBlue = styled(CardHeaderIndicator)`
-  color: ${colors.beige};
-  background: ${colors.blue};
-`;
-
-export default CardHeaderIndicatorBlue;

package/admin/src/components/ItemHeader/CardHeaderIndicatorRed.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-import CardHeaderIndicator from './CardHeaderIndicator';
-
-const CardHeaderIndicatorRed = styled(CardHeaderIndicator)`
-  color: ${colors.beige};
-  background: red;
-`;
-
-export default CardHeaderIndicatorRed;

package/admin/src/components/ItemHeader/CardHeaderIndicatorsContainer.js

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-
-const CardHeaderIndicatorsContainer = styled.span`
-  display: flex;
-  height: 1.8rem;
-
-  position: absolute;
-  top: -.9rem;
-  right: -.9rem;
-
-  font-size: 1rem;
-  color: ${colors.beige};
-  line-height: 1.8rem;
-`;
-
-export default CardHeaderIndicatorsContainer;

package/admin/src/components/ItemHeader/CardHeaderPending.js

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-
-import CardHeaderBlocked from './CardHeaderBlocked';
-
-const CardHeaderPending = styled(CardHeaderBlocked)`
-  color: ${colors.blue};
-`;
-
-export default CardHeaderPending;

package/admin/src/components/ItemHeader/CardHeaderReports.js

@@ -1,40 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-
-const CardHeaderReports = styled.a`
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-items: center;
-  height: 2.5rem;
-  margin-right: 1rem;
-  padding: .25rem 1rem;
-
-  color: red;
-  text-decoration: none;
-
-  border: 1px dotted red;
-  border-radius: 1.25rem;
-  background: transparent;
-
-  transition: .25s ease-in-out all;
-
-  svg {
-    margin-right: .5rem;
-  }
-
-  &:hover {
-    color: ${colors.beige};
-    text-decoration: none;
-
-    border-style: solid;
-    background: red;
-
-    transform: translateY(-.25rem);
-
-    cursor: pointer;
-  }
-`;
-
-export default CardHeaderReports;

package/admin/src/components/ItemHeader/Wrapper.js

@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-bottom: ${props => props.hasMargin ? '1rem' : 0};
-
-  color: ${colors.leftMenu.grey};
-  font-size: 1.25rem;
-  font-weight: 500;
-`;
-
-export default Wrapper;

package/admin/src/components/ItemHeader/index.js

@@ -1,97 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useGlobalContext, CheckPermissions } from 'strapi-helper-plugin';
-import { faLock, faStream, faAsterisk, faFire, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
-import Wrapper from './Wrapper';
-import CardHeaderBlocked from './CardHeaderBlocked';
-import CardHeaderPending from './CardHeaderPending';
-import pluginId from '../../pluginId';
-import CardHeaderIndicatorsContainer from './CardHeaderIndicatorsContainer';
-import CardHeaderIndicatorBlue from './CardHeaderIndicatorBlue';
-import CardHeaderIndicatorRed from './CardHeaderIndicatorRed';
-import CardHeaderReports from './CardHeaderReports';
-import pluginPermissions from '../../permissions';
-import { APPROVAL_STATUS } from "../../utils/constants";
-
-const ItemHeader = ({ active, isDetailedView, blocked, blockedThread, isNew, isAbuseReported, isRemoved, abuseReports, onReportsClick, approvalStatus }) => {
-  const { formatMessage } = useGlobalContext();
-  const isBlocked = blocked || blockedThread;
-  const hasAnyIndicators = isNew || (isAbuseReported && !isDetailedView);
-
-  return (
-    <Wrapper hasMargin={isBlocked || isRemoved || (isAbuseReported && isDetailedView)}>
-      {isBlocked && (
-        <CheckPermissions permissions={pluginPermissions.moderate}>
-          <CardHeaderBlocked>
-            <FontAwesomeIcon icon={faLock} />
-            {blockedThread && <FontAwesomeIcon icon={faStream} />}
-            <FormattedMessage id={`${pluginId}.list.item.header.blocked${blockedThread ? '.thread' : ''}`} />
-          </CardHeaderBlocked>
-        </CheckPermissions>
-      )}
-      {
-        isRemoved && (
-          <CheckPermissions permissions={pluginPermissions.moderate}>
-            <CardHeaderBlocked>
-              <FontAwesomeIcon icon={faLock} />
-              {blockedThread && <FontAwesomeIcon icon={faStream} />}
-              <FormattedMessage id={`${pluginId}.list.item.header.removed`} />
-            </CardHeaderBlocked>
-          </CheckPermissions>
-        )
-      }
-      {
-        approvalStatus === APPROVAL_STATUS.PENDING && (
-          <CheckPermissions permissions={pluginPermissions.moderate}>
-            <CardHeaderPending>
-              <FontAwesomeIcon icon={faExclamationCircle} />
-              <FormattedMessage id={`${pluginId}.list.item.header.pending`} />
-            </CardHeaderPending>
-          </CheckPermissions>
-        )
-      }
-      {(isDetailedView && active) && (<>
-        {isAbuseReported && (
-          <CheckPermissions permissions={pluginPermissions.moderateReports}>
-            <CardHeaderReports href="#abuse-reports" onClick={onReportsClick}>
-              <FontAwesomeIcon icon={faFire} />
-              <FormattedMessage id={`${pluginId}.list.item.header.abuse`} values={{ count: abuseReports.length }} />
-            </CardHeaderReports>
-          </CheckPermissions>
-        )}
-      </>)}
-      {hasAnyIndicators && <CardHeaderIndicatorsContainer>
-          {isNew && (<CardHeaderIndicatorBlue title={formatMessage({ id: `${pluginId}.list.item.indication.new`})}>
-            <FontAwesomeIcon icon={faAsterisk} />
-          </CardHeaderIndicatorBlue>)} 
-          <CheckPermissions permissions={pluginPermissions.moderateReports}>
-            {isAbuseReported && (<CardHeaderIndicatorRed title={formatMessage({ id: `${pluginId}.list.item.indication.abuse`})}>
-              <FontAwesomeIcon icon={faFire} />
-            </CardHeaderIndicatorRed>)}
-          </CheckPermissions>
-        </CardHeaderIndicatorsContainer>
-      }
-    </Wrapper>
-  );
-};
-
-ItemHeader.propTypes = {
-  active: PropTypes.bool,
-  isDetailedView: PropTypes.bool,
-  blocked: PropTypes.bool,
-  blockedThread: PropTypes.bool,
-  isNew: PropTypes.bool,
-  removed: PropTypes.bool,
-  isAbuseReported: PropTypes.bool,
-  abuseReports: PropTypes.array,
-  onReportsClick: PropTypes.func,
-  approvalStatus: PropTypes.oneOf([
-    APPROVAL_STATUS.APPROVED,
-    APPROVAL_STATUS.PENDING,
-    APPROVAL_STATUS
-  ])
-};
-
-export default ItemHeader;

package/admin/src/components/ItemModeration/Wrapper.js

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-import { Button } from '@buffetjs/styles';
-import { colors } from 'strapi-helper-plugin';
-
-const Wrapper = styled.div`
-  display: flex;
-  margin-top: 1rem;
-
-  flex-wrap: wrap;
-  justify-items: center;
-  align-items: stretch;
-
-  ${Button} {
-    margin-right: 1rem;
-  }
-`;
-
-export default Wrapper;