Moved propTypes and defaultProps as static properties in class components

src/common/Home.js

@@ -9,12 +9,12 @@ import PropTypes from 'prop-types';
 import { resetSelectedServer } from '../servers/reducers/selectedServer';
 import './Home.scss';
 
-const propTypes = {
+export class HomeComponent extends React.Component {
+  static propTypes = {
     resetSelectedServer: PropTypes.func,
     servers: PropTypes.object,
-};
+  };
 
-export class HomeComponent extends React.Component {
   componentDidMount() {
     this.props.resetSelectedServer();
   }
@@ -51,8 +51,6 @@ export class HomeComponent extends React.Component {
   }
 }
 
-HomeComponent.propTypes = propTypes;
-
 const Home = connect(pick([ 'servers' ]), { resetSelectedServer })(HomeComponent);
 
 export default Home;

src/common/MainHeader.js

@@ -10,11 +10,11 @@ import ServersDropdown from '../servers/ServersDropdown';
 import './MainHeader.scss';
 import shlinkLogo from './shlink-logo-white.png';
 
-const propTypes = {
-  location: PropTypes.object,
-};
-
 export class MainHeaderComponent extends React.Component {
+  static propTypes = {
+    location: PropTypes.object,
+  };
+
   state = { isOpen: false };
   handleToggle = () => {
     this.setState(({ isOpen }) => ({
@@ -64,8 +64,6 @@ export class MainHeaderComponent extends React.Component {
   }
 }
 
-MainHeaderComponent.propTypes = propTypes;
-
 const MainHeader = withRouter(MainHeaderComponent);
 
 export default MainHeader;

src/common/MenuLayout.js

@@ -17,14 +17,14 @@ import TagsList from '../tags/TagsList';
 import { serverType } from '../servers/prop-types';
 import AsideMenu from './AsideMenu';
 
-const propTypes = {
+export class MenuLayoutComponent extends React.Component {
+  static propTypes = {
     match: PropTypes.object,
     selectServer: PropTypes.func,
     location: PropTypes.object,
     selectedServer: serverType,
-};
+  };
 
-export class MenuLayoutComponent extends React.Component {
   state = { showSideBar: false };
 
   // FIXME Shouldn't use componentWillMount, but this code has to be run before children components are rendered
@@ -105,8 +105,6 @@ export class MenuLayoutComponent extends React.Component {
   }
 }
 
-MenuLayoutComponent.propTypes = propTypes;
-
 const MenuLayout = compose(
   connect(pick([ 'selectedServer', 'shortUrlsListParams' ]), { selectServer }),
   withRouter

src/common/ScrollToTop.js

@@ -2,18 +2,18 @@ import React from 'react';
 import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-const propTypes = {
+export class ScrollToTopComponent extends React.Component {
+  static propTypes = {
     location: PropTypes.object,
     window: PropTypes.shape({
       scrollTo: PropTypes.func,
     }),
     children: PropTypes.node,
-};
+  };
-const defaultProps = {
+  static defaultProps = {
     window,
-};
+  };
 
-export class ScrollToTopComponent extends React.Component {
   componentDidUpdate(prevProps) {
     const { location, window } = this.props;
 
@@ -27,9 +27,6 @@ export class ScrollToTopComponent extends React.Component {
   }
 }
 
-ScrollToTopComponent.defaultProps = defaultProps;
-ScrollToTopComponent.propTypes = propTypes;
-
 const ScrollToTop = withRouter(ScrollToTopComponent);
 
 export default ScrollToTop;

src/servers/DeleteServerButton.js

@@ -5,12 +5,12 @@ import PropTypes from 'prop-types';
 import DeleteServerModal from './DeleteServerModal';
 import { serverType } from './prop-types';
 
-const propTypes = {
+export default class DeleteServerButton extends React.Component {
+  static propTypes = {
     server: serverType,
     className: PropTypes.string,
-};
+  };
 
-export default class DeleteServerButton extends React.Component {
   state = { isModalOpen: false };
 
   render() {
@@ -37,5 +37,3 @@ export default class DeleteServerButton extends React.Component {
     );
   }
 }
-
-DeleteServerButton.propTypes = propTypes;

src/servers/ServersDropdown.js

@@ -9,10 +9,11 @@ import serversExporter from '../servers/services/ServersExporter';
 import { listServers } from './reducers/server';
 import { serverType } from './prop-types';
 
-const defaultProps = {
+export class ServersDropdownComponent extends React.Component {
+  static defaultProps = {
     serversExporter,
-};
+  };
-const propTypes = {
+  static propTypes = {
     servers: PropTypes.object,
     serversExporter: PropTypes.shape({
       exportServers: PropTypes.func,
@@ -20,9 +21,8 @@ const propTypes = {
     selectedServer: serverType,
     selectServer: PropTypes.func,
     listServers: PropTypes.func,
-};
+  };
 
-export class ServersDropdownComponent extends React.Component {
   renderServers = () => {
     const { servers, selectedServer, selectServer, serversExporter } = this.props;
 
@@ -70,9 +70,6 @@ export class ServersDropdownComponent extends React.Component {
   }
 }
 
-ServersDropdownComponent.defaultProps = defaultProps;
-ServersDropdownComponent.propTypes = propTypes;
-
 const ServersDropdown = connect(
   pick([ 'servers', 'selectedServer' ]),
   { listServers, selectServer }

src/servers/helpers/ImportServersBtn.js

@@ -7,18 +7,18 @@ import PropTypes from 'prop-types';
 import { createServers } from '../reducers/server';
 import serversImporter, { serversImporterType } from '../services/ServersImporter';
 
-const defaultProps = {
+export class ImportServersBtnComponent extends React.Component {
+  static defaultProps = {
     serversImporter,
     onImport: () => ({}),
-};
+  };
-const propTypes = {
+  static propTypes = {
     onImport: PropTypes.func,
     serversImporter: serversImporterType,
     createServers: PropTypes.func,
     fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
-};
+  };
 
-export class ImportServersBtnComponent extends React.Component {
   constructor(props) {
     super(props);
     this.fileRef = props.fileRef || React.createRef();
@@ -58,9 +58,6 @@ export class ImportServersBtnComponent extends React.Component {
   }
 }
 
-ImportServersBtnComponent.defaultProps = defaultProps;
-ImportServersBtnComponent.propTypes = propTypes;
-
 const ImportServersBtn = connect(null, { createServers })(ImportServersBtnComponent);
 
 export default ImportServersBtn;

src/short-urls/ShortUrlVisits.js

@@ -20,7 +20,8 @@ import { serverType } from '../servers/prop-types';
 import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits';
 import './ShortUrlVisits.scss';
 
-const propTypes = {
+export class ShortUrlsVisitsComponent extends React.Component {
+  static propTypes = {
     processOsStats: PropTypes.func,
     processBrowserStats: PropTypes.func,
     processCountriesStats: PropTypes.func,
@@ -29,15 +30,14 @@ const propTypes = {
     getShortUrlVisits: PropTypes.func,
     selectedServer: serverType,
     shortUrlVisits: shortUrlVisitsType,
-};
+  };
-const defaultProps = {
+  static defaultProps = {
     processOsStats,
     processBrowserStats,
     processCountriesStats,
     processReferrersStats,
-};
+  };
 
-export class ShortUrlsVisitsComponent extends React.Component {
   state = { startDate: undefined, endDate: undefined };
   loadVisits = () => {
     const { match: { params }, getShortUrlVisits } = this.props;
@@ -210,9 +210,6 @@ export class ShortUrlsVisitsComponent extends React.Component {
   }
 }
 
-ShortUrlsVisitsComponent.propTypes = propTypes;
-ShortUrlsVisitsComponent.defaultProps = defaultProps;
-
 const ShortUrlsVisits = connect(
   pick([ 'selectedServer', 'shortUrlVisits' ]),
   { getShortUrlVisits }

src/short-urls/ShortUrlsList.js

@@ -20,7 +20,8 @@ const SORTABLE_FIELDS = {
   visits: 'Visits',
 };
 
-const propTypes = {
+export class ShortUrlsListComponent extends React.Component {
+  static propTypes = {
     listShortUrls: PropTypes.func,
     shortUrlsListParams: shortUrlsListParamsType,
     match: PropTypes.object,
@@ -29,9 +30,8 @@ const propTypes = {
     error: PropTypes.bool,
     shortUrlsList: PropTypes.arrayOf(shortUrlType),
     selectedServer: serverType,
-};
+  };
 
-export class ShortUrlsListComponent extends React.Component {
   refreshList = (extraParams) => {
     const { listShortUrls, shortUrlsListParams } = this.props;
 
@@ -186,8 +186,6 @@ export class ShortUrlsListComponent extends React.Component {
   }
 }
 
-ShortUrlsListComponent.propTypes = propTypes;
-
 const ShortUrlsList = connect(
   pick([ 'selectedServer', 'shortUrlsListParams' ]),
   { listShortUrls }

src/short-urls/helpers/CreateShortUrlResult.js

@@ -9,13 +9,13 @@ import { createShortUrlResultType } from '../reducers/shortUrlCreationResult';
 import { stateFlagTimeout } from '../../utils/utils';
 import './CreateShortUrlResult.scss';
 
-const propTypes = {
+export default class CreateShortUrlResult extends React.Component {
+  static propTypes = {
     resetCreateShortUrl: PropTypes.func,
     error: PropTypes.bool,
     result: createShortUrlResultType,
-};
+  };
 
-export default class CreateShortUrlResult extends React.Component {
   state = { showCopyTooltip: false };
 
   componentDidMount() {
@@ -62,5 +62,3 @@ export default class CreateShortUrlResult extends React.Component {
     );
   }
 }
-
-CreateShortUrlResult.propTypes = propTypes;

src/short-urls/helpers/EditTagsModal.js

@@ -13,7 +13,8 @@ import {
 import ExternalLink from '../../utils/ExternalLink';
 import { shortUrlType } from '../reducers/shortUrlsList';
 
-const propTypes = {
+export class EditTagsModalComponent extends React.Component {
+  static propTypes = {
     isOpen: PropTypes.bool.isRequired,
     toggle: PropTypes.func.isRequired,
     url: PropTypes.string.isRequired,
@@ -22,9 +23,8 @@ const propTypes = {
     editShortUrlTags: PropTypes.func,
     shortUrlTagsEdited: PropTypes.func,
     resetShortUrlsTags: PropTypes.func,
-};
+  };
 
-export class EditTagsModalComponent extends React.Component {
   saveTags = () => {
     const { editShortUrlTags, shortUrl, toggle } = this.props;
 
@@ -90,8 +90,6 @@ export class EditTagsModalComponent extends React.Component {
   }
 }
 
-EditTagsModalComponent.propTypes = propTypes;
-
 const EditTagsModal = connect(
   pick([ 'shortUrlTags' ]),
   { editShortUrlTags, resetShortUrlsTags, shortUrlTagsEdited }

src/short-urls/helpers/ShortUrlsRow.js

@@ -11,14 +11,14 @@ import { stateFlagTimeout } from '../../utils/utils';
 import { ShortUrlsRowMenu } from './ShortUrlsRowMenu';
 import './ShortUrlsRow.scss';
 
-const propTypes = {
+export class ShortUrlsRow extends React.Component {
+  static propTypes = {
     refreshList: PropTypes.func,
     shortUrlsListParams: shortUrlsListParamsType,
     selectedServer: serverType,
     shortUrl: shortUrlType,
-};
+  };
 
-export class ShortUrlsRow extends React.Component {
   state = { copiedToClipboard: false };
 
   renderTags(tags) {
@@ -73,5 +73,3 @@ export class ShortUrlsRow extends React.Component {
     );
   }
 }
-
-ShortUrlsRow.propTypes = propTypes;

src/short-urls/helpers/ShortUrlsRowMenu.js

@@ -17,14 +17,14 @@ import QrCodeModal from './QrCodeModal';
 import './ShortUrlsRowMenu.scss';
 import EditTagsModal from './EditTagsModal';
 
-const propTypes = {
+export class ShortUrlsRowMenu extends React.Component {
+  static propTypes = {
     completeShortUrl: PropTypes.string,
     onCopyToClipboard: PropTypes.func,
     selectedServer: serverType,
     shortUrl: shortUrlType,
-};
+  };
 
-export class ShortUrlsRowMenu extends React.Component {
   state = {
     isOpen: false,
     isQrModalOpen: false,
@@ -91,5 +91,3 @@ export class ShortUrlsRowMenu extends React.Component {
     );
   }
 }
-
-ShortUrlsRowMenu.propTypes = propTypes;

src/tags/TagCard.js

@@ -10,16 +10,16 @@ import './TagCard.scss';
 import DeleteTagConfirmModal from './helpers/DeleteTagConfirmModal';
 import EditTagModal from './helpers/EditTagModal';
 
-const propTypes = {
+export default class TagCard extends React.Component {
+  static propTypes = {
     tag: PropTypes.string,
     currentServerId: PropTypes.string,
     colorGenerator: colorGeneratorType,
-};
+  };
-const defaultProps = {
+  static defaultProps = {
     colorGenerator,
-};
+  };
 
-export default class TagCard extends React.Component {
   state = { isDeleteModalOpen: false, isEditModalOpen: false };
 
   render() {
@@ -69,6 +69,3 @@ export default class TagCard extends React.Component {
     );
   }
 }
-
-TagCard.propTypes = propTypes;
-TagCard.defaultProps = defaultProps;

src/tags/TagsList.js

@@ -9,16 +9,17 @@ import TagCard from './TagCard';
 
 const { ceil } = Math;
 const TAGS_GROUP_SIZE = 4;
-const propTypes = {
+
+export class TagsListComponent extends React.Component {
+  static propTypes = {
     filterTags: PropTypes.func,
     listTags: PropTypes.func,
     tagsList: PropTypes.shape({
       loading: PropTypes.bool,
     }),
     match: PropTypes.object,
-};
+  };
 
-export class TagsListComponent extends React.Component {
   componentDidMount() {
     const { listTags } = this.props;
 
@@ -85,8 +86,6 @@ export class TagsListComponent extends React.Component {
   }
 }
 
-TagsListComponent.propTypes = propTypes;
-
 const TagsList = connect(pick([ 'tagsList' ]), { listTags, filterTags })(TagsListComponent);
 
 export default TagsList;

src/tags/helpers/DeleteTagConfirmModal.js

@@ -5,16 +5,16 @@ import PropTypes from 'prop-types';
 import { pick } from 'ramda';
 import { deleteTag, tagDeleted, tagDeleteType } from '../reducers/tagDelete';
 
-const propTypes = {
+export class DeleteTagConfirmModalComponent extends React.Component {
+  static propTypes = {
     tag: PropTypes.string.isRequired,
     toggle: PropTypes.func.isRequired,
     isOpen: PropTypes.bool.isRequired,
     deleteTag: PropTypes.func,
     tagDelete: tagDeleteType,
     tagDeleted: PropTypes.func,
-};
+  };
 
-export class DeleteTagConfirmModalComponent extends React.Component {
   doDelete = () => {
     const { tag, toggle, deleteTag } = this.props;
 
@@ -68,8 +68,6 @@ export class DeleteTagConfirmModalComponent extends React.Component {
   }
 }
 
-DeleteTagConfirmModalComponent.propTypes = propTypes;
-
 const DeleteTagConfirmModal = connect(
   pick([ 'tagDelete' ]),
   { deleteTag, tagDeleted }

src/tags/helpers/EditTagModal.js

@@ -10,7 +10,8 @@ import colorGenerator, { colorGeneratorType } from '../../utils/ColorGenerator';
 import { editTag, tagEdited } from '../reducers/tagEdit';
 import './EditTagModal.scss';
 
-const propTypes = {
+export class EditTagModalComponent extends React.Component {
+  static propTypes = {
     tag: PropTypes.string,
     editTag: PropTypes.func,
     toggle: PropTypes.func,
@@ -21,12 +22,11 @@ const propTypes = {
       error: PropTypes.bool,
       editing: PropTypes.bool,
     }),
-};
+  };
-const defaultProps = {
+  static defaultProps = {
     colorGenerator,
-};
+  };
 
-export class EditTagModalComponent extends React.Component {
   saveTag = (e) => {
     e.preventDefault();
     const { tag: oldName, editTag, toggle } = this.props;
@@ -133,9 +133,6 @@ export class EditTagModalComponent extends React.Component {
   }
 }
 
-EditTagModalComponent.propTypes = propTypes;
-EditTagModalComponent.defaultProps = defaultProps;
-
 const EditTagModal = connect(pick([ 'tagEdit' ]), { editTag, tagEdited })(EditTagModalComponent);
 
 export default EditTagModal;

src/utils/SearchField.js

@@ -6,17 +6,18 @@ import classnames from 'classnames';
 import './SearchField.scss';
 
 const DEFAULT_SEARCH_INTERVAL = 500;
-const propTypes = {
+
+export default class SearchField extends React.Component {
+  static propTypes = {
     onChange: PropTypes.func.isRequired,
     className: PropTypes.string,
     placeholder: PropTypes.string,
-};
+  };
-const defaultProps = {
+  static defaultProps = {
     className: '',
     placeholder: 'Search...',
-};
+  };
 
-export default class SearchField extends React.Component {
   state = { showClearBtn: false, searchTerm: '' };
   timer = null;
 
@@ -64,6 +65,3 @@ export default class SearchField extends React.Component {
     );
   }
 }
-
-SearchField.propTypes = propTypes;
-SearchField.defaultProps = defaultProps;