More components migrated to TS

package-lock.json

@@ -1368,11 +1368,11 @@
       }
     },
     "@fortawesome/react-fontawesome": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.5.tgz",
-      "integrity": "sha512-WYDKTgyAWOncujWhhzhW7k8sgO5Eo2pZTUL51yNzSQNBUwwr6rNKg/JUSE3iebaU1XShHw74aKc1kJ+jvtRNew==",
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.11.tgz",
+      "integrity": "sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg==",
       "requires": {
-        "prop-types": "^15.5.10"
+        "prop-types": "^15.7.2"
       }
     },
     "@hapi/address": {
@@ -3378,6 +3378,17 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-datepicker": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-1.8.0.tgz",
+      "integrity": "sha512-QyHMOFCOFIkcyDCXUGnL7OyM+Gj2aG95d3t18wgrLTxQJseVQXeQFTVnUeXmmF2cZxeWtGTfRl1uYPTr3/rAFg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "moment": ">=2.14.0",
+        "popper.js": "^1.14.1"
+      }
+    },
     "@types/react-dom": {
       "version": "16.9.8",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",

package.json

@@ -26,7 +26,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-regular-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/react-fontawesome": "^0.1.5",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "array-filter": "^1.0.0",
     "array-map": "^0.0.0",
     "array-reduce": "^0.0.0",
@@ -82,6 +82,7 @@
     "@types/moment": "^2.13.0",
     "@types/ramda": "^0.27.14",
     "@types/react": "^16.9.46",
+    "@types/react-datepicker": "~1.8.0",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
     "@types/react-router-dom": "^5.1.5",

src/short-urls/helpers/EditMetaModal.tsx

@@ -1,41 +1,46 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, { ChangeEvent, SyntheticEvent, useState } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader, FormGroup, Input, UncontrolledTooltip } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { ExternalLink } from 'react-external-link';
 import moment from 'moment';
 import { isEmpty, pipe } from 'ramda';
-import { shortUrlType } from '../reducers/shortUrlsList';
-import { shortUrlEditMetaType } from '../reducers/shortUrlMeta';
+import { ShortUrlMetaEdition } from '../reducers/shortUrlMeta';
 import DateInput from '../../utils/DateInput';
 import { formatIsoDate } from '../../utils/helpers/date';
+import { ShortUrl, ShortUrlMeta } from '../data';
+import { Nullable, OptionalString } from '../../utils/utils';
 
-const propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  toggle: PropTypes.func.isRequired,
-  shortUrl: shortUrlType.isRequired,
-  shortUrlMeta: shortUrlEditMetaType,
-  editShortUrlMeta: PropTypes.func,
-  resetShortUrlMeta: PropTypes.func,
+export interface EditMetaModalProps {
+  shortUrl: ShortUrl;
+  isOpen: boolean;
+  toggle: () => void;
+}
+
+interface EditMetaModalConnectProps extends EditMetaModalProps {
+  shortUrlMeta: ShortUrlMetaEdition;
+  resetShortUrlMeta: () => void;
+  editShortUrlMeta: (shortCode: string, domain: OptionalString, meta: Nullable<ShortUrlMeta>) => Promise<void>;
+}
+
+const dateOrUndefined = (shortUrl: ShortUrl | undefined, dateName: 'validSince' | 'validUntil') => {
+  const date = shortUrl?.meta?.[dateName];
+
+  return date ? moment(date) : undefined;
 };
 
-const dateOrUndefined = (shortUrl, dateName) => {
-  const date = shortUrl && shortUrl.meta && shortUrl.meta[dateName];
-
-  return date && moment(date);
-};
-
-const EditMetaModal = ({ isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMeta, resetShortUrlMeta }) => {
+const EditMetaModal = (
+  { isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMeta, resetShortUrlMeta }: EditMetaModalConnectProps,
+) => {
   const { saving, error } = shortUrlMeta;
   const url = shortUrl && (shortUrl.shortUrl || '');
   const [ validSince, setValidSince ] = useState(dateOrUndefined(shortUrl, 'validSince'));
   const [ validUntil, setValidUntil ] = useState(dateOrUndefined(shortUrl, 'validUntil'));
-  const [ maxVisits, setMaxVisits ] = useState(shortUrl && shortUrl.meta && shortUrl.meta.maxVisits);
+  const [ maxVisits, setMaxVisits ] = useState(shortUrl?.meta?.maxVisits);
 
   const close = pipe(resetShortUrlMeta, toggle);
-  const doEdit = () => editShortUrlMeta(shortUrl.shortCode, shortUrl.domain, {
-    maxVisits: maxVisits && !isEmpty(maxVisits) ? parseInt(maxVisits) : null,
+  const doEdit = async () => editShortUrlMeta(shortUrl.shortCode, shortUrl.domain, {
+    maxVisits: maxVisits && !isEmpty(maxVisits) ? maxVisits : null,
     validSince: validSince && formatIsoDate(validSince),
     validUntil: validUntil && formatIsoDate(validUntil),
   }).then(close);
@@ -49,7 +54,7 @@ const EditMetaModal = ({ isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMet
           <p>If any of the params is not met, the URL will behave as if it was an invalid short URL.</p>
         </UncontrolledTooltip>
       </ModalHeader>
-      <form onSubmit={(e) => e.preventDefault() || doEdit()}>
+      <form onSubmit={pipe((e: SyntheticEvent) => e.preventDefault(), doEdit)}>
         <ModalBody>
           <FormGroup>
             <DateInput
@@ -57,7 +62,7 @@ const EditMetaModal = ({ isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMet
               selected={validSince}
               maxDate={validUntil}
               isClearable
-              onChange={setValidSince}
+              onChange={setValidSince as any}
             />
           </FormGroup>
           <FormGroup>
@@ -66,7 +71,7 @@ const EditMetaModal = ({ isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMet
               selected={validUntil}
               minDate={validSince}
               isClearable
-              onChange={setValidUntil}
+              onChange={setValidUntil as any}
             />
           </FormGroup>
           <FormGroup className="mb-0">
@@ -74,8 +79,8 @@ const EditMetaModal = ({ isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMet
               type="number"
               placeholder="Maximum number of visits allowed"
               min={1}
-              value={maxVisits || ''}
-              onChange={(e) => setMaxVisits(e.target.value)}
+              value={maxVisits ?? ''}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => setMaxVisits(Number(e.target.value))}
             />
           </FormGroup>
           {error && (
@@ -93,6 +98,4 @@ const EditMetaModal = ({ isOpen, toggle, shortUrl, shortUrlMeta, editShortUrlMet
   );
 };
 
-EditMetaModal.propTypes = propTypes;
-
 export default EditMetaModal;

src/short-urls/reducers/shortUrlEdition.ts

@@ -3,6 +3,7 @@ import { Action, Dispatch } from 'redux';
 import { buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../utils/services/types';
 import { GetState } from '../../container/types';
+import { OptionalString } from '../../utils/utils';
 
 /* eslint-disable padding-line-between-statements */
 export const EDIT_SHORT_URL_START = 'shlink/shortUrlEdition/EDIT_SHORT_URL_START';
@@ -28,7 +29,7 @@ export interface ShortUrlEdition {
 export interface ShortUrlEditedAction extends Action<string> {
   shortCode: string;
   longUrl: string;
-  domain: string | undefined | null;
+  domain: OptionalString;
 }
 
 const initialState: ShortUrlEdition = {
@@ -46,7 +47,7 @@ export default buildReducer<ShortUrlEdition, ShortUrlEditedAction>({
 
 export const editShortUrl = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
   shortCode: string,
-  domain: string | undefined | null,
+  domain: OptionalString,
   longUrl: string,
 ) => async (dispatch: Dispatch, getState: GetState) => {
   dispatch({ type: EDIT_SHORT_URL_START });

src/short-urls/reducers/shortUrlMeta.ts

@@ -4,6 +4,7 @@ import { ShortUrlMeta } from '../data';
 import { ShlinkApiClientBuilder } from '../../utils/services/types';
 import { GetState } from '../../container/types';
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
+import { OptionalString } from '../../utils/utils';
 
 /* eslint-disable padding-line-between-statements */
 export const EDIT_SHORT_URL_META_START = 'shlink/shortUrlMeta/EDIT_SHORT_URL_META_START';
@@ -19,14 +20,6 @@ export const shortUrlMetaType = PropTypes.shape({
   maxVisits: PropTypes.number,
 });
 
-/** @deprecated Use ShortUrlMetaEdition interface instead */
-export const shortUrlEditMetaType = PropTypes.shape({
-  shortCode: PropTypes.string,
-  meta: shortUrlMetaType.isRequired,
-  saving: PropTypes.bool.isRequired,
-  error: PropTypes.bool.isRequired,
-});
-
 export interface ShortUrlMetaEdition {
   shortCode: string | null;
   meta: ShortUrlMeta;
@@ -56,7 +49,7 @@ export default buildReducer<ShortUrlMetaEdition, ShortUrlMetaEditedAction>({
 
 export const editShortUrlMeta = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
   shortCode: string,
-  domain: string | null | undefined,
+  domain: OptionalString,
   meta: ShortUrlMeta,
 ) => async (dispatch: Dispatch, getState: GetState) => {
   dispatch({ type: EDIT_SHORT_URL_META_START });

src/short-urls/reducers/shortUrlTags.ts

@@ -3,6 +3,7 @@ import { Action, Dispatch } from 'redux';
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../utils/services/types';
 import { GetState } from '../../container/types';
+import { OptionalString } from '../../utils/utils';
 
 /* eslint-disable padding-line-between-statements */
 export const EDIT_SHORT_URL_TAGS_START = 'shlink/shortUrlTags/EDIT_SHORT_URL_TAGS_START';
@@ -29,7 +30,7 @@ export interface ShortUrlTags {
 export interface EditShortUrlTagsAction extends Action<string> {
   shortCode: string;
   tags: string[];
-  domain: string | null | undefined;
+  domain: OptionalString;
 }
 
 const initialState: ShortUrlTags = {
@@ -48,7 +49,7 @@ export default buildReducer<ShortUrlTags, EditShortUrlTagsAction>({
 
 export const editShortUrlTags = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
   shortCode: string,
-  domain: string | null | undefined,
+  domain: OptionalString,
   tags: string[],
 ) => async (dispatch: Dispatch, getState: GetState) => {
   dispatch({ type: EDIT_SHORT_URL_TAGS_START });

src/utils/DateInput.tsx

@@ -1,21 +1,16 @@
-import React from 'react';
+import React, { Component, RefObject } from 'react';
 import { isNil } from 'ramda';
-import DatePicker from 'react-datepicker';
+import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import './DateInput.scss';
 
-const propTypes = {
-  className: PropTypes.string,
-  isClearable: PropTypes.bool,
-  selected: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
-  ref: PropTypes.object,
-  disabled: PropTypes.bool,
-};
+export interface DateInputProps extends ReactDatePickerProps {
+  ref?: RefObject<Component<ReactDatePickerProps> & { input: HTMLInputElement }>;
+}
 
-const DateInput = (props) => {
+const DateInput = (props: DateInputProps) => {
   const { className, isClearable, selected, ref = React.createRef() } = props;
   const showCalendarIcon = !isClearable || isNil(selected);
 
@@ -32,13 +27,11 @@ const DateInput = (props) => {
         <FontAwesomeIcon
           icon={calendarIcon}
           className="date-input-container__icon"
-          onClick={() => ref.current.input.focus()}
+          onClick={() => ref.current?.input.focus()}
         />
       )}
     </div>
   );
 };
 
-DateInput.propTypes = propTypes;
-
 export default DateInput;

src/utils/helpers/date.ts

@@ -1,11 +1,12 @@
 import * as moment from 'moment';
+import { OptionalString } from '../utils';
 
 type MomentOrString = moment.Moment | string;
 type NullableDate = MomentOrString | null;
 
-const isMomentObject = (date: moment.Moment | string): date is moment.Moment => typeof (date as moment.Moment).format === 'function';
+const isMomentObject = (date: MomentOrString): date is moment.Moment => typeof (date as moment.Moment).format === 'function';
 
-const formatDateFromFormat = (date?: NullableDate, format?: string): NullableDate | undefined =>
+const formatDateFromFormat = (date?: NullableDate, format?: string): OptionalString =>
   !date || !isMomentObject(date) ? date : date.format(format);
 
 export const formatDate = (format = 'YYYY-MM-DD') => (date?: NullableDate) => formatDateFromFormat(date, format);

src/utils/utils.ts

@@ -25,3 +25,7 @@ export const hasValue = <T>(value: T | Empty): value is T => !isNil(value) && !i
 export type Nullable<T> = {
   [P in keyof T]: T[P] | null
 };
+
+type Optional<T> = T | null | undefined;
+
+export type OptionalString = Optional<string>;

test/short-urls/helpers/EditMetaModal.test.tsx

@@ -1,19 +1,22 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { FormGroup, Modal, ModalHeader } from 'reactstrap';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { FormGroup } from 'reactstrap';
+import { Mock } from 'ts-mockery';
 import EditMetaModal from '../../../src/short-urls/helpers/EditMetaModal';
+import { ShortUrl } from '../../../src/short-urls/data';
+import { ShortUrlMetaEdition } from '../../../src/short-urls/reducers/shortUrlMeta';
 
 describe('<EditMetaModal />', () => {
-  let wrapper;
-  const editShortUrlMeta = jest.fn(() => Promise.resolve());
+  let wrapper: ShallowWrapper;
+  const editShortUrlMeta = jest.fn(async () => Promise.resolve());
   const resetShortUrlMeta = jest.fn();
   const toggle = jest.fn();
-  const createWrapper = (shortUrl, shortUrlMeta) => {
+  const createWrapper = (shortUrlMeta: Partial<ShortUrlMetaEdition>) => {
     wrapper = shallow(
       <EditMetaModal
         isOpen={true}
-        shortUrl={shortUrl}
-        shortUrlMeta={shortUrlMeta}
+        shortUrl={Mock.all<ShortUrl>()}
+        shortUrlMeta={Mock.of<ShortUrlMetaEdition>(shortUrlMeta)}
         toggle={toggle}
         editShortUrlMeta={editShortUrlMeta}
         resetShortUrlMeta={resetShortUrlMeta}
@@ -23,13 +26,11 @@ describe('<EditMetaModal />', () => {
     return wrapper;
   };
 
-  afterEach(() => {
-    wrapper && wrapper.unmount();
-    jest.clearAllMocks();
-  });
+  afterEach(() => wrapper?.unmount());
+  afterEach(jest.clearAllMocks);
 
   it('properly renders form with components', () => {
-    const wrapper = createWrapper({}, { saving: false, error: false, meta: {} });
+    const wrapper = createWrapper({ saving: false, error: false });
     const error = wrapper.find('.bg-danger');
     const form = wrapper.find('form');
     const formGroup = form.find(FormGroup);
@@ -43,7 +44,7 @@ describe('<EditMetaModal />', () => {
     [ true, 'Saving...' ],
     [ false, 'Save' ],
   ])('renders submit button on expected state', (saving, expectedText) => {
-    const wrapper = createWrapper({}, { saving, error: false, meta: {} });
+    const wrapper = createWrapper({ saving, error: false });
     const button = wrapper.find('[type="submit"]');
 
     expect(button.prop('disabled')).toEqual(saving);
@@ -51,7 +52,7 @@ describe('<EditMetaModal />', () => {
   });
 
   it('renders error message on error', () => {
-    const wrapper = createWrapper({}, { saving: false, error: true, meta: {} });
+    const wrapper = createWrapper({ saving: false, error: true });
     const error = wrapper.find('.bg-danger');
 
     expect(error).toHaveLength(1);
@@ -59,7 +60,7 @@ describe('<EditMetaModal />', () => {
 
   it('saves meta when form is submit', () => {
     const preventDefault = jest.fn();
-    const wrapper = createWrapper({}, { saving: false, error: false, meta: {} });
+    const wrapper = createWrapper({ saving: false, error: false });
     const form = wrapper.find('form');
 
     form.simulate('submit', { preventDefault });
@@ -70,13 +71,13 @@ describe('<EditMetaModal />', () => {
 
   it.each([
     [ '.btn-link', 'onClick' ],
-    [ Modal, 'toggle' ],
-    [ ModalHeader, 'toggle' ],
+    [ 'Modal', 'toggle' ],
+    [ 'ModalHeader', 'toggle' ],
   ])('resets meta when modal is toggled in any way', (componentToFind, propToCall) => {
-    const wrapper = createWrapper({}, { saving: false, error: false, meta: {} });
+    const wrapper = createWrapper({ saving: false, error: false });
     const component = wrapper.find(componentToFind);
 
-    component.prop(propToCall)();
+    (component.prop(propToCall) as Function)(); // eslint-disable-line @typescript-eslint/no-unnecessary-type-assertion
 
     expect(resetShortUrlMeta).toHaveBeenCalled();
   });

test/utils/DateInput.test.tsx

@@ -1,21 +1,22 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import moment from 'moment';
-import DateInput from '../../src/utils/DateInput';
+import { Mock } from 'ts-mockery';
+import DateInput, { DateInputProps } from '../../src/utils/DateInput';
 
 describe('<DateInput />', () => {
-  let wrapped;
+  let wrapped: ShallowWrapper;
 
-  const createComponent = (props = {}) => {
-    wrapped = shallow(<DateInput {...props} />);
+  const createComponent = (props: Partial<DateInputProps> = {}) => {
+    wrapped = shallow(<DateInput {...Mock.of<DateInputProps>(props)} />);
 
     return wrapped;
   };
 
-  afterEach(() => wrapped && wrapped.unmount());
+  afterEach(() => wrapped?.unmount());
 
-  it('wrapps a DatePicker', () => {
+  it('wraps a DatePicker', () => {
     wrapped = createComponent();
   });