try to fixed waypoints

AkekoChan · Jan 11, 2024 · 221f1ed · 221f1ed
1 parent 104e810
commit 221f1ed
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 59 deletions.
diff --git a/src/components/ship/storage/Storage.jsx b/src/components/ship/storage/Storage.jsx
@@ -51,7 +51,6 @@ const Storage = ({ data }) => {
 
   const handleMatchMarket = () => {
     if (cargo?.inventory && market?.tradeGoods) {
-      console.log("if cargo and market exist");
       const matchingItems = market.tradeGoods.filter((marketItem) =>
         cargo.inventory.some(
           (cargoItem) => cargoItem.symbol === marketItem.symbol
@@ -79,25 +78,18 @@ const Storage = ({ data }) => {
         symbol.systemSymbol,
         symbol.waypointSymbol
       );
-      console.log(currentWaypoint);
       currentWaypoint.traits.map((trait) => {
-        console.log(trait.symbol === "MARKETPLACE");
         if (trait.symbol === "MARKETPLACE") {
-          console.log("Marketplace found");
           getMarket(symbol.systemSymbol, symbol.waypointSymbol);
+          handleMatchMarket();
         } else {
-          console.log("Marketplace not found");
           setMatchingItems([]);
         }
       });
     };
     getCurrentWaypoint();
   }, [symbol.waypointSymbol]);
 
-  useEffect(() => {
-    handleMatchMarket();
-  }, [cargo, market]);
-
   return (
     <div className="ship-storage">
       <table className="fleet-table">
@@ -133,13 +125,17 @@ const Storage = ({ data }) => {
                         (matchingItem) => matchingItem.symbol === item.symbol
                       ) && (
                         <>
-                          <button onClick={() => handleSellItem(item)}>
+                          <button
+                            onClick={() => handleSellItem(item)}
+                            className="sell-btn"
+                          >
                             Sell
                           </button>
                           {isClicked[item.symbol] && (
                             <input
                               type="number"
                               name="quantity"
+                              className="quantity-input"
                               min={1}
                               onChange={(event) =>
                                 handleChangeQuantity(event, item)

diff --git a/src/components/ship/storage/storage.css b/src/components/ship/storage/storage.css
@@ -11,10 +11,55 @@
 }
 
 .ship-storage tbody span {
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.8rem;
   display: block;
 }
 
 .ship-storage tbody p {
   color: var(--gray);
 }
+
+.sell-btn {
+  padding: 0.5rem 1rem;
+  border-radius: 0.75rem;
+  background: linear-gradient(94deg, var(--cream) -1.06%, var(--lavender) 100%);
+  border: none;
+  color: var(--black);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-16px-1rem);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.sell-btn:before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.2);
+  top: 0;
+  left: -50%;
+  opacity: 0;
+  filter: blur(5px);
+  transition: all 0.8s ease-in-out;
+}
+
+.sell-btn:hover::before {
+  left: 150%;
+  opacity: 1;
+}
+
+.quantity-input {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--gray);
+  border-radius: 0.75rem;
+  margin-left: 0.5rem;
+  font-size: var(--font-16px-1rem);
+  background-color: var(--black);
+  color: var(--white);
+
+  &::placeholder {
+    color: var(--gray);
+  }
+}
diff --git a/src/context/shipContext.jsx b/src/context/shipContext.jsx
@@ -99,54 +99,7 @@ export const ShipContextProvider = ({ children }) => {
     }
   };
 
-  const fetchSystemWaypoints = async (systemSymbol) => {
-    const waypoints = [];
-    const limit = 10;
-
-    const fetchWaypointsForPage = async (page) => {
-      const optionsAllWaypoints = {
-        endpoint: `systems/${systemSymbol}/waypoints?page=${page}&limit=${limit}`,
-        method: "GET",
-        headers: {
-          Accept: "application/json",
-        },
-      };
-
-      const dataAllWaypoints = await fetchData(optionsAllWaypoints);
-      waypoints.push(...dataAllWaypoints);
-    };
-
-    const optionsCountWaypoints = {
-      endpoint: `systems/${systemSymbol}`,
-      method: "GET",
-      headers: {
-        Accept: "application/json",
-      },
-    };
-
-    const data = await fetchData(optionsCountWaypoints);
-    const countWaypoints = data.waypoints.length;
-
-    const totalPages = Math.ceil(countWaypoints / limit);
-    const delayBetweenRequests = 3000;
-
-    const fetchPromises = [];
-
-    for (let page = 1; page <= totalPages; page++) {
-      fetchPromises.push(
-        new Promise((resolve) => {
-          setTimeout(async () => {
-            await fetchWaypointsForPage(page);
-            resolve();
-          }, delayBetweenRequests);
-        })
-      );
-    }
-
-    await Promise.all(fetchPromises);
-
-    localStorage.setItem("waypoints", JSON.stringify(waypoints));
-  };
+  const fetchSystemWaypoints = async (systemSymbol) => {};
 
   const getWaypoint = async (systemSymbol, waypointSymbol) => {
     const options = {