More components migrated to TS

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>;