From 436e7ad1cf298c99699e521953137486e13c8280 Mon Sep 17 00:00:00 2001 From: devinwalker Date: Tue, 30 Apr 2024 13:11:47 -0700 Subject: [PATCH] use prettier formatting --- src/admin.js | 539 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 317 insertions(+), 222 deletions(-) diff --git a/src/admin.js b/src/admin.js index 39244b5..df29f4e 100644 --- a/src/admin.js +++ b/src/admin.js @@ -1,15 +1,14 @@ import './admin.scss'; -import {Button, Dashicon, Modal, Spinner} from '@wordpress/components'; -import {createRoot, useEffect, useState} from '@wordpress/element'; -import {__, _n, sprintf} from '@wordpress/i18n'; +import { Button, Dashicon, Modal, Spinner } from '@wordpress/components'; +import { createRoot, useEffect, useState } from '@wordpress/element'; +import { __, _n, sprintf } from '@wordpress/i18n'; import domReady from '@wordpress/dom-ready'; -import {decodeEntities} from '@wordpress/html-entities'; -import {addQueryArgs, getQueryArgs} from '@wordpress/url'; +import { decodeEntities } from '@wordpress/html-entities'; +import { addQueryArgs, getQueryArgs } from '@wordpress/url'; import ExpandableText from './ExpandableText'; import TrunkPopover from './TrunkPopover'; const AdminPage = () => { - const [ isLoading, setIsLoading ] = useState( true ); const [ rollbackInfo, setRollbackInfo ] = useState( false ); const [ imageUrl, setImageUrl ] = useState( null ); @@ -17,7 +16,7 @@ const AdminPage = () => { const [ isConfirmModalOpen, setIsConfirmModalOpen ] = useState( false ); const [ isChangelogModalOpen, setIsChangelogModalOpen ] = useState( false ); const [ rollbackVersion, setIsRollbackVersion ] = useState( queryArgs.current_version ); - const {adminUrl, referrer} = wprData; + const { adminUrl, referrer } = wprData; const openConfirmModal = () => setIsConfirmModalOpen( true ); const openChangelogModal = () => setIsChangelogModalOpen( true ); @@ -25,7 +24,6 @@ const AdminPage = () => { const closeChangelogModal = () => setIsChangelogModalOpen( false ); useEffect( () => { - let restUrl = addQueryArgs( wprData.restUrl + 'wp-rollback/v1/fetch-info/', { type: queryArgs.type, slug: queryArgs.type === 'theme' ? queryArgs.theme_file : queryArgs.plugin_slug, @@ -35,7 +33,7 @@ const AdminPage = () => { 'X-WP-Nonce': wprData.restApiNonce, // Assuming nonce is stored in wprData.nonce } ); - fetch( restUrl, {headers: headers} ) + fetch( restUrl, { headers: headers } ) .then( ( response ) => response.json() ) .then( ( data ) => { setRollbackInfo( data ); @@ -54,7 +52,7 @@ const AdminPage = () => { for ( let size of sizes ) { for ( let ext of extensions ) { - const url = `https://ps.w.org/${rollbackInfo.slug}/assets/${size}.${ext}`; + const url = `https://ps.w.org/${ rollbackInfo.slug }/assets/${ size }.${ ext }`; const exists = await checkImage( url ); if ( exists ) { setImageUrl( url ); @@ -80,16 +78,16 @@ const AdminPage = () => { if ( isLoading ) { return ( -
-
-
+
+
+
-

{__( 'Loading...', 'wp-rollback' )}

+

{ __( 'Loading...', 'wp-rollback' ) }

@@ -99,20 +97,19 @@ const AdminPage = () => { // output error message if one is found in the API response if ( rollbackInfo.message ) { return ( -
-
-

{rollbackInfo.code}

-

{rollbackInfo.message}

+
+
+

{ rollbackInfo.code }

+

{ rollbackInfo.message }

); } function getTimeAgo( dateString ) { - // Convert to 24-hour format and remove 'GMT' let adjustedDateString = dateString.replace( 'am', ' AM' ).replace( 'pm', ' PM' ).replace( ' GMT', '' ); - adjustedDateString = new Date( adjustedDateString ).toLocaleString( 'en-US', {timeZone: 'GMT'} ); + adjustedDateString = new Date( adjustedDateString ).toLocaleString( 'en-US', { timeZone: 'GMT' } ); const date = new Date( adjustedDateString ); if ( isNaN( date.getTime() ) ) { @@ -128,144 +125,204 @@ const AdminPage = () => { return sprintf( _n( '%s second ago', '%s seconds ago', diffInSeconds, 'wp-rollback' ), diffInSeconds ); } else if ( diffInSeconds < 3600 ) { // translators: %s Number of minutes. - return sprintf( _n( '%s minute ago', '%s minutes ago', Math.floor( diffInSeconds / 60 ), 'wp-rollback' ), Math.floor( diffInSeconds / 60 ) ); + return sprintf( + _n( '%s minute ago', '%s minutes ago', Math.floor( diffInSeconds / 60 ), 'wp-rollback' ), + Math.floor( diffInSeconds / 60 ) + ); } else if ( diffInSeconds < 86400 ) { // translators: %s Number of hours. - return sprintf( _n( '%s hour ago', '%s hours ago', Math.floor( diffInSeconds / 3600 ), 'wp-rollback' ), Math.floor( diffInSeconds / 3600 ) ); - } else if ( diffInSeconds < 2592000 ) { // 30 days + return sprintf( + _n( '%s hour ago', '%s hours ago', Math.floor( diffInSeconds / 3600 ), 'wp-rollback' ), + Math.floor( diffInSeconds / 3600 ) + ); + } else if ( diffInSeconds < 2592000 ) { + // 30 days // translators: %s Number of days. - return sprintf( _n( '%s day ago', '%s days ago', Math.floor( diffInSeconds / 86400 ), 'wp-rollback' ), Math.floor( diffInSeconds / 86400 ) ); - } else if ( diffInSeconds < 31536000 ) { // 365 days + return sprintf( + _n( '%s day ago', '%s days ago', Math.floor( diffInSeconds / 86400 ), 'wp-rollback' ), + Math.floor( diffInSeconds / 86400 ) + ); + } else if ( diffInSeconds < 31536000 ) { + // 365 days // translators: %s Number of monthes. - return sprintf( _n( '%s month ago', '%s months ago', Math.floor( diffInSeconds / 2592000 ), 'wp-rollback' ), Math.floor( diffInSeconds / 2592000 ) ); + return sprintf( + _n( '%s month ago', '%s months ago', Math.floor( diffInSeconds / 2592000 ), 'wp-rollback' ), + Math.floor( diffInSeconds / 2592000 ) + ); } else { // translators: %s Number of years. - return sprintf( _n( '%s year ago', '%s years ago', Math.floor( diffInSeconds / 31536000 ), 'wp-rollback' ), Math.floor( diffInSeconds / 31536000 ) ); + return sprintf( + _n( '%s year ago', '%s years ago', Math.floor( diffInSeconds / 31536000 ), 'wp-rollback' ), + Math.floor( diffInSeconds / 31536000 ) + ); } } return ( -
-
-
-

{__( 'WP Rollback', 'wp-rollback' )}

- {'WP +
+
+
+

{ __( 'WP Rollback', 'wp-rollback' ) }

+ + { +
-

{__( 'Select which version you would like to rollback to from the releases listed below.', 'wp-rollback' )}

+

+ { __( + 'Select which version you would like to rollback to from the releases listed below.', + 'wp-rollback' + ) } +

- {rollbackInfo.banners && queryArgs.type === 'plugin' && ( rollbackInfo.banners.high || rollbackInfo.banners.low ) && ( -
- {rollbackInfo.name} -
- )} + { rollbackInfo.banners && + queryArgs.type === 'plugin' && + ( rollbackInfo.banners.high || rollbackInfo.banners.low ) && ( +
+ { +
+ ) }
- - {rollbackInfo.screenshot_url && queryArgs.type === 'theme' && ( + { rollbackInfo.screenshot_url && queryArgs.type === 'theme' && (
- {rollbackInfo.name} + {
- )} - - {imageUrl && queryArgs.type === 'plugin' && ( -
- {rollbackInfo.name} + ) } + + { imageUrl && queryArgs.type === 'plugin' && ( +
+ {
- - )} - -
-

- {queryArgs.type === 'plugin' && ( - +

+ { queryArgs.type === 'plugin' && ( + - {decodeEntities( rollbackInfo.name )} + { decodeEntities( rollbackInfo.name ) } - )} - {queryArgs.type === 'theme' && ( - - {decodeEntities( rollbackInfo.name )} + alt={ sprintf( + __( 'View %s on WordPress.org', 'wp-rollback' ), + rollbackInfo.name + ) } + > + { decodeEntities( rollbackInfo.name ) } - )} - + ) }

- {queryArgs.type === 'theme' && rollbackInfo.sections.description && ( -
- + { queryArgs.type === 'theme' && rollbackInfo.sections.description && ( +
+ +
+ ) } + +
+
+ + { __( 'Installed version:', 'wp-rollback' ) }{ ' ' } + { queryArgs.current_version } +
- )} - -
-
{__( 'Installed version:', 'wp-rollback' )}{' '} - {queryArgs.current_version}
- - {queryArgs.type === 'plugin' && ( -
- {__( 'Plugin author:', 'wp-rollback' )}{' '} - - + + { queryArgs.type === 'plugin' && ( +
+ + { __( 'Plugin author:', 'wp-rollback' ) }{ ' ' } +
- )} + ) }
-
-
- {queryArgs.type === 'theme' && ( -
-

{__( 'Theme Author', 'wp-rollback' )}

-
- -
{rollbackInfo.author.display_name} +
+ { queryArgs.type === 'theme' && ( +
+

{ __( 'Theme Author', 'wp-rollback' ) }

+
- )} - - {queryArgs.type === 'plugin' && ( -
-
- + ) } + + { queryArgs.type === 'plugin' && ( +
+
+
-

{__( 'Last Updated', 'wp-rollback' )}

-
+

{ __( 'Last Updated', 'wp-rollback' ) }

+
- {getTimeAgo( rollbackInfo.last_updated )} + + { getTimeAgo( rollbackInfo.last_updated ) } +
- )} + ) }
-
- {Object.keys( rollbackInfo.versions ) +
+ { Object.keys( rollbackInfo.versions ) .sort( ( a, b ) => { if ( a === 'trunk' ) { return 1; @@ -274,157 +331,195 @@ const AdminPage = () => { return -1; } // Always places 'trunk' at the end return b.localeCompare( a, undefined, { - numeric : true, + numeric: true, sensitivity: 'base', } ); } ) .map( ( version, index ) => ( -
-
-
-
- - +
+ +
- {isChangelogModalOpen && ( + { isChangelogModalOpen && ( } + title={ __( 'Plugin Changelog', 'wp-rollback' ) } + onRequestClose={ closeChangelogModal } + disabled={ rollbackVersion === false } + className={ 'wpr-modal wpr-modal__changelog' } + icon={ } > -
+
- )} + ) } - {isConfirmModalOpen && ( + { isConfirmModalOpen && ( } + title={ __( 'Are you sure you want to proceed?', 'wp-rollback' ) } + onRequestClose={ closeConfirmModal } + disabled={ rollbackVersion === false } + className={ 'wpr-modal' } + icon={ } > -

${rollbackInfo.name}`, - `${rollbackVersion}`, - ), - }}>

+

${ rollbackInfo.name }`, + `${ rollbackVersion }` + ), + } } + >

- - - - - - - - - - - - + + + + + + + + + + + +
- -
- - {queryArgs.current_version} -
- - {rollbackVersion}
+ + + +
+ + + { queryArgs.current_version } +
+ + + { rollbackVersion } +
-
Notice: We strongly recommend you create a complete backup of your WordPress files and database prior to performing a rollback. We are not responsible for any misuse, deletions, white screens, fatal errors, or any other issue resulting from the use of this plugin.

', 'wp-rollback' )}} /> +
Notice: We strongly recommend you create a complete backup of your WordPress files and database prior to performing a rollback. We are not responsible for any misuse, deletions, white screens, fatal errors, or any other issue resulting from the use of this plugin.

', + 'wp-rollback' + ), + } } + /> -
+ - - + + - {queryArgs.type === 'plugin' && ( + { queryArgs.type === 'plugin' && (
- - - + + +
- )} - {queryArgs.type === 'theme' && ( + ) } + { queryArgs.type === 'theme' && (
- - + +
- )} - - - - -
- - + ) } + + + + +
+ +
- )} - + ) }
- ); - }; -domReady(function() { - const container = document.getElementById('root-wp-rollback-admin'); - if (!container) { +domReady( function () { + const container = document.getElementById( 'root-wp-rollback-admin' ); + if ( ! container ) { return; } const component = ; // Use createRoot if available, otherwise fallback to ReactDOM.render - if (createRoot) { - createRoot(container).render(component); + if ( createRoot ) { + createRoot( container ).render( component ); } else { - ReactDOM.render(component, container); + ReactDOM.render( component, container ); } -}); +} );