diff --git a/src/common/Home.js b/src/common/Home.js index 3aa66f89..a3293d49 100644 --- a/src/common/Home.js +++ b/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; diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js index 87b6d2ef..76836714 100644 --- a/src/common/MainHeader.js +++ b/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; diff --git a/src/common/MenuLayout.js b/src/common/MenuLayout.js index 3f3c7b41..a42b1d49 100644 --- a/src/common/MenuLayout.js +++ b/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 diff --git a/src/common/ScrollToTop.js b/src/common/ScrollToTop.js index f14b4c79..789f1a33 100644 --- a/src/common/ScrollToTop.js +++ b/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; diff --git a/src/servers/DeleteServerButton.js b/src/servers/DeleteServerButton.js index 5dff7244..7d161fc1 100644 --- a/src/servers/DeleteServerButton.js +++ b/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; diff --git a/src/servers/ServersDropdown.js b/src/servers/ServersDropdown.js index a990f302..84c96fac 100644 --- a/src/servers/ServersDropdown.js +++ b/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 } diff --git a/src/servers/helpers/ImportServersBtn.js b/src/servers/helpers/ImportServersBtn.js index 431d3d13..b5653674 100644 --- a/src/servers/helpers/ImportServersBtn.js +++ b/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; diff --git a/src/short-urls/ShortUrlVisits.js b/src/short-urls/ShortUrlVisits.js index 534026b0..99e67687 100644 --- a/src/short-urls/ShortUrlVisits.js +++ b/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 } diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js index e68160e6..43335d7f 100644 --- a/src/short-urls/ShortUrlsList.js +++ b/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 } diff --git a/src/short-urls/helpers/CreateShortUrlResult.js b/src/short-urls/helpers/CreateShortUrlResult.js index aac34acd..5dd2aae4 100644 --- a/src/short-urls/helpers/CreateShortUrlResult.js +++ b/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; diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js index 0a8e95d0..38a95949 100644 --- a/src/short-urls/helpers/EditTagsModal.js +++ b/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 } diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js index f4e2bc05..0fbd9e82 100644 --- a/src/short-urls/helpers/ShortUrlsRow.js +++ b/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; diff --git a/src/short-urls/helpers/ShortUrlsRowMenu.js b/src/short-urls/helpers/ShortUrlsRowMenu.js index 436817c3..c835a17b 100644 --- a/src/short-urls/helpers/ShortUrlsRowMenu.js +++ b/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; diff --git a/src/tags/TagCard.js b/src/tags/TagCard.js index 2ccfd21c..b4e65959 100644 --- a/src/tags/TagCard.js +++ b/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; diff --git a/src/tags/TagsList.js b/src/tags/TagsList.js index c87ddfbd..b1f0a213 100644 --- a/src/tags/TagsList.js +++ b/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; diff --git a/src/tags/helpers/DeleteTagConfirmModal.js b/src/tags/helpers/DeleteTagConfirmModal.js index 0cb2b1d8..e201c799 100644 --- a/src/tags/helpers/DeleteTagConfirmModal.js +++ b/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 } diff --git a/src/tags/helpers/EditTagModal.js b/src/tags/helpers/EditTagModal.js index defbef5d..91e58bd9 100644 --- a/src/tags/helpers/EditTagModal.js +++ b/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; diff --git a/src/utils/SearchField.js b/src/utils/SearchField.js index 5ed91632..f741ebb5 100644 --- a/src/utils/SearchField.js +++ b/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;