## magento2 – Magento 2 How to implement UI Component XML Infinite Scroll data

I am working on One custom Module and loading all the Old orders items on the frontend page by using the UI component form. Currently data is coming in pagination but we have required it to load with infinite scroll.

I have usually worked in when data is coming in phtml then can implement infinite scroll successfully, In the current scenario data is loading with UI component so I don’t have any idea to achieve it.

Thanks

## html – Can’t target last of type in React Styled Component input

Hi using Styled components with React – building a split date input for day/month/year – the only change I want to make is that the width of the year input is double the length of the other two inputs, I’ve tried using `:nth` `last-of-type` etc but to no avail, I have a suspicion it is because how I’m rendering the inputs as components? Can anyone advise of a nice workaround?

Code:

``````const StyledInput = styled.input`

display: block;

height: 48px;
width: 50px;
margin-right: 12px;
margin-top: 12px;
`;

return (
<StyledInputGroup>
<label>
<span>Day</span>
<StyledInput
type="text"
maxLength="2"
label="Day"
value={day}
onChange={(e) => setDay(e.target.value)}
/>
</label>
<label>
<span>Month</span>
<StyledInput
type="text"
maxLength="2"
label="Month"
value={month}
onChange={(e) => setMonth(e.target.value)}
/>
</label>
<label>
<span>Year</span>
<StyledInput
type="text"
maxLength="4"
value={year}
onChange={(e) => setYear(e.target.value)}
/>
</label>
</StyledInputGroup>
);

``````

Simplified codepen:
https://jsfiddle.net/4xzn8a5q/11/

## upper lower bounds – On an inequality involving the abundancy index of the Eulerian component \$p^k\$ of an odd perfect number \$p^k m^2\$

The topic of odd perfect numbers likely needs no introduction.

Denote the classical sum of divisors of the positive integer $$x$$ by $$sigma(x)=sigma_1(x)$$, the abundancy index of $$x$$ by $$I(x)=sigma(x)/x$$, and the deficiency of $$x$$ by $$D(x)=2x-sigma(x)$$.

Euler proved that a hypothetical odd perfect number must take the form
$$n = p^k m^2$$
where the Eulerian component $$p^k$$ satisfies the constraints $$p equiv k equiv 1 pmod 4$$ and $$gcd(p,m)=1$$.

Since $$p$$ is (the special) prime, we have the formula
$$I(p^k)=frac{sigma(p^k)}{p^k}=frac{p^{k+1} – 1}{p^k (p – 1)}$$
and corresponding (sharp?) upper bound
$$I(p^k)
We also have the formula
$$frac{D(p^k)}{p^k}=2-I(p^k),$$
and corresponding (sharp?) upper bound
$$frac{D(p^k)}{p^k}=2-I(p^k) leq 2-frac{p+1}{p}=frac{p-1}{p}.$$

We obtain
$$I(p^k)bigg(2 – I(p^k)bigg) < frac{p}{p-1}cdotfrac{p-1}{p}=1.$$

Here are my questions:

(1) Can one substantially improve on the bound
$$I(p^k)bigg(2 – I(p^k)bigg) < 1?$$

(2) If the answer to Question (1) is YES, my next question is “How?”.

(3) If the answer to Question (1) is NO, can you explain/show why the bound cannot be substantially improved?

MY ATTEMPT

I do am aware of the fact that
$$f(k):=g(p):=I(p^k)bigg(2 – I(p^k)bigg)=frac{sigma(p^k) D(p^k)}{p^{2k}}=frac{(p^{k+1} – 1)(p^{k+1} – 2p^k + 1)}{Bigg(p^k (p – 1)Bigg)^2}$$
and that
$$frac{partial f}{partial k} = -frac{2(p^k – 1)log(p)}{Bigg(p^k (p – 1)Bigg)^2} < 0$$
while
$$frac{partial g}{partial p} = frac{2(p^k – 1)(p^{k+1} – (k+1)p + k)}{p^{2k+1} (p – 1)^3} > 0.$$

This means that
$$g(5) leq g(q) = f(k) leq f(1)$$
since the computations above show that $$f(k)$$ is decreasing while $$g(q)$$ is increasing.

In particular, the quantity $$f(1)$$ in the inequality $$f(k) leq f(1)$$ simplifies to:
$$f(k) = I(p^k)bigg(2 – I(p^k)bigg) leq f(1) = I(p)bigg(2 – I(p)bigg) = frac{p+1}{p}bigg(frac{2p – (p+1)}{p}bigg) = frac{p^2 – 1}{p^2},$$
which somehow improves on the upper bound of $$1$$.

## Are you supposed to perform partial fraction decomposition for a quadratic component that factorizes to rational numbers?

Let’s say you have to spread a cubic equation into partial fraction. What you would normally get is a linear factor and a quadratic or a linear and 2 linears expressions. My question is, for that quadratic factor ,if the solutions are fractions (for example : $$(x + 1/2)(x+2/3)$$), then are you supposed to break it down to $$(A)/(x + 1/2) + (B)/(x+2/3)$$ ? What i want to know is : if solutions are not whole numbers , do you have to reduce the factor, and why not or why?

## magento2 – Magento 2 how to use phtml jquery events on knockouts js component template?

I’m struggling trying to approach the following objective:

Use jquery events on a knockout js component template.

On phtml file I have my knockout js component like this:

``````<div class="container">
<?php //if(\$identificator == "port"):  ?>
<div id="port-form" data-bind="scope:'port-form'">
<!-- ko template: getTemplate() --><!-- /ko -->
<?php if(\$hasSpouse): ?>
<!-- ko template: template2 --><!-- /ko -->
<!-- ko template: template3 --><!-- /ko -->
<?php endif; ?>
<!-- ko template: template4 --><!-- /ko -->
<script type="text/x-magento-init">
{
"#port-form": {
"Magento_Ui/js/core/app": {
"components": {
"port-form": {
"component": "Vendor_Application/js/port-app-form",
"quote_data": <?= /* @escapeNotVerified */ \$data ?>,
"quantities": <?= /* @escapeNotVerified */ \$quantities ?>,
"states": <?= /* @escapeNotVerified */ \$states ?>
}
}
}
}
}
</script>
</div>
</div>
</div>
``````

As you can see I have 4 different templates, at the bottom of phtml I try the following:

``````<script>
require(('jquery', 'jquery/ui'), function(\$){
\$("#beneficiary-button").click(function(){
});
});
});
</script>
``````

When I click the button #beneficiary-button it’s not doing anything, my guess is because I can’t reach knockoutjs templates, so I would need to require my jquery validations on knockoutjs component?

Thanks!

## satisfiability – How to prove that \$overline{L}\$ is a strong connected component of an implication graph

Let $$G$$ be an implication graph.
Suppose that a set $$L$$ of literals is a strong connected component of $$G$$. Show that the set $$overline{L} = {overline{l}space vert space l in L}$$ is also a strong connected component of $$G$$. (Hint: Show by induction that for every path from $$l$$ to $$l′$$ a path from $$overline{l′}$$ to $$l$$ exists).

My Question:
I know that $$overline{L}$$ must also be a strong connected component of $$G$$, but how can I prove it using induction? Or is there another way to prove it?

## matrix – How to make first component of eigenvectors on grid real and normalize using Map and Normalize?

I am trying to use the following approach: How get eigenvectors without phase jump?
to apply the same conditions to an array of complex-valued Mathematica eigenvectors.

The matrix solved for is a `3 x 3` matrix. I get my eigenvectors at points on a two-dimensional `N x N` grid, and so my array of eigenvectors has dimensions `N x N x 3 x 3`. The documentation for `Map` allows one to specify `levelspec`, but so far, I have not been able to successfully impose the conditions of normalization and real-first-component to my eigenvectors. I am still having trouble understanding multi-dimensional arrays and indexing. Ideally, I would have an `N x N x 3 x 3` array of eigenvectors whose first component is real, and all eigenvectors normalized. With my limited understanding, I cannot seem to find a way to do this without flattening my array and losing information on the underlying `N x N` grid.

Almost every time, I end up with an array that is flattened (so, `100x100x3` becomes `100`, etc). I tried working with just one eigenvector as in the referenced question, but I really want to preserve the underlying `N x N` structure, as I want to be able to associate each eigenvector to its respective 2D grid’s coordinates without losing that information by `Flattening`.

I have attached my code.

``````(* First generate matrix and get eigenvector array. *)
a = 3.19;
e1 = 1.046; e2 = 2.104; t0 = -0.184; t1 = 0.401; t2 = 0.507; t11 =
0.218; t12 = 0.338; t22 = 0.057;

h0 = 2*t0*(Cos(2*((1/2)*kx*a)) +
2*Cos(((1/2)*kx*a))*Cos((ky*a*Sqrt(3)/2))) + e1;
h1 = -2*Sqrt(3)*t2*Sin(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2)) +
2*1 I*t1*(Sin(2*((1/2)*kx*a)) +
Sin(((1/2)*kx*a))*Cos((ky*a*Sqrt(3)/2)));
h1star = -2*Sqrt(3)*t2*Sin(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2)) -
2*1 I*t1*(Sin(2*((1/2)*kx*a)) +
Sin(((1/2)*kx*a))*Cos((ky*a*Sqrt(3)/2)));
h2 = 2*t2*(Cos(2*((1/2)*kx*a)) -
Cos(((1/2)*kx*a))*Cos((ky*a*Sqrt(3)/2))) +
2*Sqrt(3)*1 I*t1*Cos(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2));
h2star = 2*
t2*(Cos(2*((1/2)*kx*a)) -
Cos(((1/2)*kx*a))*Cos((ky*a*Sqrt(3)/2))) -
2*Sqrt(3)*1 I*t1*Cos(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2));
h11 = 2*t11*Cos(2*((1/2)*kx*a)) + (t11 + 3*t22)*Cos(((1/2)*kx*a))*
Cos((ky*a*Sqrt(3)/2)) + e2;
h22 = 2*t22*Cos(2*((1/2)*kx*a)) + (3*t11 + t22)*Cos(((1/2)*kx*a))*
Cos((ky*a*Sqrt(3)/2)) + e2;
h12 = Sqrt(3)*(t22 - t11)*Sin(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2)) +
4*1 I*t12*
Sin(((1/2)*kx*a))*(Cos(((1/2)*kx*a)) - Cos((ky*a*Sqrt(3)/2)));
h12star =
Sqrt(3)*(t22 - t11)*Sin(((1/2)*kx*a))*Sin((ky*a*Sqrt(3)/2)) -
4*1 I*t12*
Sin(((1/2)*kx*a))*(Cos(((1/2)*kx*a)) - Cos((ky*a*Sqrt(3)/2)));
H(kx_, ky_) = {{h0, h1, h2}, {h1star, h11, h12}, {h2star, h12star,
h22}};

numsquares = 100;
kxs = N(Subdivide(-0.1, 0.1, numsquares)); kys =
N(Subdivide(-0.1, 0.1, numsquares));
evecs = Table(
Eigenvectors(H(kxs((i)), kys((j)))), {i, 1, numsquares}, {j, 1,
numsquares});
Dimensions(wfcs)

(* Try to impose condition in several ways. *)
evecs2 = Map(Normalize(#/#((1))) &, evecs);
Dimensions(evecs2)

evecs2 = Map(Normalize(#/#((1))) &, evecs((All,All,1)));
Dimensions(evecs2)
``````

Any thoughts? Thanks.

## dnd 5e – Can Thunder Gauntlets meet the material component requirement of Booming Blade and Green Flame Blade?

There should be no problem with using these spells in combination with an Artificer’s Thunder Gauntlets.

The gauntlets count as weapons for the Artificer, and it should be obvious that a pair of armored gauntlets is worth some amount of money, whatever that amount is, so it ought to meet the requirement even if we don’t know what the actual value is.

The purpose of adding the 1 silver piece cost to the weapon component of booming blade and greenflame blade was to fix a weird exploit related to component pouches.

A component pouch “hold[s] all the material components and other special items you need to cast your spells, except for those components that have a specific cost”. Since booming blade and greenflame blade had “a melee weapon” listed as a material component, but didn’t list a cost, in theory this allowed a caster to just produce any melee weapon out of their component pouch in order to cast the spell, which then I suppose just vanishes back into the ether.

This is absurd and obviously not the intent of the spell, but to fix the exploit, the devs added an explicit cost to the weapon material component equal to the cost of the cheapest weapon in the PHB.

In theory this does exclude weapons that do not have an explicit value, but since that wasn’t the purpose or intent behind the update, it really shouldn’t be a limitation on the players. As long as you have an actual object that counts as a weapon, you should be able to use it to cast these spells.

## react.js – Are the tests setup correctly for a single component?

I have finished writing a simple test based on ReactJS’s functionality to render a button and have it update a state variable which is displayed to the user. There are also two other buttons that both retrieve data by executing a fetch request to random-data-api.com (querying a random_coffee at `https://random-data-api.com/api/coffee/random_coffee`).

My question is: Are these tests setup correctly to reflect what a user using this very basic functionality will do?

Specifically I am wondering about the way the tests are written, eg. by first checking that a ‘pre’ tag is empty (no data returned/fetched yet) and afterwards firing an event to click the button which then returns data and thereafter asserting that data was returned by checking the existence of an ‘id’ field in the ‘pre’ tag. (Data is displayed in the front-end by using `{JSON.stringify(data)}`

For completeness I will include the component being tested as well as the written tests for the component below:

Component (ElementTest or `<ElementTest />`):

``````import React, { useState } from "react";

const ElementTest = () => {
const (count, setCount) = useState(0);
const (data, setData) = useState();
const (data2, setData2) = useState();

const goFetch = () => {
fetch("https://random-data-api.com/api/coffee/random_coffee").then((res) =>
res
.json()
.then((jsonData) => {
// if(jsonData) {
//     throw Error('ERROR!');
// }
//console.log(jsonData);
setData(jsonData);
})
.catch((err) => {
})
);
};

const goFetch2 = () => {
fetch("https://random-data-api.com/api/coffee/random_coffee").then((res) =>
res
.json()
.then((jsonData) => {
// if(jsonData) {
//     throw Error('ERROR!');
// }
//console.log(jsonData);
setData2(jsonData);
})
.catch((err) => {
})
);
};
return (
<>
<p data-testid="counter" id="counter">
{count}
</p>
<button data-testid="btn" onClick={() => setCount(count + 1)}>
Click me!
</button>
<button data-testid="btnFetch" onClick={goFetch}>
Get data!
</button>
<button data-testid="btnFetch2" onClick={goFetch2}>
Get data! (2)
</button>
<pre data-testid="pre">{JSON.stringify(data)}</pre>
<pre data-testid="pre2">{JSON.stringify(data2)}</pre>
</>
);
};

export default ElementTest;
``````

Tests for ElementTest component:

``````import React from 'react';
import {act, cleanup, fireEvent, render, waitFor} from '@testing-library/react';
import ElementTest from '../ElementTest';

afterEach(cleanup);

it('when component renders value of counter is 0', () => {
//setup
const component = render(
<ElementTest />
);
const counter = component.queryByTestId('counter');
const button = component.queryByTestId('btn');
//initial check for value
expect(counter.textContent).toBe('0');
//act
act(() => {
fireEvent.click(button);
});
//assert
waitFor(() => expect(counter.textContent).toBe('1'));

});

it('btnFetch click displays data in <pre>',  () =>
{
//setup
const component = render(<ElementTest />);
const pre = component.queryByTestId('pre');
//this bothers me, as the test can be passed by hardcoding a value that is
//expected later
expect(pre.textContent).toBe('');
//act
act(() => {
});
//assert
waitFor(() => expect(pre.textContent).toContain('id'));
});

it('btnFetch2 click displays data in <pre> 2', () => {
//setup
const component = render(<ElementTest />);
const pre2 = component.queryByTestId('pre2');
//this await/waitFor below bothers me, is it needed or can it be checked differently?
//the test can be passed by hardcoding a value that is expected later
expect(pre2.textContent).toEqual('');
//act
act(() => {