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 = {
-  resetSelectedServer: PropTypes.func,
-  servers: PropTypes.object,
-};
-
 export class HomeComponent extends React.Component {
+  static propTypes = {
+    resetSelectedServer: PropTypes.func,
+    servers: PropTypes.object,
+  };
+
   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 = {
-  match: PropTypes.object,
-  selectServer: PropTypes.func,
-  location: PropTypes.object,
-  selectedServer: serverType,
-};
-
 export class MenuLayoutComponent extends React.Component {
+  static propTypes = {
+    match: PropTypes.object,
+    selectServer: PropTypes.func,
+    location: PropTypes.object,
+    selectedServer: serverType,
+  };
+
   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 = {
-  location: PropTypes.object,
-  window: PropTypes.shape({
-    scrollTo: PropTypes.func,
-  }),
-  children: PropTypes.node,
-};
-const defaultProps = {
-  window,
-};
-
 export class ScrollToTopComponent extends React.Component {
+  static propTypes = {
+    location: PropTypes.object,
+    window: PropTypes.shape({
+      scrollTo: PropTypes.func,
+    }),
+    children: PropTypes.node,
+  };
+  static defaultProps = {
+    window,
+  };
+
   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 = {
-  server: serverType,
-  className: PropTypes.string,
-};
-
 export default class DeleteServerButton extends React.Component {
+  static propTypes = {
+    server: serverType,
+    className: PropTypes.string,
+  };
+
   state = { isModalOpen: false };
 
   render() {
@@ -37,5 +37,3 @@ export default class DeleteServerButton extends React.Component {
     );
   }
 }
-
-DeleteServerButton.propTypes = propTypes;

src/servers/ServersDropdown.js

@@ -9,20 +9,20 @@ import serversExporter from '../servers/services/ServersExporter';
 import { listServers } from './reducers/server';
 import { serverType } from './prop-types';
 
-const defaultProps = {
-  serversExporter,
-};
-const propTypes = {
-  servers: PropTypes.object,
-  serversExporter: PropTypes.shape({
-    exportServers: PropTypes.func,
-  }),
-  selectedServer: serverType,
-  selectServer: PropTypes.func,
-  listServers: PropTypes.func,
-};
-
 export class ServersDropdownComponent extends React.Component {
+  static defaultProps = {
+    serversExporter,
+  };
+  static propTypes = {
+    servers: PropTypes.object,
+    serversExporter: PropTypes.shape({
+      exportServers: PropTypes.func,
+    }),
+    selectedServer: serverType,
+    selectServer: PropTypes.func,
+    listServers: PropTypes.func,
+  };
+
   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 = {
-  serversImporter,
-  onImport: () => ({}),
-};
-const propTypes = {
-  onImport: PropTypes.func,
-  serversImporter: serversImporterType,
-  createServers: PropTypes.func,
-  fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
-};
-
 export class ImportServersBtnComponent extends React.Component {
+  static defaultProps = {
+    serversImporter,
+    onImport: () => ({}),
+  };
+  static propTypes = {
+    onImport: PropTypes.func,
+    serversImporter: serversImporterType,
+    createServers: PropTypes.func,
+    fileRef: PropTypes.oneOfType([ PropTypes.object, PropTypes.node ]),
+  };
+
   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,24 +20,24 @@ import { serverType } from '../servers/prop-types';
 import { getShortUrlVisits, shortUrlVisitsType } from './reducers/shortUrlVisits';
 import './ShortUrlVisits.scss';
 
-const propTypes = {
-  processOsStats: PropTypes.func,
-  processBrowserStats: PropTypes.func,
-  processCountriesStats: PropTypes.func,
-  processReferrersStats: PropTypes.func,
-  match: PropTypes.object,
-  getShortUrlVisits: PropTypes.func,
-  selectedServer: serverType,
-  shortUrlVisits: shortUrlVisitsType,
-};
-const defaultProps = {
-  processOsStats,
-  processBrowserStats,
-  processCountriesStats,
-  processReferrersStats,
-};
-
 export class ShortUrlsVisitsComponent extends React.Component {
+  static propTypes = {
+    processOsStats: PropTypes.func,
+    processBrowserStats: PropTypes.func,
+    processCountriesStats: PropTypes.func,
+    processReferrersStats: PropTypes.func,
+    match: PropTypes.object,
+    getShortUrlVisits: PropTypes.func,
+    selectedServer: serverType,
+    shortUrlVisits: shortUrlVisitsType,
+  };
+  static defaultProps = {
+    processOsStats,
+    processBrowserStats,
+    processCountriesStats,
+    processReferrersStats,
+  };
+
   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,18 +20,18 @@ const SORTABLE_FIELDS = {
   visits: 'Visits',
 };
 
-const propTypes = {
-  listShortUrls: PropTypes.func,
-  shortUrlsListParams: shortUrlsListParamsType,
-  match: PropTypes.object,
-  location: PropTypes.object,
-  loading: PropTypes.bool,
-  error: PropTypes.bool,
-  shortUrlsList: PropTypes.arrayOf(shortUrlType),
-  selectedServer: serverType,
-};
-
 export class ShortUrlsListComponent extends React.Component {
+  static propTypes = {
+    listShortUrls: PropTypes.func,
+    shortUrlsListParams: shortUrlsListParamsType,
+    match: PropTypes.object,
+    location: PropTypes.object,
+    loading: PropTypes.bool,
+    error: PropTypes.bool,
+    shortUrlsList: PropTypes.arrayOf(shortUrlType),
+    selectedServer: serverType,
+  };
+
   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 = {
-  resetCreateShortUrl: PropTypes.func,
-  error: PropTypes.bool,
-  result: createShortUrlResultType,
-};
-
 export default class CreateShortUrlResult extends React.Component {
+  static propTypes = {
+    resetCreateShortUrl: PropTypes.func,
+    error: PropTypes.bool,
+    result: createShortUrlResultType,
+  };
+
   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,18 +13,18 @@ import {
 import ExternalLink from '../../utils/ExternalLink';
 import { shortUrlType } from '../reducers/shortUrlsList';
 
-const propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-  toggle: PropTypes.func.isRequired,
-  url: PropTypes.string.isRequired,
-  shortUrl: shortUrlType.isRequired,
-  shortUrlTags: shortUrlTagsType,
-  editShortUrlTags: PropTypes.func,
-  shortUrlTagsEdited: PropTypes.func,
-  resetShortUrlsTags: PropTypes.func,
-};
-
 export class EditTagsModalComponent extends React.Component {
+  static propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    toggle: PropTypes.func.isRequired,
+    url: PropTypes.string.isRequired,
+    shortUrl: shortUrlType.isRequired,
+    shortUrlTags: shortUrlTagsType,
+    editShortUrlTags: PropTypes.func,
+    shortUrlTagsEdited: PropTypes.func,
+    resetShortUrlsTags: PropTypes.func,
+  };
+
   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 = {
-  refreshList: PropTypes.func,
-  shortUrlsListParams: shortUrlsListParamsType,
-  selectedServer: serverType,
-  shortUrl: shortUrlType,
-};
-
 export class ShortUrlsRow extends React.Component {
+  static propTypes = {
+    refreshList: PropTypes.func,
+    shortUrlsListParams: shortUrlsListParamsType,
+    selectedServer: serverType,
+    shortUrl: shortUrlType,
+  };
+
   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 = {
-  completeShortUrl: PropTypes.string,
-  onCopyToClipboard: PropTypes.func,
-  selectedServer: serverType,
-  shortUrl: shortUrlType,
-};
-
 export class ShortUrlsRowMenu extends React.Component {
+  static propTypes = {
+    completeShortUrl: PropTypes.string,
+    onCopyToClipboard: PropTypes.func,
+    selectedServer: serverType,
+    shortUrl: shortUrlType,
+  };
+
   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 = {
-  tag: PropTypes.string,
-  currentServerId: PropTypes.string,
-  colorGenerator: colorGeneratorType,
-};
-const defaultProps = {
-  colorGenerator,
-};
-
 export default class TagCard extends React.Component {
+  static propTypes = {
+    tag: PropTypes.string,
+    currentServerId: PropTypes.string,
+    colorGenerator: colorGeneratorType,
+  };
+  static defaultProps = {
+    colorGenerator,
+  };
+
   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 = {
-  filterTags: PropTypes.func,
-  listTags: PropTypes.func,
-  tagsList: PropTypes.shape({
-    loading: PropTypes.bool,
-  }),
-  match: PropTypes.object,
-};
 
 export class TagsListComponent extends React.Component {
+  static propTypes = {
+    filterTags: PropTypes.func,
+    listTags: PropTypes.func,
+    tagsList: PropTypes.shape({
+      loading: PropTypes.bool,
+    }),
+    match: PropTypes.object,
+  };
+
   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 = {
-  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 {
+  static propTypes = {
+    tag: PropTypes.string.isRequired,
+    toggle: PropTypes.func.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    deleteTag: PropTypes.func,
+    tagDelete: tagDeleteType,
+    tagDeleted: PropTypes.func,
+  };
+
   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,23 +10,23 @@ import colorGenerator, { colorGeneratorType } from '../../utils/ColorGenerator';
 import { editTag, tagEdited } from '../reducers/tagEdit';
 import './EditTagModal.scss';
 
-const propTypes = {
-  tag: PropTypes.string,
-  editTag: PropTypes.func,
-  toggle: PropTypes.func,
-  tagEdited: PropTypes.func,
-  colorGenerator: colorGeneratorType,
-  isOpen: PropTypes.bool,
-  tagEdit: PropTypes.shape({
-    error: PropTypes.bool,
-    editing: PropTypes.bool,
-  }),
-};
-const defaultProps = {
-  colorGenerator,
-};
-
 export class EditTagModalComponent extends React.Component {
+  static propTypes = {
+    tag: PropTypes.string,
+    editTag: PropTypes.func,
+    toggle: PropTypes.func,
+    tagEdited: PropTypes.func,
+    colorGenerator: colorGeneratorType,
+    isOpen: PropTypes.bool,
+    tagEdit: PropTypes.shape({
+      error: PropTypes.bool,
+      editing: PropTypes.bool,
+    }),
+  };
+  static defaultProps = {
+    colorGenerator,
+  };
+
   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 = {
-  onChange: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  placeholder: PropTypes.string,
-};
-const defaultProps = {
-  className: '',
-  placeholder: 'Search...',
-};
 
 export default class SearchField extends React.Component {
+  static propTypes = {
+    onChange: PropTypes.func.isRequired,
+    className: PropTypes.string,
+    placeholder: PropTypes.string,
+  };
+  static defaultProps = {
+    className: '',
+    placeholder: 'Search...',
+  };
+
   state = { showClearBtn: false, searchTerm: '' };
   timer = null;
 
@@ -64,6 +65,3 @@ export default class SearchField extends React.Component {
     );
   }
 }
-
-SearchField.propTypes = propTypes;
-SearchField.defaultProps = defaultProps;