Hi Carmelo,

Thank you for checking it out.

You are right, it seems that the reinitialization was not the problem. After some further testing it looks like the issue is being generated by using the RTK Query hooks. I still need to do some tests to find out the right way to implement that, but the good news is that the theme is working as expected when the conditional value is in local state.

Thank you for helping me get to the bottom of this.

Best wishes,
Tamás

Hi there,

I managed to recreate the issue for you so you may be able to test it on the react demo2. Please try out this code in i18nProvider.tsx and see that after login, the HeaderUserMenu is not opening on click.

const I18nProvider: FC<WithChildren> = ({children}) => {
 const locale = useLang()
 const messages = allMessages[locale]

 const [loading, setLoading] = useState(true)

 useEffect(() => {
 setLoading(true)
 setTimeout(() => {
 setLoading(false)
 }, 2000)
 }, [])

 return loading ? (
 <FallbackView />
 ) : (
 <IntlProvider locale={locale} messages={messages}>
 {children}
 </IntlProvider>
 )
}

export {I18nProvider}

Hi Carmelo,

I don't see how this ticket got the 'resolved' status, the issue is not solved, as stated in my last comment. Do you have any suggestions for a workaround at least if the fix is not in sight?

Thank you for your help.

Yes, isLoading is there in the deps array of I18nProvider useEffect.

Hi,

That didn't help, but I've found that the issue was not caused in that component. Earlier I have implemented some logic for the I18nProvider component, where I fetch the user language from the backend.

I have this in the I18nProvider.tsx:

return isLoading ? (
 <LoadingView />
 ) : (
 <IntlProvider locale={locale} messages={messages}>
 {children}
 </IntlProvider>

Hi Carmelo,

I made a very simple modification in the TopBar.tsx in Metronic Demo2 so you can test the logic. I am using RTK Query to get the user and pass it as a prop to HeaderUserMenu component. I have tested user, isLoading, isSuccess properties for updating the component without any success.

I have also tried to move the fetching logic into the HeaderUserMenu, but the results is the same.

https://gist.github.com/tom3rr/dd4a2cdaf19554e2dc899b43c06e55e7

What am I missing?

Thanks for your help,
Tamás

Hi Carmelo,

I tried your suggestion, it still doesn't work. I don't understand why is this strange behaviour. I would simply like to load the user data from the backend and render the name in the HeaderUserMenu. After login, when the page is redirected it doesn't work, on refreshing the page it works again. MenuComponent.reinitialization does not seem to have any effect, no matter what the dependency array on useEffect is.

How could this be done properly?

Thank you for your help.

Hi Carmelo,

I've added the code to the HeaderUserMenu component like this:

useEffect(() => {
 setTimeout(() => {
 MenuComponent.reinitialization()
 }, 500)
 }, [])

Hi,

Once your HeaderUserMenu is ready and mounted to the DOM, you can run:
setTimeout(() => {
MenuComponent.reinitialization()
}, 500)
import {MenuComponent} from '{pass_to_assets}assets/ts/components'.
It will re-init your menu then.

Regards,
Keenthemes support