From 6d6ca72e965c5d9d22d0463e200d1851304a91bf Mon Sep 17 00:00:00 2001
From: David Mzareulyan <david@hiero.ru>
Date: Thu, 10 Oct 2024 14:49:34 +0300
Subject: [PATCH 1/3] Rewrite SinglePostHandler and remove its UNSAFE_ method

---
 src/components/single-post.jsx | 111 ++++++++++++++++-----------------
 1 file changed, 54 insertions(+), 57 deletions(-)

diff --git a/src/components/single-post.jsx b/src/components/single-post.jsx
index 240bf54a5..d5ce7af38 100644
--- a/src/components/single-post.jsx
+++ b/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) {

From 93682c66fe81533b95b1e3b6d1c17f2540897325 Mon Sep 17 00:00:00 2001
From: David Mzareulyan <david@hiero.ru>
Date: Thu, 10 Oct 2024 14:58:28 +0300
Subject: [PATCH 2/3] Remove the _UNSAFE method from the CreateBookmarkletPost

---
 src/components/create-bookmarklet-post.jsx | 21 +++++----------------
 1 file changed, 5 insertions(+), 16 deletions(-)

diff --git a/src/components/create-bookmarklet-post.jsx b/src/components/create-bookmarklet-post.jsx
index d1aadf76a..7c4a7eb15 100644
--- a/src/components/create-bookmarklet-post.jsx
+++ b/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">

From 12d5404ed03deb585feeb2eadd840c3d10888894 Mon Sep 17 00:00:00 2001
From: David Mzareulyan <david@hiero.ru>
Date: Thu, 10 Oct 2024 15:01:03 +0300
Subject: [PATCH 3/3] Update changelog

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 356df48f5..cb719b077 100644
--- a/CHANGELOG.md
+++ b/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