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

package/admin/src/containers/DetailsView/Wrapper.js

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from 'strapi-helper-plugin';
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background-color: ${colors.leftMenu.mediumGrey};
-  padding-top: 1.8rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-
-  overflow-x: hidden;
-  overflow-y: auto;
-`;
-
-export default Wrapper;

package/admin/src/containers/DetailsView/index.js

@@ -1,106 +0,0 @@
-/*
- *
- * DetailsView
- *
- */
-
-import React from 'react';
-import { useHistory } from 'react-router-dom';
-import { FormattedMessage } from 'react-intl';
-import { isNil } from 'lodash';
-import { useGlobalContext, LoadingIndicatorPage } from 'strapi-helper-plugin';
-import { Header } from '@buffetjs/custom';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faComments } from '@fortawesome/free-solid-svg-icons';
-
-import Wrapper from './Wrapper';
-import ItemDetails from '../../components/ItemDetails';
-import CardWrapper from '../../components/ItemDetails/CardWrapper';
-import CardLevelWrapper from '../../components/ItemDetails/CardLevelWrapper';
-import EmptyView from '../../components/EmptyView';
-
-import pluginId from '../../pluginId';
-import getTradId from '../../utils/getTradId';
-import getTrad from '../../utils/getTrad';
-
-import useDataManager from '../../hooks/useDataManager';
-
-const DetailsView = () => {
-  const {
-    activeItem,
-    isLoadingForDetailsDataToBeSet,
-    blockComment,
-    blockCommentThread,
-    resolveAbuseReport,
-    approveComment,
-    rejectComment,
-  } = useDataManager();
-
-  const { formatMessage } = useGlobalContext();
-  const { push } = useHistory();
-
-  const onCommentClick = (e, id) => {
-    e.preventDefault();
-    e.stopPropagation();
-    push(`/plugins/${pluginId}/display/${id}`)
-  }
-
-  const renderCommentsTree = (selected, items) => {
-    return (<CardLevelWrapper>
-        {
-          items.map((item, n) => {
-            const active = item.id === selected.id;
-            const threadsCount = item.children && item.children.length;
-            const hasThreads = threadsCount > 0;
-            const clickable = !active && hasThreads && !isNil(selected.threadOf);
-            return (<ItemDetails
-              key={`list-item-details-${item.id || n}`}
-              {...item}
-              active={active}
-              root={selected.threadOf === null}
-              clickable={clickable}
-              threadsCount={threadsCount}
-              onAbuseReportResolve={resolveAbuseReport}
-              onBlockClick={blockComment}
-              onBlockThreadClick={blockCommentThread}
-              onClick={e => onCommentClick(e, hasThreads ? item.children[0].id : item.id)}
-              onApproveCommentClick={approveComment}
-              onRejectCommentClick={rejectComment}
-              />)
-          })
-        }
-      </CardLevelWrapper>)
-  }
-
-  const { selected, level } = activeItem || {};
-
-  return (
-    <Wrapper className="col-md-8">
-      {isLoadingForDetailsDataToBeSet && <LoadingIndicatorPage />}
-      {!isLoadingForDetailsDataToBeSet && !activeItem && (<EmptyView fixPosition>
-          <FontAwesomeIcon icon={faComments} size="5x" />
-          <FormattedMessage id={getTrad('moderation.content.empty')} />
-        </EmptyView>)}
-      {activeItem && (<>
-        {selected.threadOf && (<CardLevelWrapper>
-            <ItemDetails
-              {...selected.threadOf}
-              clickable={true}
-              root={true}
-              onAbuseReportResolve={resolveAbuseReport}
-              onClick={e => onCommentClick(e, selected.threadOf.id)}
-              onApproveCommentClick={approveComment}
-              onRejectCommentClick={rejectComment}
-            />
-            <CardWrapper root={true}>
-              {renderCommentsTree(selected, level)}
-            </CardWrapper>
-          </CardLevelWrapper>)}
-        {!selected.threadOf && renderCommentsTree(selected, level)}
-      </>)}
-    </Wrapper>
-  );
-};
-
-export default DetailsView;

package/admin/src/containers/ListView/FadedWrapper.js

@@ -1,42 +0,0 @@
-import styled from 'styled-components';
-
-import { colors, sizes } from 'strapi-helper-plugin';
-
-const FadedWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0;
-  margin: ${-2*sizes.margin}px;
-
-  position: relative;
-  z-index: 0;
-
-  overflow: hidden;
-
-  &:before,
-  &:after {
-    display: block;
-    content: '';
-    height: ${4*sizes.margin}px;
-
-    position: absolute;
-    left: 0;
-    right: 0;
-    z-index: 1;
-
-    background: #ffffff;
-  }
-
-  &:before {
-    top: 0;
-    background: linear-gradient(180deg, rgba(250,250,251,1) 0%, rgba(250,250,251,0) 100%);
-  }
-
-  &:after {
-    bottom: 0;
-    background: linear-gradient(0deg, rgba(250,250,251,1) 0%, rgba(250,250,251,0) 100%);
-  }
-`;
-
-export default FadedWrapper;

package/admin/src/containers/ListView/Footer.js

@@ -1,53 +0,0 @@
-import React, { memo } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { GlobalPagination, InputSelect, sizes } from 'strapi-helper-plugin';
-import useDataManager from '../../hooks/useDataManager';
-import { FooterWrapper, SelectWrapper, Label } from './components';
-
-function Footer() {
-  const {
-    search: { _limit, _page },
-    itemsTotal,
-    handleChangeParams
-  } = useDataManager();
-
-  return (
-    <FooterWrapper className="row">
-      <div className="col-6">
-        <SelectWrapper style={{ marginBottom: `${2*sizes.margin}px` }}>
-          <InputSelect
-            style={{ width: '75px', height: '32px', marginTop: '-1px' }}
-            name="_limit"
-            onChange={handleChangeParams}
-            selectOptions={['10', '20', '50', '100']}
-            value={_limit}
-          />
-          <Label htmlFor="_limit" style={{
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            display: 'inline-block',
-            whiteSpace: 'nowrap'
-          }}>
-            <FormattedMessage id="components.PageFooter.select" />
-          </Label>
-        </SelectWrapper>
-      </div>
-      <div className="col-6">
-        <GlobalPagination
-          style={{ marginBottom: `${2*sizes.margin}px` }}
-          count={itemsTotal}
-          onChangeParams={({ target: { value } }) => {
-            handleChangeParams({ target: { name: '_page', value } });
-          }}
-          params={{
-            currentPage: parseInt(_page, 10),
-            _limit: parseInt(_limit, 10),
-            _page: parseInt(_page, 10),
-          }}
-        />
-      </div>
-    </FooterWrapper>
-  );
-}
-
-export default memo(Footer);

package/admin/src/containers/ListView/Wrapper.js

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-import { sizes } from 'strapi-helper-plugin';
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: calc(100vh - ${sizes.header.height} - 15rem);
-  min-height: calc(100vh - ${sizes.header.height} - 15rem);
-  max-height: calc(100vh - ${sizes.header.height});
-  padding-top: 1.8rem;
-  padding-left: 2rem;
-  padding-right: 2rem;
-`;
-
-export default Wrapper;

package/admin/src/containers/ListView/components.js

@@ -1,138 +0,0 @@
-import styled from 'styled-components';
-import { Button, FilterIcon as Filter } from 'strapi-helper-plugin';
-import RemoveIcon from '../../assets/images/icon-cross-blue.svg';
-
-const Wrapper = styled.div`
-  padding-top: 1px;
-`;
-
-const FilterIcon = styled(Filter)`
-  padding: 0 !important;
-  margin: auto !important;
-  > g {
-    stroke: #282b2c;
-  }
-`;
-
-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;
-  }
-`;
-
-const Img = styled.img`
-  height: 7px;
-  margin: auto;
-  margin-right: 0px;
-  font-size: 12px;
-`;
-
-const FooterWrapper = styled.div`
-  padding-top: 3rem;
-`;
-
-const Label = styled.label`
-  display: inline-block;
-  height: 32px;
-  margin-left: 10px;
-  line-height: 32px;
-  color: #787e8f;
-  font-size: 13px;
-  font-style: italic;
-`;
-
-const SelectWrapper = styled.div`
-  display: flex;
-`;
-
-const FilterWrapper = styled.div`
-  display: inline-block;
-  height: 30px;
-  margin-bottom: 6px;
-  margin-right: 10px;
-  padding: 0 10px;
-  background: rgba(0, 126, 255, 0.08);
-  border: 1px solid rgba(0, 126, 255, 0.24);
-  border-radius: 2px;
-  line-height: 28px;
-  color: #007eff;
-  font-size: 13px;
-
-  > span {
-    display: inline-block;
-    margin-top: -1px;
-  }
-
-  > span:nth-child(2) {
-    font-weight: 700;
-  }
-
-  > span:nth-child(3) {
-    cursor: pointer;
-  }
-
-  -webkit-font-smoothing: antialiased;
-`;
-
-const Separator = styled.span`
-  height: 30px;
-  margin-left: 10px;
-  margin-right: 10px;
-  line-height: 30px;
-  &:after {
-    content: '';
-    height: 15px;
-    border-left: 1px solid #007eff;
-    opacity: 0.1;
-  }
-`;
-
-const Remove = styled.span`
-  height: 28px;
-  cursor: pointer;
-  vertical-align: middle;
-
-  &:after {
-    display: inline-block;
-    content: '';
-    width: 8px;
-    height: 8px;
-    margin: auto;
-    margin-top: -3px;
-    background-image: url(${RemoveIcon});
-  }
-`;
-
-export {
-  AddFilterCta,
-  FilterIcon,
-  FooterWrapper,
-  Img,
-  Label,
-  SelectWrapper,
-  FilterWrapper,
-  Separator,
-  Remove,
-  Wrapper,
-};

package/admin/src/containers/ListView/index.js

@@ -1,45 +0,0 @@
-/*
- *
- * ListView
- *
- */
-
-import React from 'react';
-import { LoadingIndicatorPage } from 'strapi-helper-plugin';
-import { FormattedMessage } from 'react-intl';
-import { isEmpty } from 'lodash';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
-
-import Footer from './Footer';
-import Wrapper from './Wrapper';
-import FadedWrapper from './FadedWrapper';
-
-import List from '../../components/List';
-import EmptyView from '../../components/EmptyView';
-
-import useDataManager from '../../hooks/useDataManager';
-
-import getTrad from '../../utils/getTrad';
-
-const ListView = ({ relatedContentTypes }) => {
-  const { items, isLoadingForDataToBeSet } = useDataManager();
-
-  return (
-    <Wrapper className="col-md-4">
-      {isLoadingForDataToBeSet && <LoadingIndicatorPage />}
-      <FadedWrapper>
-        {isEmpty(items) && (
-          <EmptyView>
-            <FontAwesomeIcon icon={faSearch} size="5x" />
-            <FormattedMessage id={getTrad('list.content.empty')} />
-          </EmptyView>
-        )}
-        {!isEmpty(items) && <List items={[...items]} relatedContentTypes={relatedContentTypes} />}
-      </FadedWrapper>
-      <Footer />
-    </Wrapper>
-  );
-};
-
-export default ListView;

package/admin/src/containers/Panel/actions.js

@@ -1,5 +0,0 @@
-export const GET_CONFIG = 'GET_CONFIG';
-export const GET_CONFIG_SUCCESS = 'GET_CONFIG_SUCCESS';
-
-export const GET_CONTENT_LIST_CONTENT_TYPE = 'GET_CONTENT_LIST_CONTENT_TYPE';
-export const GET_CONTENT_LIST_CONTENT_TYPE_SUCCEEDED = 'GET_CONTENT_LIST_CONTENT_TYPE_SUCCEEDED'

package/admin/src/containers/Panel/index.js

@@ -1,191 +0,0 @@
-/*
- *
- * CommentsPanel
- *
- */
-
-import React, { memo, useEffect, useReducer, useState } from 'react';
-import { useHistory } from 'react-router-dom';
-import { generateSearchFromFilters, PluginHeader, request, useGlobalContext } from 'strapi-helper-plugin';
-import { camelCase, get, isEmpty } from 'lodash';
-
-import ListView from '../ListView';
-import DetailsView from '../DetailsView';
-import Filters from '../../components/Filters';
-import { initFilters, isRelatedFilter } from '../../components/Filters/utils';
-import getTradId from '../../utils/getTradId';
-import useDataManager from '../../hooks/useDataManager';
-import { Container } from './index.styled';
-import {
-  GET_CONTENT_LIST_CONTENT_TYPE,
-  GET_CONTENT_LIST_CONTENT_TYPE_SUCCEEDED,
-  GET_CONFIG,
-  GET_CONFIG_SUCCESS,
-} from './actions';
-import pluginId from '../../pluginId';
-import reducer, { initialState } from './reducer';
-import getTrad from '../../utils/getTrad';
-
-const getContentTypes = async (dispatch) => {
-  try {
-    dispatch({ type: GET_CONFIG });
-    const { contentsTypes , relatedContentTypes } = await request(`/${pluginId}/moderation/config`, { method: 'GET' });
-    dispatch({ type: GET_CONFIG_SUCCESS, contentsTypes, relatedContentTypes });
-  } catch (err) {
-    console.log('err', err);
-  }
-};
-
-const fetchContentTypeList = async (dispatch, contentTypeName, prev) => {
-  try {
-    dispatch({ type: GET_CONTENT_LIST_CONTENT_TYPE });
-    if (contentTypeName) {
-      const { list } = await request(
-        `/${pluginId}/moderation/contents-types/${contentTypeName}`,
-      );
-      dispatch({
-        type: GET_CONTENT_LIST_CONTENT_TYPE_SUCCEEDED,
-        payload: {
-          ...prev,
-          [contentTypeName]: list,
-        },
-      });
-    }
-  } catch (err) {
-    console.log('err', err);
-  }
-};
-
-const Panel = () => {
-  const [reducerState, dispatch] = useReducer(reducer, initialState);
-  const {
-    contentsTypes,
-    relatedContentTypes,
-    isLoadingContentsTypes,
-    isLoadingEntries,
-    availableEntriesMap,
-  } = reducerState.toJS();
-  const { formatMessage } = useGlobalContext();
-  const { getSearchParams, search, items } = useDataManager();
-  const newItemsCount = items.filter(_ => _.isNew).length;
-
-  const { push } = useHistory();
-
-  const { filters: queryFilters } = getSearchParams();
-  const [filters, setFilters] = useState(initFilters(queryFilters));
-
-  const [isOpenFilter, setIsOpenFilter] = useState(false);
-
-  useEffect(
-    () => {
-      getContentTypes(dispatch);
-    },
-    [dispatch],
-  );
-
-  useEffect(() => {
-    fetchContentTypeList(dispatch, get(filters, 'related.value'), availableEntriesMap || {});
-  }, [filters, dispatch]);
-
-  const onToggleOpen = () => {
-    if (isEmpty(filters)) {
-      setFilters(initFilters([]));
-    }
-    setIsOpenFilter(prevState => !prevState);
-  };
-  const onClose = () => setIsOpenFilter(false);
-
-  const onRemoveFilter = ({ name }) => () => {
-    onChangeFilter({ target: { name: `${name}.value`, value: '' } });
-    onSubmit(isRelatedFilter(name) ? [name, 'entity'] : [name]);
-  };
-
-  const onChangeFilter = ({ target: { name, value } }) => {
-    setFilters(prevState => {
-      const [filterName, property] = name.split('-').map(camelCase);
-      const filter = { ...(prevState[camelCase(filterName)] || {}) };
-      if (filter) {
-        if (isRelatedFilter(filterName) && prevState.entity) {
-          prevState.entity.prevValue = prevState.entity.value;
-          prevState.entity.value = '';
-        }
-        filter[property] = value;
-        return { ...prevState, [camelCase(filterName)]: filter };
-      }
-      return { ...prevState };
-    });
-  };
-
-  const onSubmit = (ignoreFilterNames = []) => {
-    const searchParams = getSearchParams();
-    searchParams.filters = Object
-      .values(filters)
-      .filter(({ value, name }) => !!value && !ignoreFilterNames.some(_ => _ === name));
-    const newSearchParams = generateSearchFromFilters(searchParams);
-    push({ search: newSearchParams });
-  };
-
-  const clearAll = () => {
-    const searchParams = getSearchParams();
-    searchParams.filters = [];
-    const newSearchParams = generateSearchFromFilters(searchParams);
-    setFilters(initFilters([]));
-    push({ search: newSearchParams });
-  };
-
-  const filterPickerActions = [
-    {
-      label: getTrad(`list.header.filters.clearAll`),
-      kind: 'secondary',
-      onClick: () => {
-        onClose();
-        clearAll();
-      },
-    },
-    {
-      label: getTrad(`list.header.filters.apply`),
-      kind: 'primary',
-      type: 'button',
-      onClick: () => {
-        onClose();
-        onSubmit();
-      },
-    },
-  ];
-
-  const isFilters = search.filters.length > 0;
-
-  return (
-    <>
-      <Container isOpenFilter={isOpenFilter}>
-        <PluginHeader
-          title={formatMessage(getTradId('list.header.title'))}
-          description={formatMessage(
-            getTradId(isFilters ? 'list.header.filters.message' : 'list.header.description'),
-            { count: isFilters ? items.length : newItemsCount })
-          }
-          actions={isOpenFilter ? filterPickerActions : []}
-        />
-        <Filters
-          contentsTypes={contentsTypes}
-          isLoadingContentsTypes={isLoadingContentsTypes}
-          isLoadingEntries={isLoadingEntries}
-          availableEntriesMap={availableEntriesMap}
-          filters={filters}
-          isOpenFilter={isOpenFilter}
-          onToggleOpen={onToggleOpen}
-          onChangeFilter={onChangeFilter}
-          onRemoveFilter={onRemoveFilter}
-        />
-      </Container>
-      <div className="container-fluid">
-        <div className="row">
-          <ListView relatedContentTypes={relatedContentTypes} />
-          <DetailsView />
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default memo(Panel);

package/admin/src/containers/Panel/index.styled.js

@@ -1,6 +0,0 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  padding: 2.5rem 30px 2.5rem 15px;
-  background-color: ${({ isOpenFilter }) => isOpenFilter ? 'white' : ''}
-`;

package/admin/src/containers/Panel/reducer.js

@@ -1,44 +0,0 @@
-import { fromJS, Set } from 'immutable';
-import {
-  GET_CONFIG,
-  GET_CONFIG_SUCCESS,
-  GET_CONTENT_LIST_CONTENT_TYPE,
-  GET_CONTENT_LIST_CONTENT_TYPE_SUCCEEDED,
-} from './actions';
-
-export const initialState = fromJS({
-  isLoadingContentsTypes: false,
-  isLoadingEntries: false,
-  contentsTypes: [],
-  relatedContentTypes: {},
-  availableEntriesMap: Set(),
-});
-
-const reducer = (state, action) => {
-  switch (action.type) {
-    case GET_CONFIG: {
-      return state
-        .update('isLoadingContentsTypes', () => true);
-    }
-    case GET_CONFIG_SUCCESS: {
-      return state
-        .update('isLoadingContentsTypes', () => false)
-        .update('contentsTypes', () => action.contentsTypes)
-        .update('relatedContentTypes', () => action.relatedContentTypes);
-    }
-    case GET_CONTENT_LIST_CONTENT_TYPE: {
-      return state
-        .update('isLoadingEntries', () => true)
-        .update('availableEntriesMap', () => ({}));
-    }
-    case GET_CONTENT_LIST_CONTENT_TYPE_SUCCEEDED: {
-      return state
-        .update('isLoadingEntries', () => false)
-        .update('availableEntriesMap', () => action.payload);
-    }
-    default:
-      return state;
-  }
-};
-
-export default reducer;

package/admin/src/contexts/DataManagerContext.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const DataManagerContext = createContext();
-
-export default DataManagerContext;

package/admin/src/hooks/useDataManager.js

@@ -1,6 +0,0 @@
-import { useContext } from 'react';
-import DataManagerContext from '../contexts/DataManagerContext';
-
-const useDataManager = () => useContext(DataManagerContext);
-
-export default useDataManager;

package/admin/src/lifecycles.js

@@ -1,3 +0,0 @@
-function lifecycles() {}
-
-export default lifecycles;