Edit File by line

/* global ajaxurl */

[0] Fix | Delete

[1] Fix | Delete

/**

[2] Fix | Delete

* External dependencies

[3] Fix | Delete

[4] Fix | Delete

import React from 'react';

[5] Fix | Delete

import { createRoot } from 'react-dom/client';

[6] Fix | Delete

[7] Fix | Delete

/**

[8] Fix | Delete

* WordPress dependencies

[9] Fix | Delete

[10] Fix | Delete

import domReady from '@wordpress/dom-ready';

[11] Fix | Delete

[12] Fix | Delete

/**

[13] Fix | Delete

* Internal dependencies

[14] Fix | Delete

[15] Fix | Delete

import StepsBar from '../views/webp/steps-bar';

[16] Fix | Delete

import StepContent from '../views/webp/step-content';

[17] Fix | Delete

import FreeContent from '../views/webp/free-content';

[18] Fix | Delete

import StepFooter from '../views/webp/step-footer';

[19] Fix | Delete

[20] Fix | Delete

export const WebpPage = ({ smushData }) => {

[21] Fix | Delete

const [currentStep, setCurrentStep] = React.useState(

[22] Fix | Delete

parseInt(smushData.startStep)

[23] Fix | Delete

);

[24] Fix | Delete

[25] Fix | Delete

React.useEffect(() => {

[26] Fix | Delete

if (2 === currentStep) {

[27] Fix | Delete

window.SUI.suiCodeSnippet();

[28] Fix | Delete

}

[29] Fix | Delete

}, [currentStep]);

[30] Fix | Delete

[31] Fix | Delete

const [serverType, setServerType] = React.useState(

[32] Fix | Delete

smushData.detectedServer

[33] Fix | Delete

);

[34] Fix | Delete

const [rulesMethod, setRulesMethod] = React.useState('automatic');

[35] Fix | Delete

const [rulesError, setRulesError] = React.useState(false);

[36] Fix | Delete

[37] Fix | Delete

const makeRequest = (action, verb = 'GET') => {

[38] Fix | Delete

return new Promise((resolve, reject) => {

[39] Fix | Delete

const xhr = new XMLHttpRequest();

[40] Fix | Delete

xhr.open(

[41] Fix | Delete

verb,

[42] Fix | Delete

`${ajaxurl}?action=${action}&_ajax_nonce=${smushData.nonce}`,

[43] Fix | Delete

true

[44] Fix | Delete

);

[45] Fix | Delete

[46] Fix | Delete

xhr.setRequestHeader(

[47] Fix | Delete

'Content-type',

[48] Fix | Delete

'application/x-www-form-urlencoded'

[49] Fix | Delete

);

[50] Fix | Delete

[51] Fix | Delete

xhr.onload = () => {

[52] Fix | Delete

if (xhr.status >= 200 && xhr.status < 300) {

[53] Fix | Delete

resolve(JSON.parse(xhr.response));

[54] Fix | Delete

} else {

[55] Fix | Delete

reject(xhr);

[56] Fix | Delete

}

[57] Fix | Delete

};

[58] Fix | Delete

xhr.onerror = () => reject(xhr);

[59] Fix | Delete

xhr.send();

[60] Fix | Delete

});

[61] Fix | Delete

};

[62] Fix | Delete

[63] Fix | Delete

const stepContent = smushData.isPro ? (

[64] Fix | Delete

<StepContent

[65] Fix | Delete

currentStep={currentStep}

[66] Fix | Delete

serverType={serverType}

[67] Fix | Delete

rulesMethod={rulesMethod}

[68] Fix | Delete

setRulesMethod={setRulesMethod}

[69] Fix | Delete

rulesError={rulesError}

[70] Fix | Delete

setServerType={setServerType}

[71] Fix | Delete

smushData={smushData}

[72] Fix | Delete

makeRequest={makeRequest}

[73] Fix | Delete

[74] Fix | Delete

) : (

[75] Fix | Delete

[76] Fix | Delete

);

[77] Fix | Delete

[78] Fix | Delete

return (

[79] Fix | Delete

<React.Fragment>

[80] Fix | Delete

[81] Fix | Delete

[82] Fix | Delete

{ smushData.isPro && <StepsBar smushData={smushData} currentStep={currentStep} /> }

[83] Fix | Delete

{stepContent}

[84] Fix | Delete

</div>

[85] Fix | Delete

</div>

[86] Fix | Delete

{smushData.isPro && (

[87] Fix | Delete

<StepFooter

[88] Fix | Delete

currentStep={currentStep}

[89] Fix | Delete

setCurrentStep={setCurrentStep}

[90] Fix | Delete

serverType={serverType}

[91] Fix | Delete

rulesMethod={rulesMethod}

[92] Fix | Delete

setRulesError={setRulesError}

[93] Fix | Delete

makeRequest={makeRequest}

[94] Fix | Delete

[95] Fix | Delete

)}

[96] Fix | Delete

</React.Fragment>

[97] Fix | Delete

);

[98] Fix | Delete

};

[99] Fix | Delete

[100] Fix | Delete

domReady(function () {

[101] Fix | Delete

const webpPageBox = document.getElementById('smush-box-webp-wizard');

[102] Fix | Delete

if (webpPageBox) {

[103] Fix | Delete

const root = createRoot(webpPageBox);

[104] Fix | Delete

root.render( <WebpPage smushData={window.smushReact} /> );

[105] Fix | Delete

}

[106] Fix | Delete

});

[107] Fix | Delete

[108] Fix | Delete