how do i get the event of the allowed permission?

[vaporvee]

Hey i want to update my phone number component when I'm actaually getting the value of the phone number. I'm using next.js
Also the country code overrides the phonenumber value completely

"use client";

import { useState, useEffect } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { GetSimCardsResult, Sim, SimCard } from "@jonz94/capacitor-sim";
import { Capacitor } from "@capacitor/core";
const simIsAvailable = Capacitor.isPluginAvailable('Sim');

export default function PhoneInputBox() {
  const [phone, setPhone] = useState("");
  const [country, setCountry] = useState("us");
  if (simIsAvailable) {
    useEffect(() => {
      let hasPermission = true;
      Sim.requestPermissions().then((permStatus) => {
        hasPermission = permStatus.readSimCard === "granted";
      })
      if (hasPermission) {
        Sim.getSimCards().then(async (result: GetSimCardsResult) => {
          const simCard: SimCard = await result.simCards[0];
          setPhone(simCard.number);
          setCountry(simCard.isoCountryCode)
        })
      }
    }, []);
  }
  return (
    <PhoneInput
      value={phone}
      onChange={(phone) => setPhone(phone)}
    />
  );
}

[jonz94]

Hi,

What is the return value of the result: GetSimCardsResult?

export default function PhoneInputBox() {
  const [phone, setPhone] = useState("");
  const [country, setCountry] = useState("us");
  if (simIsAvailable) {
    useEffect(() => {
      let hasPermission = true;
      Sim.requestPermissions().then((permStatus) => {
        hasPermission = permStatus.readSimCard === "granted";
      })
      if (hasPermission) {
        Sim.getSimCards().then(async (result: GetSimCardsResult) => {
          // log value of the `result: GetSimCardsResult`
          console.log('get sim cards result:', result); // 👈

          const simCard: SimCard = await result.simCards[0];
          setPhone(simCard.number);
          setCountry(simCard.isoCountryCode)
        })
      }
    }, []);
  }
  return (
    <PhoneInput
      value={phone}
      onChange={(phone) => setPhone(phone)}
    />
  );
}

If the plugin works correctly, you should be able get to the data from the sim card. 👍

If not, there might be a bug in the plugin.
I may need more information (e.g., iOS or Android, OS version, etc.) to debug this. 👀

[vaporvee]

i do get the information but with this i first have to reload the component after accepting the permission on anroid. but i need something like a Event i can use to directly retry to set the components data after the user presses the Accept button. because for me it doesn't wait after request permission. even inside a then() or with an await.

[jonz94]

Maybe putting the hasPermission check logic inside the Sim.requestPermissions().then(() => {/* ... */}) could help?

"use client";

import { useState, useEffect } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { GetSimCardsResult, Sim, SimCard } from "@jonz94/capacitor-sim";
import { Capacitor } from "@capacitor/core";

const simIsAvailable = Capacitor.isPluginAvailable('Sim');

export default function PhoneInputBox() {
  const [phone, setPhone] = useState('');
  const [country, setCountry] = useState('us');

  if (simIsAvailable) {
    useEffect(() => {
      let hasPermission = true;
      Sim.requestPermissions().then((permStatus) => {
        hasPermission = permStatus.readSimCard === 'granted';

        // put `hasPermission` check logic inside the `Sim.requestPermissions().then(() => {/* ... */})`
        if (hasPermission) {
          Sim.getSimCards().then((result: GetSimCardsResult) => {
            const simCard: SimCard = result.simCards[0];
            setPhone(simCard.number);
            setCountry(simCard.isoCountryCode);
          });
        }
      });
    }, []);
  }

  return (
    <PhoneInput
      value={phone}
      onChange={(phone) => setPhone(phone)}
    />
  );
}

[vaporvee]

nope it fires directly when the Access request window Pops Up instead of the user actually interacting with it. :/

[vaporvee]

Oh also I'm using the latest next.js and Android 12

[jonz94]

Ah, maybe checkPermissions() is what you need.

"use client";

import { useState, useEffect } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { GetSimCardsResult, Sim, SimCard } from "@jonz94/capacitor-sim";
import { Capacitor } from "@capacitor/core";

const simIsAvailable = Capacitor.isPluginAvailable('Sim');

export default function PhoneInputBox() {
  const [phone, setPhone] = useState('');
  const [country, setCountry] = useState('us');

  if (simIsAvailable) {
    useEffect(() => {
      // use `checkPermissions()` instead of `requestPermissions()`
      Sim.checkPermissions().then((permStatus) => {
        const hasPermission = permStatus.readSimCard === 'granted';

        if (hasPermission) {
          Sim.getSimCards().then(async (result: GetSimCardsResult) => {
            const simCard: SimCard = await result.simCards[0];
            setPhone(simCard.number);
            setCountry(simCard.isoCountryCode);
          });
        }
      });
    }, []);
  }
  
  // TODO: add logic to trigger `eventHandler()`
  // for example: <button onClick={eventHandler}>request permission</button>
  function eventHandler() {
    Sim.requestPermissions().then((permStatus) => {
      const hasPermission = permStatus.readSimCard === 'granted';

      if (hasPermission) {
        Sim.getSimCards().then(async (result: GetSimCardsResult) => {
          const simCard: SimCard = await result.simCards[0];
          setPhone(simCard.number);
          setCountry(simCard.isoCountryCode);
        });
      }
    });
  }

  return (
    <PhoneInput
      value={phone}
      onChange={(phone) => setPhone(phone)}
    />
  );
}

Then, you can add your desired logic to trigger the eventHandler(); this will request permissions and get SIM card data.

[vaporvee]

no i need to request the permission on android first. i already tried that function but its just checking the Perm directly after it was requestet and doesn't wait for "Allow". after pressing "Allow" it should fire a function actually setting the variable.

Expected behaviour
Request permission -> wait for "Allow" => setPhone -> Phone number variable set automatically in Input Box

and all that without the user needing to Press something else then "Allow"