Big refactor, remove deprecated lifecycle methods

admin/components/Author/Basic.js

@@ -1,43 +1,39 @@
 import React, { Component } from "react";
-import { uploadFile } from "../../util";
 import PropTypes from "prop-types";
+
+import { uploadFile } from "../../util";
 import config from "config";
 
 export default class Basic extends Component {
     static propTypes = {
         data: PropTypes.object,
         updateOption: PropTypes.func
     };
+
     static contextTypes = {
         t: PropTypes.func
     };
-    constructor(props) {
-        super(props);
-        this.updateOption = this.updateOption.bind(this);
-        this.uploadAvatar = this.uploadAvatar.bind(this);
-        this.updateAvatar = this.updateAvatar.bind(this);
 
-        this.uploadInputRef = React.createRef();
+    uploadInputRef = React.createRef();
 
-        this.state = {
-            avatar: this.props.data.avatar
-        };
-    }
+    state = {
+        avatar: this.props.data.avatar
+    };
 
-    updateOption(option, value) {
+    updateOption = (option, value) => {
         this.props.updateOption(option, value);
-    }
+    };
 
-    async uploadAvatar(files) {
+    uploadAvatar = async files => {
         const avatar = await uploadFile({ files });
         this.updateOption("avatar", avatar);
         this.setState({ avatar });
-    }
+    };
 
-    updateAvatar(avatar) {
+    updateAvatar = avatar => {
         this.updateOption("avatar", avatar);
         this.setState({ avatar });
-    }
+    };
 
     render() {
         const { t } = this.context;

admin/components/Author/PasswordChange.js

@@ -10,13 +10,10 @@ export default class PasswordChange extends Component {
         t: PropTypes.func
     };
 
-    constructor(props) {
-        super(props);
-        this.updateOption = this.updateOption.bind(this);
-    }
-    updateOption(option, value) {
+    updateOption = (option, value) => {
         this.props.updateOption("password", value);
     }
+
     render() {
         const { t } = this.context;
         return (

admin/components/Author/Social.js

@@ -20,25 +20,17 @@ export default class Social extends Component {
         t: PropTypes.func
     };
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            social: {}
-        };
-        this.updateOption = this.updateOption.bind(this);
-    }
-    componentWillMount() {
-        this.setState({
-            social: JSON.parse(this.props.data)
-        });
+    state = {
+        social: JSON.parse(this.props.data)
     }
 
-    updateOption(option, value) {
-        let newState = { social: { ...this.state.social } };
+    updateOption = (option, value) => {
+        const newState = { social: { ...this.state.social } };
         newState.social[option] = value;
         this.setState(newState);
         this.props.updateOption("social", JSON.stringify(newState.social));
     }
+
     render() {
         const { t } = this.context;
         return (

admin/components/InfiniteScrollList.js

@@ -20,4 +20,5 @@ InfiniteScrollList.propTypes = {
     data: PropTypes.array.isRequired,
     loadMore: PropTypes.func.isRequired
 };
+
 export default InfiniteScrollList;

admin/components/Media/EditMediaInfo.js

@@ -1,8 +1,9 @@
 import React, { Component } from "react";
-import ModalHoc from "../../components/ModalHoc";
-import config from "../../../config";
 import PropTypes from "prop-types";
+
+import ModalHoc from "../../components/ModalHoc";
 import Loader from "../Loader";
+import config from "../../../config";
 
 class EditMediaInfo extends Component {
     static propTypes = {
@@ -15,22 +16,17 @@ class EditMediaInfo extends Component {
     static contextTypes = {
         t: PropTypes.func
     };
-    constructor(props) {
-        super(props);
-        this.itemName = React.createRef();
-        this.onChange = this.onChange.bind(this);
-        this.updateMedia = this.updateMedia.bind(this);
-        this.goPrevious = this.goPrevious.bind(this);
-        this.goNext = this.goNext.bind(this);
-        this.state = {
-            media: {
-                id: this.props.media.id,
-                name: this.props.media.name,
-                description: this.props.media.description
-            },
-            saving: false
-        };
-    }
+
+    state = {
+        media: {
+            id: this.props.media.id,
+            name: this.props.media.name,
+            description: this.props.media.description
+        },
+        saving: false
+    };
+
+    itemName = React.createRef();
 
     static getDerivedStateFromProps(newProps, oldState) {
         if (oldState.media.id === newProps.media.id) return null;
@@ -47,22 +43,23 @@ class EditMediaInfo extends Component {
         this.itemName.current.focus();
     }
 
-    onChange(field, value) {
+    onChange = (field, value) => {
         this.setState({ media: { ...this.state.media, [field]: value } });
-    }
+    };
 
-    goPrevious(e) {
+    goPrevious = e => {
         e.preventDefault();
         this.updateMedia();
         this.props.previous();
-    }
-    goNext(e) {
+    };
+    goNext = e => {
         e.preventDefault();
         this.updateMedia();
         this.props.next();
-    }
+    };
 
-    async updateMedia(e) {
+    updateMedia = async e => {
+        e.persist();
         // get the old values
         const { name, description } = this.props.media;
         // compare with current state to see if there is a change.
@@ -80,7 +77,7 @@ class EditMediaInfo extends Component {
         if (e && e.target.type == "button") {
             this.props.onClose();
         }
-    }
+    };
 
     render() {
         const url = config.baseName + this.props.media.url;

admin/components/Media/MediaItem.js

@@ -2,9 +2,10 @@ import React, { Component } from "react";
 import moment from "moment";
 import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
-import config from "../../../config";
 import { notify } from "react-notify-toast";
 
+import config from "../../../config";
+
 export default class MediaItem extends Component {
     static propTypes = {
         media: PropTypes.object,
@@ -13,25 +14,22 @@ export default class MediaItem extends Component {
         editMediaInfo: PropTypes.func
     };
 
-    constructor(props) {
-        super(props);
-        this.deleteMedia = this.deleteMedia.bind(this);
-        this.mediaClicked = this.mediaClicked.bind(this);
-        this.editInfo = this.editInfo.bind(this);
-    }
-    postSelected(e) {
+    postSelected = (e) => {
         e.preventDefault();
         e.stopPropagation();
     }
-    deleteMedia(e) {
+
+    deleteMedia = (e) => {
         e.preventDefault();
         this.props.confirmDelete(this.props.media);
     }
-    editInfo(e) {
+
+    editInfo = (e) => {
         e.preventDefault();
         this.props.editMediaInfo(this.props.media);
     }
-    copyToClipboard(e) {
+
+    copyToClipboard = (e) => {
         e.preventDefault();
         const textField = document.createElement("textarea");
         textField.innerText = e.target.href;
@@ -41,7 +39,8 @@ export default class MediaItem extends Component {
         textField.remove();
         notify.show("Link copied", "success");
     }
-    mediaClicked() {
+
+    mediaClicked = () => {
         const url = config.baseName + this.props.media.url;
         window.open(url);
     }