ps99-api 2.3.2 → 2.4.0

package/example-web/react2/src/components/EggsComponent.tsx

@@ -1,61 +1,56 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const EggsComponent: React.FC<{
-  configData?: CollectionConfigData<"Eggs">;
+  configData: CollectionConfigData<"Eggs">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Eggs">>
-      collectionName="Eggs"
-      configData={configData}
-      render={(data) => (
+    <div>
+      <h2>{configData.name}</h2>
+      <ImageComponent src={configData.icon} alt={configData.name} />
+      <p>Currency: {configData.currency}</p>
+      <p>Override Cost: {configData.overrideCost}</p>
+      {configData.isCustomEgg && <p>Custom Egg: Yes</p>}
+      {configData.bestEgg && <p>Best Egg: Yes</p>}
+      {configData.disableGold && <p>Disable Gold: Yes</p>}
+      {configData.disableRainbow && <p>Disable Rainbow: Yes</p>}
+      {configData.disableShiny && <p>Disable Shiny: Yes</p>}
+      {configData.disableModifiers && <p>Disable Modifiers: Yes</p>}
+      {configData.goldChance && <p>Gold Chance: {configData.goldChance}</p>}
+      {configData.rainbowChance && (
+        <p>Rainbow Chance: {configData.rainbowChance}</p>
+      )}
+      {configData.shinyChance && <p>Shiny Chance: {configData.shinyChance}</p>}
+      {configData.rarity && (
+        <div>
+          <p>Rarity: {configData.rarity.DisplayName}</p>
+          <p>Rarity Number: {configData.rarity.RarityNumber}</p>
+        </div>
+      )}
+      <h3>Pets:</h3>
+      <ul>
+        {configData.pets.map((pet, index) => (
+          <li key={index}>
+            <p>Name: {pet[0]}</p>
+            <p>Chance: {pet[1]}</p>
+            {pet[2] && <p>Tier: {pet[2]}</p>}
+          </li>
+        ))}
+      </ul>
+      {configData.productIds && (
         <div>
-          <h2>{data.name}</h2>
-          <ImageComponent src={data.icon} alt={data.name} />
-          <p>Currency: {data.currency}</p>
-          <p>Override Cost: {data.overrideCost}</p>
-          {data.isCustomEgg && <p>Custom Egg: Yes</p>}
-          {data.bestEgg && <p>Best Egg: Yes</p>}
-          {data.disableGold && <p>Disable Gold: Yes</p>}
-          {data.disableRainbow && <p>Disable Rainbow: Yes</p>}
-          {data.disableShiny && <p>Disable Shiny: Yes</p>}
-          {data.disableModifiers && <p>Disable Modifiers: Yes</p>}
-          {data.goldChance && <p>Gold Chance: {data.goldChance}</p>}
-          {data.rainbowChance && <p>Rainbow Chance: {data.rainbowChance}</p>}
-          {data.shinyChance && <p>Shiny Chance: {data.shinyChance}</p>}
-          {data.rarity && (
-            <div>
-              <p>Rarity: {data.rarity.DisplayName}</p>
-              <p>Rarity Number: {data.rarity.RarityNumber}</p>
-            </div>
-          )}
-          <h3>Pets:</h3>
+          <h3>Product IDs:</h3>
           <ul>
-            {data.pets.map((pet, index) => (
-              <li key={index}>
-                <p>Name: {pet[0]}</p>
-                <p>Chance: {pet[1]}</p>
-                {pet[2] && <p>Tier: {pet[2]}</p>}
+            {Object.entries(configData.productIds).map(([key, value]) => (
+              <li key={key}>
+                {key}: {value}
               </li>
             ))}
           </ul>
-          {data.productIds && (
-            <div>
-              <h3>Product IDs:</h3>
-              <ul>
-                {Object.entries(data.productIds).map(([key, value]) => (
-                  <li key={key}>
-                    {key}: {value}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
         </div>
       )}
-    />
+    </div>
   );
 };
 

package/example-web/react2/src/components/EnchantsComponent.tsx

@@ -1,45 +1,54 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const EnchantsComponent: React.FC<{
-  configData?: CollectionConfigData<"Enchants">;
+  configData: CollectionConfigData<"Enchants">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Enchants">>
-      collectionName="Enchants"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Enchantment</h2>
-          {data.PageIcon && (
-            <ImageComponent src={data.PageIcon} alt="Page Icon" />
-          )}
-          <p>Base Tier: {data.BaseTier}</p>
-          <p>Max Tier: {data.MaxTier}</p>
-          <p>Max Page: {data.MaxPage}</p>
-          {data.DiminishPowerThreshold && (
-            <p>Diminish Power Threshold: {data.DiminishPowerThreshold}</p>
-          )}
-          {data.EmpoweredBoost && <p>Empowered Boost: {data.EmpoweredBoost}</p>}
-          {data.ProductId && <p>Product ID: {data.ProductId}</p>}
-          <h3>Tiers:</h3>
-          <ul>
-            {data.Tiers.map((tier, index) => (
-              <li key={index}>
-                <ImageComponent src={tier.Icon} alt={tier.DisplayName} />
-                <p>Display Name: {tier.DisplayName}</p>
-                <p>Description: {tier.Desc}</p>
-                <p>Power: {tier.Power}</p>
-                <p>Rarity: {tier.Rarity.DisplayName}</p>
-                <p>Rarity Number: {tier.Rarity.RarityNumber}</p>
-              </li>
-            ))}
-          </ul>
-        </div>
+    <div>
+      <h2>Enchantment</h2>
+      <p>Base Tier: {configData.BaseTier}</p>
+      <p>Max Tier: {configData.MaxTier}</p>
+      <p>Max Page: {configData.MaxPage}</p>
+      {configData.DiminishPowerThreshold && (
+        <p>Diminish Power Threshold: {configData.DiminishPowerThreshold}</p>
       )}
-    />
+      {configData.EmpoweredBoost && (
+        <p>Empowered Boost: {configData.EmpoweredBoost}</p>
+      )}
+      {configData.ProductId && <p>Product ID: {configData.ProductId}</p>}
+      <h3>Tiers:</h3>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: "1em" }}>
+        {configData.Tiers.map((tier, index) => (
+          <div
+            key={index}
+            style={{
+              border: "1px solid #ccc",
+              borderRadius: "8px",
+              padding: "1em",
+              width: "calc(33% - 1em)",
+              boxSizing: "border-box",
+            }}
+          >
+            <ImageComponent src={tier.Icon} alt={tier.DisplayName} />
+            <h4>{tier.DisplayName}</h4>
+            <p>
+              <strong>Description:</strong> {tier.Desc}
+            </p>
+            <p>
+              <strong>Power:</strong> {tier.Power}
+            </p>
+            <p>
+              <strong>Rarity:</strong> {tier.Rarity.DisplayName}
+            </p>
+            <p>
+              <strong>Rarity Number:</strong> {tier.Rarity.RarityNumber}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
   );
 };
 

package/example-web/react2/src/components/FishingRodsComponent.tsx

@@ -1,41 +1,34 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const FishingRodsComponent: React.FC<{
-  configData?: CollectionConfigData<"FishingRods">;
+  configData: CollectionConfigData<"FishingRods">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"FishingRods">>
-      collectionName="FishingRods"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>{data.DisplayName}</h2>
-          <ImageComponent src={data.Icon} alt={data.DisplayName} />
-          <p>Fishing Chance: {data.FishingChance}</p>
-          <p>Fishing Currency Multiplier: {data.FishingCurrencyMultiplier}</p>
-          <p>Minimum Fishing Time: {data.MinFishingTime} seconds</p>
-          <p>
-            Fishing Game Speed Multiplier: {data.FishingGameSpeedMultiplier}
-          </p>
-          <p>Bar Size: {data.BarSize}</p>
-          <p>Associated Item ID: {data.AssociatedItemID}</p>
-          {data.MerchantSalePrice && (
-            <p>Merchant Sale Price: {data.MerchantSalePrice}</p>
-          )}
-          <h3>Fishing Odds:</h3>
-          <ul>
-            {data.FishingOdds.map((odds, index) => (
-              <li key={index}>
-                {odds[0]}: {odds[1]}%
-              </li>
-            ))}
-          </ul>
-        </div>
+    <div>
+      <h2>{configData.DisplayName}</h2>
+      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
+      <p>Fishing Chance: {configData.FishingChance}</p>
+      <p>Fishing Currency Multiplier: {configData.FishingCurrencyMultiplier}</p>
+      <p>Minimum Fishing Time: {configData.MinFishingTime} seconds</p>
+      <p>
+        Fishing Game Speed Multiplier: {configData.FishingGameSpeedMultiplier}
+      </p>
+      <p>Bar Size: {configData.BarSize}</p>
+      <p>Associated Item ID: {configData.AssociatedItemID}</p>
+      {configData.MerchantSalePrice && (
+        <p>Merchant Sale Price: {configData.MerchantSalePrice}</p>
       )}
-    />
+      <h3>Fishing Odds:</h3>
+      <ul>
+        {configData.FishingOdds.map((odds, index) => (
+          <li key={index}>
+            {odds[0]}: {odds[1]}%
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 };
 

package/example-web/react2/src/components/Footer.tsx

@@ -1,12 +1,56 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { useOnlineStatus } from "../hooks/useOnlineStatus";
 
 const Footer: React.FC = () => {
+  const isOnline = useOnlineStatus();
+  const [lastUpdate, setLastUpdate] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const updateLastUpdate = () => {
+    setLastUpdate(new Date().toLocaleString());
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+      // Simulate a fetch call to update lastUpdate time
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      updateLastUpdate();
+      setLoading(false);
+    };
+
+    fetchData();
+
+    window.addEventListener("online", updateLastUpdate);
+    window.addEventListener("offline", updateLastUpdate);
+
+    return () => {
+      window.removeEventListener("online", updateLastUpdate);
+      window.removeEventListener("offline", updateLastUpdate);
+    };
+  }, []);
+
   return (
     <footer
-      style={{ textAlign: "center", padding: "1em", background: "#f8f9fa" }}
+      style={{
+        textAlign: "center",
+        padding: "1em",
+        background: "#f8f9fa",
+        borderTop: "1px solid #ccc",
+      }}
     >
-      <div>
-        <a href="https://badge.fury.io/js/ps99-api">
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          marginBottom: "1em",
+        }}
+      >
+        <a
+          href="https://badge.fury.io/js/ps99-api"
+          style={{ display: "flex", alignItems: "center" }}
+        >
           <img
             src="https://badge.fury.io/js/ps99-api.svg"
             alt="npm version"
@@ -14,25 +58,45 @@ const Footer: React.FC = () => {
           />
         </a>
         &nbsp;
-        <a href="https://github.com/joekiller/node-ps99-api">
+        <a
+          href="https://github.com/joekiller/node-ps99-api"
+          style={{ display: "flex", alignItems: "center" }}
+        >
           <img
             src="https://img.shields.io/badge/source-github-blue?logo=github"
             alt="GitHub source"
             height="18"
           />
         </a>
+        &nbsp;
+        <div style={{ display: "flex", alignItems: "center", height: "18px" }}>
+          {isOnline ? (
+            <span style={{ color: "green", lineHeight: "18px" }}>● Online</span>
+          ) : (
+            <span style={{ color: "red", lineHeight: "18px" }}>● Offline</span>
+          )}
+        </div>
+      </div>
+      <div style={{ marginBottom: "1em" }}>
+        {loading ? (
+          <span>♻️ Loading...</span>
+        ) : (
+          <span>Last update: {lastUpdate}</span>
+        )}
+      </div>
+      <div>
+        <p>
+          &copy; {new Date().getFullYear()} Joseph "
+          <a
+            href="https://joekiller.com"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            joekiller
+          </a>
+          " Lawson. All rights reserved.
+        </p>
       </div>
-      <p>
-        &copy; {new Date().getFullYear()} Joseph "
-        <a
-          href="https://joekiller.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          joekiller
-        </a>
-        " Lawson. All rights reserved.
-      </p>
     </footer>
   );
 };

package/example-web/react2/src/components/FruitsComponent.tsx

@@ -1,35 +1,28 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
 import ImageComponent from "./ImageComponent";
 
 const FruitsComponent: React.FC<{
-  configData?: CollectionConfigData<"Fruits">;
+  configData: CollectionConfigData<"Fruits">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Fruits">>
-      collectionName="Fruits"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>{data.DisplayName}</h2>
-          <ImageComponent src={data.Icon} alt={data.DisplayName} />
-          <p>Duration: {data.Duration} seconds</p>
-          <p>Rarity: {data.Rarity.DisplayName}</p>
-          <p>Rarity Number: {data.Rarity.RarityNumber}</p>
-          {data.Desc && <p>Description: {data.Desc}</p>}
-          {data.IgnoreFruitMachine && <p>Ignore Fruit Machine: Yes</p>}
-          <h3>Boosts:</h3>
-          <ul>
-            {data.Boost.map((boost, index) => (
-              <li key={index}>
-                {boost.Type}: {boost.Amount}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    />
+    <div>
+      <h2>{configData.DisplayName}</h2>
+      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
+      <p>Duration: {configData.Duration} seconds</p>
+      <p>Rarity: {configData.Rarity.DisplayName}</p>
+      <p>Rarity Number: {configData.Rarity.RarityNumber}</p>
+      {configData.Desc && <p>Description: {configData.Desc}</p>}
+      {configData.IgnoreFruitMachine && <p>Ignore Fruit Machine: Yes</p>}
+      <h3>Boosts:</h3>
+      <ul>
+        {configData.Boost.map((boost, index) => (
+          <li key={index}>
+            {boost.Type}: {boost.Amount}
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 };
 

package/example-web/react2/src/components/GenericFetchComponent.tsx

@@ -1,45 +1,55 @@
 import React, { useEffect, useState, ReactNode } from "react";
-import { useParams } from "react-router-dom";
 import { PetSimulator99API, ApiResponseBody, CollectionName } from "ps99-api";
 
 interface GenericFetchComponentProps<T> {
   collectionName: CollectionName;
+  configName: string;
   render: (data: T) => ReactNode;
-  configData?: T;
 }
 
 export const GenericFetchComponent = <T,>({
   collectionName,
+  configName,
   render,
-  configData,
 }: GenericFetchComponentProps<T>) => {
-  const { configName } = useParams<{ configName: string }>();
-  const [data, setData] = useState<T | null>(configData || null);
+  const [data, setData] = useState<T | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    if (configData) return;
+    let isMounted = true;
 
     const fetchData = async () => {
-      if (!configName) return;
-      const api = new PetSimulator99API();
-      const response: ApiResponseBody<any[]> =
-        await api.getCollection(collectionName);
-      if (response.status === "ok") {
-        const item = response.data.find(
-          (item) => item.configName === configName,
-        );
-        if (item) {
-          setData(item.configData);
-        } else {
-          setError("Configuration not found");
+      try {
+        const api = new PetSimulator99API();
+        const response: ApiResponseBody<any[]> =
+          await api.getCollection(collectionName);
+        if (isMounted) {
+          if (response.status === "ok") {
+            const item = response.data.find(
+              (item) => item.configName === configName,
+            );
+            if (item) {
+              setData(item.configData);
+            } else {
+              setError("Configuration not found");
+            }
+          } else {
+            setError(response.error.message);
+          }
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err.message);
         }
-      } else {
-        setError(response.error.message);
       }
     };
+
     fetchData();
-  }, [collectionName, configName, configData]);
+
+    return () => {
+      isMounted = false;
+    };
+  }, [collectionName, configName]);
 
   if (error) {
     return <div>Error: {error}</div>;