adminjs icon indicating copy to clipboard operation
adminjs copied to clipboard

[Bug]: setCurrentAdmin does not update theme value in session after API response

Open salaarkhan-dev opened this issue 5 months ago โ€ข 0 comments

๐Ÿ“ž Contact Details

No response


๐Ÿž What happened?

Iโ€™m encountering an issue with the setCurrentAdmin function in AdminJS, specifically when updating the user theme (dark/light mode) via an API call. While the theme update is persisted correctly in the database, the UI does not reflect the change โ€” because the Redux session state is not updated.


๐Ÿ’ป Code Snippet

const [currentAdmin, setCurrentAdmin] = useCurrentAdmin();

const toggleTheme = useCallback(
  async (theme: string) => {
    console.log('before toggle theme: ', session.theme);
    console.log('changing to theme: ', theme);
    
    const response = await api.getDashboard<APIResponse>({
      params: { theme },
    });

    console.log('response theme: ', response.data.currentAdmin.theme);
    setCurrentAdmin(response.data.currentAdmin);

    console.log('Updated to theme: ', session.theme); // This still logs the old theme
  },
  [setCurrentAdmin, session]
);

๐Ÿชต Console Output

before toggle theme:  dark
changing to theme:  light
response theme:  light
Updated to theme:  dark  // Not updated!

โœ… Verified

  • โœ… The updated theme is saved correctly in the database.
  • โœ… response.data.currentAdmin.theme contains the correct value (light).
  • โŒ session.theme does not update after setCurrentAdmin(response.data.currentAdmin).

๐Ÿค” Expected Behavior

After calling setCurrentAdmin, the Redux session should reflect the new admin object โ€” including the updated theme โ€” so that the UI can react accordingly.


๐Ÿ› ๏ธ Workaround

A forced page reload updates the UI:

setCurrentAdmin(response.data.currentAdmin);
window.location.reload();

But this is not ideal for user experience and seems unnecessary.


๐Ÿงช Bug Prevalence

All the time


๐Ÿ“ฆ AdminJS Dependencies Version

"@adminjs/design-system": "^4.1.1",
"@adminjs/express": "^6.1.0",
"@adminjs/passwords": "^4.0.0",
"@adminjs/prisma": "^5.0.1",
"@adminjs/themes": "^1.0.1",
"@prisma/internals": "^6.12.0",
"adminjs": "^7.7.2"

๐ŸŒ Browser

  • Chrome

๐Ÿ“‹ Relevant Log Output

before toggle theme:  dark
changing to theme:  light
response theme:  light
Updated to theme:  dark  // Not updated!

๐Ÿงฉ Relevant Code Causing the Issue

const [currentAdmin, setCurrentAdmin] = useCurrentAdmin();

const icon = session.theme === 'dark' ? 'Sun' : 'Moon';

const toggleTheme = useCallback(
  async (theme: string) => {
    console.log('before toggle theme: ', session.theme);
    console.log('changing to theme: ', theme);
    
    const response = await api.getDashboard<APIResponse>({
      params: { theme },
    });

    console.log('response theme: ', response.data.currentAdmin.theme);
    setCurrentAdmin(response.data.currentAdmin);

    // Reload page to refresh session state (temporary workaround)
    // window.location.reload();

    console.log('Updated to theme: ', session.theme);
  },
  [setCurrentAdmin, session]
);

salaarkhan-dev avatar Jul 26 '25 15:07 salaarkhan-dev