strapi-plugin-comments 1.0.2-beta.1 → 2.0.0-beta.2

package/admin/src/components/Filters/utils.js

@@ -1,21 +0,0 @@
-import { camelCase } from 'lodash';
-
-export const isMatch = filterValue => ({ value }) => {
-  const parsedValue = Number(filterValue);
-  return isNaN(parsedValue) ? filterValue === value : parsedValue === value;
-};
-
-export const isRelatedFilter = (name) => name === 'related';
-
-export const isEntityFilter = (name) => name === 'entity';
-
-const defaultFilter = [
-  { name: 'related', filter: '=', value: '' },
-  { name: 'entity', filter: '=', value: '' },
-];
-export const initFilters = (queryFilters) => {
-  return ([...defaultFilter, ...queryFilters])
-    .reduce(
-      (acc, current) => ({ ...acc, [camelCase(current.name)]: current }), {},
-    );
-};

package/admin/src/components/Item/CardItem.js

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-
-import { Card } from '@buffetjs/styles';
-
-import { colors, sizes } from 'strapi-helper-plugin';
-
-const CardItem = styled(Card)`
-  padding: 1rem;
-
-  border-bottom: 2px ${props =>
-    props.active ? colors.blue : 'tranparent'} solid;
-
-  transition: all .15s ease-in-out;
-
-  ${ props => !props.active && `
-    &:hover {
-      background-color: ${colors.lightGrey};
-
-      transform: translateY(-.5rem);
-
-      cursor: pointer;
-    }
-  `}
-
-  p {
-    margin-bottom: 0;
-  }
-`;
-
-export default CardItem;

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

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-import { colors, sizes } from 'strapi-helper-plugin';
-
-const CardWrapper = styled.li`
-  padding: 0;
-  margin: 0 0 2rem 0;
-`;
-
-export default CardWrapper;

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

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useHistory, useParams } from 'react-router-dom';
-import { isEmpty, isArray, first } from 'lodash';
-import { generateSearchFromFilters } from 'strapi-helper-plugin';
-import pluginId from '../../pluginId';
-import CardWrapper from './CardWrapper';
-import CardItem from './CardItem';
-import ItemFooter from '../ItemFooter';
-import ItemHeader from '../ItemHeader';
-import useDataManager from '../../hooks/useDataManager';
-
-const Item = ({
-  id,
-  content,
-  authorName,
-  authorUser,
-  created_at,
-  updated_at,
-  related,
-  reports,
-  blocked,
-  blockedThread,
-  isNew,
-  removed,
-  createdAt,
-  updatedAt,
-  relatedContentTypes,
-}) => {
-  const { push } = useHistory();
-  const { getSearchParams } = useDataManager();
-  const { id: activeId } = useParams();
-  const parsedId = typeof activeId === 'number' ? Number(activeId) : activeId;
-
-  const onClick = e => {
-    if (!e.target.href) {
-      e.preventDefault();
-      push({
-        pathname: `/plugins/${pluginId}/display/${id}`,
-        search: generateSearchFromFilters(getSearchParams()),
-      });
-    }
-  };
-
-  const isAbuseReported = !isEmpty(reports);
-  const isItemHeaderDisplayed = blocked || blockedThread || isNew || removed || isAbuseReported;
-  const headerProps = {
-    blocked,
-    blockedThread,
-    isNew,
-    isAbuseReported,
-    isRemoved: removed,
-  };
-
-  const footerProps = {
-    authorName,
-    authorUser,
-    related: isArray(related) ? first(related) : related,
-    created_at: created_at || createdAt,
-    updated_at: updated_at || updatedAt,
-    relatedContentTypes
-  };
-
-  return (
-    <CardWrapper>
-      <CardItem
-        onClick={onClick}
-        active={id === parsedId}
-      >
-        { isItemHeaderDisplayed && (<ItemHeader { ...headerProps } />) }
-        <p>{content}</p>
-        <ItemFooter {...footerProps} />
-      </CardItem>
-    </CardWrapper>
-  );
-};
-
-Item.propTypes = {
-  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  content: PropTypes.string.isRequired,
-  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,
-  isNew: PropTypes.bool,
-};
-
-export default Item;

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

@@ -1,33 +0,0 @@
-import styled from 'styled-components';
-
-import { Card } from '@buffetjs/styles';
-
-import { colors, sizes } from 'strapi-helper-plugin';
-
-const CardItem = styled(Card)`
-  padding: 1rem;
-
-  color: ${props => props.active ? 'inherit' : colors.leftMenu.darkGrey};
-  background: ${props => props.active ? '#ffffff' : colors.grey};
-
-  transition: all .15s ease-in-out;
-
-  ${props => props.root && props.clickable && `
-    &:hover {
-      color: ${colors.leftMenu.black};
-      background: #ffffff;
-
-      transform: translateY(-.5rem);
-
-      cursor: pointer;
-    }
-  ` }
-
-  p {
-    margin-bottom: 0;
-  }
-
-
-`;
-
-export default CardItem;

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

@@ -1,46 +0,0 @@
-import styled from 'styled-components';
-
-import { colors, sizes } from 'strapi-helper-plugin';
-
-const CardLevelCounter = styled.div`
-  padding: 0 0 0 4rem;
-  margin: 1rem;
-
-  position: relative;
-
-  font-weight: 500;
-  font-size: 1.25rem;
-
-  &:before {
-    display: ${ props => props.root ? 'none' : 'block' };
-    content: '';
-    margin-top: -1px;
-
-    height: 0;
-    width: 2rem;
-
-    position: absolute;
-    top: 50%;
-    left: 1rem;
-
-    border-top: 2px ${colors.relations.boxShadow} dotted;
-  }
-
-  &:after {
-      display: ${ props => props.root ? 'none' : 'block' };
-      content: '';
-      margin-left: -1px;
-
-      width: 0;
-
-      position: absolute;
-      top: -1rem;
-      bottom: calc(50% - 1px);
-      left: 1rem;
-
-      border-left: 2px ${colors.relations.boxShadow} dotted;
-    }
-
-`;
-
-export default CardLevelCounter;

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

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-import { colors, sizes, darken } from 'strapi-helper-plugin';
-
-const CardLevelCounterLink = styled.span`
-  display: inline-block;
-  margin-left: 1rem;
-
-  color: ${colors.blue};
-
-  transition: all .15s ease-in-out;
-
-  &:hover {
-    color: ${darken(colors.blue, 10)};
-
-    cursor: pointer;
-  }
-
-  svg {
-    margin-left: .5rem;
-  }
-`;
-
-export default CardLevelCounterLink;

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,151 +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';
-
-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,
-}) => {
-  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 isItemHeaderDisplayed = blocked || blockedThread || removed || isAbuseReported;
-  const footerProps = {
-    authorName,
-    authorUser,
-    related: isArray(related) ? first(related) : related,
-    created_at: created_at || createdAt,
-    updated_at: updated_at || updatedAt,
-    isDelailedView: true,
-  };
-  const headerProps = {
-    active,
-    blocked,
-    blockedThread,
-    isRemoved: removed,
-    abuseReports: reports || [],
-    isAbuseReported: !isEmpty(reports),
-    isDelailedView: true,
-    onReportsClick: onPopUpOpen,
-  };
-  const moderationProps = {
-    id,
-    blocked,
-    blockedThread,
-    onBlockClick,
-    onBlockThreadClick,
-  };
-  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,
-};
-
-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;