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

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

@@ -1,332 +0,0 @@
-import React, { memo, useCallback, useEffect, useReducer, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { get } from 'lodash';
-import {
-  request,
-  storeData,
-  LoadingIndicatorPage,
-  useGlobalContext,
-  generateFiltersFromSearch,
-  generateSearchFromFilters,
-  generateSearchFromObject,
-  getQueryParameters,
-} from 'strapi-helper-plugin';
-import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
-import moment from 'moment';
-import DataManagerContext from '../../contexts/DataManagerContext';
-import Container from '../../components/Container';
-import Search from '../../components/Search';
-import getTrad from '../../utils/getTrad';
-import pluginId from '../../pluginId';
-import init from './init';
-import reducer, { initialState } from './reducer';
-import {
-  BLOCK_COMMENT,
-  BLOCK_COMMENT_SUCCESS,
-  BLOCK_COMMENT_THREAD,
-  BLOCK_COMMENT_THREAD_SUCCESS,
-  GET_DATA,
-  GET_DATA_SUCCEEDED,
-  GET_SINGLE_DATA,
-  GET_SINGLE_DATA_SUCCEEDED,
-  RESOLVE_ABUSE_REPORT,
-  RESOLVE_ABUSE_REPORT_SUCCESS,
-  APPROVE_COMMENT,
-  APPROVE_COMMENT_SUCCESS,
-  REJECT_COMMENT,
-  REJECT_COMMENT_SUCCESS,
-} from './actions';
-
-const RECENTLY_VIEVEW_KEY = `${pluginId}-recently-viewed`;
-
-const getCurrent = async (dispatch, searchParams = {}, recentlyViewed = undefined) => {
-  try {
-    const generatedSearch = generateSearchFromObject(searchParams);
-    dispatch({
-      type: GET_DATA,
-    });
-    const result = await request(`/${pluginId}/moderation/all?${generatedSearch}`, {
-      method: 'GET',
-    });
-    const { items, total: itemsTotal } = result;
-
-    dispatch({
-      type: GET_DATA_SUCCEEDED,
-      items,
-      itemsTotal,
-      recentlyViewed,
-    });
-  } catch (err) {
-    console.error({ err });
-    strapi.notification.error('notification.error');
-  }
-};
-
-const getDetails = async (dispatch, activeId) => {
-  try {
-    if (activeId) {
-      dispatch({
-        type: GET_SINGLE_DATA,
-      });
-
-      const activeItem = await request(`/${pluginId}/moderation/single/${activeId}`, {
-        method: 'GET',
-      });
-
-      dispatch({
-        type: GET_SINGLE_DATA_SUCCEEDED,
-        activeItem,
-      });
-    }
-  } catch (err) {
-    console.error({ err });
-    strapi.notification.error('notification.error');
-  }
-};
-
-const DataManagerProvider = ({ children }) => {
-  const [reducerState, dispatch] = useReducer(reducer, initialState, init);
-  const {
-    autoReload,
-    currentEnvironment,
-    emitEvent,
-    formatMessage,
-  } = useGlobalContext();
-  const {
-    items,
-    itemsTotal,
-    activeItem,
-    isLoading,
-    isLoadingForDetailsDataToBeSet,
-    initialData,
-  } = reducerState.toJS();
-  const { pathname, search } = useLocation();
-  const { push } = useHistory();
-
-  const formatMessageRef = useRef();
-  formatMessageRef.current = formatMessage;
-
-  const isInDevelopmentMode = currentEnvironment === 'development' && autoReload;
-
-  const detailsViewMatch = useRouteMatch(`/plugins/${pluginId}/display/:id`);
-  const activeId = get(detailsViewMatch, 'params.id', null);
-
-  useEffect(() => {
-    getCurrent(dispatch, getSearchParams(), moment(storeData.get(RECENTLY_VIEVEW_KEY) || undefined));
-    storeData.set(RECENTLY_VIEVEW_KEY, moment().toString());
-  }, [search, dispatch]);
-
-  useEffect(() => {
-    // We need to set the modifiedData after the data has been retrieved
-    // and also on pathname change
-    if (!isLoading) {
-      getDetails(dispatch, activeId);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading, pathname, dispatch, activeId]);
-
-  useEffect(() => {
-    if (currentEnvironment === 'development' && !autoReload) {
-      strapi.notification.info(
-        formatMessageRef.current({
-          id: getTrad('notification.info.autoreaload-disable'),
-        }),
-      );
-    }
-  }, [autoReload, currentEnvironment]);
-
-  const blockComment = async (id) => {
-    try {
-      emitEvent('willBlockComment');
-      dispatch({ type: BLOCK_COMMENT });
-
-      await request(`/${pluginId}/moderation/block/${id}`, {
-        method: 'PUT',
-      });
-
-      getCurrent(dispatch, getSearchParams());
-      getDetails(dispatch, activeId);
-
-      emitEvent('didBlockComment');
-      dispatch({ type: BLOCK_COMMENT_SUCCESS });
-
-      strapi.notification.success(`${pluginId}.notification.comment.visibility`);
-
-    } catch (err) {
-      emitEvent('didNotBlockComment');
-      console.error({ err: err.response });
-      strapi.notification.error('notification.error');
-    }
-  };
-
-  const blockCommentThread = async (id) => {
-    try {
-      emitEvent('willBlockCommentThread');
-      dispatch({ type: BLOCK_COMMENT_THREAD });
-
-      await request(`/${pluginId}/moderation/block-thread/${id}`, {
-        method: 'PUT',
-      });
-
-      getCurrent(dispatch, getSearchParams());
-      getDetails(dispatch, activeId);
-
-      emitEvent('didBlockCommentThread');
-      dispatch({ type: BLOCK_COMMENT_THREAD_SUCCESS });
-
-      strapi.notification.success(`${pluginId}.notification.thread.visibility`);
-
-    } catch (err) {
-      emitEvent('didNotBlockCommentThread');
-      console.error({ err: err.response });
-      strapi.notification.error('notification.error');
-    }
-  };
-
-  const resolveAbuseReport = async (id, commentId) => {
-    try {
-      emitEvent('willResolveAbuseReport');
-      dispatch({ type: RESOLVE_ABUSE_REPORT });
-
-      await request(`/${pluginId}/moderation/abuse-reports/${commentId}/resolve/${id}`, {
-        method: 'PATCH',
-      });
-
-      getCurrent(dispatch, getSearchParams());
-      getDetails(dispatch, activeId);
-
-      emitEvent('didResolveAbuseReport');
-      dispatch({ type: RESOLVE_ABUSE_REPORT_SUCCESS });
-
-      strapi.notification.success(`${pluginId}.notification.abuse-report.resolution`);
-
-    } catch (err) {
-      emitEvent('didNotResolveAbuseReport');
-      console.error({ err: err.response });
-      strapi.notification.error('notification.error');
-    }
-  };
-
-  const approveComment = async (id) => {
-    try {
-      dispatch({ type: APPROVE_COMMENT });
-      emitEvent('willApprove');
-
-      await request(`/${pluginId}/moderation/approve/${id}`, {
-        method: 'PUT',
-      });
-
-      getCurrent(dispatch, getSearchParams());
-      getDetails(dispatch, activeId);
-
-      dispatch({ type: APPROVE_COMMENT_SUCCESS });
-      emitEvent('didApprove');
-
-      strapi.notification.success(`${pluginId}.notification.comment.approval`);
-    } catch (err) {
-      console.error({ err: err.response });
-      strapi.notification.error('notification.error');
-      emitEvent('didNotApprove');
-    }
-  };
-
-  const rejectComment = async (id) => {
-    try {
-      dispatch({ type: REJECT_COMMENT });
-      emitEvent('willReject');
-
-      await request(`/${pluginId}/moderation/reject/${id}`, {
-        method: 'PUT',
-      });
-
-      getCurrent(dispatch, getSearchParams());
-      getDetails(dispatch, activeId);
-
-      dispatch({ type: REJECT_COMMENT_SUCCESS });
-      emitEvent('didReject');
-
-      strapi.notification.success(`${pluginId}.notification.comment.approval`);
-    } catch (err) {
-      console.error({ err: err.response });
-      strapi.notification.error('notification.error');
-      emitEvent('didNotReject');
-    }
-  };
-
-  const getSearchParams = useCallback(
-    (updatedParams = {}) => {
-      return {
-        _limit: getQueryParameters(search, '_limit') || 10,
-        _page: getQueryParameters(search, '_page') || 1,
-        _q: getQueryParameters(search, '_q') || '',
-        filters: generateFiltersFromSearch(search),
-        ...updatedParams,
-      };
-    },
-    [search],
-  );
-
-  const handleChangeParams = ({ target: { name, value } }) => {
-    const currentParams = getSearchParams();
-    const updatedParams = {
-      ...currentParams,
-      [name]: value,
-    };
-    const updatedSearch = getSearchParams({
-      ...updatedParams,
-      _start: name === '_q' ? 0 : updatedParams._start,
-      _page: name === '_q' ? 1 : updatedParams._page,
-    });
-    const newSearch = generateSearchFromFilters(updatedSearch);
-
-    if (name === '_limit') {
-      emitEvent('willChangeNumberOfEntriesPerPage');
-    }
-
-    push({ search: newSearch });
-  };
-
-  return (
-    <DataManagerContext.Provider
-      value={{
-        items,
-        itemsTotal,
-        search: getSearchParams(),
-        getSearchParams,
-        activeItem,
-        initialData,
-        isLoading,
-        isLoadingForDetailsDataToBeSet,
-        blockComment,
-        blockCommentThread,
-        resolveAbuseReport,
-        isInDevelopmentMode,
-        handleChangeParams,
-        approveComment,
-        rejectComment,
-      }}
-    >
-      {isLoading ? (
-        <LoadingIndicatorPage />
-      ) : (
-        <>
-          <Container>
-            <Search
-              changeParams={handleChangeParams}
-              initValue={getQueryParameters(search, '_q') || ''}
-              model="Comments"
-              value={getQueryParameters(search, '_q') || ''}
-            />
-          </Container>
-          {children}
-        </>
-      )}
-    </DataManagerContext.Provider>
-  );
-};
-
-DataManagerProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default memo(DataManagerProvider);

package/admin/src/containers/DataManagerProvider/init.js

@@ -1,5 +0,0 @@
-function init(initialState) {
-  return initialState;
-}
-
-export default init;

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

@@ -1,59 +0,0 @@
-import { fromJS } from 'immutable';
-import moment from 'moment';
-import {
-  BLOCK_COMMENT,
-  BLOCK_COMMENT_THREAD,
-  GET_DATA,
-  GET_DATA_SUCCEEDED,
-  GET_SINGLE_DATA,
-  GET_SINGLE_DATA_SUCCEEDED,
-  RELOAD_PLUGIN,
-} from './actions';
-
-const initialState = fromJS({
-  items: [],
-  itemsTotal: 0,
-  activeItem: undefined,
-  isLoading: true,
-  isLoadingForDataToBeSet: false,
-  isLoadingForDetailsDataToBeSet: false,
-});
-
-const reducer = (state, action) => {
-  switch (action.type) {
-    case GET_DATA: {
-      return state
-        .removeIn('items')
-        .update('isLoadingForDataToBeSet', () => true);
-    }
-    case GET_DATA_SUCCEEDED: {
-      return state
-        .update('items', () => fromJS(action.items.map(_ => ({
-          ..._,
-          isNew: moment(_.created_at).diff(moment(action.recentlyViewed), 'seconds') > 0,
-        }))))
-        .update('itemsTotal', () => fromJS(action.itemsTotal))
-        .update('isLoading', () => false)
-        .update('isLoadingForDataToBeSet', () => false);
-    }
-    case GET_SINGLE_DATA:
-    case BLOCK_COMMENT:
-    case BLOCK_COMMENT_THREAD: {
-      return state
-        .removeIn('activeItem')
-        .update('isLoadingForDetailsDataToBeSet', () => true);
-    }
-    case GET_SINGLE_DATA_SUCCEEDED: {
-      return state
-        .update('activeItem', () => fromJS(action.activeItem))
-        .update('isLoadingForDetailsDataToBeSet', () => false);
-    }
-    case RELOAD_PLUGIN:
-      return initialState;
-    default:
-      return state;
-  }
-};
-
-export default reducer;
-export { initialState };

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;