Remove the last UNSAFE_* methods from React components

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [1.136.0] - Not released
+### Fixed
+- The last UNSAFE_* methods were removed from React components.
 
 ## [1.135.1] - 2024-10-08
 ### Fixed

src/components/create-bookmarklet-post.jsx

@@ -30,7 +30,6 @@ export default class CreateBookmarkletPost extends Component {
     super(props);
 
     this.state = {
-      isPostSaved: false,
       feedNames: [this.props.user.username],
       feedsHasError: false,
       postText: this.props.postText,
@@ -56,30 +55,20 @@ export default class CreateBookmarkletPost extends Component {
     this.props.createPost(feeds, postText, imageUrls, commentText);
   };
 
-  UNSAFE_componentWillReceiveProps(newProps) {
-    // If it was successful saving, clear the form
-    const wasCommentJustSaved =
-      this.props.createPostStatus.loading && !newProps.createPostStatus.loading;
-    const wasThereNoError = !newProps.createPostStatus.error;
-
-    if (wasCommentJustSaved && wasThereNoError) {
-      this.setState({ isPostSaved: true });
-    }
-  }
-
   componentWillUnmount() {
     this.props.resetPostCreateForm();
   }
 
-  // When the SendTo became multiline, images choosen or textarea grows bookmarklet height is changed,
-  // but we can't handle this via CSS rules, so use JS to increase iframe size accordingly
-  // Only way to interact with the scripts outside the iframe is postMessage
+  // When the SendTo becomes multiline, images are chosen, or textarea is grows
+  // bookmarklet height is changed, but we can't handle this via CSS rules, so
+  // use JS to increase iframe size accordingly. The only way to interact with
+  // the scripts outside the iframe is postMessage.
   componentDidUpdate() {
     window.parent.postMessage(window.document.documentElement.offsetHeight, '*');
   }
 
   render() {
-    if (this.state.isPostSaved) {
+    if (this.props.createPostStatus.success) {
       const postUrl = `/${this.props.user.username}/${this.props.lastCreatedPostId}`;
       return (
         <div className="brand-new-post">

src/components/single-post.jsx

@@ -1,5 +1,5 @@
 /* global CONFIG */
-import { Component, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { Link } from 'react-router';
 import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
@@ -12,9 +12,11 @@ import Post from './post/post';
 import { SignInLink } from './sign-in-link';
 import { PostContextProvider } from './post/post-context';
 
-class SinglePostHandler extends Component {
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const { post, router, routeLoadingState } = nextProps;
+function SinglePostHandler(props) {
+  const { post, router, routeLoadingState } = props;
+
+  // Replace URL to the canonical one, if necessary
+  useEffect(() => {
     if (!post || routeLoadingState) {
       return;
     }
@@ -23,63 +25,58 @@ class SinglePostHandler extends Component {
     if (pathname !== canonicalPostURI) {
       router.replace(canonicalPostURI + search + hash);
     }
+  }, [post, routeLoadingState, router]);
+
+  let postBody = <div />;
+
+  if (props.errorString?.includes('You can not see this post')) {
+    return <PrivatePost isAuthorized={!!props.user.id} feedName={props.routeParams?.userName} />;
+  } else if (props.errorString?.includes('Please sign in to view this post')) {
+    return <ProtectedPost />;
+  } else if (props.errorString?.startsWith('404:')) {
+    return <NotFoundPost />;
+  } else if (props.errorString) {
+    postBody = <h2>{props.errorString}</h2>;
   }
 
-  render() {
-    const { props } = this;
-    const { post } = props;
-
-    let postBody = <div />;
-
-    if (props.errorString?.includes('You can not see this post')) {
-      return <PrivatePost isAuthorized={!!props.user.id} feedName={props.routeParams?.userName} />;
-    } else if (props.errorString?.includes('Please sign in to view this post')) {
-      return <ProtectedPost />;
-    } else if (props.errorString?.startsWith('404:')) {
-      return <NotFoundPost />;
-    } else if (props.errorString) {
-      postBody = <h2>{props.errorString}</h2>;
-    }
-
-    if (post) {
-      postBody = (
-        <PostContextProvider>
-          <Post
-            {...post}
-            key={post.id}
-            isCommenting={true}
-            isSinglePost={true}
-            user={props.user}
-            showMoreComments={props.showMoreComments}
-            showMoreLikes={props.showMoreLikes}
-            toggleEditingPost={props.toggleEditingPost}
-            cancelEditingPost={props.cancelEditingPost}
-            saveEditingPost={props.saveEditingPost}
-            deletePost={props.deletePost}
-            addAttachmentResponse={props.addAttachmentResponse}
-            toggleCommenting={props.toggleCommenting}
-            addComment={props.addComment}
-            likePost={props.likePost}
-            unlikePost={props.unlikePost}
-            toggleModeratingComments={props.toggleModeratingComments}
-            disableComments={props.disableComments}
-            enableComments={props.enableComments}
-            commentEdit={props.commentEdit}
-          />
-        </PostContextProvider>
-      );
-    }
-
-    return (
-      <div className="box">
-        <div className="box-header-timeline" role="heading">
-          {props.boxHeader}
-        </div>
-        <div className="box-body">{postBody}</div>
-        <div className="box-footer" />
-      </div>
+  if (props.post) {
+    postBody = (
+      <PostContextProvider>
+        <Post
+          {...post}
+          key={post.id}
+          isCommenting={true}
+          isSinglePost={true}
+          user={props.user}
+          showMoreComments={props.showMoreComments}
+          showMoreLikes={props.showMoreLikes}
+          toggleEditingPost={props.toggleEditingPost}
+          cancelEditingPost={props.cancelEditingPost}
+          saveEditingPost={props.saveEditingPost}
+          deletePost={props.deletePost}
+          addAttachmentResponse={props.addAttachmentResponse}
+          toggleCommenting={props.toggleCommenting}
+          addComment={props.addComment}
+          likePost={props.likePost}
+          unlikePost={props.unlikePost}
+          toggleModeratingComments={props.toggleModeratingComments}
+          disableComments={props.disableComments}
+          enableComments={props.enableComments}
+          commentEdit={props.commentEdit}
+        />
+      </PostContextProvider>
     );
   }
+
+  return (
+    <div className="box">
+      <div className="box-header-timeline" role="heading">
+        {props.boxHeader}
+      </div>
+      <div className="box-body">{postBody}</div>
+      <div className="box-footer" />
+    </div>
+  );
 }
 
 function selectState(state) {