Getting an object instead of a boolean value

Question

I have an async function that checks the permission status in a device. This is the function:

notificationsAllowed = async () => {
    const allowed = await requestNotifications(['alert', 'sound']).then((res) => {
        if (res.status == "granted") {
            return true;
        }

        return false;
    });

    return allowed;
}

allowed is boolean, but when I try to use this function (for example, to set a switch to true or false) I get an object for some reason. This is how I try to use it:

const allowed = NotificationsManager.getInstance().notificationsAllowed().then((res) => {
    return res;
});

const [isEnabled, setIsEnabled] = useState(allowed);

It seems like allowed is of type Promise<boolean> but I can't use async await because it is inside a functional component.

Instead of `return res;` do `setIsEnabled(res)` and use `useState(false)` or whatever a reasonable default would be. — Heretic Monkey, Sep 10 '21 at 17:40

score 3 · Accepted Answer · answered Sep 10 '21 at 17:39

3

You should use useEffect for something like this.

const [isEnabled, setIsEnabled] = useState(false);

useEffect(() => {
    NotificationsManager.getInstance().notificationsAllowed().then((res) => {
        setIsEnabled(res);
    });
}, []);

answered Sep 10 '21 at 17:39

dave

62,300
5
72
93

What is `useEffect()`? What is `setIsEnabled()`? Where are you getting these functions from? – gen_Eric Sep 10 '21 at 17:42
Those are React things. OP didn't tag their post with React, but it's pretty clearly about that if you know React at all, and OP should recognize the `useEffect` (and has the `setIsEnabled` already). Basically the `useEffect` is a way to call a function after renders (with the `[]` as the second param called only once) and the `setIsEnabled` is a setter for the state, received from the `useState`, which lets you save state between renders. – tuomokar Sep 10 '21 at 17:47
@tuomokar I've never used React, thanks for answering the question in a way that works the OP. – gen_Eric Sep 10 '21 at 18:06

score 0 · Answer 2 · answered Sep 10 '21 at 17:41

This is not how async functions or await work. Normally, with Promises (like requestNotifications), you run it, it does its work in the background and then it runs the .then() function when it's done (at some point in the future).

await does what it says, and waits for the Promise to resolve/finish before continuing on. You don't need .then() here, since you are waiting for it to finish in a different way.

notificationsAllowed = async () => {
    const allowed = await requestNotifications(['alert', 'sound']);
    return allowed.status === "granted"
};

But now notificationsAllowed is an async function. So you either need to use .then() which runs it in the background or use await to wait for notificationsAllowed to complete.

const allowed = await NotificationsManager.getInstance().notificationsAllowed();
const [isEnabled, setIsEnabled] = useState(allowed);

Or you need to use a callback, which will run at some point in the future and not let you return a value:

NotificationsManager.getInstance().notificationsAllowed().then(allowed => {
    const [isEnabled, setIsEnabled] = useState(allowed);
});

Thank you! I That explanation was great and now this async/await thing is clearer. Thank you so much! — John Doah, Sep 10 '21 at 17:46
It's a good explanation, but neither of those solutions is something you should do with React (which the code in the OP uses). Hooks must never run conditionally and they must run in the same order every time. Because of that they can't be called asynchronously. See https://reactjs.org/docs/hooks-rules.html for further info. — tuomokar, Sep 10 '21 at 17:50
@tuomokar I didn't know React was being used here, the OP never said that. — gen_Eric, Sep 10 '21 at 18:05

Getting an object instead of a boolean value

2 Answers2