@craftercms/studio-ui/components/ExpiringDashlet/ExpiringDashlet.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import React, { useEffect } from 'react';
import DashletCard from '../DashletCard/DashletCard';
import { DashletEmptyMessage, getItemSkeleton, List, ListItem, ListSubheader } from '../DashletCard/dashletCommons';
import palette from '../../styles/palette';
import { FormattedMessage } from 'react-intl';
import Typography from '@mui/material/Typography';
import ListItemText from '@mui/material/ListItemText';
import { fetchExpired, fetchExpiring } from '../../services/dashboard';
import useSpreadState from '../../hooks/useSpreadState';
import useLocale from '../../hooks/useLocale';
import useActiveSiteId from '../../hooks/useActiveSiteId';
import { RefreshRounded } from '@mui/icons-material';
import IconButton from '@mui/material/IconButton';
import { asLocalizedDateTime } from '../../utils/datetime';
import Divider from '@mui/material/Divider';
import { forkJoin } from 'rxjs';
const renderExpiredItems = (items, locale) =>
  items.map((item, index) =>
    React.createElement(
      ListItem,
      { key: index },
      React.createElement(ListItemText, {
        primary: item.itemName,
        secondary: React.createElement(
          Typography,
          { color: 'text.error', variant: 'body2' },
          React.createElement(FormattedMessage, {
            id: 'expiringDashlet.expiredOn',
            defaultMessage: 'Expiration on {date}',
            values: {
              date: asLocalizedDateTime(item.expireDateTime, locale.localeCode, locale.dateTimeFormatOptions)
            }
          })
        )
      })
    )
  );
export function ExpiringDashlet(props) {
  const { borderLeftColor = palette.purple.tint, days = 30 } = props;
  const site = useActiveSiteId();
  const locale = useLocale();
  const [state, setState] = useSpreadState({
    expiring: null,
    expired: null,
    refresh: 0,
    loading: false
  });
  const onRefresh = () => setState({ refresh: ++state.refresh });
  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const foo = state.refresh + 1;
    const oneDay = 8.64e7;
    const now = new Date();
    setState({ loading: true, expiring: null, expired: null });
    forkJoin({
      expiring: fetchExpiring(site, {
        dateFrom: now.toISOString(),
        dateTo: new Date(now.getTime() + oneDay * days).toISOString()
      }),
      expired: fetchExpired(site, { limit: 10 })
    }).subscribe(({ expiring, expired }) => {
      setState({ expiring, expired, loading: false });
    });
  }, [setState, site, days, state.refresh]);
  return React.createElement(
    DashletCard,
    Object.assign({}, props, {
      borderLeftColor: borderLeftColor,
      title: React.createElement(FormattedMessage, { id: 'words.expiring', defaultMessage: 'Expiring' }),
      headerAction: React.createElement(IconButton, { onClick: onRefresh }, React.createElement(RefreshRounded, null))
    }),
    state.loading &&
      React.createElement(List, null, getItemSkeleton({ numOfItems: 5, showAvatar: false, showCheckbox: false })),
    state.expired &&
      (state.expired.length === 0
        ? React.createElement(
            DashletEmptyMessage,
            null,
            React.createElement(FormattedMessage, {
              id: 'expiringDashlet.noExpiredItems',
              defaultMessage: 'There are no expired items to display at this time'
            })
          )
        : React.createElement(
            List,
            {
              subheader: React.createElement(
                ListSubheader,
                null,
                React.createElement(FormattedMessage, { id: 'words.expired', defaultMessage: 'Expired' })
              )
            },
            renderExpiredItems(state.expired, locale)
          )),
    React.createElement(Divider, { sx: { mt: 1, mb: 1 } }),
    state.expiring &&
      (state.expiring.length === 0
        ? React.createElement(
            DashletEmptyMessage,
            { sx: { mt: 0 } },
            React.createElement(FormattedMessage, {
              id: 'expiringDashlet.noExpiringItems',
              defaultMessage: 'There are no items expiring in the next {days} days',
              values: { days }
            })
          )
        : React.createElement(
            List,
            {
              subheader: React.createElement(
                ListSubheader,
                null,
                React.createElement(FormattedMessage, {
                  id: 'expiringDashlet.expiringNextNDays',
                  defaultMessage: 'Expiring (next {days} days)',
                  values: { days }
                })
              )
            },
            renderExpiredItems(state.expiring, locale)
          ))
  );
}
export default ExpiringDashlet;