How reuse components in the same view page?

[roozbehid-ic]

I am a bit new to dotnetiofy and react so maybe a basic question.

Lets say I want to have a CPUPercentWatcher component that watches cpu. But I want to have like 10 of them on my dashboard for different computers.

A simple approach (based on your example) is in Dashboard.cs I expose a property like "float[] CPUPercent" and then have following in my dashboard.js :

<CPUPercentWatcher value={this.state.CPUPercent[0]} />

and in component constructor they are connected to dashboard vm.

I was wondering is there like a way to have a corresponding class in C# for each of those CPUPercentWatcher components and connect to them and then somehow whenever there is a component in react create a new class object in c#? something like that so each react component is isolated with corresponding c# class

[dsuryd]

You can move the dotnetify.react.connect call to inside your component, and pass the vm name through the component's property.

[roozbehid-ic]

I am still not getting it :( Does it mean it will create a new class in C# each time?

[dsuryd]

It does require new C# class for each component. Why don't you write some pseudo-code how you think it should be, and we can go from there.

[roozbehid-ic]

Ok so reading your article on here kind of helped me https://www.codeproject.com/Articles/1077094/Real-Time-Web-App-Made-Simple-with-MVVM-over-Signa

I dont know how correct it is but this is now my component in react :

CpuWatcher.js

let lastId = 0;
class CPUPercentWatcher extends React.Component {
    constructor(props) {
        super(props);

        lastId++;
        this.vm = dotnetify.react.connect('Tests.CPUPercentWatcher' + lastId, this);
        .
        .
        .

TestPage.js

class TestsPage extends React.Component {
    constructor(props) {
        super(props);
        this.vm = dotnetify.react.connect('Tests', this);
        .
        .
        .

render() {
        return (
                    <div>
                        <CPUPercentWatcher />
                        <CPUPercentWatcher />
                    </div>
      .
      .
      .

Tests.cs

 public class CPUPercentWatcher : BaseVM
{
.
.
.
}

public class Tests : BaseVM, IRoutable
{

        public override BaseVM GetSubVM(string vmTypeName)
        {
            return new CPUPercentWatcher();
        }

}

So with help of lastid each time I create a new component class in c#, this way I can have multiple CPUPercentWatcher components and each have their own state and get changes independently from each other.... I just dont know how loading/unloading happens.(I am a bit worried about potential memory leaks...)

What do you think of this approach?

[dsuryd]

It looks good to me. If you need to explicitly dispose resources, override the Dispose method of BaseVM.