Is there a way to refresh drawer navigator without usage of state managers like redux?

43 Views Asked by At

I want to display some drawer items with relation to a logged in admin.

This is what I have for my drawer navigator currently located in the App.js

import { getUserRole } from "./components/dashboard";

const userRole = getUserRole();

function DrawerNavigator() {
  return (
    <>
      <Drawer.Navigator
        screenOptions={{
          drawerActiveTintColor: "#000",
          fontWeight: "bold",
          // drawerLabelStyle: { color: "white" },
        }}
        initialRouteName="Home"
        drawerContent={props => <DrawerHeader {...props} />}
      >
        <Drawer.Screen
          name="Dashboard"
          component={Dashboard}
          options={{
            headerTitle: () => <HeaderLogo />,
            headerStyle: {
              backgroundColor: "#FEF202",
            },
            headerTitleAlign: "center",
            drawerIcon: () => (
              <AntDesign name="dashboard" size={30} color="black" />
            ),
          }}
        />
        {userRole === "user" && (
          <>
            <Drawer.Screen
              name="Add Games"
              component={AddGamesD}
              options={{
                headerTitle: "Admin",
                headerTitleAlign: "center",
                drawerIcon: () => (
                  <View style={{ flexDirection: "row", gap: "2vw" }}>
                    <MaterialIcons
                      name="admin-panel-settings"
                      size={30}
                      color="black"
                    />
                    <Entypo name="add-to-list" size={30} color="black" />
                  </View>
                ),
              }}
            />
            <Drawer.Screen
              name="Edit Games"
              component={EditGamesD}
              options={{
                headerTitle: "Admin",
                headerTitleAlign: "center",
                drawerIcon: () => (
                  <View style={{ flexDirection: "row", gap: "2vw" }}>
                    <MaterialIcons
                      name="admin-panel-settings"
                      size={30}
                      color="black"
                    />
                    <Entypo name="edit" size={30} color="black" />
                  </View>
                ),
              }}
            />
          </>
        )}
      </Drawer.Navigator>
    </>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

From the dasboard file:

export default class Dashboard extends Component {
  constructor() {
    super();
    this.state = {
      displayName: "", // Initialize displayName state
      uid: "",
      errorMessage: "",
      userRole: "user",
      currentUser: null,
      email: "",
      update: null,
      isResettingPassword: false,
    };
  }
  getUser = () => {
    const user = FIREBASE_AUTH.currentUser;
    // console.log("My user: " + user.displayName);
    if (user) {
      this.setState({
        displayName: user.displayName || "Display Name Not Set",
        uid: user.uid,
        currentUser: user,
      });
      if (user.displayName === "Sth" && user.email === "[email protected]") {
        this.setState({ userRole: "admin" });
        this.forceUpdate();
        // setUserRole("admin");
      } else {
        this.setState({ userRole: "user" });
        // setUserRole("admin");
      }
    }
  };

  componentDidMount() {
    this.getUser(); // Fetch user details when component mounts
  }

  // Function to get the userRole value
  getUserRole = () => {
    return this.state.userRole;
  };
}

// Exporting the function getUserRole
export const getUserRole = () => {
  const dashboardInstance = new Dashboard(); // Create an instance of Dashboard
  dashboardInstance.getUser();
  return dashboardInstance.getUserRole(); // Call the getUserRole function of the instance
};

The above kinda works just not reliably i.e on a new instance when the admin logs in the drawer doesn't update, but if for some reason a reload occurs, then it updates. I hope the above description is clear enough. Thank you.

0

There are 0 best solutions below