feat: upgrade to react 18 - fix build #2

[neatbyte-vnobis]

Changes

First batch of fixes for project build after updating to react 18.
https://www.notion.so/webiny/Upgrade-to-React-18-ceacd9bbfcf74b39a7ceb70943c3afa7

Packages: app-cognito-authenticator, react-router, ui

How Has This Been Tested?

Manually.

Documentation

None.

[neatbyte-ivelychko]

@brunozoric

While working on this batch I have encountered some issue with build for @webiny/ui.
Error while building @webiny/ui: it fails in this file node_modules/@rmwc/base/dist/component.d.ts because function createComponent from @rmwc is using type React.RefForwardingComponent that has been removed from React 18. Maybe this issue could be fixed by updating rmwc to the latest version? I have checked their website and I saw that they use React 18 in the latest version of the library.

[brunozoric]

@neatbyte-ivelychko

Yes, you can update the rmwc. Probably make it as separate PR because there will be a lot of changes.

[brunozoric]

Please figure out some better types. We cannot trust what you currently wrote.

[brunozoric]

Please figure out better types.

[neatbyte-ivelychko]

@brunozoric improved Record<any, any> type

[brunozoric]

@neatbyte-ivelychko putting object to AuthData interface instead of Record<any, any> is same bad type written in another way.
The verified is not used anywhere except two checks if it actually is defined, so maybe try to figure out what is contained in it? Don't spend much more time on it. If you can't find the correct type, put

{verified?: Record<string, string | number | boolean>}

for now.

Also, I see that unverified is not used anywhere, so maybe it is not necesary at the moment...?

[neatbyte-ivelychko]

But still we need to add object in the AuthData type [key: string]: string | null | boolean | undefined | object; property. Becuase TS keeps arguing that that type does not support object, it only supports string | null | boolean | undefined.

[brunozoric]

When logging the data variable, I get:

{
    "verified": {
        "email": "my@email.com"
    },
    "unverified": {}
}

Maybe it could be like this?

export interface AuthDataVerified {
    email?: string;
}

export interface AuthDataUnverified {
    someUnknownKey?: string;
}

export interface AuthData {
    username?: string;
    email?: string;
    verified?: AuthDataVerified;
    unverified?: AuthDataUnverified;
    [key: string]: string | null | boolean | undefined | AuthDataVerified | AuthDataUnverified;
}

[neatbyte-ivelychko]

Okay, I have also checked method verifiedContact in @aws-amplify and I saw that besides email property they have phone_number property. Should we consider adding it to the verified and unverified.

if (attrs['email']) {
   if (attrs['email_verified']) {
	verified['email'] = attrs['email'];
   } else {
	unverified['email'] = attrs['email'];
   }
}
 if (attrs['phone_number']) {
   if (attrs['phone_number_verified']) {
	verified['phone_number'] = attrs['phone_number'];
    } else {
      unverified['phone_number'] = attrs['phone_number'];
    }
}

[brunozoric]

@neatbyte-ivelychko yes, add anything you can find. Maybe we don't use those vars now, but let's have them in types.

[neatbyte-ivelychko]

Added phone_number to the type

[neatbyte-ivelychko]

@brunozoric I think that this might be the latest batch. Because after I have fixed type for ComposableFC project had been built without any errors.

We just need to check whether it is gonna pass CI/CD.

[neatbyte-ivelychko]

Nevermind, it was the issue with my local build. Somehow it was always green event if build had errors