Skip to content

[FIX] Admin panel option is hidden after login #2867

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kresnaputra wants to merge 2 commits into from
Closed

[FIX] Admin panel option is hidden after login #2867

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5e84557
[FIX] Admin panel option is hidden after login
kresnaputra Feb 3, 2021
f278ea2
fixed re-render necessary
kresnaputra Feb 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions app/views/SidebarView/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,8 @@ class Sidebar extends Component {
super(props);
this.state = {
showStatus: false,
isAdmin: false
isAdmin: false,
isSetAdminNeedCall: true
};
}

Expand All @@ -68,10 +69,11 @@ class Sidebar extends Component {
}

shouldComponentUpdate(nextProps, nextState) {
const { showStatus, isAdmin } = this.state;
const { showStatus, isAdmin, isSetAdminNeedCall } = this.state;
const {
Site_Name, user, baseUrl, state, isMasterDetail, useRealName, theme
} = this.props;

// Drawer navigation state
if (state?.index !== nextProps.state?.index) {
return true;
Expand Down Expand Up @@ -103,9 +105,16 @@ class Sidebar extends Component {
if (nextState.isAdmin !== isAdmin) {
return true;
}
if (nextProps.state !== state && isSetAdminNeedCall === true) {

@diegolmello diegolmello Feb 8, 2021

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As you can see at the beginning of the block, state comes from react-navigation (it's track current state of the navigation) and it's an object.
nextProps.state !== state is an object comparison, so it'll never be equal.
image

return true;
}
return false;
}

componentDidUpdate() {
this.setIsAdmin();

@diegolmello diegolmello Feb 8, 2021

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a good practice to call something on componentDidUpdate without testing in what cases it should run.
componentDidUpdate runs every time the component updates: when state changes, when props change or when the component is forced updated.

Even if shouldComponentUpdate returns false, this.setIsAdmin is being called.
Add a console.log at the start of setIsAdmin and you'll see how many times it's called.

}

async setIsAdmin() {
const db = database.active;
const { user } = this.props;
Expand All @@ -114,8 +123,11 @@ class Sidebar extends Component {
if (roles) {
const permissionsCollection = db.collections.get('permissions');
const permissionsFiltered = await permissionsCollection.query(Q.where('id', Q.oneOf(permissions))).fetch();
const isAdmin = permissionsFiltered.reduce((result, permission) => (
result || permission.roles.some(r => roles.indexOf(r) !== -1)),
const isAdmin = permissionsFiltered.reduce((result, permission) => {
this.setState({ isSetAdminNeedCall: false });

@diegolmello diegolmello Feb 8, 2021

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a good practice to change the state inside of an iteration.
It's going to set the state for every permissions on the list.
Even if sCU prevents the re-render to happen, you're calling unnecessary resources.

return (
result || permission.roles.some(r => roles.indexOf(r) !== -1));
},
false);
this.setState({ isAdmin });
}
Expand Down