Implemented logic to edit domain redirects

2026-05-31 17:46:17 +00:00 · 2021-08-21 17:53:06 +02:00
parent bf29158a8a
commit 69cb3bd619
28 changed files with 347 additions and 141 deletions
--- a/src/domains/DomainRow.tsx
+++ b/src/domains/DomainRow.tsx
@@ -0,0 +1,67 @@
+import { FC } from 'react';
+import { Button, UncontrolledTooltip } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faBan as forbiddenIcon,
+  faCheck as defaultDomainIcon,
+  faEdit as editIcon,
+} from '@fortawesome/free-solid-svg-icons';
+import { ShlinkDomain, ShlinkDomainRedirects } from '../api/types';
+import { useToggle } from '../utils/helpers/hooks';
+import { OptionalString } from '../utils/utils';
+import { EditDomainRedirectsModal } from './helpers/EditDomainRedirectsModal';
+
+interface DomainRowProps {
+  domain: ShlinkDomain;
+  defaultRedirects?: ShlinkDomainRedirects;
+  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
+}
+
+const Nr: FC<{ fallback: OptionalString }> = ({ fallback }) => (
+  <span className="text-muted">
+    {!fallback && <small>No redirect</small>}
+    {fallback && <>{fallback} <small>(as fallback)</small></>}
+  </span>
+);
+const DefaultDomain: FC = () => (
+  <>
+    <FontAwesomeIcon icon={defaultDomainIcon} className="text-primary" id="defaultDomainIcon" />
+    <UncontrolledTooltip target="defaultDomainIcon" placement="right">Default domain</UncontrolledTooltip>
+  </>
+);
+
+export const DomainRow: FC<DomainRowProps> = ({ domain, editDomainRedirects, defaultRedirects }) => {
+  const [ isOpen, toggle ] = useToggle();
+
+  return (
+    <tr>
+      <td>{domain.isDefault ? <DefaultDomain /> : ''}</td>
+      <th>{domain.domain}</th>
+      <td>{domain.redirects?.baseUrlRedirect ?? <Nr fallback={defaultRedirects?.baseUrlRedirect} />}</td>
+      <td>{domain.redirects?.regular404Redirect ?? <Nr fallback={defaultRedirects?.regular404Redirect} />}</td>
+      <td>
+        {domain.redirects?.invalidShortUrlRedirect ?? <Nr fallback={defaultRedirects?.invalidShortUrlRedirect} />}
+      </td>
+      <td className="text-right">
+        <span id={`domainEdit${domain.domain.replace('.', '')}`}>
+          <Button outline size="sm" disabled={domain.isDefault} onClick={domain.isDefault ? undefined : toggle}>
+            <FontAwesomeIcon icon={domain.isDefault ? forbiddenIcon : editIcon} />
+          </Button>
+        </span>
+        {domain.isDefault && (
+          <UncontrolledTooltip target={`domainEdit${domain.domain.replace('.', '')}`} placement="left">
+            Redirects for default domain cannot be edited here.
+            <br />
+            Use config options or env vars.
+          </UncontrolledTooltip>
+        )}
+      </td>
+      <EditDomainRedirectsModal
+        domain={domain}
+        isOpen={isOpen}
+        toggle={toggle}
+        editDomainRedirects={editDomainRedirects}
+      />
+    </tr>
+  );
+};
--- a/src/domains/ManageDomains.tsx
+++ b/src/domains/ManageDomains.tsx
@@ -1,43 +1,41 @@
 import { FC, useEffect } from 'react';
-import { faCheck as defaultDomainIcon, faEdit as editIcon, faBan as forbiddenIcon } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, UncontrolledTooltip } from 'reactstrap';
 import Message from '../utils/Message';
 import { Result } from '../utils/Result';
 import { ShlinkApiError } from '../api/ShlinkApiError';
 import { SimpleCard } from '../utils/SimpleCard';
 import SearchField from '../utils/SearchField';
+import { ShlinkDomainRedirects } from '../api/types';
 import { DomainsList } from './reducers/domainsList';
+import { DomainRow } from './DomainRow';

 interface ManageDomainsProps {
  listDomains: Function;
+  filterDomains: (searchTerm: string) => void;
+  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
  domainsList: DomainsList;
 }

-const Na: FC = () => <i><small>N/A</small></i>;
-const DefaultDomain: FC = () => (
-  <>
-    <FontAwesomeIcon icon={defaultDomainIcon} className="text-primary" id="defaultDomainIcon" />
-    <UncontrolledTooltip target="defaultDomainIcon" placement="right">Default domain</UncontrolledTooltip>
-  </>
-);
+const headers = [ '', 'Domain', 'Base path redirect', 'Regular 404 redirect', 'Invalid short URL redirect', '' ];

-export const ManageDomains: FC<ManageDomainsProps> = ({ listDomains, domainsList }) => {
-  const { domains, loading, error } = domainsList;
+export const ManageDomains: FC<ManageDomainsProps> = (
+  { listDomains, domainsList, filterDomains, editDomainRedirects },
+) => {
+  const { filteredDomains: domains, loading, error, errorData } = domainsList;
+  const defaultRedirects = domains.find(({ isDefault }) => isDefault)?.redirects;

  useEffect(() => {
    listDomains();
  }, []);

-  const renderContent = () => {
-    if (loading) {
-      return <Message loading />;
-    }
+  if (loading) {
+    return <Message loading />;
+  }

+  const renderContent = () => {
    if (error) {
      return (
        <Result type="error">
-          <ShlinkApiError fallbackMessage="Error loading domains :(" />
+          <ShlinkApiError errorData={errorData} fallbackMessage="Error loading domains :(" />
        </Result>
      );
    }
@@ -46,36 +44,17 @@ export const ManageDomains: FC<ManageDomainsProps> = ({ listDomains, domainsList
      <SimpleCard>
        <table className="table table-hover mb-0">
          <thead>
-            <tr>
-              <th />
-              <th>Domain</th>
-              <th>Base path redirect</th>
-              <th>Regular 404 redirect</th>
-              <th>Invalid short URL redirect</th>
-              <th />
-            </tr>
+            <tr>{headers.map((column, index) => <th key={index}>{column}</th>)}</tr>
          </thead>
          <tbody>
+            {domains.length < 1 && <tr><td colSpan={headers.length} className="text-center">No results found</td></tr>}
            {domains.map((domain) => (
-              <tr key={domain.domain}>
-                <td>{domain.isDefault ? <DefaultDomain /> : ''}</td>
-                <th>{domain.domain}</th>
-                <td>{domain.redirects?.baseUrlRedirect ?? <Na />}</td>
-                <td>{domain.redirects?.regular404Redirect ?? <Na />}</td>
-                <td>{domain.redirects?.invalidShortUrlRedirect ?? <Na />}</td>
-                <td className="text-right">
-                  <span id={`domainEdit${domain.domain.replace('.', '')}`}>
-                    <Button outline size="sm" disabled={domain.isDefault}>
-                      <FontAwesomeIcon icon={domain.isDefault ? forbiddenIcon : editIcon} />
-                    </Button>
-                  </span>
-                  {domain.isDefault && (
-                    <UncontrolledTooltip target={`domainEdit${domain.domain.replace('.', '')}`} placement="left">
-                      Redirects for default domain cannot be edited here.
-                    </UncontrolledTooltip>
-                  )}
-                </td>
-              </tr>
+              <DomainRow
+                key={domain.domain}
+                domain={domain}
+                editDomainRedirects={editDomainRedirects}
+                defaultRedirects={defaultRedirects}
+              />
            ))}
          </tbody>
        </table>
@@ -85,7 +64,7 @@ export const ManageDomains: FC<ManageDomainsProps> = ({ listDomains, domainsList

  return (
    <>
-      <SearchField className="mb-3" onChange={() => {}} />
+      <SearchField className="mb-3" onChange={filterDomains} />
      {renderContent()}
    </>
  );
--- a/src/domains/helpers/EditDomainRedirectsModal.tsx
+++ b/src/domains/helpers/EditDomainRedirectsModal.tsx
@@ -0,0 +1,85 @@
+import { FC, useState } from 'react';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, UncontrolledTooltip } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { ShlinkDomain, ShlinkDomainRedirects } from '../../api/types';
+import { FormGroupContainer } from '../../utils/FormGroupContainer';
+import { handleEventPreventingDefault, nonEmptyValueOrNull } from '../../utils/utils';
+
+interface EditDomainRedirectsModalProps {
+  domain: ShlinkDomain;
+  isOpen: boolean;
+  toggle: () => void;
+  editDomainRedirects: (domain: string, redirects: Partial<ShlinkDomainRedirects>) => Promise<void>;
+}
+
+const InfoTooltip: FC<{ id: string }> = ({ id, children }) => (
+  <>
+    <FontAwesomeIcon icon={infoIcon} className="mr-2" id={id} />
+    <UncontrolledTooltip target={id} placement="bottom">{children}</UncontrolledTooltip>
+  </>
+);
+
+const FormGroup: FC<{ value: string; onChange: (newValue: string) => void; isLast?: boolean }> = (
+  { value, onChange, isLast, children },
+) => (
+  <FormGroupContainer
+    value={value}
+    required={false}
+    type="url"
+    placeholder="No redirect"
+    className={isLast ? 'mb-0' : ''}
+    onChange={onChange}
+  >
+    {children}
+  </FormGroupContainer>
+);
+
+export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
+  { isOpen, toggle, domain, editDomainRedirects },
+) => {
+  const [ baseUrlRedirect, setBaseUrlRedirect ] = useState('');
+  const [ regular404Redirect, setRegular404Redirect ] = useState('');
+  const [ invalidShortUrlRedirect, setInvalidShortUrlRedirect ] = useState('');
+  const handleSubmit = handleEventPreventingDefault(async () => editDomainRedirects(domain.domain, {
+    baseUrlRedirect: nonEmptyValueOrNull(baseUrlRedirect),
+    regular404Redirect: nonEmptyValueOrNull(regular404Redirect),
+    invalidShortUrlRedirect: nonEmptyValueOrNull(invalidShortUrlRedirect),
+  }).then(toggle));
+
+  return (
+    <Modal isOpen={isOpen} toggle={toggle} centered>
+      <form onSubmit={handleSubmit}>
+        <ModalHeader toggle={toggle}>
+          Edit redirects for <b>{domain.domain}</b>
+        </ModalHeader>
+        <ModalBody>
+          <FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
+            <InfoTooltip id="baseUrlInfo">
+              Visitors accessing the base url, as in <b>https://{domain.domain}/</b>, will be redirected to this URL.
+            </InfoTooltip>
+            Base URL
+          </FormGroup>
+          <FormGroup value={regular404Redirect} onChange={setRegular404Redirect}>
+            <InfoTooltip id="regularNotFoundInfo">
+              Visitors accessing a url not matching a short URL pattern, as in <b>https://{domain.domain}/???/[...]</b>,
+              will be redirected to this URL.
+            </InfoTooltip>
+            Regular 404
+          </FormGroup>
+          <FormGroup value={invalidShortUrlRedirect} isLast onChange={setInvalidShortUrlRedirect}>
+            <InfoTooltip id="invalidShortUrlInfo">
+              Visitors accessing a url matching a short URL pattern, but not matching an existing short code, will be
+              redirected to this URL.
+            </InfoTooltip>
+            Invalid short URL
+          </FormGroup>
+        </ModalBody>
+        <ModalFooter>
+          <Button color="link" type="button" onClick={toggle}>Cancel</Button>
+          <Button color="primary">Save</Button>
+        </ModalFooter>
+      </form>
+    </Modal>
+  );
+};
--- a/src/domains/reducers/domainRedirects.ts
+++ b/src/domains/reducers/domainRedirects.ts
@@ -0,0 +1,33 @@
+import { Action, Dispatch } from 'redux';
+import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
+import { ShlinkDomainRedirects } from '../../api/types';
+import { GetState } from '../../container/types';
+import { ApiErrorAction } from '../../api/types/actions';
+import { parseApiError } from '../../api/utils';
+
+/* eslint-disable padding-line-between-statements */
+export const EDIT_DOMAIN_REDIRECTS_START = 'shlink/domainRedirects/EDIT_DOMAIN_REDIRECTS_START';
+export const EDIT_DOMAIN_REDIRECTS_ERROR = 'shlink/domainRedirects/EDIT_DOMAIN_REDIRECTS_ERROR';
+export const EDIT_DOMAIN_REDIRECTS = 'shlink/domainRedirects/EDIT_DOMAIN_REDIRECTS';
+/* eslint-enable padding-line-between-statements */
+
+export interface EditDomainRedirectsAction extends Action<string> {
+  domain: string;
+  redirects: ShlinkDomainRedirects;
+}
+
+export const editDomainRedirects = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
+  domain: string,
+  domainRedirects: Partial<ShlinkDomainRedirects>,
+) => async (dispatch: Dispatch, getState: GetState) => {
+  dispatch({ type: EDIT_DOMAIN_REDIRECTS_START });
+  const { editDomainRedirects } = buildShlinkApiClient(getState);
+
+  try {
+    const redirects = await editDomainRedirects({ domain, ...domainRedirects });
+
+    dispatch<EditDomainRedirectsAction>({ type: EDIT_DOMAIN_REDIRECTS, domain, redirects });
+  } catch (e) {
+    dispatch<ApiErrorAction>({ type: EDIT_DOMAIN_REDIRECTS_ERROR, errorData: parseApiError(e) });
+  }
+};
--- a/src/domains/reducers/domainsList.ts
+++ b/src/domains/reducers/domainsList.ts
@@ -1,35 +1,63 @@
 import { Action, Dispatch } from 'redux';
-import { ShlinkDomain } from '../../api/types';
+import { ProblemDetailsError, ShlinkDomain, ShlinkDomainRedirects } from '../../api/types';
 import { buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { GetState } from '../../container/types';
+import { parseApiError } from '../../api/utils';
+import { ApiErrorAction } from '../../api/types/actions';
+import { EDIT_DOMAIN_REDIRECTS, EditDomainRedirectsAction } from './domainRedirects';

 /* eslint-disable padding-line-between-statements */
 export const LIST_DOMAINS_START = 'shlink/domainsList/LIST_DOMAINS_START';
 export const LIST_DOMAINS_ERROR = 'shlink/domainsList/LIST_DOMAINS_ERROR';
 export const LIST_DOMAINS = 'shlink/domainsList/LIST_DOMAINS';
+export const FILTER_DOMAINS = 'shlink/domainsList/FILTER_DOMAINS';
 /* eslint-enable padding-line-between-statements */

 export interface DomainsList {
  domains: ShlinkDomain[];
+  filteredDomains: ShlinkDomain[];
  loading: boolean;
  error: boolean;
+  errorData?: ProblemDetailsError;
 }

 export interface ListDomainsAction extends Action<string> {
  domains: ShlinkDomain[];
 }

+interface FilterDomainsAction extends Action<string> {
+  searchTerm: string;
+}
+
 const initialState: DomainsList = {
  domains: [],
+  filteredDomains: [],
  loading: false,
  error: false,
 };

-export default buildReducer<DomainsList, ListDomainsAction>({
+type DomainsCombinedAction = ListDomainsAction
+& ApiErrorAction
+& FilterDomainsAction
+& EditDomainRedirectsAction;
+
+const replaceRedirectsOnDomain = (domain: string, redirects: ShlinkDomainRedirects) =>
+  (d: ShlinkDomain): ShlinkDomain => d.domain !== domain ? d : { ...d, redirects };
+
+export default buildReducer<DomainsList, DomainsCombinedAction>({
  [LIST_DOMAINS_START]: () => ({ ...initialState, loading: true }),
-  [LIST_DOMAINS_ERROR]: () => ({ ...initialState, error: true }),
-  [LIST_DOMAINS]: (_, { domains }) => ({ ...initialState, domains }),
+  [LIST_DOMAINS_ERROR]: ({ errorData }) => ({ ...initialState, error: true, errorData }),
+  [LIST_DOMAINS]: (_, { domains }) => ({ ...initialState, domains, filteredDomains: domains }),
+  [FILTER_DOMAINS]: (state, { searchTerm }) => ({
+    ...state,
+    filteredDomains: state.domains.filter(({ domain }) => domain.toLowerCase().match(searchTerm)),
+  }),
+  [EDIT_DOMAIN_REDIRECTS]: (state, { domain, redirects }) => ({
+    ...state,
+    domains: state.domains.map(replaceRedirectsOnDomain(domain, redirects)),
+    filteredDomains: state.filteredDomains.map(replaceRedirectsOnDomain(domain, redirects)),
+  }),
 }, initialState);

 export const listDomains = (buildShlinkApiClient: ShlinkApiClientBuilder) => () => async (
@@ -44,6 +72,8 @@ export const listDomains = (buildShlinkApiClient: ShlinkApiClientBuilder) => ()

    dispatch<ListDomainsAction>({ type: LIST_DOMAINS, domains });
  } catch (e) {
-    dispatch({ type: LIST_DOMAINS_ERROR });
+    dispatch<ApiErrorAction>({ type: LIST_DOMAINS_ERROR, errorData: parseApiError(e) });
  }
 };
+
+export const filterDomains = (searchTerm: string): FilterDomainsAction => ({ type: FILTER_DOMAINS, searchTerm });
--- a/src/domains/services/provideServices.ts
+++ b/src/domains/services/provideServices.ts
@@ -1,8 +1,9 @@
 import Bottle from 'bottlejs';
 import { ConnectDecorator } from '../../container/types';
-import { listDomains } from '../reducers/domainsList';
+import { filterDomains, listDomains } from '../reducers/domainsList';
 import { DomainSelector } from '../DomainSelector';
 import { ManageDomains } from '../ManageDomains';
+import { editDomainRedirects } from '../reducers/domainRedirects';

 const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
  // Components
@@ -10,10 +11,15 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
  bottle.decorator('DomainSelector', connect([ 'domainsList' ], [ 'listDomains' ]));

  bottle.serviceFactory('ManageDomains', () => ManageDomains);
-  bottle.decorator('ManageDomains', connect([ 'domainsList' ], [ 'listDomains' ]));
+  bottle.decorator('ManageDomains', connect(
+    [ 'domainsList' ],
+    [ 'listDomains', 'filterDomains', 'editDomainRedirects' ],
+  ));

  // Actions
  bottle.serviceFactory('listDomains', listDomains, 'buildShlinkApiClient');
+  bottle.serviceFactory('filterDomains', () => filterDomains);
+  bottle.serviceFactory('editDomainRedirects', editDomainRedirects, 'buildShlinkApiClient');
 };

 export default provideServices;