how can i implement this code into LWC.
please help me



####HTMLEmailStatus.cmp#############

<aura:component controller="HTMLEmailStatusController" implements="flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName" access="global" >
<aura:attribute name="recordId"
type="String"
description="The ID of the record which is parent of EmailStatus records. Provided by force:hasRecordId interface."/>
<aura:attribute name="componentCardTitle"
type="String"
default="HTML Email Status"
access="global"
description="Title of the lightning:card component wrapping content."/>
<aura:attribute name="sObjectName"
type="String"
default="Contact"
access="global"
description="sObject Name which is the type of record and either can be Lead or Contact. Provided by force:force:hasSObjectName interface."/>
<aura:attribute name="fetchedEmailStatuses"
type="EmailStatus[]"
description="Array of email status objects. These are the records displayed in the component."/>
<!-- Events -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- Component Markup -->
<lightning:spinner aura:id="init-spinner" variant="brand" class="slds-hide"/>
<lightning:spinner aura:id="spinner" variant="brand" class="slds-hide"/>
<lightning:card iconName="{!( empty(v.componentCardTitle) ? '' : 'standard:email' )}" title="{!v.componentCardTitle + ' (' + v.fetchedEmailStatuses.length + ')'}">
<div>
<table class="slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal">
<thead>
<tr class="slds-text-title_caps">
<th scope="col" class="slds-cell-wrap">
<div title="Subject">Subject</div>
</th>
<th scope="col" class="slds-cell-wrap">
<div title="Date Sent">Date Sent</div>
</th>
<th scope="col" class="slds-cell-wrap">
<div title="Date Opened">Date Opened</div>
</th>
<th scope="col" class="slds-cell-wrap">
<div title="Times Opened"># Times Opened</div>
</th>
<th scope="col" class="slds-cell-wrap">
<div title="Last Opened">Last Opened</div>
</th>
<th scope="col" class="slds-cell-wrap">
<div title="Actions"> &nbsp; </div>
</th>
</tr>
</thead>
<tbody>
<aura:if isTrue="{! empty( v.fetchedEmailStatuses ) }">
<tr>
<th colspan="5">
<div class="slds-text-align_center">No items to display.</div>
</th>
</tr>
</aura:if>
<aura:iteration var="emailStatus" items="{!v.fetchedEmailStatuses}">
<tr>
<td data-label="Subject" class="slds-cell-wrap">
<div title="{!emailStatus.Subject}">
<a href="javascript:void(0);"
data-taskId="{!emailStatus.TaskId}"
onclick="{!c.handleLinkClick}">
{!emailStatus.Subject}
</a>
</div>
</td>
<td data-label="Date Sent" class="slds-cell-wrap">
<div title="{!emailStatus.CreatedDateTimestamp}">
<lightning:formattedDateTime value="{!emailStatus.CreatedDateTimestamp}" year="numeric" month="numeric" day="numeric" hour="numeric" minute="numeric"/>
</div>
</td>
<td data-label="Date Opened" class="slds-cell-wrap">
<div title="{!emailStatus.FirstOpenDateTimestamp}">
<lightning:formattedDateTime value="{!emailStatus.FirstOpenDateTimestamp}" year="numeric" month="numeric" day="numeric" hour="numeric" minute="numeric"/>
</div>
</td>
<td data-label="Times Opened" class="slds-cell-wrap">
<div title="{!emailStatus.TimesOpened}" class="slds-text-align_center">
{!emailStatus.TimesOpened}
</div>
</td>
<td data-label="Last Opened" class="slds-cell-wrap">
<div title="{!emailStatus.LastOpenDateTimestamp}">
<lightning:formattedDateTime value="{!emailStatus.LastOpenDateTimestamp}" year="numeric" month="numeric" day="numeric" hour="numeric" minute="numeric"/>
</div>
</td>
<td data-label="Actions" class="slds-cell-wrap">
<lightning:buttonMenu alternativeText="Actions" onselect="{! c.handleMenuSelect }">
<lightning:menuItem label="Edit" value="{!'edit:' + emailStatus.TaskId}"/>
<lightning:menuItem label="Delete" value="{!'delete:' + emailStatus.TaskId}"/>
</lightning:buttonMenu>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</lightning:card>
</aura:component>

#########HTMLEmailStatusController.js#########
({
doInit : function(component, event, helper) {
var objectName = component.get( 'v.sObjectName' );
var recordId = component.get( 'v.recordId' );
helper.getEmailStatusesAsync( component, objectName, recordId )
.then( $A.getCallback( function( emailStatuses ) {
component.set( 'v.fetchedEmailStatuses', emailStatuses );
})).catch( $A.getCallback( function( err ) {
console.log(err);
var toastEvent = $A.get( 'e.force:showToast' );
toastEvent.setParams({
'title' : 'Problem occured while initializing component',
'message' : err,
'type' : 'error',
'mode': 'sticky'
}).fire();
}));
},
handleLinkClick : function( component, event, helper ) {
var clickedTaskId = event.target.getAttribute( 'data-taskId' );
helper.navigateToRecord( clickedTaskId );
},
handleMenuSelect : function( component, event, helper ) {
var selectedMenuItemValue = event.getParam( 'value' );
if(selectedMenuItemValue.startsWith( 'edit' )) {
var recordId = selectedMenuItemValue.split( ':' )[1];
var editRecordEvent = $A.get("e.force:editRecord");
editRecordEvent.setParams({
"recordId": recordId
});
editRecordEvent.fire();
}
}
})

######HTMLEmailStatus.cmp-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>40.0</apiVersion>
<description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>


########HTMLEmailStatus.design

<design:component label="HTML Email Status">
<design:attribute name="componentCardTitle"
label="Title"
default="HTML Email Status"
description="Title of the component on the page."/>
</design:component>

###########HTMLEmailStatusHelper.js###########


({
getEmailStatusesAsync : function( component, objectName, recordId ) {
var helper = this;
return helper.enqueueAction( component, 'c.getEmailStatuses', {
'objectName' : objectName,
'recordId' : recordId
}).then( $A.getCallback( function( emailStatuses ) {
return emailStatuses;
}));
},
enqueueAction : function( component, actionName, params, options ) {
var helper = this;
var p = new Promise( function( resolve, reject ) {
helper.showSpinner( component );
var action = component.get( actionName );
if ( params ) {
action.setParams( params );
}
if ( options ) {
if ( options.background ) { action.setBackground(); }
if ( options.storable ) { action.setStorable(); }
}
action.setCallback( helper, function( response ) {
helper.hideSpinner( component );
if ( component.isValid() && response.getState() === 'SUCCESS' ) {
resolve( response.getReturnValue() );
} else {
console.error( 'Error calling action "' + actionName + '" with state: ' + response.getState() );
helper.logActionErrors( response.getError() );
reject( response.getError() );
}
});
$A.enqueueAction( action );
});
return p;
},
showSpinner : function( component ) {
$A.util.removeClass( component.find( 'spinner' ), 'slds-hide' );
},
hideSpinner : function( component ) {
$A.util.addClass( component.find( 'spinner' ), 'slds-hide' );
},
navigateToRecord : function( recordId ) {
console.log( 'Navigating to the record>> ' + recordId );
var event = $A.get( 'e.force:navigateToSObject' );
if ( event ) {
event.setParams({
'recordId' : recordId
}).fire();
} else if ( ( typeof sforce !== 'undefined' ) && ( typeof sforce.one !== 'undefined' ) ) {
sforce.one.navigateToSObject( recordId );
} else {
window.location.href = '/' + recordId;
}
},
logActionErrors : function( errors ) {
if ( errors ) {
if ( errors.length > 0 ) {
for ( var i = 0; i < errors.length; i++ ) {
console.error( 'Error: ' + errors[i].message );
}
} else {
console.error( 'Error: ' + errors );
}
} else {
console.error( 'Unknown error' );
}
}
})




#############HTMLEmailStatusController.cls################

public with sharing class HTMLEmailStatusController {
/**
* Queries EmailStatuses in the sub-query
* on the given object name where the Id equals passed recordId.
*
* Example:
* Calling getEmailStatuses( 'Contact', '0039000001om22A' )
* returns EmailStatuses associated with the passed recordId.
*/
@TestVisible
private static Boolean doNotApplyRecordId = false;
@AuraEnabled
public static List<Map<String, Object>> getEmailStatuses(String objectName, String recordId){
// Get list of all the EmailStatus records
// associated with the passed recordId
System.debug( ' Querying ' + objectName + ' with id = ' + recordId );
// Build SOQL query
String query = 'SELECT';
query += ' ( SELECT';
query += ' Id,';
query += ' TaskId,';
query += ' Task.Subject,';
query += ' CreatedDate,';
query += ' FirstOpenDate,';
query += ' LastOpenDate,';
query += ' TimesOpened,';
query += ' EmailTemplateName';
query += ' FROM';
query += ' EmailStatuses';
query += ' ) ';
query += ' FROM';
query += ' ' + objectName;
if( !doNotApplyRecordId ) // Added to bypass the test because of platform limitations
query += ' WHERE Id = \'' + recordId + '\'';
System.debug( ' Constructed Query ' + query );
List<Map<String, Object>> emailStatuses = new List<Map<String, Object>>();
// Query records
for( sObject s : Database.query( query ) ) {
if( s.getSObjects( 'EmailStatuses' ) != null ) {
for( EmailStatus es : (List<EmailStatus>) s.getSObjects( 'EmailStatuses' ) ) {
emailStatuses.add( new Map<String, Object> {
'Id' => es.Id,
'TaskId' => es.Task.Id,
'Subject' => es.Task.Subject,
'CreatedDate' => es.CreatedDate,
'CreatedDateTimestamp' => es.CreatedDate != null ? es.CreatedDate.getTime() : null,
'FirstOpenDate' => es.FirstOpenDate,
'FirstOpenDateTimestamp' => es.FirstOpenDate != null ? es.FirstOpenDate.getTime() : null,
'LastOpenDate' => es.LastOpenDate,
'LastOpenDateTimestamp' => es.LastOpenDate != null ? es.LastOpenDate.getTime() : null,
'TimesOpened' => es.TimesOpened
});
}
}
}
return emailStatuses;
}
}