« first day (4354 days earlier)      last day (816 days later) » 

08:09
In this below example, how the statement 'output(unblocking().then(output));' is same as 'output(unblocking().then(data => output(data)));' ? And how this statement works, will u please explain?
        let begin = new Date();
        const unblocking = () => {
            return Promise.resolve().then(_ => {
                let i = 0;
                while (i < 1000000000){
                   i++;
                }
                return 'all done';
            });
        }
        const output = x => console.log(`${x} \n elapsed: ${new Date() - begin}`);
        output('synchronous 1');
        output(unblocking().then(output));
        output('synchronous 2');
 
6 hours later…
13:52
Hello
If we have array of objects
https://i.imgur.com/ntRXRiF.png
How to properly define type in this case ?
I tried like this
Array<Record<string, any>>
Which works , but I can't push code to git , because of lint error
29:33 warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any

✖ 1 problem (0 errors, 1 warning)
 
1 hour later…
14:58
@MileMijatović why don't you just define the proper shape of the array members?
the linter is quite explicit about what it won't allow (explicit any), so you'll either have to make it unknown (if possible) or provide the proper shape
15:20
/* eslint-disable @typescript-eslint/no-explicit-any */
works
BUT now I have another issue
as before
No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): Legend', gave the following error.
    Type '({ payload }: LegendProps) => JSX.Element' is not assignable to type 'ContentType | undefined'.
I don't have an idea how to fix this
I tried with this solution - stackoverflow.com/questions/68269918/…
 
3 hours later…
18:07
!!skyrim or belowzero
belowzero
@MileMijatović I already mentioned that the shape of InternalProps used by the Props interface includes payload as an optional property: payload?: Array<Payload>;. You'll likely need to make the type in your user-defined function to be optional as well and use default assignment when destructuring props in it (or optional chaining if that serves your needs)
I don't understand you
github.com/recharts/recharts/blob/master/src/component/… - I assume you use the recharts Legend component
export type Props = InternalProps & PresentationAttributesAdaptChildEvent<any, ReactElement>;
the error says: (props: Props | Readonly<Props>): Legend is incompatible with (props: LegendProps): JSX.Element via ContentType | undefined
Yes, I am using recharts Legend component
So, what to do in this case
You have a much more experience than me
  Overload 1 of 2, '(props: Props | Readonly<Props>): Legend', gave the following error.
    Type '({ payload }: LegendProps) => JSX.Element' is not assignable to type 'ContentType | undefined'.
      Type '({ payload }: LegendProps) => JSX.Element' is not assignable to type '(props: Props) => ReactNode'.
        Types of parameters '__0' and 'props' are incompatible.
          Type 'Props' is not assignable to type 'LegendProps'.
            Types of property 'payload' are incompatible.
              Type 'Payload[] | undefined' is not assignable to type 'Record<string, any>[]'.
To be precise , I see Legend on web app, works ok, but I can't push the code because of lint warning error
18:18
sure - see the Type 'Payload[] | undefined' is not assignable to type 'Record<string, any>[]'. line of the error?
'Payload[] | undefined' comes from what I mentioned above - from InternalProps
interface InternalProps {
  ....
  payload?: Array<Payload>;
  ....
}
Yes, I see
can you post again what is the shape of LegendProps?
interface LegendProps {
  /* eslint-disable @typescript-eslint/no-explicit-any */
  payload: Array<Record<string, string | any>>
}
18:22
here we go - the payload is a required property
make it optional - I bet this will satisfy the compiler
Yes
Hmm, yes
I will try to commit and push the code
I am pretty sure it should work - but there is a high possibility that after that you need default the destructured payload to an empty array or switch to optional chaining when getting the value too
  Overload 1 of 2, '(props: Props | Readonly<Props>): Legend', gave the following error.
    Type '({ payload }: LegendProps) => JSX.Element' is not assignable to type 'ContentType | undefined'.
      Type '({ payload }: LegendProps) => JSX.Element' is not assignable to type '(props: Props) => ReactNode'.
        Types of parameters '__0' and 'props' are incompatible.
          Type 'Props' is not assignable to type 'LegendProps'.
            Types of property 'payload' are incompatible.
              Type 'Payload[] | undefined' is not assignable to type 'Record<string, any>[]'.
still the same
eh, wut? Same error? Can you show show how the LegendProps interface looks now?
  const renderLegend = ({ payload }: LegendProps) => {
    return (
      <ul>
        {payload &&
          payload.map((item) => {
            return Number(item.payload.percent) > 0 ? (
              <li key={`item-${item.value}`} className="flex items-center">
                <div
                  style={{ background: `${item.color}` }}
                  className="w-2.5 h-2.5 mr-2"
                ></div>
                {item.value} : {Number(item.payload.percent).toFixed(2)}%
              </li>
interface LegendProps {
  /* eslint-disable @typescript-eslint/no-explicit-any */
  payload?: Array<Record<string, string | any>>
}
18:27
hmm
ok, let me think
Maybe to change any to Payload ?
from recharts type ?
eh, a moment, I need to analyze it further
Ohh, sorry
works good
my mistake
I didn't save the file
Btw. One interesting fact
Many many useful things comes from Microsoft
I was about to conclude that I've gone crazy
GitHub, Visual Studio Code ...
i mean
a lot of those things aren't from microsoft
they were bought by microsoft
Oh
Actually it's
Visual Studio Code, also commonly referred to as VS Code,[9] is a source-code editor made by Microsoft for Windows, Linux and macOS.
But GitHub is not
GitHub, Inc., is an Internet hosting service for software development and version control using Git. It provides the distributed version control of Git plus access control, bug tracking, software feature requests, task management, continuous integration, and wikis for every project.[4] Headquartered in California, it has been a subsidiary of Microsoft since 2018.[5]
18:43
Hi everyone, in my code below I have a react sortable component:
fields.map((name, index) => (
    <Draggable
        key={index}
        index={index}
    >
        <Formsong
            index={index}
            name={name}
            values={props.values}
        />
    </Draggable>
))
Draggable basically allows me to move divs in a list...but the index always remain the same, so if I move div0 to div1 index 0 still be in the same position (at div0). Is there a way to keep as prop the initial key given (to pass as prop in Formsong component)? So if I move div0 to div1 the map should be this: div1 (index=1) div0 (index=0)
I just need a counter that don't rerender on items moves.
19:05
@MileMijatović well, not GitHub as you already mentioned, but TypeScript in the first place. MS used to be synonymous with "corporate", but at some point they realized that open-source is actually a great idea - they've done a lot of good for the community since then indeed
 
2 hours later…
21:28
Great
Do you guys have experience with css ?
I am curios if I have div centered vertically and horizontally , and if I zoom in the browser window
how to check if top and bottom line of that div touch the top and bottom of the browser ?
and in that case I want to display vertical scroll
const box = document.querySelector('.box');
const rect = box.getBoundingClientRect();

const isInViewport = rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth);

console.log(isInViewport);
maybe like this , but with useRef in React ?
21:54
any other way to do the same but without useRef ?

« first day (4354 days earlier)      last day (816 days later) »