DEV Community

Discussion on: Architecting Frontend Projects To Scale

Collapse
 
mmcshinsky profile image
Michael McShinsky

Hi Bennaceur! Can you provide more context of what your code looks like? Typically the underscore in a function denotes an internal function to the component. You'll probably have something more like:

function _apiProducts () {
  apiProducts.getAll().then(res => {}).catch(err => {})
}

_apiProducts();
Enter fullscreen mode Exit fullscreen mode

...but I don't know what your code looks like.

Collapse
 
bennaceurhichem profile image
Bennaceur Hichem • Edited

I'm working with this woocommerce api and I want to organize my api calls like what you did sir,
thuis my code in the component where I ade the call

import { apiProducts } from '../services/api/apiProducts';
import React,{useState,useEffect} from 'react'
import { View, Text, StyleSheet,Button } from 'react-native'
import { render } from 'react-dom'

export default function Products() {
  const [Products, setProducts] = useState([]);

  /*
  useEffect(() => {
   _getProducts();
  }, []);
*/
  function  getProducts(){
  // if(apiProducts)
     apiProducts.getAll().then((res) => {
      let arr = parseProducts(res.results.data);
      setProducts(arr);
    })
    .catch( (err)=> console.log("ERROR"+err));
  }

  function parseProducts(Products) {
    return Products.map((Product) => {
      // Parse Product information
      return Product;
    });
  }

  function _createProduct(Product) {
    apiProducts.post(Product).then((res) => {
      // state logic
    });
  }

  function _updateProduct(Product) {
    apiProducts.patch(Product).then((res) => {
      // state logic
    });
  }

  function _removeProduct(id) {
    apiProducts.remove(id).then((res) => {
      // state logic
    });
  }

  return (
    <View>

      {Products.map((Product) => (
        <Text>{Product.name}</Text>
      ))}




  <Button
  onPress={() => 
     getProducts()

  }
  title="Click"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>


    </View>
  );
}
Enter fullscreen mode Exit fullscreen mode

The major change is that I use the WoocommerceAPI instead of axios. The instatiation of the connection with the woocomme'rce api works like mentioned in docs here : npmjs.com/package/react-native-woo...

so instead of axios I used WooCommerceAPI