BarCode to get data from database

Question

export default function BarCode()  {

const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const [data, setData] = useState();
  const [value, setValue] = useState();

  updateSearch = (data) => {
    axios
      .get(
        `https://api.edamam.com/api/food-database/v2/parser?upc==${data}&app_id=2626c70d&app_key=0c0f87ae4e5437621363ecf8e7ea80ae&page=20`
      )
      .then((res) => {
        setState({ value: console.log(res.data.hints) });
      })
      .catch((error) => {
        console.log(error.response.value);
      });
  };

  useEffect(() => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === "granted");
    })();
  }, []);

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    setData(data);
  };

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      >
        {scanned && (
          <Button
            title={"Tap to Scan Again"}
            onPress={() => setScanned(false)}
          ></Button>
        )}
      </BarCodeScanner>
    </View>
  );
}

Hey everyone, I'm trying to get food data from the Edamam database API through axios, using a barcode scanner, at the moment when I run the code nothing shows on the console. And how can I put a If statement so the if the food is not in the database a warning will show.

Link to BarCode documentation:https://docs.expo.io/versions/latest/sdk/bar-code-scanner/ Link to Edamam documentation:https://developer.edamam.com/food-database-api-docs

score 0 · Answer 1 · answered Mar 31 '21 at 13:55

in the catch method, you can catch the HTTP status code, e.g:

axios(...)
.catch((err) => {
   if (error.response) {
      console.error(error.response.status); //http error status code
    } else if (error.request) {
      console.error(error.request); //we have not any response
    } else {
      console.error(error.message); //api call failed
    }})

then you can create a state to store responses, if you get a 404 error, set it as an empty array and by condition rendering show a related error, pseudocode:

function Test() {
  const [data, setData] = useState(undefined);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    axios(...)
      .then(({ data }) => setData(data))
      .catch((err) => {
        if (error.response && error.response.status === 404) setData([]);
        else setData(undefined);
      })
      .finally(() => setIsLoading(false));
  }, []);

  if (!isLoading && data.length <= 0) return <>not found! </>;
  if (!isLoading && !data) return <>an error occured </>;
  if (isLoading) return <>Loading...</>;
  return <>{JSON.stringify(data)}</>;
}

NOTE: there are some awesome tools to manage the API calls, like SWR and react-query.

BarCode to get data from database

1 Answers1