From 50a796c446501c6cc98e5d1679c93ecb2a5a4713 Mon Sep 17 00:00:00 2001
From: vishwasrvalke <39165365+vishwasrvalke@users.noreply.github.com>
Date: Sat, 24 Jul 2021 13:10:46 +0530
Subject: [PATCH 1/2] Basic auction optimization of code and null checks

---
 components/Auction/index.js | 193 ++++++++++++++++++------------------
 1 file changed, 98 insertions(+), 95 deletions(-)

diff --git a/components/Auction/index.js b/components/Auction/index.js
index e6feb3c..491ac78 100644
--- a/components/Auction/index.js
+++ b/components/Auction/index.js
@@ -5,41 +5,23 @@ import styles from './Auction.module.css';
 import fetchData from '../../utils/fetchData';
 import fetchSelfDetails from '../../utils/fetchSelfDetails';
 
-const BASE_API_URL = process.env.NEXT_PUBLIC_BASE_API_URL;
+const BASE_API_URL = `https://api.realdevsquad.com`;
 const AUCTIONS_URL = `${BASE_API_URL}/auctions`;
 const WALLET_URL = `${BASE_API_URL}/wallet`;
 
 const HandleAuctions = () => {
   const [auctionsData, setAuctionsData] = useState([]);
-  const [userBid, setUserBid] = useState();
+  const [userBid, setUserBid] = useState(0);
   const [isUserLoggedIn, setIsUserLoggedIn] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
-  const [userMoney, setUserMoney] = useState();
-
-  useEffect(() => {
-    fetchAndSetAuctions();
-  }, []);
-
-  useEffect(() => {
-    getUserWallet();
-  }, []);
-
-  useEffect(() => {
-    fetchSelfDetails()
-      .then((res) => {
-        if (res.status === 200) {
-          setIsUserLoggedIn(true);
-        }
-      })
-      .catch((err) => {
-        console.log('User is not logged in', err);
-      });
-  }, []);
+  const [userMoney, setUserMoney] = useState(0);
 
   const fetchAndSetAuctions = async () => {
     const response = await fetchData(AUCTIONS_URL);
-    const json = await response.json();
-    setAuctionsData(json.auctions);
+    if (!response) return null;
+    setAuctionsData(
+      JSON.parse(response && response.auctions ? response.auctions : 0) || 0
+    );
     setIsLoading(false);
   };
 
@@ -47,7 +29,7 @@ const HandleAuctions = () => {
     const response = await fetchData(WALLET_URL, 'GET', {
       credentials: 'include',
     });
-    const { status } = await response;
+    const { status } = response;
     if (status === 200) {
       const { wallet } = await response.json();
       if (Object.keys(wallet).length === 0) return setUserMoney(0);
@@ -59,9 +41,26 @@ const HandleAuctions = () => {
       }
     } else {
       setUserMoney(0);
+      return null;
     }
   };
 
+  useEffect(() => {
+    (async () => {
+      await fetchAndSetAuctions();
+      await getUserWallet();
+      await fetchSelfDetails()
+        .then((res) => {
+          if (res.status === 200) {
+            setIsUserLoggedIn(true);
+          }
+        })
+        .catch((err) => {
+          console.error('User is not logged in', err);
+        });
+    })();
+  }, []);
+
   const handleNewBid = async (e, auctionId) => {
     e.preventDefault();
     if (!isUserLoggedIn) {
@@ -86,7 +85,7 @@ const HandleAuctions = () => {
       );
       const { status } = await response;
       if (status === 201) {
-        fetchAndSetAuctions();
+        await fetchAndSetAuctions();
         setIsLoading(false);
       }
     }
@@ -108,78 +107,82 @@ const HandleAuctions = () => {
     e.target.src = '/assets/default_avatar.jpg';
   };
 
-  const auctionHandler = auctionsData.map((auction) => {
-    const { id, seller, quantity, highest_bid, bidders } = auction;
-    return (
-      <div className={`${styles.auctionContainer} ${id}`} key={id}>
-        <div className={styles.auctionSeller}>
-          <h2>Seller:</h2>
-          <img
-            className={styles.profilePhoto}
-            src={`${BASE_IMAGE_URL}/${seller}/img.png`}
-            onError={brokenImageHandler}
-          />
-        </div>
-        <div className={styles.auctionStats}>
-          <div className={styles.itemInfo}>
-            <h1>
-              {quantity} x {'  '}
-              <Image
-                className={styles.gemImage}
-                layout="fixed"
-                src="/assets/gem.png"
-                width={25}
-                height={25}
-              />
-            </h1>
-          </div>
-          <div className={styles.currentStatus}>
-            <h2>
-              Current Bid:
-              <div className={styles.currentBidPrice}>{highest_bid}</div>
-            </h2>
-          </div>
-        </div>
-        <div>
-          <form
-            className={styles.bidOptions}
-            onSubmit={(e) => handleNewBid(e, id)}
-          >
-            <input
-              className={styles.inputBid}
-              type="number"
-              min={parseInt(highest_bid) + 1}
-              required={true}
-              onBlur={({ target: { value } }) =>
-                validateBid(value, highest_bid)
-              }
-            />
-            <button type="submit" className={styles.bidBtn}>
-              Bid
-            </button>
-          </form>
-        </div>
-        <div className={styles.bidders}>
-          {bidders.map((bidder) => {
-            return (
-              <div
-                className={styles.biddersImg}
-                key={bidder}
-                data-columns={getColumns(bidders.length)}
-                title={bidder}
-              >
+  const auctionHandler =
+    auctionsData && auctionsData.length
+      ? auctionsData.map(({ id, seller, quantity, highest_bid, bidders }) => {
+          return (
+            <div className={`${styles.auctionContainer} ${id}`} key={id}>
+              <div className={styles.auctionSeller}>
+                <h2>Seller:</h2>
                 <img
                   className={styles.profilePhoto}
-                  src={`${BASE_IMAGE_URL}/${bidder}/img.png`}
-                  onError={brokenImageHandler}
+                  src={`${BASE_IMAGE_URL}/${seller}/img.png`}
+                  onError={(e) => brokenImageHandler(e)}
                 />
               </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  });
+              <div className={styles.auctionStats}>
+                <div className={styles.itemInfo}>
+                  <h1>
+                    {quantity} x {'  '}
+                    <Image
+                      className={styles.gemImage}
+                      layout="fixed"
+                      src="/assets/gem.png"
+                      width={25}
+                      height={25}
+                    />
+                  </h1>
+                </div>
+                <div className={styles.currentStatus}>
+                  <h2>
+                    Current Bid:
+                    <div className={styles.currentBidPrice}>{highest_bid}</div>
+                  </h2>
+                </div>
+              </div>
+              <div>
+                <form
+                  className={styles.bidOptions}
+                  onSubmit={(e) => handleNewBid(e, id)}
+                >
+                  <input
+                    className={styles.inputBid}
+                    type="number"
+                    min={parseInt(highest_bid) + 1}
+                    required={true}
+                    onBlur={({ target: { value } }) =>
+                      validateBid(value, highest_bid)
+                    }
+                  />
+                  <button type="submit" className={styles.bidBtn}>
+                    Bid
+                  </button>
+                </form>
+              </div>
+              <div className={styles.bidders}>
+                {bidders.length
+                  ? bidders.map((bidder) => {
+                      return (
+                        <div
+                          className={styles.biddersImg}
+                          key={bidder}
+                          data-columns={getColumns(bidders.length)}
+                          title={bidder}
+                        >
+                          <img
+                            className={styles.profilePhoto}
+                            src={`${BASE_IMAGE_URL}/${bidder}/img.png`}
+                            onError={brokenImageHandler}
+                          />
+                        </div>
+                      );
+                    })
+                  : null}
+              </div>
+            </div>
+          );
+        })
+      : null;
 
   return (
     <div className={styles.mainContainer}>

From 217258bdc5d2c00f443ff4e6f45df10bcc1f9352 Mon Sep 17 00:00:00 2001
From: vishwasrvalke <39165365+vishwasrvalke@users.noreply.github.com>
Date: Sat, 24 Jul 2021 13:15:50 +0530
Subject: [PATCH 2/2] Updated the url

---
 components/Auction/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Auction/index.js b/components/Auction/index.js
index 491ac78..391307f 100644
--- a/components/Auction/index.js
+++ b/components/Auction/index.js
@@ -5,7 +5,7 @@ import styles from './Auction.module.css';
 import fetchData from '../../utils/fetchData';
 import fetchSelfDetails from '../../utils/fetchSelfDetails';
 
-const BASE_API_URL = `https://api.realdevsquad.com`;
+const BASE_API_URL = process.env.NEXT_PUBLIC_BASE_API_URL;
 const AUCTIONS_URL = `${BASE_API_URL}/auctions`;
 const WALLET_URL = `${BASE_API_URL}/wallet`;