Edit File by line

/**

[0] Fix | Delete

* External dependencies

[1] Fix | Delete

[2] Fix | Delete

import React from 'react';

[3] Fix | Delete

[4] Fix | Delete

/**

[5] Fix | Delete

* WordPress dependencies

[6] Fix | Delete

[7] Fix | Delete

const { __ } = wp.i18n;

[8] Fix | Delete

[9] Fix | Delete

export default ({

[10] Fix | Delete

currentStep,

[11] Fix | Delete

setCurrentStep,

[12] Fix | Delete

serverType,

[13] Fix | Delete

rulesMethod,

[14] Fix | Delete

setRulesError,

[15] Fix | Delete

makeRequest,

[16] Fix | Delete

}) => {

[17] Fix | Delete

const genericRequestError = __(

[18] Fix | Delete

'Something went wrong with the request.',

[19] Fix | Delete

'wp-smushit'

[20] Fix | Delete

);

[21] Fix | Delete

[22] Fix | Delete

const checkStatus = () => {

[23] Fix | Delete

setRulesError(false);

[24] Fix | Delete

[25] Fix | Delete

makeRequest('smush_webp_get_status')

[26] Fix | Delete

.then((res) => {

[27] Fix | Delete

if (res.success) {

[28] Fix | Delete

setCurrentStep(currentStep + 1);

[29] Fix | Delete

} else {

[30] Fix | Delete

setRulesError(res.data);

[31] Fix | Delete

}

[32] Fix | Delete

})

[33] Fix | Delete

.catch(() => setRulesError(genericRequestError));

[34] Fix | Delete

};

[35] Fix | Delete

[36] Fix | Delete

const applyRules = () => {

[37] Fix | Delete

setRulesError(false);

[38] Fix | Delete

[39] Fix | Delete

makeRequest('smush_webp_apply_htaccess_rules')

[40] Fix | Delete

.then((res) => {

[41] Fix | Delete

if (res.success) {

[42] Fix | Delete

return checkStatus();

[43] Fix | Delete

}

[44] Fix | Delete

[45] Fix | Delete

setRulesError(res.data);

[46] Fix | Delete

})

[47] Fix | Delete

.catch(() => setRulesError(genericRequestError));

[48] Fix | Delete

};

[49] Fix | Delete

[50] Fix | Delete

const hideWizard = (e) => {

[51] Fix | Delete

e.currentTarget.classList.add(

[52] Fix | Delete

'sui-button-onload',

[53] Fix | Delete

'sui-button-onload-text'

[54] Fix | Delete

);

[55] Fix | Delete

makeRequest('smush_toggle_webp_wizard').then(() => location.reload());

[56] Fix | Delete

};

[57] Fix | Delete

[58] Fix | Delete

// Markup stuff.

[59] Fix | Delete

let buttonsLeft;

[60] Fix | Delete

[61] Fix | Delete

const quitButton = (

[62] Fix | Delete

<button

[63] Fix | Delete

type="button"

[64] Fix | Delete

className="sui-button sui-button-ghost"

[65] Fix | Delete

onClick={hideWizard}

[66] Fix | Delete

[67] Fix | Delete

[68] Fix | Delete

[69] Fix | Delete

[70] Fix | Delete

{__('Quit setup', 'wp-smushit')}

[71] Fix | Delete

</span>

[72] Fix | Delete

[73] Fix | Delete

{__('Quit', 'wp-smushit')}

[74] Fix | Delete

</span>

[75] Fix | Delete

</span>

[76] Fix | Delete

[77] Fix | Delete

<span

[78] Fix | Delete

className="sui-icon-loader sui-loading"

[79] Fix | Delete

aria-hidden="true"

[80] Fix | Delete

></span>

[81] Fix | Delete

</button>

[82] Fix | Delete

);

[83] Fix | Delete

[84] Fix | Delete

if (1 !== currentStep) {

[85] Fix | Delete

buttonsLeft = (

[86] Fix | Delete

<button

[87] Fix | Delete

type="button"

[88] Fix | Delete

className="sui-button sui-button-compound sui-button-ghost"

[89] Fix | Delete

onClick={() => setCurrentStep(currentStep - 1)}

[90] Fix | Delete

[91] Fix | Delete

[92] Fix | Delete

[93] Fix | Delete

{__('Previous', 'wp-smushit')}

[94] Fix | Delete

</span>

[95] Fix | Delete

[96] Fix | Delete

[97] Fix | Delete

[98] Fix | Delete

</span>

[99] Fix | Delete

[100] Fix | Delete

[101] Fix | Delete

{__('Previous', 'wp-smushit')}

[102] Fix | Delete

</span>

[103] Fix | Delete

</button>

[104] Fix | Delete

);

[105] Fix | Delete

}

[106] Fix | Delete

[107] Fix | Delete

const getButtonsRight = () => {

[108] Fix | Delete

if (1 === currentStep) {

[109] Fix | Delete

return (

[110] Fix | Delete

<button

[111] Fix | Delete

type="button"

[112] Fix | Delete

className="sui-button sui-button-blue sui-button-icon-right"

[113] Fix | Delete

onClick={() => setCurrentStep(currentStep + 1)}

[114] Fix | Delete

[115] Fix | Delete

{__('Next', 'wp-smushit')}

[116] Fix | Delete

<span

[117] Fix | Delete

className="sui-icon-arrow-right"

[118] Fix | Delete

aria-hidden="true"

[119] Fix | Delete

></span>

[120] Fix | Delete

</button>

[121] Fix | Delete

);

[122] Fix | Delete

}

[123] Fix | Delete

[124] Fix | Delete

if (2 === currentStep) {

[125] Fix | Delete

if ('apache' === serverType && 'automatic' === rulesMethod) {

[126] Fix | Delete

return (

[127] Fix | Delete

<button

[128] Fix | Delete

type="button"

[129] Fix | Delete

className="sui-button sui-button-blue"

[130] Fix | Delete

onClick={applyRules}

[131] Fix | Delete

[132] Fix | Delete

{__('Apply rules', 'wp-smushit')}

[133] Fix | Delete

</button>

[134] Fix | Delete

);

[135] Fix | Delete

}

[136] Fix | Delete

[137] Fix | Delete

return (

[138] Fix | Delete

<button

[139] Fix | Delete

type="button"

[140] Fix | Delete

className="sui-button sui-button-blue"

[141] Fix | Delete

onClick={checkStatus}

[142] Fix | Delete

[143] Fix | Delete

{__('Check status', 'wp-smushit')}

[144] Fix | Delete

</button>

[145] Fix | Delete

);

[146] Fix | Delete

}

[147] Fix | Delete

[148] Fix | Delete

return (

[149] Fix | Delete

<button

[150] Fix | Delete

type="button"

[151] Fix | Delete

className="sui-button sui-button-blue"

[152] Fix | Delete

onClick={hideWizard}

[153] Fix | Delete

[154] Fix | Delete

[155] Fix | Delete

{__('Finish', 'wp-smushit')}

[156] Fix | Delete

</span>

[157] Fix | Delete

[158] Fix | Delete

[159] Fix | Delete

<span

[160] Fix | Delete

className="sui-icon-loader sui-loading"

[161] Fix | Delete

aria-hidden="true"

[162] Fix | Delete

></span>

[163] Fix | Delete

{__('Finishing setup…', 'wp-smushit')}

[164] Fix | Delete

</span>

[165] Fix | Delete

</button>

[166] Fix | Delete

);

[167] Fix | Delete

};

[168] Fix | Delete

[169] Fix | Delete

return (

[170] Fix | Delete

[171] Fix | Delete

[172] Fix | Delete

{quitButton}

[173] Fix | Delete

{buttonsLeft}

[174] Fix | Delete

</div>

[175] Fix | Delete

<div className="sui-actions-right">{getButtonsRight()}</div>

[176] Fix | Delete

</div>

[177] Fix | Delete

);

[178] Fix | Delete

};

[179] Fix | Delete

[180] Fix | Delete