Steps for developing a shared child class derived from two distinct base classes

I currently have two classes, each with a child class that shares the same extended functions. I am looking for a way to avoid code duplication by creating a more loosely connected class.

The main reason for extending the parent class is to access its methods within the child class.

See code below.

class Base1 {
    /**
     * @param {() => cy} getWrapper
     */
    constructor( getWrapper ) {
        this._getWrapper = getWrapper;
    }

    getSomething () {
        return this.getWrapper().find('something');
    }
    getWrapper () {
        return this._getWrapper();
    }
}
class Base2 {
    /**
     * @param {() => cy} getWrapper
     */
    constructor( getWrapper ) {
        this._getWrapper = getWrapper;
    }

    getHeading () {
        return this.getWrapper().find('heading');
    }
    getWrapper () {
        return this._getWrapper();
    }
}

class ReWrapBase1 extends Base1 {
    eq ( index ) {
        return new Base1( () => this.getWrapper().eq( index ) );
    }
    getWrapper () {
        return this._getWrapper().find( '[class*=SummaryItemstyles__Wrapper]' );
    }
}
class ReWrapBase2 extends Base2 {
    eq ( index ) {
        return new Base2( () => this.getWrapper().eq( index ) );
    }
    getWrapper () {
        return this._getWrapper().find( '[class*=SummaryItemstyles__Wrapper]' );
    }
}

At first, I thought of having the constructor store the class, but then realized I couldn't access the parent's methods, which defeats the purpose.

class ReWrapAny {
    constructor(returnedClass) {
        this._returnedClass = returnedClass
    }
    eq ( index ) {
        return new this._returnedClass( () => this.getWrapper().eq( index ) );
    }
    getWrapper () {
        return this._getWrapper().find( '[class*=SummaryItemstyles__Wrapper]' );
    }
}

Answer №1

Updated to implement a mixin approach.

function createMixinFunction (baseClass) {
    matchIndex ( index ) {
        return new baseClass( () => this.getMergeElement().matchIndex( index ) );
    }
    getMergeElement () {
        return this._getMergeElement().find( '[class*=SummaryItemstyles__Merge]' );
    }
}
export class ExportBaseClass extends BaseComponent {}
Object.assign(MergedCards.prototype, createMixinFunction(BaseComponent))

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When it comes to HTML5 drag and drop functionality, only the dragstart event is triggered

I have successfully implemented HTML5 drag&drop using jQuery UI, but now I want to switch to using pure HTML5 API. Currently, only the dragstart event is firing for me. I am not able to catch the rest of the events. However, everything seems to be fun ...

Issue: The element '[object Object]' is of type 'object', which is not supported by NgFor. NgFor only works with Iterables like Arrays. - Problem encountered in an Ionic Project

I'm currently working on retrieving my user's username from Firebase Firestore Database using Ionic and AngularFire. I have implemented the valueChanges() method to obtain the observable and am trying to process it using an async pipe. However, u ...

IE does not support hover effects

Having trouble with a hover effect that works in Chrome but not in MSIE. Are there any alternatives or fixes to make it work in MSIE? The hover/rollover effects I've tried all seem to have this issue in IE. normalize.css demo.css set2.css font- ...

How does a web worker behave when the owner is not actively engaged?

[edit: I am using Chrome 49.0.2623.112 m (64-bit) with default settings and HTTPS, but the issue occurred before the switch.] My application utilizes web workers to handle AJAX polling. While this may not provide a significant performance boost, it does e ...

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

I am working on a file upload feature where each uploaded file should have a progress bar that updates as the file gets uploaded. I'm using a state to keep track of selected files and their respective progress: interface IFiles { file: File; c ...

Implement a feature in JS/HTML where clicking on a button shifts a specific section of a row from one table to another while simultaneously deleting the remaining

I am facing an issue with two tables - addFriends and existingFriends. The addFriends table contains a button in the fourth column, which, upon clicking, should delete the corresponding row from that table and add it to the existingFriends table. Currentl ...

"What is the best way to access the value of a useState variable in ReactJS on a global

Below is my reactJS code snippet - useEffect(()=>{ const getinterviewerDetails= async ()=>{ const data1 = await axios.get("http://localhost:8083/api/GetProduct") .then(response => { console.log("role is " ...

Updating the DOM after every click event to keep content fresh

When the #undoAll button is clicked, it triggers individual click events using the following code: $('#undoAll').click(function(){ $('#prospectTable tbody tr td a:not(.invisible)').each(function(){ $(this).trigger('cli ...

The header row in HTML tables sometimes vanishes unexpectedly after sorting the table

Upon filtering the table, I noticed that the header disappears sporadically. The issue is that the table header row should remain in place regardless of whether or not the characters used for filtering are present in the table rows. In Example 1: When fil ...

Could a commenting feature be seamlessly integrated directly into the video player, accessible with a simple click?

I'm exploring the idea of developing a video player that allows users to add comments directly from the player itself. Imagine this: the typical toolbar at the bottom includes standard features like seek bar, volume control, play/pause buttons, but wi ...

Steps to trigger a tab activation using an anchor in JavaScript

My goal is to activate a specific tab within the same page when clicking on a designated link. Each tab has its own unique ID, such as #tab1, #tab2, #tab3, and so on. For instance, I want to activate #tab3 by clicking on a link with href="#tab3". Although ...

Contrasting behavior in JavaScript experienced in development versus production environments

I've been working on an application that, when given certain data, generates a diagram using JavaScript in conjunction with the kineticJS framework. During development, everything is smooth sailing, but once deployed to production (Heroku), things st ...

Create a dynamic image showcase using PHP or JavaScript

So I have a large collection of car photos organized in a structure similar to this (this is just a fictional example to illustrate my idea): Cars > Audi > Sports cars > '5 pictures' Cars > Audi > Family cars > '3 pictur ...

function embedded in velocity.js chain

How can I effectively execute this code? I keep encountering various errors. After the sequence is completed, I want to incorporate an additional function. I am utilizing jQuery in conjunction with velocity.js $(".close").click(function(){ var my ...

Having difficulty passing the new state value using props in ReactJS

I am facing an issue with sending state values from parent to child components. Initially, the state value is empty but after making an API call, the state value gets updated. However, the props in my child component are still stuck with the initial empty ...

How can jQuery determine if multiple selectors are disabled and return true?

I am currently working on a form in which all fields are disabled except for the "textarea" field. The goal is to enable the "valid" button when the user types anything into the textarea while keeping all other inputs disabled. I initially attempted using ...

What is the best way to showcase an item from an array using a timer?

I'm currently working on a music app and I have a specific requirement to showcase content from an array object based on a start and duration time. Here's a sample of the data structure: [ { id: 1, content: 'hello how are you', start: 0 ...

Is it possible for a script tag added to an element to execute prior to the following line following the .append() method

After retrieving an HTML document from the server and storing it in a variable called data, I then add the content to a <ul> element on the page. The structure of the data is as follows: <script> hasNext = true // this global variable < ...

Leveraging Javascript Variable in Kendo Grid Template

Creating two variables through an ajax call, their values remain constant after the page loads. var approvalLevel; var fullName; $(function() { $.ajax({ type: "GET", async: "false", url: approvalLevelURL, contentType: ...

Is it possible to consolidate a Next.js Application into a singular JavaScript file for seamless incorporation into an external HTML webpage?

Currently, I'm in the process of integrating a Next.js application into an existing HTML page. My goal is to display Next.js components on this HTML page by linking a JavaScript file (created from the Next.js application) within a <script tag. Howe ...