[Issue-36] Make sure that the site is loading and showing basic infor…

…mation, even when api service is down (#103) * Fix UI when the API is down * fix undefined responses
gnosis · Mar 2, 2021 · abc52bf · abc52bf
1 parent 70e70d6
commit abc52bf
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 75 deletions.
diff --git a/src/hooks/useAllAuctionInfos.ts b/src/hooks/useAllAuctionInfos.ts
@@ -17,7 +17,6 @@ export interface AuctionInfo {
 
 export function useAllAuctionInfo(): AuctionInfo[] | null {
   const [auctionInfo, setAllAuctions] = useState<AuctionInfo[] | null>(null);
-  const [error, setError] = useState<Error | null>(null);
 
   useEffect(() => {
     let cancelled = false;
@@ -31,9 +30,10 @@ export function useAllAuctionInfo(): AuctionInfo[] | null {
         if (cancelled) return;
         setAllAuctions(auctionInfo);
       } catch (error) {
-        if (cancelled) return;
+        setAllAuctions(null);
         console.error("Error getting clearing price info", error);
-        setError(error);
+
+        if (cancelled) return;
       }
     };
     fetchApiData();
@@ -43,10 +43,5 @@ export function useAllAuctionInfo(): AuctionInfo[] | null {
     };
   }, [setAllAuctions]);
 
-  if (error) {
-    console.error("error while fetching auction info", error);
-    return null;
-  }
-
   return auctionInfo;
 }
diff --git a/src/hooks/useCurrentClearingOrderAndVolumeCallback.ts b/src/hooks/useCurrentClearingOrderAndVolumeCallback.ts
@@ -10,12 +10,10 @@ export function useClearingPriceInfo(): ClearingPriceAndVolumeData | null {
     clearingInfo,
     setClearingPriceAndVolume,
   ] = useState<ClearingPriceAndVolumeData | null>(null);
-  const [error, setError] = useState<Error | null>(null);
   const { auctionId } = useSwapState();
 
   useMemo(() => {
     setClearingPriceAndVolume(null);
-    setError(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [auctionId, chainId]);
   useEffect(() => {
@@ -37,9 +35,10 @@ export function useClearingPriceInfo(): ClearingPriceAndVolumeData | null {
         if (cancelled) return;
         setClearingPriceAndVolume(clearingOrderAndVolume);
       } catch (error) {
-        if (cancelled) return;
+        setClearingPriceAndVolume(null);
         console.error("Error getting clearing price info", error);
-        setError(error);
+
+        if (cancelled) return;
       }
     };
     fetchApiData();
@@ -49,10 +48,5 @@ export function useClearingPriceInfo(): ClearingPriceAndVolumeData | null {
     };
   }, [account, chainId, library, auctionId, setClearingPriceAndVolume]);
 
-  if (error) {
-    console.error("error while fetching price info", error);
-    return null;
-  }
-
   return clearingInfo;
 }
diff --git a/src/hooks/useInterestingAuctionDetails.ts b/src/hooks/useInterestingAuctionDetails.ts
@@ -9,11 +9,9 @@ export function useInterestingAuctionInfo(
   const [auctionInfo, setMostInterestingAuctions] = useState<
     AuctionInfo[] | null
   >(null);
-  const [error, setError] = useState<Error | null>(null);
 
   useMemo(() => {
     setMostInterestingAuctions(null);
-    setError(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chainId]);
   useEffect(() => {
@@ -35,9 +33,10 @@ export function useInterestingAuctionInfo(
         if (cancelled) return;
         setMostInterestingAuctions(auctionInfo);
       } catch (error) {
-        if (cancelled) return;
+        setMostInterestingAuctions(null);
         console.error("Error getting clearing price info", error);
-        setError(error);
+
+        if (cancelled) return;
       }
     };
     fetchApiData();
@@ -47,10 +46,5 @@ export function useInterestingAuctionInfo(
     };
   }, [chainId, numberOfItems, setMostInterestingAuctions]);
 
-  if (error) {
-    console.error("error while fetching price info", error);
-    return null;
-  }
-
   return auctionInfo;
 }
diff --git a/src/hooks/usePlaceOrderCallback.ts b/src/hooks/usePlaceOrderCallback.ts
@@ -45,6 +45,8 @@ export function usePlaceOrderCallback(
     [account == null ? undefined : account],
   ).result;
   return useMemo(() => {
+    let previousOrder: string;
+
     return async function onPlaceOrder() {
       if (!chainId || !library || !account) {
         throw new Error("missing dependencies in onPlaceOrder callback");
@@ -67,15 +69,23 @@ export function usePlaceOrderCallback(
         library,
         account,
       );
-      const previousOrder = await additionalServiceApi.getPreviousOrder({
-        networkId: chainId,
-        auctionId,
-        order: {
-          buyAmount: buyAmountScaled,
-          sellAmount: sellAmountScaled,
-          userId: BigNumber.from(0), // Todo: This could be optimized
-        },
-      });
+
+      try {
+        previousOrder = await additionalServiceApi.getPreviousOrder({
+          networkId: chainId,
+          auctionId,
+          order: {
+            buyAmount: buyAmountScaled,
+            sellAmount: sellAmountScaled,
+            userId: BigNumber.from(0), // Todo: This could be optimized
+          },
+        });
+      } catch (error) {
+        console.error(
+          `Error trying to get previous order for auctionId ${auctionId}`,
+        );
+      }
+
       let estimate,
         method: Function,
         args: Array<string | string[] | number>,

diff --git a/src/pages/Overview/index.tsx b/src/pages/Overview/index.tsx
@@ -75,42 +75,50 @@ export default function Overview() {
   const highlightedAuctions = useInterestingAuctionInfo(4, chainId);
   const allAuctions = useAllAuctionInfo();
   const history = useHistory();
+  const tableData = [];
+  let highlightedAuctionEntries = [];
 
-  function handleClick(auctionId: number, chainId: number) {
+  const handleClick = (auctionId: number, chainId: number) => {
     history.push(`/auction?auctionId=${auctionId}&chainId=${chainId}`);
+  };
+
+  if (highlightedAuctions && highlightedAuctions.length > 0) {
+    highlightedAuctionEntries = Object.entries(highlightedAuctions);
   }
-  if (!highlightedAuctions || !allAuctions) return null;
-  const tableData = [];
-  allAuctions.forEach((item) => {
-    tableData.push({
-      auctionId: item.auctionId,
-      chainId: chainNames[Number(item.chainId)],
-      selling: item.symbolAuctioningToken,
-      buying: item.symbolBiddingToken,
-      symbol: (
-        <DoubleLogo
-          a0={item.addressAuctioningToken}
-          a1={item.addressBiddingToken}
-          size={40}
-          margin={true}
-        />
-      ),
-      date: new Date(item.endTimeTimestamp * 1000).toLocaleDateString(),
-      status:
-        new Date(item.endTimeTimestamp * 1000) > new Date()
-          ? "Ongoing"
-          : "Ended",
-      link: (
-        <ViewBtn
-          onClick={() => handleClick(item.auctionId, Number(item.chainId))}
-          type="button"
-        >
-          {" "}
-          view{" "}
-        </ViewBtn>
-      ),
+
+  if (allAuctions && allAuctions.length > 0) {
+    allAuctions.forEach((item) => {
+      tableData.push({
+        auctionId: item.auctionId,
+        chainId: chainNames[Number(item.chainId)],
+        selling: item.symbolAuctioningToken,
+        buying: item.symbolBiddingToken,
+        symbol: (
+          <DoubleLogo
+            a0={item.addressAuctioningToken}
+            a1={item.addressBiddingToken}
+            size={40}
+            margin={true}
+          />
+        ),
+        date: new Date(item.endTimeTimestamp * 1000).toLocaleDateString(),
+        status:
+          new Date(item.endTimeTimestamp * 1000) > new Date()
+            ? "Ongoing"
+            : "Ended",
+        link: (
+          <ViewBtn
+            onClick={() => handleClick(item.auctionId, Number(item.chainId))}
+            type="button"
+          >
+            {" "}
+            view{" "}
+          </ViewBtn>
+        ),
+      });
     });
-  });
+  }
+
   return (
     <>
       <ThemeHeader>
@@ -121,7 +129,7 @@ export default function Overview() {
           <h3>Highlighted auctions:</h3>
         </Wrapper>
         <Wrapper>
-          {Object.entries(highlightedAuctions).map((auctionInfo) => (
+          {highlightedAuctionEntries.map((auctionInfo) => (
             <AuctionInfoCard key={auctionInfo[0]} {...auctionInfo[1]} />
           ))}
         </Wrapper>

diff --git a/src/state/orderPlacement/hooks.ts b/src/state/orderPlacement/hooks.ts
@@ -74,11 +74,11 @@ export function orderToPrice(
 }
 
 function decodeSellOrder(
-  orderBytes: string,
+  orderBytes: string | undefined,
   soldToken: Token | undefined,
   boughtToken: Token | undefined,
 ): SellOrder | null {
-  if (soldToken == undefined || boughtToken == undefined) {
+  if (!orderBytes || !soldToken || !boughtToken) {
     return null;
   }
   const sellAmount = new Fraction(
@@ -526,13 +526,19 @@ export function useCurrentUserOrders() {
       if (!chainId || !account || !biddingToken || !auctioningToken) {
         return;
       }
-      const sellOrdersFormUser = await additionalServiceApi.getCurrentUserOrders(
-        {
+
+      let sellOrdersFormUser: string[] = [];
+
+      try {
+        sellOrdersFormUser = await additionalServiceApi.getCurrentUserOrders({
           networkId: chainId,
           auctionId,
           user: account,
-        },
-      );
+        });
+      } catch (error) {
+        console.error("Error getting current orders: ", error);
+      }
+
       const sellOrderDisplays: OrderDisplay[] = [];
       if (biddingToken && auctioningToken && sellOrdersFormUser) {
         for (const orderString of sellOrdersFormUser) {

diff --git a/src/state/orderbook/hooks.ts b/src/state/orderbook/hooks.ts
@@ -96,7 +96,7 @@ export function useOrderbookDataCallback() {
       } catch (error) {
         if (isFetchingDone) return;
         console.error("Error populating orderbook with data", error);
-        onResetOrderbookData({ bids: [], asks: [] }, error);
+        onResetOrderbookData({ bids: [], asks: [] }, null);
       }
     }
     if (shouldLoad && !isFetchingDone) {