diff --git a/CHANGELOG.md b/CHANGELOG.md index cae753a3..fc6077a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 [details](https://sass-lang.com/documentation/breaking-changes/legacy-js-api/#bundlers); - All mixed declarations in .scss files were removed, see [details](https://sass-lang.com/documentation/breaking-changes/mixed-decls/). +- The last UNSAFE_* methods were removed from React components. ## [1.135.1] - 2024-10-08 ### Fixed diff --git a/src/components/create-bookmarklet-post.jsx b/src/components/create-bookmarklet-post.jsx index d1aadf76..7c4a7eb1 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 (
diff --git a/src/components/single-post.jsx b/src/components/single-post.jsx index 240bf54a..d5ce7af3 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 =
; + + if (props.errorString?.includes('You can not see this post')) { + return ; + } else if (props.errorString?.includes('Please sign in to view this post')) { + return ; + } else if (props.errorString?.startsWith('404:')) { + return ; + } else if (props.errorString) { + postBody =

{props.errorString}

; } - render() { - const { props } = this; - const { post } = props; - - let postBody =
; - - if (props.errorString?.includes('You can not see this post')) { - return ; - } else if (props.errorString?.includes('Please sign in to view this post')) { - return ; - } else if (props.errorString?.startsWith('404:')) { - return ; - } else if (props.errorString) { - postBody =

{props.errorString}

; - } - - if (post) { - postBody = ( - - - - ); - } - - return ( -
-
- {props.boxHeader} -
-
{postBody}
-
-
+ if (props.post) { + postBody = ( + + + ); } + + return ( +
+
+ {props.boxHeader} +
+
{postBody}
+
+
+ ); } function selectState(state) {