From 8b9dc37b9427d97cc99e92eb09235baba30b6320 Mon Sep 17 00:00:00 2001
From: Harish Vishwakarma <harishv.lpu@gmail.com>
Date: Mon, 21 Oct 2024 22:35:13 +0530
Subject: [PATCH] code cleanup

---
 src/pages/compoundbay/CompoundBay.tsx    |  25 ----
 src/pages/compoundbay/FilterSidebar.tsx  | 102 ++++++++---------
 src/pages/compoundbay/ResultsSidebar.tsx | 140 +++++++++--------------
 3 files changed, 98 insertions(+), 169 deletions(-)

diff --git a/src/pages/compoundbay/CompoundBay.tsx b/src/pages/compoundbay/CompoundBay.tsx
index 8917dfb4..06f5a7b5 100644
--- a/src/pages/compoundbay/CompoundBay.tsx
+++ b/src/pages/compoundbay/CompoundBay.tsx
@@ -19,7 +19,6 @@ const CompoundBay = observer(() => {
     >([]);
     const [searchTerm, setSearchTerm] = useState("");
     const [loadCount, setLoadCount] = useState(10);
-    //const [expandedSales, setExpandedSales] = useState<Set<string>>(new Set());
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
@@ -28,12 +27,6 @@ const CompoundBay = observer(() => {
     const [vendor, setVendor] = useState("");
     const [shipsFromCountry, setShipsFromCountry] = useState("");
     const [compound, setCompound] = useState("");
-
-    // Add new state for dropdown options
-    const [vendorOptions, setVendorOptions] = useState<string[]>([]);
-    const [countryOptions, setCountryOptions] = useState<string[]>([]);
-    const [compoundOptions, setCompoundOptions] = useState<string[]>([]);
-
     const [isMobileFilterVisible, setIsMobileFilterVisible] = useState(false);
 
     const fetchGroupBuySales = async () => {
@@ -48,23 +41,6 @@ const CompoundBay = observer(() => {
                     const sales = results.data as GroupBuySale[];
                     setGroupBuySales(sales);
                     setVisibleGroupBuySales(sales.slice(0, loadCount));
-
-                    // Extract unique options for dropdowns
-                    const vendors = [
-                        ...new Set(sales.map((sale) => sale.Vendor)),
-                    ];
-                    const countries = [
-                        ...new Set(
-                            sales.map((sale) => sale["Ships from Country"]),
-                        ),
-                    ];
-                    const compounds = [
-                        ...new Set(sales.map((sale) => sale.Compound)),
-                    ];
-
-                    setVendorOptions(vendors);
-                    setCountryOptions(countries);
-                    setCompoundOptions(compounds);
                 },
                 error: (error) => {
                     console.error("Error parsing CSV:", error);
@@ -82,7 +58,6 @@ const CompoundBay = observer(() => {
     useEffect(() => {
         fetchGroupBuySales();
         const intervalId = setInterval(fetchGroupBuySales, 15 * 60 * 1000); // Refresh every 15 minutes
-
         return () => clearInterval(intervalId);
     }, []);
 
diff --git a/src/pages/compoundbay/FilterSidebar.tsx b/src/pages/compoundbay/FilterSidebar.tsx
index c9026191..4e7dfa69 100644
--- a/src/pages/compoundbay/FilterSidebar.tsx
+++ b/src/pages/compoundbay/FilterSidebar.tsx
@@ -37,6 +37,27 @@ const FilterSidebar: React.FC<FilterSidebarProps> = ({
     isMobileFilterVisible,
     toggleMobileFilter,
 }) => {
+    const renderFilterSection = (
+        title: string,
+        value: string,
+        options: string[],
+        handleChange: (value: string) => void,
+    ) => (
+        <div className={styles.filterSection}>
+            <h3>{title}</h3>
+            <select
+                value={value}
+                onChange={(e) => handleChange(e.target.value)}>
+                <option value="">All</option>
+                {options.map((option) => (
+                    <option key={option} value={option}>
+                        {option}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+
     return (
         <div
             className={`${styles.filterSidebar} ${
@@ -49,63 +70,30 @@ const FilterSidebar: React.FC<FilterSidebarProps> = ({
             </button>
             <h2>Filters</h2>
 
-            <div className={styles.filterSection}>
-                <h3>Vendor Rating</h3>
-                <select
-                    value={vendorRating}
-                    onChange={(e) => handleVendorRatingChange(e.target.value)}>
-                    <option value="">All</option>
-                    {vendorRatingOptions.map((rating) => (
-                        <option key={rating} value={rating}>
-                            {rating}
-                        </option>
-                    ))}
-                </select>
-            </div>
-
-            <div className={styles.filterSection}>
-                <h3>Vendor</h3>
-                <select
-                    value={vendor}
-                    onChange={(e) => handleVendorChange(e.target.value)}>
-                    <option value="">All</option>
-                    {vendorOptions.map((v) => (
-                        <option key={v} value={v}>
-                            {v}
-                        </option>
-                    ))}
-                </select>
-            </div>
-
-            <div className={styles.filterSection}>
-                <h3>Ships from Country</h3>
-                <select
-                    value={shipsFromCountry}
-                    onChange={(e) =>
-                        handleShipsFromCountryChange(e.target.value)
-                    }>
-                    <option value="">All</option>
-                    {countryOptions.map((c) => (
-                        <option key={c} value={c}>
-                            {c}
-                        </option>
-                    ))}
-                </select>
-            </div>
-
-            <div className={styles.filterSection}>
-                <h3>Compound</h3>
-                <select
-                    value={compound}
-                    onChange={(e) => handleCompoundChange(e.target.value)}>
-                    <option value="">All</option>
-                    {compoundOptions.map((c) => (
-                        <option key={c} value={c}>
-                            {c}
-                        </option>
-                    ))}
-                </select>
-            </div>
+            {renderFilterSection(
+                "Vendor Rating",
+                vendorRating,
+                vendorRatingOptions,
+                handleVendorRatingChange,
+            )}
+            {renderFilterSection(
+                "Vendor",
+                vendor,
+                vendorOptions,
+                handleVendorChange,
+            )}
+            {renderFilterSection(
+                "Ships from Country",
+                shipsFromCountry,
+                countryOptions,
+                handleShipsFromCountryChange,
+            )}
+            {renderFilterSection(
+                "Compound",
+                compound,
+                compoundOptions,
+                handleCompoundChange,
+            )}
 
             <button onClick={clearFilters} className={styles.clearFilters}>
                 Clear Filters
diff --git a/src/pages/compoundbay/ResultsSidebar.tsx b/src/pages/compoundbay/ResultsSidebar.tsx
index 7dd80d7f..bac596e1 100644
--- a/src/pages/compoundbay/ResultsSidebar.tsx
+++ b/src/pages/compoundbay/ResultsSidebar.tsx
@@ -14,11 +14,7 @@ const ResultsSidebar: React.FC<ResultsSidebarProps> = ({
     handleScroll,
 }) => {
     const renderLink = (link: string, text: string) => {
-        if (
-            link &&
-            link.toLowerCase() !== "invite only" &&
-            link.toLowerCase() !== "n/a"
-        ) {
+        if (link && !["invite only", "n/a"].includes(link.toLowerCase())) {
             return (
                 <a href={link} target="_blank" rel="noopener noreferrer">
                     {text}
@@ -34,91 +30,61 @@ const ResultsSidebar: React.FC<ResultsSidebarProps> = ({
         </div>
     );
 
+    const renderSaleItem = (sale: GroupBuySale, index: number) => (
+        <div key={index} className={styles.saleItem}>
+            <h3 className={styles.saleTitle}>
+                {sale.Vendor} - {sale.Compound}
+            </h3>
+            <p className={styles.salePrice}>Price: {sale.Price}</p>
+            <div className={styles.expandedDetails}>
+                <div className={styles.detailsGrid}>
+                    {renderDetailItem("Type", sale.Type)}
+                    {renderDetailItem("Dose", `${sale.Dose} ${sale.Unit}`)}
+                    {renderDetailItem("Format", sale.Format)}
+                    {renderDetailItem("Quantity", sale.Quantity)}
+                    {renderDetailItem("Ships from", sale["Ships from Country"])}
+                    {renderDetailItem("Shipping Cost", sale["Shipping $"])}
+                    {renderDetailItem("MOQ", sale.MOQ)}
+                    {renderDetailItem("Vendor Rating", sale["Vendor rating"])}
+                    {renderDetailItem("Analysis", sale.Analysis)}
+                    {renderDetailItem(
+                        "Purity Guarantee",
+                        sale["Purity guarantee"],
+                    )}
+                    {renderDetailItem("Mass Guarantee", sale["Mass guarantee"])}
+                    {renderDetailItem(
+                        "Reship Guarantee",
+                        sale["Re-ship guarantee"],
+                    )}
+                    {renderDetailItem("Start", sale.Start)}
+                    {renderDetailItem("Close", sale.Close)}
+                </div>
+                <div className={styles.notes}>
+                    <span className={styles.detailLabel}>Notes:</span>{" "}
+                    {sale.Notes}
+                </div>
+                <div className={styles.links}>
+                    {renderDetailItem(
+                        "PepChat",
+                        renderLink(sale["PepChat Link"], "PepChat"),
+                    )}
+                    {renderDetailItem(
+                        "Discord",
+                        renderLink(sale["Discord Link"], "Discord"),
+                    )}
+                    {renderDetailItem(
+                        "Telegram",
+                        renderLink(sale["Telegram Link"], "Telegram"),
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+
     return (
         <div className={styles.results} onScroll={handleScroll}>
             {visibleGroupBuySales.length > 0 ? (
-                visibleGroupBuySales.map((sale, index) => (
-                    <div key={index} className={styles.saleItem}>
-                        <h3 className={styles.saleTitle}>
-                            {sale.Vendor} - {sale.Compound}
-                        </h3>
-                        <p className={styles.salePrice}>Price: {sale.Price}</p>
-                        <div className={styles.expandedDetails}>
-                            <div className={styles.detailsGrid}>
-                                {renderDetailItem("Type", sale.Type)}
-                                {renderDetailItem(
-                                    "Dose",
-                                    `${sale.Dose} ${sale.Unit}`,
-                                )}
-                                {renderDetailItem("Format", sale.Format)}
-                                {renderDetailItem("Quantity", sale.Quantity)}
-                                {renderDetailItem(
-                                    "Ships from",
-                                    sale["Ships from Country"],
-                                )}
-                                {renderDetailItem(
-                                    "Shipping Cost",
-                                    sale["Shipping $"],
-                                )}
-                                {renderDetailItem("MOQ", sale.MOQ)}
-                                {renderDetailItem(
-                                    "Vendor Rating",
-                                    sale["Vendor rating"],
-                                )}
-                                {renderDetailItem("Analysis", sale.Analysis)}
-                                {renderDetailItem(
-                                    "Purity Guarantee",
-                                    sale["Purity guarantee"],
-                                )}
-                                {renderDetailItem(
-                                    "Mass Guarantee",
-                                    sale["Mass guarantee"],
-                                )}
-                                {renderDetailItem(
-                                    "Reship Guarantee",
-                                    sale["Re-ship guarantee"],
-                                )}
-                                {renderDetailItem("Start", sale.Start)}
-                                {renderDetailItem("Close", sale.Close)}
-                            </div>
-                            <div className={styles.notes}>
-                                <span className={styles.detailLabel}>
-                                    Notes:
-                                </span>{" "}
-                                {sale.Notes}
-                            </div>
-                            <div className={styles.links}>
-                                <div className={styles.linkItem}>
-                                    <span className={styles.detailLabel}>
-                                        PepChat:
-                                    </span>{" "}
-                                    {renderLink(
-                                        sale["PepChat Link"],
-                                        "PepChat",
-                                    )}
-                                </div>
-                                <div className={styles.linkItem}>
-                                    <span className={styles.detailLabel}>
-                                        Discord:
-                                    </span>{" "}
-                                    {renderLink(
-                                        sale["Discord Link"],
-                                        "Discord",
-                                    )}
-                                </div>
-                                <div className={styles.linkItem}>
-                                    <span className={styles.detailLabel}>
-                                        Telegram:
-                                    </span>{" "}
-                                    {renderLink(
-                                        sale["Telegram Link"],
-                                        "Telegram",
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                ))
+                visibleGroupBuySales.map(renderSaleItem)
             ) : (
                 <p className={styles.noResults}>
                     No group buy sales available.