use proxy

Author: rwieruch

.storybook/stories/Introduction/demo.story.js

@@ -395,25 +395,34 @@ const ViewMarket = ({ marketData, item, isExpanded, onOpen, onClose }) => {
   );
 };
 
-const queryCurrencies = ({ page, size, category }) => () => {
-  let extra = '';
-  if (category !== DEFAULT_CATEGORY) {
-    extra = `category=${category}&`;
-  }
+const onError = (error) => {
+  console.log(error);
+  console.log('local API may not be running');
+  return [];
+};
+
+export const queryCurrencies = ({ page, size, category }) => () => {
+  const extra = category !== DEFAULT_CATEGORY ? `category=${category}&` : '';
 
   return axios
     .get(
-      `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&${extra}order=market_cap_desc&per_page=${size}&page=${page}&sparkline=true&price_change_percentage=1h%2C24h%2C7d%2C14d%2C30d%2C200d%2C1y`,
+      `https://api.react-tables.com/?proxy=${btoa(
+        `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&${extra}order=market_cap_desc&per_page=${size}&page=${page}&sparkline=true&price_change_percentage=1h%2C24h%2C7d%2C14d%2C30d%2C200d%2C1y`,
+      )}`,
     )
-    .then((result) => result.data);
+    .then((result) => result.data)
+    .catch(onError);
 };
 
-const queryMarkets = (id) => () =>
+export const queryMarkets = (id) => () =>
   axios
     .get(
-      `https://api.coingecko.com/api/v3/coins/${id}/tickers?per_page=5&page=1&include_exchange_logo=true`,
+      `https://api.react-tables.com/?proxy=${btoa(
+        `https://api.coingecko.com/api/v3/coins/${id}/tickers?per_page=5&page=1&include_exchange_logo=true`,
+      )}`,
     )
-    .then((res) => res.data);
+    .then((res) => res.data)
+    .catch(onError);
 
 const Demo = () => {
   // dropdown
@@ -502,9 +511,9 @@ const Demo = () => {
 
   React.useEffect(() => {
     pagination.fns.onSetPage(DEFAULT_PAGE);
-    pagination.fns.onSetSize(50); // TODO
+    pagination.fns.onSetSize(10); // TODO
     fetchCurrencies(
-      { page: DEFAULT_PAGE, size: 50, category: activeCategory },
+      { page: DEFAULT_PAGE, size: 10, category: activeCategory },
       { overlayLoading: true },
     );
   }, [activeCategory]);