I have a class and I call the API from its. But I'm refactoring the code and I would like to call this function from another file. That's my current function called in same file of my Screen class.

MyScreen.js

addWishList(product) {
 this.addProductsToWishlist(product);
}


 async addProductsToWishlist(product){
  const loggedCustomerID = await SecureStore.getItemAsync('loggedUserCustomerID');
  const wishListID = await SecureStore.getItemAsync('loggedUserWishlistID');
    try {
      let dataRequest = {
        method: 'POST',
        body: JSON.stringify({
          CustomerID: loggedCustomerID,
          WishlistID: wishListID,
          WishlistProducts: [{
            ProductID: product.ProductID,
            Quantity: 1,
            WebSiteID: 1
          }
          ]

      }),
        headers: HEADERS_API
      }

      const addProductsToWishlistApiCall = await fetch(ADD_PRODUCT_WISHLIST_URL, dataRequest);
      const addProductsToWishlistApiResponse = await addProductsToWishlistApiCall.json();
      console.log(addProductsToWishlistApiResponse.SavedWishlistProductIDs)
      this.setState({wish: !this.state.wish});
      } catch(err) {
        console.log("Error fetching data-----------", err);
    }
  }

How could I put this function in another file and call it from my screen file?

I have a class and I call the API from its. But I'm refactoring the code and I would like to call this function from another file. That's my current function called in same file of my Screen class.

MyScreen.js

addWishList(product) {
 this.addProductsToWishlist(product);
}


 async addProductsToWishlist(product){
  const loggedCustomerID = await SecureStore.getItemAsync('loggedUserCustomerID');
  const wishListID = await SecureStore.getItemAsync('loggedUserWishlistID');
    try {
      let dataRequest = {
        method: 'POST',
        body: JSON.stringify({
          CustomerID: loggedCustomerID,
          WishlistID: wishListID,
          WishlistProducts: [{
            ProductID: product.ProductID,
            Quantity: 1,
            WebSiteID: 1
          }
          ]

      }),
        headers: HEADERS_API
      }

      const addProductsToWishlistApiCall = await fetch(ADD_PRODUCT_WISHLIST_URL, dataRequest);
      const addProductsToWishlistApiResponse = await addProductsToWishlistApiCall.json();
      console.log(addProductsToWishlistApiResponse.SavedWishlistProductIDs)
      this.setState({wish: !this.state.wish});
      } catch(err) {
        console.log("Error fetching data-----------", err);
    }
  }

How could I put this function in another file and call it from my screen file?

• javascript
• react-native

2 Answers 2

You will first need to export it from the function definition file, and then import it from MyScreen.js.

For more on ES6 import/export.

Example:

//------ lib.js ------
export const sqrt = Math.sqrt;
export async square = (x) => {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';

(async function() { 
 console.log(await square(11)); // 121
})()

console.log(diag(4, 3)); // 5

You can export function you need to call from other file and in the other file, you import that function and call it.

// import.js
import addProductsToWishList from './export';
addWishList(product) {
 addProductsToWishlist(product);
}

// export.js
 export default async function addProductsToWishlist(product){
  const loggedCustomerID = await SecureStore.getItemAsync('loggedUserCustomerID');
  const wishListID = await SecureStore.getItemAsync('loggedUserWishlistID');
    try {
      let dataRequest = {
        method: 'POST',
        body: JSON.stringify({
          CustomerID: loggedCustomerID,
          WishlistID: wishListID,
          WishlistProducts: [{
            ProductID: product.ProductID,
            Quantity: 1,
            WebSiteID: 1
          }
          ]

      }),
        headers: HEADERS_API
      }

      const addProductsToWishlistApiCall = await fetch(ADD_PRODUCT_WISHLIST_URL, dataRequest);
      const addProductsToWishlistApiResponse = await addProductsToWishlistApiCall.json();
      console.log(addProductsToWishlistApiResponse.SavedWishlistProductIDs)
      this.setState({wish: !this.state.wish});
      } catch(err) {
        console.log("Error fetching data-----------", err);
    }
  }