strapi-plugin-comments 1.0.2 → 2.0.0-beta.3

package/admin/src/components/AbuseReportsPopUp/TableContainer.js

@@ -1,63 +0,0 @@
-import { colors } from 'strapi-helper-plugin';
-
-import styled from 'styled-components';
-
-const TableContainer = styled.div`
-    table {
-        thead {
-            tr {
-                border-bottom: 1px ${colors.grey} solid;
-
-                td {
-                    background: transparent;
-
-                    &:first-child {
-                        padding-left: 0;
-                    }
-
-                    &:last-child {
-                        padding-right: 0;
-                    }
-                }
-            }
-        }
-
-        tbody {
-            tr {
-                background-color: white;
-
-                td {
-                    &:first-child {
-                        padding-left: 0;
-                    }
-
-                    &:last-child {
-                        padding-right: 0;
-                    }
-                }
-
-                &:last-child {
-                    border-bottom: 0;
-                }
-
-                &:hover {
-                    background-color: white;
-
-                    cursor: default;
-                }
-            }
-        }
-
-        p {
-            margin: 0;
-            padding: 0;
-        }
-    }
-
-    &>div {
-        box-shadow: none;
-        border: 0;
-    }
-`;
-
-export default TableContainer;

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

@@ -1,148 +0,0 @@
-/**
- *
- * AbuseReportsPopUp
- *
- */
-
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import { isEmpty } from 'lodash';
-import {
-  ButtonModal,
-  HeaderModal,
-  HeaderModalTitle,
-  Modal,
-  ModalBody,
-  ModalForm,
-  useGlobalContext,
-  CheckPermissions,
-} from 'strapi-helper-plugin';
-import { Table, Button } from '@buffetjs/core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faCheck,
-  faSmile,
-} from '@fortawesome/free-solid-svg-icons';
-import TableContainer from './TableContainer';
-import EmptyView from '../EmptyView';
-import ItemDetails from '../ItemDetails';
-import ItemPreviewContainer from './ItemPreviewContainer';
-import ModalFooter from './ModalFooter';
-import pluginId from '../../pluginId';
-
-// Translations
-import en from '../../translations/en.json';
-import pluginPermissions from '../../permissions';
-
-const CustomRow = props => {
-  const { row, formatMessage, onClick } = props;
-  const { created_at, reason, content } = row;
-  return (<tr>
-      <td>{ created_at }</td>
-      <td>{ reason }</td>
-      <td><em>{ content }</em></td>
-      <td style={{ textAlign: 'right' }}><Button
-        onClick={onClick}
-        color="secondary"
-        icon={<FontAwesomeIcon icon={faCheck} />} 
-        label={formatMessage({ id: `${pluginId}.popup.reports.item.button` })}
-      /></td>
-    </tr>);
-}
-
-const AbuseReportsPopUp = ({ isOpen, reports, comment, blocked, blockedThread, onBlockClick, onBlockThreadClick, onClose, onAbuseReportResolveClick }) => {
-
-  const { formatMessage } = useGlobalContext();
-
-  const resolveReportReason = reason => formatMessage({ id: `${pluginId}.popup.reports.item.reason.${reason.toLowerCase()}`});
-
-  const headers = [
-    {
-      name: formatMessage({ id: `${pluginId}.popup.reports.item.header.date` }),
-      value: 'created_at',
-    },
-    {
-      name: formatMessage({ id: `${pluginId}.popup.reports.item.header.reason` }),
-      value: 'reason',
-    },
-    {
-      name: formatMessage({ id: `${pluginId}.popup.reports.item.header.message` }),
-      value: 'content',
-    },
-    { value: 'actions' }
-  ];
-
-  const rows = reports.map(({ id, created_at, content, reason }) => ({
-    id,
-    created_at: moment(created_at).format('DD/MM/YYYY, HH:mm'),
-    reason: resolveReportReason(reason),
-    content,
-  }));
-  
-  return (
-    <CheckPermissions permissions={pluginPermissions.moderateReports}>
-      <Modal isOpen={isOpen} onToggle={onClose}>
-        <HeaderModal>
-          <section>
-            <HeaderModalTitle>
-              <FormattedMessage id={`${pluginId}.popup.reports.header`} />
-            </HeaderModalTitle>
-          </section>
-        </HeaderModal>
-        <ModalForm>
-          <ModalBody>
-            <section style={{ width: '100%' }}>
-              <ItemPreviewContainer>
-                <ItemDetails root={true} {...comment} />
-              </ItemPreviewContainer>
-              { isEmpty(reports) && (
-                <EmptyView>
-                  <FontAwesomeIcon icon={faSmile} size="5x" />
-                  <FormattedMessage id={`${pluginId}.popup.reports.empty`} />
-                </EmptyView>
-              ) }
-              { !isEmpty(reports) && (<TableContainer>
-                  <Table
-                  customRow={props => (<CustomRow {...props} formatMessage={formatMessage} onClick={(e) => onAbuseReportResolveClick(e, props.row.id)} />)}
-                  headers={headers}
-                  rows={rows}
-                />
-              </TableContainer>)}
-            </section>
-          </ModalBody>
-        </ModalForm>
-        { !isEmpty(reports) && !blockedThread && !blocked && (<ModalFooter>
-          <section>
-            <label>
-              <FormattedMessage id={`${pluginId}.popup.reports.footer.actions`} />
-            </label>
-            { !blockedThread && (<ButtonModal
-              onClick={e => onBlockClick(comment.id)}
-              isSecondary
-              message={`${pluginId}.list.item.moderation.button.comment.hide`} />)}
-            <ButtonModal 
-              onClick={e => onBlockThreadClick(comment.id)}
-              isSecondary
-              message={`${pluginId}.list.item.moderation.button.thread.hide`} />
-          </section>
-        </ModalFooter>)}
-      </Modal>
-    </CheckPermissions>
-  );
-}
-
-AbuseReportsPopUp.propTypes = {
-  blocked: PropTypes.bool,
-  blockedThread: PropTypes.bool,
-  reports: PropTypes.array,
-  comment: PropTypes.object.isRequired,
-  onBlockClick: PropTypes.func.isRequired,
-  onBlockThreadClick: PropTypes.func.isRequired,
-  onAbuseReportResolveClick: PropTypes.func.isRequired,
-  isOpen: PropTypes.bool,
-  onClose: PropTypes.func.isRequired,
-};
-
-export default AbuseReportsPopUp;

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

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const Container = styled.div`
-  padding: 0 30px;
-`;
-
-export default Container;

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

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-
-const EmptyView = styled.div`
-  display: flex;
-  flex-grow: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-left: 2rem;
-  padding-right: 2rem;
-  padding-bottom: ${props => props.fixPosition ? '8rem' : 0};
-
-  font-size: 2rem;
-  font-weight: 600;
-  color: ${colors.leftMenu.grey};
-  text-align: center;
-
-  svg {
-    margin-bottom: 1rem;
-  }
-`;
-
-export default EmptyView;

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

@@ -1,151 +0,0 @@
-import React, { useMemo } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Collapse } from 'reactstrap';
-import { Select } from '@buffetjs/core';
-import { map, noop, startCase } from 'lodash';
-
-import { FilterButton, getFilterType } from 'strapi-helper-plugin';
-
-import { AddFilterCta, Container, FilterIcon, FiltersWrapper, InputWrapper, styles, Wrapper } from './index.styled';
-import useDataManager from '../../hooks/useDataManager';
-import { isEntityFilter, isMatch } from './utils';
-
-const allowedAttributes = ['Related to'];
-
-const Filters = ({
-  contentsTypes,
-  isLoadingContentsTypes,
-  isOpenFilter,
-  onToggleOpen,
-  onRemoveFilter,
-  onChangeFilter,
-  filters,
-  isLoadingEntries,
-  availableEntriesMap,
-}) => {
-  const filtersOptions = getFilterType();
-  const { search } = useDataManager();
-
-  const searchFilters = useMemo(
-    () => (search.filters.reduce(
-        (acc, current) => ({ ...acc, [current.name]: { ...current, contentType: filters?.related?.value } }),
-        {})
-    ),
-    [search.filters],
-  );
-
-  const contentsTypesOptions = useMemo(
-    () => [{ key: '', value: '' }, ...(contentsTypes || []).map(_ => ({ ..._, key: startCase(_.key) }))],
-    [contentsTypes],
-  );
-  const availableEntriesOptions = useMemo(
-    () => [{ key: '', value: '' }, ...(availableEntriesMap[filters?.related?.value] || [])],
-    [availableEntriesMap],
-  );
-
-  if (isLoadingContentsTypes) {
-    return null;
-  }
-  return (
-    <>
-      <Collapse isOpen={isOpenFilter}>
-        <Container>
-          <form>
-            <Wrapper>
-              <FiltersWrapper borderLeft={filters.related.value}>
-                <InputWrapper>
-                  <Select
-                    disabled
-                    options={allowedAttributes}
-                    onChange={noop}
-                    name='name'
-                    value={filters.related.name}
-                    style={styles.select}
-                  />
-                  <Select
-                    disabled
-                    name='filter'
-                    onChange={noop}
-                    value={filters.related.filter}
-                    options={
-                      filtersOptions.map(({ id, value }) => (
-                        <FormattedMessage key={id} id={id}>
-                          {msg => <option value={value}>{msg}</option>}
-                        </FormattedMessage>
-                      ))
-                    }
-                    style={styles.selectMiddle}
-                  />
-                  <Select
-                    name="related-value"
-                    onChange={onChangeFilter}
-                    value={filters.related.value}
-                    options={
-                      contentsTypesOptions
-                        .map(({ key, value }) => (
-                          <option key={value} value={value}>
-                            {key}
-                          </option>
-                        ))
-                    }
-                    style={styles.select}
-                  />
-                  {
-                    filters.related.value && !isLoadingEntries && (
-                      <Select
-                        name="entity-value"
-                        options={
-                          availableEntriesOptions.map(({ key, value }) => (
-                            <option key={key} value={value}>
-                              {key}
-                            </option>
-                          ))
-                        }
-                        value={filters?.entity?.value}
-                        onChange={onChangeFilter}
-                        style={styles.select}
-                      />
-                    )
-                  }
-                </InputWrapper>
-              </FiltersWrapper>
-            </Wrapper>
-          </form>
-        </Container>
-      </Collapse>
-      <div className="container-fluid">
-        <div className="row">
-          <AddFilterCta type="button" onClick={onToggleOpen}>
-            <FilterIcon />
-            <FormattedMessage id="app.utils.filters" />
-          </AddFilterCta>
-          {
-            !isLoadingEntries && map(
-              searchFilters,
-              (filter) => {
-                if (!filter.value) {
-                  return null;
-                }
-                const label = {
-                  ...filter,
-                  value: (isEntityFilter(filter.name)
-                    ? availableEntriesMap[filter.contentType] || []
-                    : contentsTypesOptions).find(isMatch(filter.value))?.key,
-                };
-                return (
-                  <FilterButton
-                    key={filter.name}
-                    onClick={onRemoveFilter(filter)}
-                    label={label}
-                    type="string"
-                  />
-                );
-              })
-          }
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default Filters;

package/admin/src/components/Filters/index.styled.js

@@ -1,82 +0,0 @@
-import styled from 'styled-components';
-import { Button, FilterIcon as Filter } from 'strapi-helper-plugin';
-
-export const FilterIcon = styled(Filter)`
-  padding: 0 !important;
-  margin: auto !important;
-  > g {
-    stroke: #282b2c;
-  }
-`;
-
-export const AddFilterCta = styled(Button)`
-  display: flex;
-  height: 30px;
-  margin-right: 10px;
-  padding: 0 10px;
-  text-align: center;
-  background-color: #ffffff;
-  border: 1px solid #e3e9f3;
-  border-radius: 2px;
-  line-height: 28px;
-  font-size: 13px;
-  font-weight: 500;
-  font-family: Lato;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-  &:hover {
-    background: #f7f8f8;
-  }
-  &:focus,
-  &:active {
-    outline: 0;
-  }
-  > span {
-    margin-left: 10px;
-  }
-`;
-
-export const Container = styled.div`
-  padding: 18px 30px 18px 0;
-`;
-
-export const Wrapper = styled.div`
-  margin-top: -6px;
-  > div {
-    padding-top: 2px;
-    &:not(:first-of-type) {
-      padding-top: 9px;
-      padding-bottom: 2px;
-      &:last-of-type:nth-of-type(even) {
-        padding-bottom: 11px;
-      }
-    }
-  }
-`;
-
-export const FiltersWrapper = styled.div`
-  min-height: 38px;
-  border-left: ${props => props.borderLeft && '3px solid #007EFF'};
-  padding-left: ${props => (props.borderLeft ? '10px' : '13px')};
-  margin-bottom: 0 !important;
-`;
-
-export const InputWrapper = styled.div`
-  display: flex;
-  input,
-  select {
-    margin: 0px 5px !important;
-  }
-`;
-export const styles = {
-  select: {
-    minWidth: '170px',
-    maxWidth: '200px',
-  },
-  selectMiddle: {
-    minWidth: '130px',
-    maxWidth: '200px',
-    marginLeft: '10px',
-    marginRight: '10px',
-  },
-};

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;