@plone/volto 18.0.0-alpha.41 → 18.0.0-alpha.43

package/src/components/manage/Controlpanels/Aliases.jsx

@@ -1,14 +1,12 @@
-/**
- * Moderate comments component.
- * @module components/manage/Controlpanels/Aliases
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { Link } from 'react-router-dom';
-import { getBaseUrl, getParentUrl, Helmet } from '@plone/volto/helpers';
+import { useState, useEffect, useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Link, useHistory, useLocation } from 'react-router-dom';
+import {
+  getBaseUrl,
+  getParentUrl,
+  Helmet,
+  usePrevious,
+} from '@plone/volto/helpers';
 import { removeAliases, addAliases, getAliases } from '@plone/volto/actions';
 import { createPortal } from 'react-dom';
 import {
@@ -25,9 +23,10 @@ import {
   Pagination,
   Menu,
 } from 'semantic-ui-react';
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import { DatetimeWidget } from '@plone/volto/components/manage/Widgets';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import DatetimeWidget from '@plone/volto/components/manage/Widgets/DatetimeWidget';
 import { Icon, Toolbar } from '@plone/volto/components';
+import { useClient } from '@plone/volto/hooks';
 
 import backSVG from '@plone/volto/icons/back.svg';
 import { map } from 'lodash';
@@ -61,627 +60,500 @@ const filterChoices = [
 
 const itemsPerPageChoices = [10, 25, 50, 'All'];
 
-/**
- * Aliases class.
- * @class Aliases
- * @extends Component
- */
-class Aliases extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    addAliases: PropTypes.func.isRequired,
-    getAliases: PropTypes.func.isRequired,
-    removeAliases: PropTypes.func.isRequired,
-  };
+const Aliases = (props) => {
+  const title = props;
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { pathname } = useLocation();
+  const history = useHistory();
 
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs Aliases
-   */
-  constructor(props) {
-    super(props);
-    this.state = {
-      isClient: false,
-      filterType: filterChoices[0],
-      createdBefore: null,
-      altUrlPath: '',
-      isAltUrlCorrect: false,
-      targetUrlPath: '',
-      isTargetUrlCorrect: false,
-      aliasesToRemove: [],
-      errorMessageAdd: '',
-      filterQuery: '',
-      aliases: [],
-      activePage: 1,
-      pages: '',
-      itemsPerPage: 10,
-    };
-  }
+  const aliases = useSelector((state) => state.aliases);
+  const [filterType, setFilterType] = useState(filterChoices[0]);
+  const [createdBefore, setCreatedBefore] = useState(null);
+  const [altUrlPath, setAltUrlPath] = useState('');
+  const [isAltUrlCorrect, setIsAltUrlCorrect] = useState(false);
+  const [targetUrlPath, setTargetUrlPath] = useState('');
+  const [aliasesToRemove, setAliasesToRemove] = useState([]);
+  const [errorMessageAdd, setErrorMessageAdd] = useState('');
+  const [filterQuery, setFilterQuery] = useState('');
+  const [activePage, setActivePage] = useState(1);
+  const [pages, setPages] = useState('');
+  const [itemsPerPage, setItemsPerPage] = useState(10);
+  const isClient = useClient();
 
-  /**
-   * Component did mount
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    const { filterQuery, filterType, createdBefore, itemsPerPage } = this.state;
-    this.setState({ isClient: true });
-    this.props.getAliases(getBaseUrl(this.props.pathname), {
-      query: filterQuery,
-      manual: filterType.value,
-      datetime: createdBefore,
-      batchSize: itemsPerPage,
-    });
-  }
+  const prevaliasesitemstotal = usePrevious(aliases.items_total);
+  const previtemsPerPage = usePrevious(itemsPerPage);
+  const prevactivePage = usePrevious(activePage);
+  const prevalturlpath = usePrevious(altUrlPath);
+  const prevtargetUrlPath = usePrevious(targetUrlPath);
+  const prevaliasesaddloading = usePrevious(aliases.add.loading);
+  const prevaliasesremoveloading = usePrevious(aliases.remove.loading);
 
-  /**
-   * Component did mount
-   * @method componentDidUpdate
-   * @returns {undefined}
-   */
-  componentDidUpdate(prevProps, prevState) {
-    const { filterQuery, filterType, createdBefore, itemsPerPage } = this.state;
+  useEffect(() => {
     if (
-      prevProps.aliases.items_total !== this.props.aliases.items_total ||
-      prevState.itemsPerPage !== this.state.itemsPerPage
+      prevaliasesitemstotal !== aliases.items_total ||
+      previtemsPerPage !== itemsPerPage
     ) {
-      const pages = Math.ceil(
-        this.props.aliases.items_total / this.state.itemsPerPage,
-      );
+      const pages = Math.ceil(aliases.items_total / itemsPerPage);
 
       if (pages === 0 || isNaN(pages)) {
-        this.setState({ pages: '' });
+        setPages('');
       } else {
-        this.setState({ pages });
+        setPages(pages);
       }
     }
-    if (
-      prevState.activePage !== this.state.activePage ||
-      prevState.itemsPerPage !== this.state.itemsPerPage
-    ) {
-      this.props.getAliases(getBaseUrl(this.props.pathname), {
-        query: filterQuery,
-        manual: filterType.value,
-        datetime: createdBefore,
-        batchSize: itemsPerPage === 'All' ? 999999999999 : itemsPerPage,
-        batchStart: (this.state.activePage - 1) * this.state.itemsPerPage,
-      });
-    }
-    if (prevState.altUrlPath !== this.state.altUrlPath) {
-      if (this.state.altUrlPath.charAt(0) === '/') {
-        this.setState({ isAltUrlCorrect: true });
-      } else {
-        this.setState({ isAltUrlCorrect: false });
-      }
+    if (prevactivePage !== activePage || previtemsPerPage !== itemsPerPage) {
+      dispatch(
+        getAliases(getBaseUrl(pathname), {
+          query: filterQuery,
+          manual: filterType.value,
+          datetime: createdBefore,
+          batchSize: itemsPerPage === 'All' ? 999999999999 : itemsPerPage,
+          batchStart: (activePage - 1) * itemsPerPage,
+        }),
+      );
     }
-
-    if (prevState.targetUrlPath !== this.state.targetUrlPath) {
-      if (this.state.targetUrlPath.charAt(0) === '/') {
-        this.setState({ isTargetUrlCorrect: true });
+    if (prevalturlpath !== altUrlPath) {
+      if (altUrlPath.charAt(0) === '/') {
+        setIsAltUrlCorrect(true);
       } else {
-        this.setState({ isTargetUrlCorrect: false });
+        setIsAltUrlCorrect(false);
       }
     }
-  }
+  }, [
+    itemsPerPage,
+    pathname,
+    prevaliasesitemstotal,
+    aliases.items_total,
+    previtemsPerPage,
+    prevactivePage,
+    activePage,
+    prevalturlpath,
+    altUrlPath,
+    prevtargetUrlPath,
+    targetUrlPath,
+    dispatch,
+    filterQuery,
+    filterType.value,
+    createdBefore,
+  ]);
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.aliases.add.loading && !nextProps.aliases.add.loaded) {
-      if (nextProps.aliases.add.error) {
-        this.setState({
-          errorMessageAdd: nextProps.aliases.add.error.response.body.message,
-        });
+  useEffect(() => {
+    if (prevaliasesaddloading && !aliases.add.loaded) {
+      if (aliases.add.error) {
+        setErrorMessageAdd(aliases.add.error.response.body.message);
       }
     }
-    if (this.props.aliases.add.loading && nextProps.aliases.add.loaded) {
-      const { filterQuery, filterType, createdBefore, itemsPerPage } =
-        this.state;
-
-      this.props.getAliases(getBaseUrl(this.props.pathname), {
-        query: filterQuery,
-        manual: filterType.value,
-        datetime: createdBefore,
-        batchSize: itemsPerPage,
-      });
+    if (prevaliasesaddloading && aliases.add.loaded) {
+      dispatch(
+        getAliases(getBaseUrl(pathname), {
+          query: filterQuery,
+          manual: filterType.value,
+          datetime: createdBefore,
+          batchSize: itemsPerPage,
+        }),
+      );
       toast.success(
         <Toast
           success
-          title={this.props.intl.formatMessage(messages.success)}
-          content={this.props.intl.formatMessage(messages.successAdd)}
+          title={intl.formatMessage(messages.success)}
+          content={intl.formatMessage(messages.successAdd)}
         />,
       );
-      if (!nextProps.aliases.add.error) {
-        this.setState({
-          errorMessageAdd: '',
-        });
+      if (!aliases.add.error) {
+        setErrorMessageAdd('');
       }
     }
-    if (this.props.aliases.remove.loading && nextProps.aliases.remove.loaded) {
-      const { filterQuery, filterType, createdBefore, itemsPerPage } =
-        this.state;
-
-      this.props.getAliases(getBaseUrl(this.props.pathname), {
-        query: filterQuery,
-        manual: filterType.value,
-        datetime: createdBefore,
-        batchSize: itemsPerPage,
-      });
+    if (prevaliasesremoveloading && aliases.remove.loaded) {
+      dispatch(
+        getAliases(getBaseUrl(pathname), {
+          query: filterQuery,
+          manual: filterType.value,
+          datetime: createdBefore,
+          batchSize: itemsPerPage,
+        }),
+      );
     }
-  }
+  }, [
+    prevaliasesaddloading,
+    aliases.add.loaded,
+    aliases.add.error,
+    aliases.remove.loaded,
+    prevaliasesremoveloading,
+    dispatch,
+    pathname,
+    filterQuery,
+    filterType.value,
+    createdBefore,
+    itemsPerPage,
+    intl,
+  ]);
 
-  /**
-   * Back/Cancel handler
-   * @method onCancel
-   * @returns {undefined}
-   */
-  onCancel() {
-    this.props.history.push(getParentUrl(this.props.pathname));
-  }
+  const onCancel = () => {
+    history.push(getParentUrl(pathname));
+  };
 
-  /**
-   * Select filter type handler
-   * @method handleSelectFilterType
-   * @returns {undefined}
-   */
-  handleSelectFilterType(type) {
-    this.setState({ filterType: type });
-  }
+  const handleSelectFilterType = (type) => {
+    setFilterType(type);
+  };
 
-  /**
-   * Select filter type handler
-   * @method handleFilterQueryChange
-   * @returns {undefined}
-   */
-  handleFilterQueryChange(query) {
-    this.setState({ filterQuery: query });
-  }
+  const handleFilterQueryChange = (query) => {
+    setFilterQuery(query);
+  };
 
-  /**
-   * Select Creation date handler
-   * @method handleCreateDate
-   * @returns {undefined}
-   */
-  handleCreateDate(date) {
-    this.setState({ createdBefore: date });
-  }
+  const handleCreateDate = (date) => {
+    setCreatedBefore(date);
+  };
 
-  /**
-   * Select Creation date handler
-   * @method handleSubmitFilter
-   * @returns {undefined}
-   */
-  handleSubmitFilter() {
-    const { filterQuery, filterType, createdBefore, itemsPerPage } = this.state;
-    this.props.getAliases(getBaseUrl(this.props.pathname), {
-      query: filterQuery,
-      manual: filterType.value,
-      datetime: createdBefore,
-      batchSize: itemsPerPage,
-    });
-  }
+  const handleSubmitFilter = () => {
+    dispatch(
+      getAliases(getBaseUrl(pathname), {
+        query: filterQuery,
+        manual: filterType.value,
+        datetime: createdBefore,
+        batchSize: itemsPerPage,
+      }),
+    );
+  };
 
-  /**
-   * Alternative url handler
-   * @method handleAltUrlChange
-   * @returns {undefined}
-   */
-  handleAltUrlChange(url) {
-    this.setState({ altUrlPath: url });
-  }
+  const handleAltUrlChange = (url) => {
+    setAltUrlPath(url);
+  };
 
-  /**
-   * Target url handler
-   * @method handleTargetUrlChange
-   * @returns {undefined}
-   */
-  handleTargetUrlChange(url) {
-    this.setState({ targetUrlPath: url });
-  }
+  const handleTargetUrlChange = (url) => {
+    setTargetUrlPath(url);
+  };
 
-  /**
-   * New alias submit handler
-   * @method handleSubmitAlias
-   * @returns {undefined}
-   */
-  handleSubmitAlias() {
-    if (this.state.isAltUrlCorrect && this.state.isTargetUrlCorrect) {
-      this.props.addAliases('', {
-        items: [
-          {
-            path: this.state.altUrlPath,
-            'redirect-to': this.state.targetUrlPath,
-          },
-        ],
-      });
-      this.setState({ altUrlPath: '', targetUrlPath: '' });
+  const handleSubmitAlias = useCallback(() => {
+    if (isAltUrlCorrect) {
+      dispatch(
+        addAliases('', {
+          items: [
+            {
+              path: altUrlPath,
+              'redirect-to': targetUrlPath,
+            },
+          ],
+        }),
+      );
+      setAltUrlPath('');
+      setTargetUrlPath('');
     }
-  }
+  }, [isAltUrlCorrect, altUrlPath, targetUrlPath, dispatch]);
 
-  /**
-   * Check to-remove aliases handler
-   * @method handleSubmitAlias
-   * @returns {undefined}
-   */
-  handleCheckAlias(alias) {
-    const aliases = this.state.aliasesToRemove;
-    if (aliases.includes(alias)) {
-      const index = aliases.indexOf(alias);
+  const handleCheckAlias = (alias) => {
+    const aliasess = [...aliasesToRemove];
+    if (aliasess.includes(alias)) {
+      const index = aliasess.indexOf(alias);
       if (index > -1) {
-        let newAliasesArr = aliases;
+        let newAliasesArr = aliasess;
         newAliasesArr.splice(index, 1);
-        this.setState({ aliasesToRemove: newAliasesArr });
+        setAliasesToRemove(newAliasesArr);
       }
     } else {
-      this.setState({
-        aliasesToRemove: [...this.state.aliasesToRemove, alias],
-      });
+      setAliasesToRemove([...aliasesToRemove, alias]);
     }
-  }
-
-  /**
-   * Remove aliases handler
-   * @method handleRemoveAliases
-   * @returns {undefined}
-   */
-  handleRemoveAliases = () => {
-    const items = this.state.aliasesToRemove.map((a) => {
+  };
+  const handleRemoveAliases = () => {
+    const items = aliasesToRemove.map((a) => {
       return {
         path: a,
       };
     });
-    this.props.removeAliases('', {
-      items,
-    });
-    this.setState({ aliasesToRemove: [] });
+
+    dispatch(
+      removeAliases('', {
+        items,
+      }),
+    );
+    setAliasesToRemove([]);
   };
 
-  /**
-   * Pagination change handler
-   * @method handlePageChange
-   * @returns {undefined}
-   */
-  handlePageChange(e, { activePage }) {
-    this.setState({ activePage });
-  }
+  const handlePageChange = (e, { activePage }) => {
+    setActivePage(activePage);
+  };
 
-  /**
-   * Items per page change handler
-   * @method handleItemsPerPage
-   * @returns {undefined}
-   */
-  handleItemsPerPage(e, { value }) {
-    this.setState({ itemsPerPage: value, activePage: 1 });
-  }
+  const handleItemsPerPage = (e, { value }) => {
+    setItemsPerPage(value);
+    setActivePage(1);
+  };
 
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <div id="page-aliases">
-        <Helmet title={this.props.intl.formatMessage(messages.aliases)} />
-        <Container>
-          <article id="content">
-            <Segment.Group raised>
-              <Segment className="primary">
-                <FormattedMessage
-                  id="URL Management"
-                  defaultMessage="URL Management"
-                  values={{ title: <q>{this.props.title}</q> }}
-                />
-              </Segment>
-              <Form>
-                <Segment>
-                  <Header size="medium">
-                    <FormattedMessage
-                      id="Alternative url path (Required)"
-                      defaultMessage="Alternative url path (Required)"
-                    />
-                  </Header>
-                  <p className="help">
-                    <FormattedMessage
-                      id="Enter the absolute path where the alternative url should exist. The path must start with '/'. Only urls that result in a 404 not found page will result in a redirect occurring."
-                      defaultMessage="Enter the absolute path where the alternative url should exist. The path must start with '/'. Only urls that result in a 404 not found page will result in a redirect occurring."
-                    />
-                  </p>
-                  <Form.Field>
-                    <Input
-                      id="alternative-url-input"
-                      name="alternative-url-path"
-                      placeholder="/example"
-                      value={this.state.altUrlPath}
-                      onChange={(e) => this.handleAltUrlChange(e.target.value)}
-                    />
-                    {!this.state.isAltUrlCorrect &&
-                      this.state.altUrlPath !== '' && (
-                        <p style={{ color: 'red' }}>
-                          <FormattedMessage
-                            id="Alternative url path must start with a slash."
-                            defaultMessage="Alternative url path must start with a slash."
-                          />
-                        </p>
-                      )}
-                  </Form.Field>
-                  <Header size="medium">
-                    <FormattedMessage
-                      id="Target Path (Required)"
-                      defaultMessage="Target Path (Required)"
-                    />
-                  </Header>
-                  <p className="help">
-                    <FormattedMessage
-                      id="Enter the absolute path of the target. The path must start with '/'. Target must exist or be an existing alternative url path to the target."
-                      defaultMessage="Enter the absolute path of the target. The path must start with '/'. Target must exist or be an existing alternative url path to the target."
-                    />
-                  </p>
-                  <Form.Field>
-                    <Input
-                      id="target-url-input"
-                      name="target-url-path"
-                      placeholder="/example"
-                      value={this.state.targetUrlPath}
-                      onChange={(e) =>
-                        this.handleTargetUrlChange(e.target.value)
-                      }
-                    />
-                    {!this.state.isTargetUrlCorrect &&
-                      this.state.targetUrlPath !== '' && (
-                        <p style={{ color: 'red' }}>
-                          <FormattedMessage
-                            id="Target url path must start with a slash."
-                            defaultMessage="Target url path must start with a slash."
-                          />
-                        </p>
-                      )}
-                  </Form.Field>
-                  <Button
-                    id="submit-alias"
-                    primary
-                    onClick={() => this.handleSubmitAlias()}
-                    disabled={
-                      !this.state.isAltUrlCorrect ||
-                      !this.state.isTargetUrlCorrect ||
-                      this.state.altUrlPath === '' ||
-                      this.state.targetUrlPath === ''
-                    }
-                  >
-                    <FormattedMessage id="Add" defaultMessage="Add" />
-                  </Button>
-                  {this.state.errorMessageAdd && (
-                    <Message color="red">
-                      <Message.Header>
-                        <FormattedMessage
-                          id="ErrorHeader"
-                          defaultMessage="Error"
-                        />
-                      </Message.Header>
-                      <p>{this.state.errorMessageAdd}</p>
-                    </Message>
+  return (
+    <div id="page-aliases">
+      <Helmet title={intl.formatMessage(messages.aliases)} />
+      <Container>
+        <article id="content">
+          <Segment.Group raised>
+            <Segment className="primary">
+              <FormattedMessage
+                id="URL Management"
+                defaultMessage="URL Management"
+                values={{ title: <q>{title}</q> }}
+              />
+            </Segment>
+            <Form>
+              <Segment>
+                <Header size="medium">
+                  <FormattedMessage
+                    id="Alternative url path (Required)"
+                    defaultMessage="Alternative url path (Required)"
+                  />
+                </Header>
+                <p className="help">
+                  <FormattedMessage
+                    id="Enter the absolute path where the alternative url should exist. The path must start with '/'. Only urls that result in a 404 not found page will result in a redirect occurring."
+                    defaultMessage="Enter the absolute path where the alternative url should exist. The path must start with '/'. Only urls that result in a 404 not found page will result in a redirect occurring."
+                  />
+                </p>
+                <Form.Field>
+                  <Input
+                    id="alternative-url-input"
+                    name="alternative-url-path"
+                    placeholder="/example"
+                    value={altUrlPath}
+                    onChange={(e) => handleAltUrlChange(e.target.value)}
+                  />
+                  {!isAltUrlCorrect && altUrlPath !== '' && (
+                    <p style={{ color: 'red' }}>
+                      <FormattedMessage
+                        id="Alternative url path must start with a slash."
+                        defaultMessage="Alternative url path must start with a slash."
+                      />
+                    </p>
                   )}
-                </Segment>
-              </Form>
-              <Form>
-                <Segment className="primary">
-                  <Header size="medium">
-                    <FormattedMessage
-                      id="All existing alternative urls for this site"
-                      defaultMessage="All existing alternative urls for this site"
-                    />
-                  </Header>
-                  <Header size="small">
-                    <FormattedMessage
-                      id="Filter by prefix"
-                      defaultMessage="Filter by prefix"
-                    />
-                  </Header>
-                  <Form.Field>
-                    <Input
-                      name="filter"
-                      placeholder="/example"
-                      value={this.state.filterQuery}
-                      onChange={(e) =>
-                        this.handleFilterQueryChange(e.target.value)
-                      }
-                    />
-                  </Form.Field>
-                  <Header size="small">
-                    <FormattedMessage
-                      id="Manually or automatically added?"
-                      defaultMessage="Manually or automatically added?"
-                    />
-                  </Header>
-                  {filterChoices.map((o, i) => (
-                    <Form.Field key={i}>
-                      <Radio
-                        label={o.label}
-                        name="radioGroup"
-                        value={o.value}
-                        checked={this.state.filterType === o}
-                        onChange={() => this.handleSelectFilterType(o)}
+                </Form.Field>
+                <Header size="medium">
+                  <FormattedMessage
+                    id="Target Path (Required)"
+                    defaultMessage="Target Path (Required)"
+                  />
+                </Header>
+                <p className="help">
+                  <FormattedMessage
+                    id="Enter the absolute path of the target. Target must exist or be an existing alternative url path to the target."
+                    defaultMessage="Enter the absolute path of the target. Target must exist or be an existing alternative url path to the target."
+                  />
+                </p>
+                <Form.Field>
+                  <Input
+                    id="target-url-input"
+                    name="target-url-path"
+                    placeholder="/example"
+                    value={targetUrlPath}
+                    onChange={(e) => handleTargetUrlChange(e.target.value)}
+                  />
+                </Form.Field>
+                <Button
+                  id="submit-alias"
+                  primary
+                  onClick={() => handleSubmitAlias()}
+                  disabled={
+                    !isAltUrlCorrect ||
+                    altUrlPath === '' ||
+                    targetUrlPath === ''
+                  }
+                >
+                  <FormattedMessage id="Add" defaultMessage="Add" />
+                </Button>
+                {errorMessageAdd && (
+                  <Message color="red">
+                    <Message.Header>
+                      <FormattedMessage
+                        id="ErrorHeader"
+                        defaultMessage="Error"
                       />
-                    </Form.Field>
-                  ))}
-                  <Form.Field>
-                    <DatetimeWidget
-                      id="created-before-date"
-                      title={'Created before'}
-                      dateOnly={true}
-                      value={this.state.createdBefore}
-                      onChange={(id, value) => {
-                        this.handleCreateDate(value);
-                      }}
+                    </Message.Header>
+                    <p>{errorMessageAdd}</p>
+                  </Message>
+                )}
+              </Segment>
+            </Form>
+            <Form>
+              <Segment className="primary">
+                <Header size="medium">
+                  <FormattedMessage
+                    id="All existing alternative urls for this site"
+                    defaultMessage="All existing alternative urls for this site"
+                  />
+                </Header>
+                <Header size="small">
+                  <FormattedMessage
+                    id="Filter by prefix"
+                    defaultMessage="Filter by prefix"
+                  />
+                </Header>
+                <Form.Field>
+                  <Input
+                    name="filter"
+                    placeholder="/example"
+                    value={filterQuery}
+                    onChange={(e) => handleFilterQueryChange(e.target.value)}
+                  />
+                </Form.Field>
+                <Header size="small">
+                  <FormattedMessage
+                    id="Manually or automatically added?"
+                    defaultMessage="Manually or automatically added?"
+                  />
+                </Header>
+                {filterChoices.map((o, i) => (
+                  <Form.Field key={i}>
+                    <Radio
+                      label={o.label}
+                      name="radioGroup"
+                      value={o.value}
+                      checked={filterType === o}
+                      onChange={() => handleSelectFilterType(o)}
                     />
                   </Form.Field>
-                  <Button onClick={() => this.handleSubmitFilter()} primary>
-                    Filter
-                  </Button>
-                  <Header size="small">
-                    <FormattedMessage
-                      id="Alternative url path → target url path (date and time of creation, manually created yes/no)"
-                      defaultMessage="Alternative url path → target url path (date and time of creation, manually created yes/no)"
-                    />
-                  </Header>
-
-                  <Table>
-                    <Table.Body>
-                      <Table.Row>
-                        <Table.HeaderCell>
-                          <FormattedMessage
-                            id="Select"
-                            defaultMessage="Select"
-                          />
-                        </Table.HeaderCell>
-                        <Table.HeaderCell>
-                          <FormattedMessage id="Alias" defaultMessage="Alias" />
-                        </Table.HeaderCell>
-                        <Table.HeaderCell>
-                          <FormattedMessage
-                            id="Target"
-                            defaultMessage="Target"
-                          />
-                        </Table.HeaderCell>
-                        <Table.HeaderCell>
-                          <FormattedMessage id="Date" defaultMessage="Date" />
-                        </Table.HeaderCell>
-                        <Table.HeaderCell>
-                          <FormattedMessage
-                            id="Manual"
-                            defaultMessage="Manual"
-                          />
-                        </Table.HeaderCell>
-                      </Table.Row>
-                      {this.props.aliases.items.length > 0 &&
-                        this.props.aliases.items.map((alias, i) => (
-                          <Table.Row key={i}>
-                            <Table.Cell>
-                              <Checkbox
-                                onChange={(e, { value }) =>
-                                  this.handleCheckAlias(value)
-                                }
-                                checked={this.state.aliasesToRemove.includes(
-                                  alias.path,
-                                )}
-                                value={alias.path}
-                              />
-                            </Table.Cell>
-                            <Table.Cell>
-                              <p>{alias.path}</p>
-                            </Table.Cell>
-                            <Table.Cell>
-                              <p>{alias['redirect-to']}</p>
-                            </Table.Cell>
-                            <Table.Cell>
-                              <p>{alias.datetime}</p>
-                            </Table.Cell>
-                            <Table.Cell>
-                              <p>{`${alias.manual}`}</p>
-                            </Table.Cell>
-                          </Table.Row>
-                        ))}
-                    </Table.Body>
-                  </Table>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexWrap: 'wrap',
-                      alignItems: 'center',
-                      marginBottom: '20px',
+                ))}
+                <Form.Field>
+                  <DatetimeWidget
+                    id="created-before-date"
+                    title={'Created before'}
+                    dateOnly={true}
+                    value={createdBefore}
+                    onChange={(id, value) => {
+                      handleCreateDate(value);
                     }}
-                  >
-                    {this.state.pages && (
-                      <Pagination
-                        boundaryRange={0}
-                        activePage={this.state.activePage}
-                        ellipsisItem={null}
-                        firstItem={null}
-                        lastItem={null}
-                        siblingRange={1}
-                        totalPages={this.state.pages}
-                        onPageChange={(e, o) => this.handlePageChange(e, o)}
-                      />
-                    )}
-                    <Menu.Menu
-                      position="right"
-                      style={{ display: 'flex', marginLeft: 'auto' }}
-                    >
-                      <Menu.Item style={{ color: 'grey' }}>
-                        <FormattedMessage id="Show" defaultMessage="Show" />:
-                      </Menu.Item>
-                      {map(itemsPerPageChoices, (size) => (
-                        <Menu.Item
-                          style={{
-                            padding: '0 0.4em',
-                            margin: '0em 0.357em',
-                            cursor: 'pointer',
-                          }}
-                          key={size}
-                          value={size}
-                          active={size === this.state.itemsPerPage}
-                          onClick={(e, o) => this.handleItemsPerPage(e, o)}
-                        >
-                          {size}
-                        </Menu.Item>
+                  />
+                </Form.Field>
+                <Button onClick={() => handleSubmitFilter()} primary>
+                  Filter
+                </Button>
+                <Header size="small">
+                  <FormattedMessage
+                    id="Alternative url path → target url path (date and time of creation, manually created yes/no)"
+                    defaultMessage="Alternative url path → target url path (date and time of creation, manually created yes/no)"
+                  />
+                </Header>
+
+                <Table>
+                  <Table.Body>
+                    <Table.Row>
+                      <Table.HeaderCell>
+                        <FormattedMessage id="Select" defaultMessage="Select" />
+                      </Table.HeaderCell>
+                      <Table.HeaderCell>
+                        <FormattedMessage id="Alias" defaultMessage="Alias" />
+                      </Table.HeaderCell>
+                      <Table.HeaderCell>
+                        <FormattedMessage id="Target" defaultMessage="Target" />
+                      </Table.HeaderCell>
+                      <Table.HeaderCell>
+                        <FormattedMessage id="Date" defaultMessage="Date" />
+                      </Table.HeaderCell>
+                      <Table.HeaderCell>
+                        <FormattedMessage id="Manual" defaultMessage="Manual" />
+                      </Table.HeaderCell>
+                    </Table.Row>
+                    {aliases.items.length > 0 &&
+                      aliases.items.map((alias, i) => (
+                        <Table.Row key={i}>
+                          <Table.Cell>
+                            <Checkbox
+                              onChange={(e, { value }) =>
+                                handleCheckAlias(value)
+                              }
+                              checked={aliasesToRemove.includes(alias.path)}
+                              value={alias.path}
+                            />
+                          </Table.Cell>
+                          <Table.Cell>
+                            <p>{alias.path}</p>
+                          </Table.Cell>
+                          <Table.Cell>
+                            <p>{alias['redirect-to']}</p>
+                          </Table.Cell>
+                          <Table.Cell>
+                            <p>{alias.datetime}</p>
+                          </Table.Cell>
+                          <Table.Cell>
+                            <p>{`${alias.manual}`}</p>
+                          </Table.Cell>
+                        </Table.Row>
                       ))}
-                    </Menu.Menu>
-                  </div>
-                  <Button
-                    disabled={this.state.aliasesToRemove.length === 0}
-                    onClick={this.handleRemoveAliases}
-                    primary
-                  >
-                    <FormattedMessage
-                      id="Remove selected"
-                      defaultMessage="Remove selected"
+                  </Table.Body>
+                </Table>
+                <div
+                  style={{
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    marginBottom: '20px',
+                  }}
+                >
+                  {pages && (
+                    <Pagination
+                      boundaryRange={0}
+                      activePage={activePage}
+                      ellipsisItem={null}
+                      firstItem={null}
+                      lastItem={null}
+                      siblingRange={1}
+                      totalPages={pages}
+                      onPageChange={(e, o) => handlePageChange(e, o)}
                     />
-                  </Button>
-                </Segment>
-              </Form>
-            </Segment.Group>
-          </article>
-        </Container>
-        {this.state.isClient &&
-          createPortal(
-            <Toolbar
-              pathname={this.props.pathname}
-              hideDefaultViewButtons
-              inner={
-                <Link className="item" to="#" onClick={() => this.onCancel()}>
-                  <Icon
-                    name={backSVG}
-                    className="contents circled"
-                    size="30px"
-                    title={this.props.intl.formatMessage(messages.back)}
+                  )}
+                  <Menu.Menu
+                    position="right"
+                    style={{ display: 'flex', marginLeft: 'auto' }}
+                  >
+                    <Menu.Item style={{ color: 'grey' }}>
+                      <FormattedMessage id="Show" defaultMessage="Show" />:
+                    </Menu.Item>
+                    {map(itemsPerPageChoices, (size) => (
+                      <Menu.Item
+                        style={{
+                          padding: '0 0.4em',
+                          margin: '0em 0.357em',
+                          cursor: 'pointer',
+                        }}
+                        key={size}
+                        value={size}
+                        active={size === itemsPerPage}
+                        onClick={(e, o) => handleItemsPerPage(e, o)}
+                      >
+                        {size}
+                      </Menu.Item>
+                    ))}
+                  </Menu.Menu>
+                </div>
+                <Button
+                  disabled={aliasesToRemove.length === 0}
+                  onClick={handleRemoveAliases}
+                  primary
+                >
+                  <FormattedMessage
+                    id="Remove selected"
+                    defaultMessage="Remove selected"
                   />
-                </Link>
-              }
-            />,
-            document.getElementById('toolbar'),
-          )}
-      </div>
-    );
-  }
-}
+                </Button>
+              </Segment>
+            </Form>
+          </Segment.Group>
+        </article>
+      </Container>
+      {isClient &&
+        createPortal(
+          <Toolbar
+            pathname={pathname}
+            hideDefaultViewButtons
+            inner={
+              <Link className="item" to="#" onClick={() => onCancel()}>
+                <Icon
+                  name={backSVG}
+                  className="contents circled"
+                  size="30px"
+                  title={intl.formatMessage(messages.back)}
+                />
+              </Link>
+            }
+          />,
+          document.getElementById('toolbar'),
+        )}
+    </div>
+  );
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state, props) => ({
-      aliases: state.aliases,
-      pathname: props.location.pathname,
-    }),
-    { addAliases, getAliases, removeAliases },
-  ),
-)(Aliases);
+export default Aliases;